@ant-design/icons#BellOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#BellOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From shippo with MIT License | 6 votes |
|
My = () => {
const history = useNavigate()
return (
<Container direction="vertical">
<Header
style={{
height: '45px',
lineHeight: '45px',
backgroundColor: '#fff',
textAlign: 'center',
fontSize: '18px',
}}
>
我
</Header>
<WhiteSpace size={15} />
<Main>
<UserInfoCard />
<WhiteSpace size={15} />
<List>
<List.Item prefix={<BellOutlined />} onClick={() => {}}>
通知
</List.Item>
<List.Item prefix={<ProfileOutlined />} onClick={() => {}}>
我的作品
</List.Item>
<List.Item prefix={<SettingOutlined />} onClick={() => history('/setting')}>
设置
</List.Item>
</List>
</Main>
</Container>
)
}
Example #2
| Source File: NotificationsWidget.tsx From jitsu with MIT License | 6 votes |
|
NotificationsWidgetComponent: React.FC = () => {
const hasNotifications = inAppNotificationsStore.hasNotifications
const [showDrawer, setShowDrawer] = useState<boolean>(false)
const handleOpenDrawer = useCallback<(...args: any) => void>(() => setShowDrawer(true), [])
const handleCloseDrawer = useCallback<(...args: any) => void>(() => setShowDrawer(false), [])
return (
<>
<Button
type="text"
shape="circle"
icon={
<Badge dot={hasNotifications} className="text-lg">
<BellOutlined className={hasNotifications && styles.iconRed} />
</Badge>
}
onClick={handleOpenDrawer}
/>
<Drawer
visible={showDrawer}
closable={false}
className={styles.drawer}
onClose={handleCloseDrawer}
contentWrapperStyle={{ width: "80%", maxWidth: "300px" }}
bodyStyle={{ padding: 0 }}
>
<div className="h-full overflow-y-auto">
<div className="box-border px-4 py-2">
<Notifications handleCloseContainer={handleCloseDrawer} />
</div>
</div>
</Drawer>
</>
)
}
Example #3
| Source File: CourseAdminPanel.tsx From office-hours with GNU General Public License v3.0 | 5 votes |
|
export default function CourseAdminPanel({
defaultPage,
courseId,
}: CourseAdminPageProps): ReactElement {
const profile = useProfile();
const [currentSettings, setCurrentSettings] = useState(
defaultPage || CourseAdminOptions.CHECK_IN
);
const router = useRouter();
return (
<Row>
<Col span={4} style={{ textAlign: "center" }}>
<SettingsPanelAvatar avatarSize={20} />
<CenteredText>
Welcome back
<br />
{profile?.firstName} {profile?.lastName}
{!profile?.photoURL && (
<Tooltip
title={
"You should consider uploading a profile picture to make yourself more recognizable to students"
}
>
<span>
<QuestionCircleOutlined
style={{ marginLeft: "5px" }}
onClick={() => {
router.push(`/settings?cid=${courseId}`);
}}
/>
</span>
</Tooltip>
)}
</CenteredText>
<Menu
defaultSelectedKeys={[currentSettings]}
onClick={(e) => setCurrentSettings(e.key as CourseAdminOptions)}
style={{ background: "#f8f9fb", paddingTop: "20px" }}
>
<Menu.Item key={CourseAdminOptions.CHECK_IN} icon={<EditOutlined />}>
TA Check In/Out Times
</Menu.Item>
<Menu.Item key={CourseAdminOptions.OVERRIDES} icon={<BellOutlined />}>
Course Overrides
</Menu.Item>
</Menu>
</Col>
<VerticalDivider />
<Space direction="vertical" size={40} style={{ flexGrow: 1 }}>
<Col span={20}>
{currentSettings === CourseAdminOptions.CHECK_IN && (
<TACheckInCheckOutTimes courseId={courseId} />
)}
{currentSettings === CourseAdminOptions.OVERRIDES && (
<CourseOverrideSettings courseId={courseId} />
)}
</Col>
</Space>
</Row>
);
}
Example #4
| Source File: palette.tsx From jmix-frontend with Apache License 2.0 | 4 votes |
|
palette = () => (
<Palette>
<Category name="Text">
<Component name="Formatted Message">
<Variant>
<FormattedMessage />
</Variant>
</Component>
<Component name="Heading">
<Variant name="h1">
<Typography.Title></Typography.Title>
</Variant>
<Variant name="h2">
<Typography.Title level={2}></Typography.Title>
</Variant>
<Variant name="h3">
<Typography.Title level={3}></Typography.Title>
</Variant>
<Variant name="h4">
<Typography.Title level={4}></Typography.Title>
</Variant>
<Variant name="h5">
<Typography.Title level={5}></Typography.Title>
</Variant>
</Component>
<Component name="Text">
<Variant>
<Typography.Text></Typography.Text>
</Variant>
<Variant name="Secondary">
<Typography.Text type="secondary"></Typography.Text>
</Variant>
<Variant name="Success">
<Typography.Text type="success"></Typography.Text>
</Variant>
<Variant name="Warning">
<Typography.Text type="warning"></Typography.Text>
</Variant>
<Variant name="Danger">
<Typography.Text type="danger"></Typography.Text>
</Variant>
<Variant name="Disabled">
<Typography.Text disabled></Typography.Text>
</Variant>
</Component>
</Category>
<Category name="Layout">
<Component name="Divider">
<Variant>
<Divider />
</Variant>
</Component>
<Component name="Grid">
<Variant name="Simple Row">
<Row></Row>
</Variant>
<Variant name="Two columns">
<Row>
<Col span={12}></Col>
<Col span={12}></Col>
</Row>
</Variant>
<Variant name="Three columns">
<Row>
<Col span={8}></Col>
<Col span={8}></Col>
<Col span={8}></Col>
</Row>
</Variant>
</Component>
<Component name="Space">
<Variant>
<Space />
</Variant>
<Variant name="Small">
<Space size={"small"} />
</Variant>
<Variant name="Large">
<Space size={"large"} />
</Variant>
</Component>
</Category>
<Category name="Controls">
<Component name="Autocomplete">
<Variant>
<AutoComplete placeholder="input here" />
</Variant>
</Component>
<Component name="Button">
<Variant>
<Button></Button>
</Variant>
<Variant name="Primary">
<Button type="primary"></Button>
</Variant>
<Variant name="Link">
<Button type="link"></Button>
</Variant>
<Variant name="Dropdown">
<Dropdown
trigger={["click"]}
overlay={
<Menu>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
</Menu>
}
>
<Button></Button>
</Dropdown>
</Variant>
</Component>
<Component name="Checkbox">
<Variant>
<Checkbox />
</Variant>
</Component>
<Component name="Switch">
<Variant>
<Switch />
</Variant>
</Component>
<Component name="Radio Group">
<Variant>
<Radio.Group>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
</Variant>
<Variant name="Button">
<Radio.Group>
<Radio.Button value={1}>A</Radio.Button>
<Radio.Button value={2}>B</Radio.Button>
<Radio.Button value={3}>C</Radio.Button>
<Radio.Button value={4}>D</Radio.Button>
</Radio.Group>
</Variant>
</Component>
<Component name="DatePicker">
<Variant>
<DatePicker />
</Variant>
<Variant name="Range">
<DatePicker.RangePicker />
</Variant>
</Component>
<Component name="TimePicker">
<Variant>
<TimePicker />
</Variant>
<Variant name="Range">
<TimePicker.RangePicker />
</Variant>
</Component>
<Component name="Input">
<Variant>
<Input />
</Variant>
<Variant name="Number">
<InputNumber />
</Variant>
</Component>
<Component name="Select">
<Variant>
<Select defaultValue="1">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
<Variant name="Multiple">
<Select defaultValue={["1"]} mode="multiple" allowClear>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
</Component>
<Component name="Link">
<Variant>
<Typography.Link href="" target="_blank"></Typography.Link>
</Variant>
</Component>
<Component name="Slider">
<Variant>
<Slider defaultValue={30} />
</Variant>
<Variant name="Range">
<Slider range defaultValue={[20, 50]} />
</Variant>
</Component>
</Category>
<Category name="Data Display">
<Component name="Field">
<Variant>
<Field
entityName={ENTITY_NAME}
disabled={readOnlyMode}
propertyName=""
formItemProps={{
style: { marginBottom: "12px" }
}}
/>
</Variant>
</Component>
<Component name="Card">
<Variant>
<Card />
</Variant>
<Variant name="With Title">
<Card>
<Card title="Card title">
<p>Card content</p>
</Card>
</Card>
</Variant>
<Variant name="My custom card">
<Card>
<Card title="Card title">
<p>Card content</p>
<Avatar />
</Card>
</Card>
</Variant>
</Component>
<Component name="Tabs">
<Variant>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</Tabs.TabPane>
</Tabs>
</Variant>
<Variant name="Tab Pane">
<Tabs.TabPane></Tabs.TabPane>
</Variant>
</Component>
<Component name="Collapse">
<Variant>
<Collapse defaultActiveKey="1">
<Collapse.Panel
header="This is panel header 1"
key="1"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 2"
key="2"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 3"
key="3"
></Collapse.Panel>
</Collapse>
</Variant>
</Component>
<Component name="Image">
<Variant>
<Image width={200} src="" />
</Variant>
</Component>
<Component name="Avatar">
<Variant>
<Avatar icon={<UserOutlined />} />
</Variant>
<Variant name="Image">
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Variant>
</Component>
<Component name="Badge">
<Variant>
<Badge count={1}></Badge>
</Variant>
</Component>
<Component name="Statistic">
<Variant>
<Statistic title="Title" value={112893} />
</Variant>
</Component>
<Component name="Alert">
<Variant name="Success">
<Alert message="Text" type="success" />
</Variant>
<Variant name="Info">
<Alert message="Text" type="info" />
</Variant>
<Variant name="Warning">
<Alert message="Text" type="warning" />
</Variant>
<Variant name="Error">
<Alert message="Text" type="error" />
</Variant>
</Component>
<Component name="List">
<Variant>
<List
bordered
dataSource={[]}
renderItem={item => <List.Item></List.Item>}
/>
</Variant>
</Component>
</Category>
<Category name="Icons">
<Component name="Arrow">
<Variant name="Up">
<ArrowUpOutlined />
</Variant>
<Variant name="Down">
<ArrowDownOutlined />
</Variant>
<Variant name="Left">
<ArrowLeftOutlined />
</Variant>
<Variant name="Right">
<ArrowRightOutlined />
</Variant>
</Component>
<Component name="Question">
<Variant>
<QuestionOutlined />
</Variant>
<Variant name="Circle">
<QuestionCircleOutlined />
</Variant>
</Component>
<Component name="Plus">
<Variant>
<PlusOutlined />
</Variant>
<Variant name="Circle">
<PlusCircleOutlined />
</Variant>
</Component>
<Component name="Info">
<Variant>
<InfoOutlined />
</Variant>
<Variant name="Circle">
<InfoCircleOutlined />
</Variant>
</Component>
<Component name="Exclamation">
<Variant>
<ExclamationOutlined />
</Variant>
<Variant name="Circle">
<ExclamationCircleOutlined />
</Variant>
</Component>
<Component name="Close">
<Variant>
<CloseOutlined />
</Variant>
<Variant name="Circle">
<CloseCircleOutlined />
</Variant>
</Component>
<Component name="Check">
<Variant>
<CheckOutlined />
</Variant>
<Variant name="Circle">
<CheckCircleOutlined />
</Variant>
</Component>
<Component name="Edit">
<Variant>
<EditOutlined />
</Variant>
</Component>
<Component name="Copy">
<Variant>
<CopyOutlined />
</Variant>
</Component>
<Component name="Delete">
<Variant>
<DeleteOutlined />
</Variant>
</Component>
<Component name="Bars">
<Variant>
<BarsOutlined />
</Variant>
</Component>
<Component name="Bell">
<Variant>
<BellOutlined />
</Variant>
</Component>
<Component name="Clear">
<Variant>
<ClearOutlined />
</Variant>
</Component>
<Component name="Download">
<Variant>
<DownloadOutlined />
</Variant>
</Component>
<Component name="Upload">
<Variant>
<UploadOutlined />
</Variant>
</Component>
<Component name="Sync">
<Variant>
<SyncOutlined />
</Variant>
</Component>
<Component name="Save">
<Variant>
<SaveOutlined />
</Variant>
</Component>
<Component name="Search">
<Variant>
<SearchOutlined />
</Variant>
</Component>
<Component name="Settings">
<Variant>
<SettingOutlined />
</Variant>
</Component>
<Component name="Paperclip">
<Variant>
<PaperClipOutlined />
</Variant>
</Component>
<Component name="Phone">
<Variant>
<PhoneOutlined />
</Variant>
</Component>
<Component name="Mail">
<Variant>
<MailOutlined />
</Variant>
</Component>
<Component name="Home">
<Variant>
<HomeOutlined />
</Variant>
</Component>
<Component name="Contacts">
<Variant>
<ContactsOutlined />
</Variant>
</Component>
<Component name="User">
<Variant>
<UserOutlined />
</Variant>
<Variant name="Add">
<UserAddOutlined />
</Variant>
<Variant name="Remove">
<UserDeleteOutlined />
</Variant>
</Component>
<Component name="Team">
<Variant>
<TeamOutlined />
</Variant>
</Component>
</Category>
<Category name="Screens">
<Component name="ExampleCustomScreen">
<Variant>
<ExampleCustomScreen />
</Variant>
</Component>
<Component name="CustomEntityFilterTest">
<Variant>
<CustomEntityFilterTest />
</Variant>
</Component>
<Component name="CustomFormControls">
<Variant>
<CustomFormControls />
</Variant>
</Component>
<Component name="CustomDataDisplayComponents">
<Variant>
<CustomDataDisplayComponents />
</Variant>
</Component>
<Component name="CustomAppLayouts">
<Variant>
<CustomAppLayouts />
</Variant>
</Component>
<Component name="CustomControls">
<Variant>
<CustomControls />
</Variant>
</Component>
<Component name="ErrorBoundaryTests">
<Variant>
<ErrorBoundaryTests />
</Variant>
</Component>
<Component name="TestBlankScreen">
<Variant>
<TestBlankScreen />
</Variant>
</Component>
<Component name="CarEditor">
<Variant>
<CarEditor />
</Variant>
</Component>
<Component name="CarBrowserCards">
<Variant>
<CarBrowserCards />
</Variant>
</Component>
<Component name="CarBrowserList">
<Variant>
<CarBrowserList />
</Variant>
</Component>
<Component name="CarBrowserTable">
<Variant>
<CarBrowserTable />
</Variant>
</Component>
<Component name="CarCardsGrid">
<Variant>
<CarCardsGrid />
</Variant>
</Component>
<Component name="FavoriteCars">
<Variant>
<FavoriteCars />
</Variant>
</Component>
<Component name="CarCardsWithDetails">
<Variant>
<CarCardsWithDetails />
</Variant>
</Component>
<Component name="CarTableWithFilters">
<Variant>
<CarTableWithFilters />
</Variant>
</Component>
<Component name="CarMasterDetail">
<Variant>
<CarMasterDetail />
</Variant>
</Component>
<Component name="FormWizardCompositionO2O">
<Variant>
<FormWizardCompositionO2O />
</Variant>
</Component>
<Component name="FormWizardEditor">
<Variant>
<FormWizardEditor />
</Variant>
</Component>
<Component name="FormWizardBrowserTable">
<Variant>
<FormWizardBrowserTable />
</Variant>
</Component>
<Component name="CarMultiSelectionTable">
<Variant>
<CarMultiSelectionTable />
</Variant>
</Component>
<Component name="DatatypesTestEditor">
<Variant>
<DatatypesTestEditor />
</Variant>
</Component>
<Component name="DatatypesTestBrowserCards">
<Variant>
<DatatypesTestBrowserCards />
</Variant>
</Component>
<Component name="DatatypesTestBrowserList">
<Variant>
<DatatypesTestBrowserList />
</Variant>
</Component>
<Component name="DatatypesTestBrowserTable">
<Variant>
<DatatypesTestBrowserTable />
</Variant>
</Component>
<Component name="DatatypesTestCards">
<Variant>
<DatatypesTestCards />
</Variant>
</Component>
<Component name="AssociationO2OEditor">
<Variant>
<AssociationO2OEditor />
</Variant>
</Component>
<Component name="AssociationO2OBrowserTable">
<Variant>
<AssociationO2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationO2MEditor">
<Variant>
<AssociationO2MEditor />
</Variant>
</Component>
<Component name="AssociationO2MBrowserTable">
<Variant>
<AssociationO2MBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2OEditor">
<Variant>
<AssociationM2OEditor />
</Variant>
</Component>
<Component name="AssociationM2OBrowserTable">
<Variant>
<AssociationM2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2MEditor">
<Variant>
<AssociationM2MEditor />
</Variant>
</Component>
<Component name="AssociationM2MBrowserTable">
<Variant>
<AssociationM2MBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2OEditor">
<Variant>
<CompositionO2OEditor />
</Variant>
</Component>
<Component name="CompositionO2OBrowserTable">
<Variant>
<CompositionO2OBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2MEditor">
<Variant>
<CompositionO2MEditor />
</Variant>
</Component>
<Component name="CompositionO2MBrowserTable">
<Variant>
<CompositionO2MBrowserTable />
</Variant>
</Component>
<Component name="DeeplyNestedTestEntityEditor">
<Variant>
<DeeplyNestedTestEntityEditor />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityTable">
<Variant>
<DeeplyNestedO2MTestEntityTable />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityEditor">
<Variant>
<DeeplyNestedO2MTestEntityEditor />
</Variant>
</Component>
<Component name="IntIdEditor">
<Variant>
<IntIdEditor />
</Variant>
</Component>
<Component name="IntIdBrowserTable">
<Variant>
<IntIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdBrowserCards">
<Variant>
<IntIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdBrowserList">
<Variant>
<IntIdBrowserList />
</Variant>
</Component>
<Component name="IntIdentityIdCards">
<Variant>
<IntIdentityIdCards />
</Variant>
</Component>
<Component name="IntIdentityIdEditor">
<Variant>
<IntIdentityIdEditor />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserTable">
<Variant>
<IntIdentityIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserCards">
<Variant>
<IntIdentityIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserList">
<Variant>
<IntIdentityIdBrowserList />
</Variant>
</Component>
<Component name="StringIdCards">
<Variant>
<StringIdCards />
</Variant>
</Component>
<Component name="StringIdMgtCardsEdit">
<Variant>
<StringIdMgtCardsEdit />
</Variant>
</Component>
<Component name="StringIdBrowserCards">
<Variant>
<StringIdBrowserCards />
</Variant>
</Component>
<Component name="StringIdBrowserList">
<Variant>
<StringIdBrowserList />
</Variant>
</Component>
<Component name="StringIdBrowserTable">
<Variant>
<StringIdBrowserTable />
</Variant>
</Component>
<Component name="WeirdStringIdEditor">
<Variant>
<WeirdStringIdEditor />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserCards">
<Variant>
<WeirdStringIdBrowserCards />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserList">
<Variant>
<WeirdStringIdBrowserList />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserTable">
<Variant>
<WeirdStringIdBrowserTable />
</Variant>
</Component>
<Component name="BoringStringIdEditor">
<Variant>
<BoringStringIdEditor />
</Variant>
</Component>
<Component name="BoringStringIdBrowserTable">
<Variant>
<BoringStringIdBrowserTable />
</Variant>
</Component>
<Component name="TrickyIdEditor">
<Variant>
<TrickyIdEditor />
</Variant>
</Component>
<Component name="TrickyIdBrowserTable">
<Variant>
<TrickyIdBrowserTable />
</Variant>
</Component>
</Category>
</Palette>
)
Example #5
| Source File: palette.tsx From jmix-frontend with Apache License 2.0 | 4 votes |
|
palette = () =>
<Palette>
<Category name="Text">
<Component name="Formatted Message">
<Variant>
<FormattedMessage />
</Variant>
</Component>
<Component name="Heading">
<Variant name='h1'>
<Typography.Title></Typography.Title>
</Variant>
<Variant name='h2'>
<Typography.Title level = {2}></Typography.Title>
</Variant>
<Variant name='h3'>
<Typography.Title level = {3}></Typography.Title>
</Variant>
<Variant name='h4'>
<Typography.Title level = {4}></Typography.Title>
</Variant>
<Variant name='h5'>
<Typography.Title level = {5}></Typography.Title>
</Variant>
</Component>
<Component name='Text'>
<Variant>
<Typography.Text></Typography.Text>
</Variant>
<Variant name = 'Secondary'>
<Typography.Text type="secondary"></Typography.Text>
</Variant>
<Variant name = 'Success'>
<Typography.Text type="success"></Typography.Text>
</Variant>
<Variant name = 'Warning'>
<Typography.Text type="warning"></Typography.Text>
</Variant>
<Variant name = 'Danger'>
<Typography.Text type="danger"></Typography.Text>
</Variant>
<Variant name = 'Disabled'>
<Typography.Text disabled></Typography.Text>
</Variant>
</Component>
</Category>
<Category name="Layout">
<Component name="Divider">
<Variant>
<Divider />
</Variant>
</Component>
<Component name="Grid">
<Variant name="Simple Row">
<Row></Row>
</Variant>
<Variant name="Two columns">
<Row>
<Col span={12}></Col>
<Col span={12}></Col>
</Row>
</Variant>
<Variant name="Three columns">
<Row>
<Col span={8}></Col>
<Col span={8}></Col>
<Col span={8}></Col>
</Row>
</Variant>
</Component>
<Component name="Space">
<Variant>
<Space />
</Variant>
<Variant name="Small">
<Space size={"small"} />
</Variant>
<Variant name="Large">
<Space size={"large"} />
</Variant>
</Component>
</Category>
<Category name="Controls">
<Component name="Autocomplete">
<Variant>
<AutoComplete placeholder="input here" />
</Variant>
</Component>
<Component name="Button">
<Variant>
<Button></Button>
</Variant>
<Variant name="Primary">
<Button type="primary" ></Button>
</Variant>
<Variant name="Link">
<Button type="link" ></Button>
</Variant>
<Variant name="Dropdown">
<Dropdown
trigger={['click']}
overlay={<Menu>
<Menu.Item>
</Menu.Item>
<Menu.Item>
</Menu.Item>
<Menu.Item>
</Menu.Item>
</Menu>}
>
<Button></Button>
</Dropdown>
</Variant>
</Component>
<Component name="Checkbox">
<Variant>
<Checkbox />
</Variant>
</Component>
<Component name='Switch'>
<Variant>
<Switch />
</Variant>
</Component>
<Component name='Radio Group'>
<Variant>
<Radio.Group>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
</Variant>
<Variant name = 'Button'>
<Radio.Group>
<Radio.Button value={1}>A</Radio.Button>
<Radio.Button value={2}>B</Radio.Button>
<Radio.Button value={3}>C</Radio.Button>
<Radio.Button value={4}>D</Radio.Button>
</Radio.Group>
</Variant>
</Component>
<Component name="DatePicker">
<Variant>
<DatePicker />
</Variant>
<Variant name="Range">
<DatePicker.RangePicker />
</Variant>
</Component>
<Component name="TimePicker">
<Variant>
<TimePicker />
</Variant>
<Variant name="Range">
<TimePicker.RangePicker />
</Variant>
</Component>
<Component name="Input">
<Variant>
<Input />
</Variant>
<Variant name='Number'>
<InputNumber />
</Variant>
</Component>
<Component name='Select'>
<Variant>
<Select defaultValue="1">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
<Variant name='Multiple'>
<Select
defaultValue={["1"]}
mode="multiple"
allowClear
>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
</Component>
<Component name="Link">
<Variant>
<Typography.Link href="" target="_blank">
</Typography.Link>
</Variant>
</Component>
<Component name='Slider'>
<Variant>
<Slider defaultValue={30} />
</Variant>
<Variant name = 'Range'>
<Slider range defaultValue={[20, 50]}/>
</Variant>
</Component>
</Category>
<Category name="Data Display">
<Component name="Field">
<Variant>
<Field
entityName={ENTITY_NAME}
disabled={readOnlyMode}
propertyName=''
formItemProps={{
style: { marginBottom: "12px" }
}}
/>
</Variant>
</Component>
<Component name="Card">
<Variant>
<Card />
</Variant>
<Variant name="With Title">
<Card>
<Card title="Card title">
<p>Card content</p>
</Card>
</Card>
</Variant>
<Variant name="My custom card">
<Card>
<Card title="Card title">
<p>Card content</p>
<Avatar />
</Card>
</Card>
</Variant>
</Component>
<Component name="Tabs">
<Variant>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</Tabs.TabPane>
</Tabs>
</Variant>
<Variant name = "Tab Pane">
<Tabs.TabPane>
</Tabs.TabPane>
</Variant>
</Component>
<Component name="Collapse">
<Variant>
<Collapse defaultActiveKey='1'>
<Collapse.Panel header="This is panel header 1" key="1">
</Collapse.Panel>
<Collapse.Panel header="This is panel header 2" key="2">
</Collapse.Panel>
<Collapse.Panel header="This is panel header 3" key="3">
</Collapse.Panel>
</Collapse>
</Variant>
</Component>
<Component name="Image">
<Variant>
<Image
width={200}
src=""
/>
</Variant>
</Component>
<Component name="Avatar">
<Variant>
<Avatar icon={<UserOutlined />} />
</Variant>
<Variant name="Image">
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Variant>
</Component>
<Component name="Badge">
<Variant>
<Badge count={1}>
</Badge>
</Variant>
</Component>
<Component name="Statistic">
<Variant>
<Statistic title="Title" value={112893} />
</Variant>
</Component>
<Component name="Alert">
<Variant name="Success">
<Alert message="Text" type="success" />
</Variant>
<Variant name="Info">
<Alert message="Text" type="info" />
</Variant>
<Variant name="Warning">
<Alert message="Text" type="warning" />
</Variant>
<Variant name="Error">
<Alert message="Text" type="error" />
</Variant>
</Component>
<Component name='List'>
<Variant>
<List
bordered
dataSource={[]}
renderItem={item => (
<List.Item>
</List.Item>
)}
/>
</Variant>
</Component>
</Category>
<Category name="Icons">
<Component name="Arrow">
<Variant name = 'Up'>
<ArrowUpOutlined />
</Variant>
<Variant name = 'Down'>
<ArrowDownOutlined />
</Variant>
<Variant name = 'Left'>
<ArrowLeftOutlined />
</Variant>
<Variant name = 'Right'>
<ArrowRightOutlined />
</Variant>
</Component>
<Component name = 'Question'>
<Variant>
<QuestionOutlined />
</Variant>
<Variant name = 'Circle'>
<QuestionCircleOutlined />
</Variant>
</Component>
<Component name = 'Plus'>
<Variant>
<PlusOutlined />
</Variant>
<Variant name = 'Circle'>
<PlusCircleOutlined />
</Variant>
</Component>
<Component name = 'Info'>
<Variant>
<InfoOutlined />
</Variant>
<Variant name = 'Circle'>
<InfoCircleOutlined />
</Variant>
</Component>
<Component name = 'Exclamation'>
<Variant>
<ExclamationOutlined />
</Variant>
<Variant name = 'Circle'>
<ExclamationCircleOutlined />
</Variant>
</Component>
<Component name = 'Close'>
<Variant>
<CloseOutlined />
</Variant>
<Variant name = 'Circle'>
<CloseCircleOutlined />
</Variant>
</Component>
<Component name = 'Check'>
<Variant>
<CheckOutlined />
</Variant>
<Variant name = 'Circle'>
<CheckCircleOutlined />
</Variant>
</Component>
<Component name = 'Edit'>
<Variant>
<EditOutlined />
</Variant>
</Component>
<Component name = 'Copy'>
<Variant>
<CopyOutlined />
</Variant>
</Component>
<Component name = 'Delete'>
<Variant>
<DeleteOutlined />
</Variant>
</Component>
<Component name = 'Bars'>
<Variant>
<BarsOutlined />
</Variant>
</Component>
<Component name = 'Bell'>
<Variant>
<BellOutlined />
</Variant>
</Component>
<Component name = 'Clear'>
<Variant>
<ClearOutlined />
</Variant>
</Component>
<Component name = 'Download'>
<Variant>
<DownloadOutlined />
</Variant>
</Component>
<Component name = 'Upload'>
<Variant>
<UploadOutlined />
</Variant>
</Component>
<Component name = 'Sync'>
<Variant>
<SyncOutlined />
</Variant>
</Component>
<Component name = 'Save'>
<Variant>
<SaveOutlined />
</Variant>
</Component>
<Component name = 'Search'>
<Variant>
<SearchOutlined />
</Variant>
</Component>
<Component name = 'Settings'>
<Variant>
<SettingOutlined />
</Variant>
</Component>
<Component name = 'Paperclip'>
<Variant>
<PaperClipOutlined />
</Variant>
</Component>
<Component name = 'Phone'>
<Variant>
<PhoneOutlined />
</Variant>
</Component>
<Component name = 'Mail'>
<Variant>
<MailOutlined />
</Variant>
</Component>
<Component name = 'Home'>
<Variant>
<HomeOutlined />
</Variant>
</Component>
<Component name = 'Contacts'>
<Variant>
<ContactsOutlined />
</Variant>
</Component>
<Component name = 'User'>
<Variant>
<UserOutlined />
</Variant>
<Variant name = 'Add'>
<UserAddOutlined />
</Variant>
<Variant name = 'Remove'>
<UserDeleteOutlined />
</Variant>
</Component>
<Component name = 'Team'>
<Variant>
<TeamOutlined />
</Variant>
</Component>
</Category>
</Palette>
Example #6
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #7
| Source File: index.tsx From ant-design-pro-V4 with MIT License | 4 votes |
|
NoticeIcon: React.FC<NoticeIconProps> & {
Tab: typeof NoticeList;
} = (props) => {
const getNotificationBox = (): React.ReactNode => {
const {
children,
loading,
onClear,
onTabChange,
onItemClick,
onViewMore,
clearText,
viewMoreText,
} = props;
if (!children) {
return null;
}
const panes: React.ReactNode[] = [];
React.Children.forEach(children, (child: React.ReactElement<NoticeIconTabProps>): void => {
if (!child) {
return;
}
const { list, title, count, tabKey, showClear, showViewMore } = child.props;
const len = list && list.length ? list.length : 0;
const msgCount = count || count === 0 ? count : len;
const tabTitle: string = msgCount > 0 ? `${title} (${msgCount})` : title;
panes.push(
<TabPane tab={tabTitle} key={tabKey}>
<NoticeList
{...child.props}
clearText={clearText}
viewMoreText={viewMoreText}
data={list}
onClear={(): void => {
onClear?.(title, tabKey);
}}
onClick={(item): void => {
onItemClick?.(item, child.props);
}}
onViewMore={(event): void => {
onViewMore?.(child.props, event);
}}
showClear={showClear}
showViewMore={showViewMore}
title={title}
/>
</TabPane>,
);
});
return (
<Spin spinning={loading} delay={300}>
<Tabs className={styles.tabs} onChange={onTabChange}>
{panes}
</Tabs>
</Spin>
);
};
const { className, count, bell } = props;
const [visible, setVisible] = useMergedState<boolean>(false, {
value: props.popupVisible,
onChange: props.onPopupVisibleChange,
});
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = getNotificationBox();
const NoticeBellIcon = bell || <BellOutlined className={styles.icon} />;
const trigger = (
<span className={classNames(noticeButtonClass, { opened: visible })}>
<Badge count={count} style={{ boxShadow: 'none' }} className={styles.badge}>
{NoticeBellIcon}
</Badge>
</span>
);
if (!notificationBox) {
return trigger;
}
return (
<HeaderDropdown
placement="bottomRight"
overlay={notificationBox}
overlayClassName={styles.popover}
trigger={['click']}
visible={visible}
onVisibleChange={setVisible}
>
{trigger}
</HeaderDropdown>
);
}
Example #8
| Source File: index.tsx From ui-visualization with MIT License | 4 votes |
|
NoticeIcon: React.FC<NoticeIconProps> & {
Tab: typeof NoticeList;
} = (props) => {
const getNotificationBox = (): React.ReactNode => {
const {
children,
loading,
onClear,
onTabChange,
onItemClick,
onViewMore,
clearText,
viewMoreText,
} = props;
if (!children) {
return null;
}
const panes: React.ReactNode[] = [];
React.Children.forEach(children, (child: React.ReactElement<NoticeIconTabProps>): void => {
if (!child) {
return;
}
const { list, title, count, tabKey, showClear, showViewMore } = child.props;
const len = list && list.length ? list.length : 0;
const msgCount = count || count === 0 ? count : len;
const tabTitle: string = msgCount > 0 ? `${title} (${msgCount})` : title;
panes.push(
<TabPane tab={tabTitle} key={tabKey}>
<NoticeList
clearText={clearText}
viewMoreText={viewMoreText}
data={list}
onClear={(): void => onClear && onClear(title, tabKey)}
onClick={(item): void => onItemClick && onItemClick(item, child.props)}
onViewMore={(event): void => onViewMore && onViewMore(child.props, event)}
showClear={showClear}
showViewMore={showViewMore}
title={title}
{...child.props}
/>
</TabPane>,
);
});
return (
<Spin spinning={loading} delay={300}>
<Tabs className={styles.tabs} onChange={onTabChange}>
{panes}
</Tabs>
</Spin>
);
};
const { className, count, bell } = props;
const [visible, setVisible] = useMergeValue<boolean>(false, {
value: props.popupVisible,
onChange: props.onPopupVisibleChange,
});
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = getNotificationBox();
const NoticeBellIcon = bell || <BellOutlined className={styles.icon} />;
const trigger = (
<span className={classNames(noticeButtonClass, { opened: visible })}>
<Badge count={count} style={{ boxShadow: 'none' }} className={styles.badge}>
{NoticeBellIcon}
</Badge>
</span>
);
if (!notificationBox) {
return trigger;
}
return (
<HeaderDropdown
placement="bottomRight"
overlay={notificationBox}
overlayClassName={styles.popover}
trigger={['click']}
visible={visible}
onVisibleChange={setVisible}
>
{trigger}
</HeaderDropdown>
);
}
Example #9
| Source File: index.tsx From foodie with MIT License | 4 votes |
|
Notification: React.FC<IProps> = ({ isAuth }) => {
const id = useSelector((state: IRootReducer) => state.auth.id);
const [isNotificationOpen, setNotificationOpen] = useState(false);
const [isLoading, setLoading] = useState(false);
const [hasReadAll, setHasReadAll] = useState(false);
const [unreadCount, setUnreadCount] = useState(0);
const [offset, setOffset] = useState(0);
const [error, setError] = useState<IError | null>(null);
const [notifications, setNotifications] = useState<any>({
items: [],
count: 0
});
const isNotificationOpenRef = useRef(isNotificationOpen);
useEffect(() => {
isNotificationOpenRef.current = isNotificationOpen;
}, [isNotificationOpen]);
useEffect(() => {
socket.on('newNotification', ({ notification, count }: { notification: INotification, count: number }) => {
console.log('STATE: ', notifications);
setUnreadCount(unreadCount + 1);
setNotifications((prev: any) => ({ ...prev, items: [notification, ...prev.items] }));
console.log(notification);
});
document.addEventListener('click', handleClickOutside);
if (isAuth) {
getUnreadNotifications()
.then(({ count }) => {
setUnreadCount(count);
});
}
return () => {
socket.emit('userDisconnect', id);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleClickOutside = (e: Event) => {
const toggle = (e.target as HTMLElement).closest('.notification-toggle');
const wrapper = (e.target as HTMLElement).closest('.notification-wrapper');
if (!toggle && isNotificationOpenRef.current && !wrapper) {
setNotificationOpen(false);
}
}
const fetchNotifications = async () => {
try {
setLoading(true);
setError(null);
const notifs = await getNotifications({ offset });
setNotifications({
items: [...notifications.items, ...notifs.notifications],
count: notifs.count,
unreadCount: notifs.unreadCount
});
setOffset(offset + 1);
setLoading(false);
} catch (e) {
setLoading(false);
setError(e);
console.log(e);
}
};
const toggleNotification = () => {
setUnreadCount(0);
setNotificationOpen(!isNotificationOpen);
// Since setting state is asynchronous, we should flip the value of isNotificationOpen
if (!isNotificationOpen && notifications.items.length === 0) {
fetchNotifications();
}
}
const handleReadNotification = async (id: string) => {
try {
const { state } = await readNotification(id);
const updatedNotifs = notifications.items.map((notif: INotification) => {
if (notif.id === id) {
return {
...notif,
unread: state
}
}
return notif;
});
setNotifications({ ...notifications, items: updatedNotifs });
} catch (e) {
console.log(e);
}
};
const handleMarkAllUnread = async () => {
if (notifications.items.length === 0 || hasReadAll) return;
try {
const { state } = await markAllAsUnreadNotifications();
const updatedNotifs = notifications.items.map((notif: INotification) => {
return {
...notif,
unread: state
}
});
setHasReadAll(true);
setNotifications({ ...notifications, items: updatedNotifs });
} catch (e) {
console.log(e);
}
}
const infiniteRef = useInfiniteScroll({
loading: isLoading,
hasNextPage: !error && notifications.items.length >= 10,
onLoadMore: fetchNotifications,
scrollContainer: 'parent',
});
return (
<div className="relative">
<div onClick={toggleNotification}>
<Badge count={unreadCount}>
<BellOutlined className="notification-toggle text-xl focus:outline-none dark:text-white" />
</Badge>
</div>
{isNotificationOpen && (
<div className="notification-wrapper border border-transparent dark:border-gray-800 fixed top-14 pb-14 laptop:pb-0 laptop:top-10 right-0 h-screen laptop:h-auto w-full laptop:w-30rem bg-white dark:bg-indigo-1000 shadow-lg rounded-md laptop:absolute"
>
{/* ----- HEADER ----- */}
<div className="py-2 px-4 border-b-gray-200 flex justify-between items-center bg-indigo-700 laptop:rounded-t-md">
<h6 className="text-white">Notifications</h6>
<span
className="text-sm p-2 text-white opacity-80 rounded-md hover:bg-indigo-500"
onClick={handleMarkAllUnread}
>
Mark all as read
</span>
</div>
{/* ---- LOADER --- */}
{(isLoading && !error && notifications.items.length === 0) && (
<div className="flex items-center justify-center py-8">
<Loader />
</div>
)}
{/* --- ERROR MESSAGE --- */}
{(notifications.items.length === 0 && error) && (
<div className="flex justify-center py-6">
<p className="text-gray-400 italic">
{error.status_code === 404
? 'You don\'t notification.'
: (error?.error?.message || 'Something went wrong :(')
}
</p>
</div>
)}
{/* --- NOTIF LIST ---- */}
{(notifications.items.length !== 0) && (
<div>
<NotificationList
notifications={notifications.items}
readNotification={handleReadNotification}
toggleNotification={setNotificationOpen}
infiniteScrollRef={infiniteRef}
/>
{(notifications.items.length !== 0 && !error && isLoading) && (
<div className="flex justify-center py-2">
<Loader />
</div>
)}
</div>
)}
</div>
)}
</div>
);
}
Example #10
| Source File: Triggers.tsx From leek with Apache License 2.0 | 4 votes |
|
Triggers = (props) => {
const [form] = Form.useForm();
const service = new ApplicationService();
const { updateApplication } = useApplication();
const [createTriggerModalVisible, setCreateTriggerModalVisible] =
useState<boolean>(false);
const [editTriggerModalVisible, setEditTriggerModalVisible] =
useState<boolean>(false);
const [patternType, setPatternType] = useState<string>("all");
const [loading, setLoading] = useState<boolean>(false);
const [triggerId, setTriggerId] = useState();
useEffect(() => {}, []);
function doAddTrigger(trigger) {
delete trigger.patterns;
setLoading(true);
service
.addFanoutTrigger(props.selectedApp.app_name, trigger)
.then(handleAPIResponse)
.then((application: any) => {
updateApplication(application);
props.setSelectedApp(application);
reset();
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function doEditTrigger(trigger) {
delete trigger.patterns;
setLoading(true);
service
.editFanoutTrigger(props.selectedApp.app_name, triggerId, trigger)
.then(handleAPIResponse)
.then((application: any) => {
updateApplication(application);
props.setSelectedApp(application);
reset();
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function doDeleteTrigger(trigger_id) {
setLoading(true);
service
.deleteFanoutTrigger(props.selectedApp.app_name, trigger_id)
.then(handleAPIResponse)
.then((application: any) => {
updateApplication(application);
props.setSelectedApp(application);
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function handleEditTrigger(trigger_id, selected) {
setTriggerId(trigger_id);
if (selected.include && selected.include.length)
selected.patterns = "include";
else if (selected.exclude && selected.exclude.length)
selected.patterns = "exclude";
else selected.patterns = "all";
setPatternType(selected.patterns);
form.setFieldsValue(selected);
setEditTriggerModalVisible(true);
}
function reset() {
setCreateTriggerModalVisible(false);
setEditTriggerModalVisible(false);
setTriggerId(undefined);
form.resetFields();
}
const formItems = (
<>
<FormItem name="type">
<Select>
<Option value="slack">
<SlackOutlined />
Slack
</Option>
</Select>
</FormItem>
<FormItem
name="slack_wh_url"
rules={[
{ required: true, message: "Please input slack webhook url!" },
{
type: "url",
message: "This field must be a valid url.",
},
]}
>
<Input
prefix={<DeploymentUnitOutlined style={{ fontSize: 13 }} />}
placeholder="Webhook URL"
/>
</FormItem>
<FormItem name="states">
<Select
mode="multiple"
tagRender={TaskStateClosable}
style={{ width: "100%" }}
placeholder="States"
options={statesOptions}
/>
</FormItem>
<FormItem name="envs">
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Environments"
/>
</FormItem>
<Divider />
<FormItem name="runtime_upper_bound">
<InputNumber
style={{ width: "100%" }}
min={0}
max={1000}
step={0.00001}
placeholder="Runtime upper bound (Only succeeded Tasks)"
/>
</FormItem>
<FormItem name="patterns" valuePropName="value">
<Radio.Group
buttonStyle="solid"
onChange={(e) => setPatternType(e.target.value)}
>
<Radio.Button value="all">All tasks</Radio.Button>
<Radio.Button value="exclude">Exclude</Radio.Button>
<Radio.Button value="include">Include</Radio.Button>
</Radio.Group>
</FormItem>
{"include" === patternType && (
<FormItem name="include">
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Tasks names list or patterns to include"
/>
</FormItem>
)}
{"exclude" === patternType && (
<FormItem name="exclude">
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Tasks names list or patterns to exclude"
/>
</FormItem>
)}
<FormItem name="enabled" valuePropName="checked">
<Switch
checkedChildren="Enabled"
unCheckedChildren="Disabled"
defaultChecked
size="small"
/>
</FormItem>
</>
);
return (
<Row style={{ width: "100%", marginBottom: "16px" }}>
{/*Create Trigger*/}
<Modal
title={
<Space>
<BellOutlined />
Create Trigger
</Space>
}
visible={createTriggerModalVisible}
onCancel={reset}
footer={[
<Button key="cancel" size="small" onClick={reset}>
Cancel
</Button>,
<Button
form="createTrigger"
key="submit"
htmlType="submit"
size="small"
type="primary"
loading={loading}
>
Create
</Button>,
]}
>
<Form
onFinish={doAddTrigger}
form={form}
id="createTrigger"
initialValues={{ type: "slack", patterns: "all", enabled: false }}
>
{formItems}
</Form>
</Modal>
{/*Edit Trigger*/}
<Modal
title={() => (
<>
<BellOutlined /> `Edit Trigger ${triggerId}`
</>
)}
visible={editTriggerModalVisible}
onCancel={reset}
footer={[
<Button key="cancel" size="small" onClick={reset}>
Cancel
</Button>,
<Button
form="editTrigger"
key="submit"
htmlType="submit"
size="small"
type="primary"
loading={loading}
>
Update
</Button>,
]}
>
<Form onFinish={doEditTrigger} form={form} id="editTrigger">
{formItems}
</Form>
</Modal>
<Card
size="small"
style={{ width: "100%" }}
bodyStyle={{ paddingBottom: 0, paddingRight: 0, paddingLeft: 0 }}
title={
<Row justify="space-between">
<Col>
<Space>
<BellOutlined />
<Text strong>Fanout Triggers</Text>
</Space>
</Col>
<Col>
<Button
onClick={() => setCreateTriggerModalVisible(true)}
size="small"
type="primary"
ghost
icon={<AppstoreAddOutlined />}
/>
</Col>
</Row>
}
>
<Table
dataSource={props.selectedApp.fo_triggers}
columns={TriggerDataColumns({
handleEditTrigger: handleEditTrigger,
handleDeleteTrigger: doDeleteTrigger,
triggersModifying: loading,
})}
showHeader={false}
pagination={false}
size="small"
rowKey="id"
style={{ width: "100%" }}
scroll={{ x: "100%" }}
locale={{
emptyText: (
<div style={{ textAlign: "center" }}>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
<span>
No <a href="#API">triggers</a> found
</span>
}
/>
</div>
),
}}
expandable={{
expandedRowRender: (record) => (
<>
<Row justify="space-between">
<Col span={12}>
<List.Item.Meta
style={{ marginBottom: 16 }}
title={"Webhook URL"}
description={<Tag>{record.slack_wh_url}</Tag>}
/>
</Col>
<Col span={12}>
{record.exclude && record.exclude.length > 0 && (
<List.Item.Meta
style={{ marginBottom: 16 }}
title={"Exclusions"}
description={record.exclude.map((exclusion, key) => (
<Tag key={key}>{exclusion}</Tag>
))}
/>
)}
{record.include && record.include.length > 0 && (
<List.Item.Meta
title={"Inclusions"}
description={record.include.map((inclusion, key) => (
<Tag key={key}>{inclusion}</Tag>
))}
/>
)}
</Col>
</Row>
</>
),
rowExpandable: (record) => true,
}}
/>
</Card>
</Row>
);
}
Example #11
| Source File: SettingsPage.tsx From office-hours with GNU General Public License v3.0 | 4 votes |
|
export default function SettingsPage({
defaultPage,
}: SettingsPageProps): ReactElement {
const {
data: profile,
error,
mutate,
} = useSWR(`api/v1/profile`, async () => API.profile.index());
const router = useRouter();
const { cid } = router.query;
const role = useRoleInCourse(Number(cid));
const isTAOrProfessor = role === Role.TA || role === Role.PROFESSOR;
const [currentSettings, setCurrentSettings] = useState(
defaultPage || SettingsOptions.PROFILE
);
const [uploading, setUploading] = useState(false);
const isMobile = useIsMobile();
const windowWidth = useWindowWidth();
const [avatarSize, setAvatarSize] = useState(windowWidth / 2);
useEffect(() => {
const widthDivider = isMobile ? 6 : 10;
setAvatarSize(windowWidth / widthDivider);
});
const beforeUpload = (file) => {
const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgOrPng) {
message.error("You can only upload JPGs or PNGs!");
}
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isLt1M) {
message.error("Image must smaller than 1MB!");
}
return isJpgOrPng && isLt1M;
};
if (error) {
message.error(error);
}
const AvatarSettings = () => (
<Col>
{avatarSize ? (
<Row
style={{
marginTop: avatarSize / 6,
justifyContent: `${isMobile ? "left" : "center"}`,
}}
>
{uploading ? (
<Skeleton.Avatar
active={true}
size={avatarSize}
shape="circle"
style={{
marginTop: avatarSize / 6,
marginBottom: avatarSize / 12,
marginLeft: avatarSize / 6,
marginRight: avatarSize / 6,
}}
/>
) : (
<SettingsPanelAvatar avatarSize={avatarSize} />
)}
<Col>
{profile && (
<h2>
{profile.firstName} {profile.lastName}
</h2>
)}
<Upload
action={"/api/v1/profile/upload_picture"}
beforeUpload={beforeUpload}
showUploadList={false}
onChange={(info) => {
setUploading(info.file.status === "uploading");
mutate();
}}
>
<ProfilePicButton icon={<UploadOutlined />}>
Edit photo
</ProfilePicButton>
</Upload>
{profile?.photoURL && (
<ProfilePicButton
icon={<DeleteOutlined />}
style={{ marginTop: "10px" }}
onClick={async () => {
try {
await API.profile.deleteProfilePicture();
message.success(
"You've successfully deleted your profile picture"
);
mutate();
} catch (e) {
message.error(
"There was an error with deleting your profile picture, please contact the Khoury Office Hours team for assistance"
);
throw e;
}
}}
>
Delete my Profile Picture
</ProfilePicButton>
)}
</Col>
</Row>
) : null}
</Col>
);
const SettingsMenu = () => (
<>
{isMobile ? (
<Collapse accordion style={{ marginTop: "10px" }}>
<Panel header="Personal Information" key="profile">
<ProfileSettings />
</Panel>
{isTAOrProfessor && (
<Panel header="Teams Settings" key="teams_settings">
<TeamsSettings />
</Panel>
)}
<Panel header="Notifications" key="notifications">
<NotificationsSettings />
</Panel>
<Panel header="Course Preferences" key="preferences">
<CoursePreferenceSettings />
</Panel>
</Collapse>
) : (
<Menu
style={{ background: "none", marginTop: "10px" }}
defaultSelectedKeys={[currentSettings]}
onClick={(e) => setCurrentSettings(e.key as SettingsOptions)}
>
<Menu.Item key={SettingsOptions.PROFILE} icon={<UserOutlined />}>
Personal Information
</Menu.Item>
{isTAOrProfessor && (
<Menu.Item
key={SettingsOptions.TEAMS_SETTINGS}
icon={<WindowsOutlined />}
>
Teams Settings
</Menu.Item>
)}
<Menu.Item
key={SettingsOptions.NOTIFICATIONS}
icon={<BellOutlined />}
>
Notifications
</Menu.Item>
<Menu.Item key={SettingsOptions.PREFERENCES} icon={<BookOutlined />}>
Course Preferences
</Menu.Item>
</Menu>
)}
</>
);
const DesktopSettingsSubpage = () => (
<Col>
{currentSettings === SettingsOptions.PROFILE && <ProfileSettings />}
{currentSettings === SettingsOptions.NOTIFICATIONS && (
<NotificationsSettings />
)}
{currentSettings === SettingsOptions.TEAMS_SETTINGS && <TeamsSettings />}
{currentSettings === SettingsOptions.PREFERENCES && (
<CoursePreferenceSettings />
)}
</Col>
);
return (
<div>
{isMobile ? (
<Col>
<AvatarSettings />
<SettingsMenu />
</Col>
) : (
<Row>
<Col span={5} style={{ textAlign: "center" }}>
<AvatarSettings />
<SettingsMenu />
</Col>
<VerticalDivider />
<Space direction="vertical" size={40} style={{ flexGrow: 1 }}>
<DesktopSettingsSubpage />
</Space>
</Row>
)}
</div>
);
}
Example #12
| Source File: NoticeIcon.tsx From ant-design-pro-V5-multitab with MIT License | 4 votes |
|
NoticeIcon: React.FC<NoticeIconProps> & {
Tab: typeof NoticeList;
} = (props) => {
const getNotificationBox = (): React.ReactNode => {
const {
children,
loading,
onClear,
onTabChange,
onItemClick,
onViewMore,
clearText,
viewMoreText,
} = props;
if (!children) {
return null;
}
const panes: React.ReactNode[] = [];
React.Children.forEach(children, (child: React.ReactElement<NoticeIconTabProps>): void => {
if (!child) {
return;
}
const { list, title, count, tabKey, showClear, showViewMore } = child.props;
const len = list && list.length ? list.length : 0;
const msgCount = count || count === 0 ? count : len;
const tabTitle: string = msgCount > 0 ? `${title} (${msgCount})` : title;
panes.push(
<TabPane tab={tabTitle} key={tabKey}>
<NoticeList
clearText={clearText}
viewMoreText={viewMoreText}
list={list}
tabKey={tabKey}
onClear={(): void => onClear && onClear(title, tabKey)}
onClick={(item): void => onItemClick && onItemClick(item, child.props)}
onViewMore={(event): void => onViewMore && onViewMore(child.props, event)}
showClear={showClear}
showViewMore={showViewMore}
title={title}
/>
</TabPane>,
);
});
return (
<>
<Spin spinning={loading} delay={300}>
<Tabs className={styles.tabs} onChange={onTabChange}>
{panes}
</Tabs>
</Spin>
</>
);
};
const { className, count, bell } = props;
const [visible, setVisible] = useMergeValue<boolean>(false, {
value: props.popupVisible,
onChange: props.onPopupVisibleChange,
});
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = getNotificationBox();
const NoticeBellIcon = bell || <BellOutlined className={styles.icon} />;
const trigger = (
<span className={classNames(noticeButtonClass, { opened: visible })}>
<Badge count={count} style={{ boxShadow: 'none' }} className={styles.badge}>
{NoticeBellIcon}
</Badge>
</span>
);
if (!notificationBox) {
return trigger;
}
return (
<HeaderDropdown
placement="bottomRight"
overlay={notificationBox}
overlayClassName={styles.popover}
trigger={['click']}
visible={visible}
onVisibleChange={setVisible}
>
{trigger}
</HeaderDropdown>
);
}
Example #13
| Source File: NoticeIcon.tsx From anew-server with MIT License | 4 votes |
|
NoticeIcon: React.FC<NoticeIconProps> & {
Tab: typeof NoticeList;
} = (props) => {
const getNotificationBox = (): React.ReactNode => {
const {
children,
loading,
onClear,
onTabChange,
onItemClick,
onViewMore,
clearText,
viewMoreText,
} = props;
if (!children) {
return null;
}
const panes: React.ReactNode[] = [];
React.Children.forEach(children, (child: React.ReactElement<NoticeIconTabProps>): void => {
if (!child) {
return;
}
const { list, title, count, tabKey, showClear, showViewMore } = child.props;
const len = list && list.length ? list.length : 0;
const msgCount = count || count === 0 ? count : len;
const tabTitle: string = msgCount > 0 ? `${title} (${msgCount})` : title;
panes.push(
<TabPane tab={tabTitle} key={tabKey}>
<NoticeList
clearText={clearText}
viewMoreText={viewMoreText}
list={list}
tabKey={tabKey}
onClear={(): void => onClear && onClear(title, tabKey)}
onClick={(item): void => onItemClick && onItemClick(item, child.props)}
onViewMore={(event): void => onViewMore && onViewMore(child.props, event)}
showClear={showClear}
showViewMore={showViewMore}
title={title}
/>
</TabPane>,
);
});
return (
<>
<Spin spinning={loading} delay={300}>
<Tabs className={styles.tabs} onChange={onTabChange}>
{panes}
</Tabs>
</Spin>
</>
);
};
const { className, count, bell } = props;
const [visible, setVisible] = useMergedState<boolean>(false, {
value: props.popupVisible,
onChange: props.onPopupVisibleChange,
});
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = getNotificationBox();
const NoticeBellIcon = bell || <BellOutlined className={styles.icon} />;
const trigger = (
<span className={classNames(noticeButtonClass, { opened: visible })}>
<Badge count={count} style={{ boxShadow: 'none' }} className={styles.badge}>
{NoticeBellIcon}
</Badge>
</span>
);
if (!notificationBox) {
return trigger;
}
return (
<HeaderDropdown
placement="bottomRight"
overlay={notificationBox}
overlayClassName={styles.popover}
trigger={['click']}
visible={visible}
onVisibleChange={setVisible}
>
{trigger}
</HeaderDropdown>
);
}
