@ant-design/icons#ClearOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#ClearOutlined.
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: PluginError.tsx From posthog-foss with MIT License | 6 votes |
|
export function PluginError({ error, reset }: { error: PluginErrorType; reset?: () => void }): JSX.Element | null {
if (!error) {
return null
}
return (
<Popover
title={<div style={{ textAlign: 'center' }}>{dayjs(error.time).format('YYYY-MM-DD - HH:mm:ss')}</div>}
content={
<>
{reset ? (
<Button size="small" onClick={reset} style={{ float: 'right', marginLeft: 10 }}>
<ClearOutlined /> Delete
</Button>
) : null}
<div>
{error.name ? <strong>{error.name}: </strong> : ''}
{error.message}
</div>
{error.stack ? (
<CodeSnippet wrap style={{ fontSize: 10 }} language={Language.JavaScript}>
{error.stack}
</CodeSnippet>
) : null}
{error.event ? (
<CodeSnippet wrap style={{ fontSize: 10 }} language={Language.JSON}>
{JSON.stringify(error.event, null, 2)}
</CodeSnippet>
) : null}
</>
}
trigger="click"
placement="top"
>
<Tag color="red" style={{ cursor: 'pointer' }}>
ERROR
</Tag>
</Popover>
)
}
Example #2
| Source File: HeadComponent.tsx From ant-simple-draw with MIT License | 5 votes |
|
Head: FC<HeadType> = memo(function Head({ type = 'edit' }) {
const dispatch = useDispatch<any>();
const { editHandle } = useEdit();
const [componentDataList, canvasInformation] = useSelector(
createSelector(
[(state: storeType) => state.component, (state: storeType) => state.config],
(component, config) => {
return [component.componentDataList, config.canvasInformation] as const;
},
),
);
const operate = () => {
if (!componentDataList.length) {
return;
}
dispatch(saveLocally()).then(() => {
window.open('/preview?model=preview');
});
};
return (
<div className={style.header}>
<h1 className={style.title}>
<a href="/">
<img src="http://blog.lgf196.top/ant-simple-pro-document/logon.png" alt="" />
<span>DRAW</span>
</a>
</h1>
{type === 'edit' ? (
<div className={style.option}>
<button className={style.preview} onClick={operate}>
预览
</button>
<Tooltip title="清屏">
<ClearOutlined className={style.icon} onClick={() => editHandle('Shift+A')} />
</Tooltip>
<Tooltip title="撤销">
<SvgComponent
iconClass="undo"
fill="#2f54eb"
onClick={() => editHandle('Ctrl+Z')}
className={style.icon}
/>
</Tooltip>
<Tooltip title="恢复">
<SvgComponent
iconClass="redo"
fill="#2f54eb"
onClick={() => editHandle('Shift+Z')}
className={style.icon}
/>
</Tooltip>
<Tooltip title="打印">
<PrinterOutlined className={style.icon} />
</Tooltip>
</div>
) : null}
</div>
);
})
Example #3
| Source File: flex.tsx From visual-layout with MIT License | 5 votes |
|
Flex: React.FC<CssProps> = ({ style = [], onChange }) => {
return (
<div className={styles.flexContainer}>
<div className={styles.clear}>
<div>
<Tooltip placement="right" title="清空">
<ClearOutlined
onClick={() => {
onChange?.([
...style.filter(
css => !config.map(({ key }) => key).includes(css.key),
),
]);
}}
/>
</Tooltip>
</div>
</div>
{config.map(({ title, key, getValue, items }) => (
<div className={styles.flexWarper} key={key}>
<div>
{title}: {getValue({ style })}
</div>
<div className={styles.flexItem}>
{items.map(({ value, icon }) => {
const selectStyle =
value === getValue({ style })
? {
border: `1px solid #1890ff`,
}
: {};
return (
<div
style={selectStyle}
key={value}
onClick={() => {
onChange?.([
{
key,
value,
},
...style.filter(css => css.key !== key),
]);
}}
>
{icon}
</div>
);
})}
</div>
</div>
))}
</div>
);
}
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 imove with MIT License | 4 votes |
|
MyConsole: React.FC = () => {
const [filter, setFilter] = useState('');
const [level, setLevel] = useState('all');
const [logList, setLogList] = useState<ILog[]>([]);
const cache = useRef<{ allLogs: ILog[] }>({ allLogs: [] });
useEffect(() => {
hijackConsole();
return () => {
resetConsole();
};
}, []);
useEffect(() => {
const filteredLogs = cache.current.allLogs
.filter((log) => {
if (level === 'all') {
return true;
} else {
return log.type === level;
}
})
.filter((log) => {
return log.strVal.indexOf(filter) > -1;
});
setLogList(filteredLogs);
}, [filter, level]);
const hijackConsole = () => {
Object.keys(hijackMap).forEach((method) => {
// @ts-ignore
window.console[method] = (...args: any[]) => {
hijackMap[method].originMethod(...args);
cache.current.allLogs = cache.current.allLogs.concat({
type: method,
data: args,
strVal: Helper.getArgsToString(args),
});
setLogList(cache.current.allLogs);
};
});
};
const resetConsole = () => {
Object.keys(hijackMap).forEach((method) => {
// @ts-ignore
window.console[method] = hijackMap[method].originMethod;
});
};
const onChangeFilter = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
setFilter(evt.target.value);
}, []);
const onChangeLevel = useCallback((level: string) => {
setLevel(level);
}, []);
const onClickClear = useCallback(() => {
setLogList([]);
cache.current.allLogs = [];
}, []);
const renderToolBar = () => {
return (
<div className={styles.toolBar}>
<Input
allowClear={true}
placeholder={'过滤'}
prefix={<FilterOutlined />}
onChange={onChangeFilter}
/>
<Select
className={styles.levels}
defaultValue={'all'}
onChange={onChangeLevel}
>
{['all', 'info', 'warn', 'error', 'debug'].map((method) => (
<Select.Option key={method} value={method}>
{method}
</Select.Option>
))}
</Select>
<Button type={'link'} onClick={onClickClear}>
<ClearOutlined /> 清空
</Button>
</div>
);
};
const renderLogPanel = (logList: ILog[]) => {
return (
<div className={styles.logPanel}>
{logList.map((log: ILog, index: number) => (
<LogLine key={index} {...log} />
))}
</div>
);
};
return (
<div className={styles.container}>
<Tabs type={'card'} tabBarExtraContent={renderToolBar()}>
<Tabs.TabPane tab={'控制台'} key={'log'}>
{renderLogPanel(logList)}
</Tabs.TabPane>
</Tabs>
</div>
);
}
Example #8
| Source File: ContextMenuComponent.tsx From ant-simple-draw with MIT License | 4 votes |
|
ContextMenu = memo(function ContextMenu(props) {
const dispatch = useDispatch();
const { editHandle } = useEdit();
const [curComponent, left, top, menuShow, componentDataList, copyData, zenMode] = useSelector(
createSelector(
[
(state: storeType) => state.component,
(state: storeType) => state.contextMenu,
(state: storeType) => state.copys,
(state: storeType) => state.config,
],
({ componentDataList, curComponent }, { left, top, menuShow }, { copyData }, { zenMode }) =>
[curComponent, left, top, menuShow, componentDataList, copyData, zenMode] as const,
),
);
const renderList = useMemo(() => {
const isClick = curComponent ? true : false;
let contextMenuList: contextMenuListType[] = [
{
title: '复制',
keyText: 'Ctrl+C',
icon: <CopyOutlined />,
isClick,
},
{
title: '粘贴',
keyText: 'Ctrl+V',
icon: <SnippetsOutlined />,
isClick: copyData ? true : false,
},
{
title: '剪切',
keyText: 'Ctrl+X',
icon: <ScissorOutlined />,
isClick,
},
{
title: '删除',
keyText: 'Delete',
icon: <DeleteOutlined />,
isClick,
},
{
title: `禅模式${zenMode ? '(关闭)' : '(开启)'}`,
keyText: 'Alt+Z',
icon: <DeleteOutlined />,
isClick: true,
},
{
title: '图层层级',
keyText: 'Combination' as any,
icon: <SvgIcon iconClass="layer" />,
isClick,
childrenIcon: <CaretRightOutlined />,
children: [
{
title: '移到顶层',
keyText: 'Ctrl+Shift+Up',
isClick,
},
{
title: '上移一层',
keyText: 'Ctrl+Up',
isClick,
},
{
title: '下移一层',
keyText: 'Ctrl+Down',
isClick,
},
{
title: '移到底层',
keyText: 'Ctrl+Shift+Down',
isClick,
},
],
},
{
title: '清屏',
keyText: 'Shift+A',
icon: <ClearOutlined />,
isClick: componentDataList.length ? true : false,
},
];
return contextMenuList;
}, [componentDataList, curComponent, copyData, zenMode]);
const menu = (e: React.MouseEvent, item: contextMenuListType) => {
const { keyText, isClick } = item;
e.preventDefault();
e.stopPropagation();
if (!isClick || item.children?.length) {
return;
}
editHandle(keyText, { isContextMenuMouse: true });
dispatch(hideContextMenuAction());
};
const ContextMenuItem = (data: contextMenuListType[]) => {
return data.map((item) => {
return (
<li
onClick={(e) => menu(e, item)}
key={item.keyText}
style={{
borderTop: item.keyText === 'Shift+A' ? '1px solid #0000000f' : 'none',
cursor: item.isClick === true ? 'pointer' : 'not-allowed',
color: item.isClick === true ? '#000000' : '#00000040',
}}
>
<div className={style.contextmenudes}>
{item.icon ? <span style={{ paddingRight: '8px' }}>{item.icon}</span> : null}
<span>{item.title}</span>
</div>
<div className={style.contextmenuHotkey}>
{item.childrenIcon ? item.childrenIcon : item.keyText}
</div>
{item.children ? <ul className={style.child}>{ContextMenuItem(item.children)}</ul> : null}
</li>
);
});
};
return (
<>
{menuShow ? (
<div
className={style.contextmenu}
style={{ top: top + 'px', left: left + 'px' }}
onMouseDown={(e) => {
// 不写这个的话，会触发组合器 onMousemove事件
e.preventDefault();
e.stopPropagation();
}}
>
<ul
onMouseUp={(e) => {
e.preventDefault();
e.stopPropagation();
// dispatch(isClickComponentAction(true));
}}
>
{ContextMenuItem(renderList)}
</ul>
</div>
) : null}
</>
);
})
Example #9
| Source File: LabelsValues.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
export default function LabelsValues(props: IProps) {
const { value, range, onChange } = props;
const { id, refreshFlag, filters, dynamicLabels, dimensionLabels } = value;
const [labelValues, setLabelValues] = useState<{ [key: string]: string[] }>({});
const [dimensionLabelsValues, setDimensionLabelsValues] = useState<{ [key: string]: string[] }>({});
const [dimensionLabelsSearch, setDimensionLabelsSearch] = useState({});
const filtersStr = getFiltersStr(filters);
const dynamicLabelsStr = getDynamicLabelsStr(dynamicLabels);
const [expaned, setExpaned] = useState({
filters: false,
dynamicLabels: true,
});
useEffect(() => {
const dynamicLabelsRequests = _.map(dynamicLabels, (item) => {
return getLabelValues(item.label, range, filtersStr ? `{${filtersStr}}` : '');
});
Promise.all(dynamicLabelsRequests).then((res) => {
const _labelValues = {};
_.forEach(res, (item, idx) => {
_labelValues[dynamicLabels[idx].label] = item;
});
setLabelValues(_labelValues);
});
}, [filtersStr]);
useEffect(() => {
const matchStr = _.join(_.compact(_.concat(filtersStr, dynamicLabelsStr)), ',');
const dimensionLabelsRequests = _.map(dimensionLabels, (item) => {
return getLabelValues(item.label, range, matchStr ? `{${matchStr}}` : '');
});
Promise.all(dimensionLabelsRequests).then((res) => {
const _labelValues = {};
_.forEach(res, (item, idx) => {
_labelValues[dimensionLabels[idx].label] = item;
});
setDimensionLabelsValues(_labelValues);
if (_.every(dimensionLabels, (item) => _.isEmpty(item.value))) {
onChange({
...value,
dimensionLabels: _.map(dimensionLabels, (item, idx) => {
if (idx === 0) {
return {
label: item.label,
value: _.slice(_labelValues[item.label], 0, 10),
};
}
return item;
}),
});
}
});
}, [filtersStr, dynamicLabelsStr, id, refreshFlag]);
return (
<div className='n9e-metric-views-labels-values'>
{!_.isEmpty(filtersStr) && (
<div className='n9e-metric-views-labels-values-item'>
<div
className='page-title'
style={{ cursor: 'pointer' }}
onClick={() => {
setExpaned({
...expaned,
filters: !expaned.filters,
});
}}
>
前置过滤条件 {expaned.filters ? <UpOutlined /> : <DownOutlined />}
</div>
{expaned.filters && <div className='n9e-metric-views-filters'>{filtersStr ? filtersStr : '暂无数据'}</div>}
</div>
)}
{!_.isEmpty(dynamicLabels) && (
<div className='n9e-metric-views-labels-values-item'>
<div
className='page-title'
style={{ cursor: 'pointer' }}
onClick={() => {
setExpaned({
...expaned,
dynamicLabels: !expaned.dynamicLabels,
});
}}
>
动态过滤条件 {expaned.dynamicLabels ? <UpOutlined /> : <DownOutlined />}
</div>
{expaned.dynamicLabels && (
<div className='n9e-metric-views-dynamicLabels'>
{_.isEmpty(dynamicLabels) ? (
<div style={{ marginBottom: 10 }}>暂无数据</div>
) : (
_.map(dynamicLabels, (item) => {
return (
<div key={item.label} className='n9e-metric-views-dynamicLabels-item'>
<div className='n9e-metric-views-dynamicLabels-item-label'>{item.label}:</div>
<Select
allowClear
showSearch
style={{ width: '100%' }}
value={item.value}
onChange={(val) => {
const _dynamicLabels = _.map(dynamicLabels, (obj) => {
if (item.label === obj.label) {
return {
...obj,
value: val,
};
}
return obj;
});
onChange({
...value,
dynamicLabels: _dynamicLabels,
dimensionLabels: _.map(dimensionLabels, (item, idx) => {
if (idx === 0) {
return {
label: item.label,
value: [],
};
}
return item;
}),
});
}}
>
{_.map(labelValues[item.label], (value) => {
return (
<Select.Option key={value} value={value}>
{value}
</Select.Option>
);
})}
</Select>
</div>
);
})
)}
</div>
)}
</div>
)}
{_.map(dimensionLabels, (dimensionLabel) => {
const dimensionLabelValues = dimensionLabelsValues[dimensionLabel.label];
return (
<div key={dimensionLabel.label} className='n9e-metric-views-labels-values-item'>
<div className='page-title'>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
alignItems: 'center',
width: 220,
}}
>
<Tooltip title={dimensionLabel.label} placement='left'>
<div
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: 'calc(100% - 30px)',
}}
>
{dimensionLabel.label}
</div>
</Tooltip>
<a
style={{ fontSize: 12, fontWeight: 'normal' }}
onClick={() => {
onChange({
...value,
dimensionLabels: _.map(dimensionLabels, (item) => {
if (item.label === dimensionLabel.label) {
return {
...item,
value: dimensionLabelValues,
};
}
return item;
}),
});
}}
>
全选
</a>
</div>
</div>
<div className='n9e-metric-views-dimensionLabel'>
<Input.Group compact>
<Input
style={{ width: 'calc(100% - 32px)' }}
prefix={<SearchOutlined />}
value={dimensionLabelsSearch[dimensionLabel.label]}
onChange={(e) => {
setDimensionLabelsSearch({
...dimensionLabelsSearch,
[dimensionLabel.label]: e.target.value,
});
}}
/>
<Tooltip title='清空已选的值' placement='right' getTooltipContainer={() => document.body}>
<Button
icon={<ClearOutlined />}
onClick={() => {
onChange({
...value,
dimensionLabels: _.map(dimensionLabels, (item) => {
if (item.label === dimensionLabel.label) {
return {
...item,
value: [],
};
}
return item;
}),
});
}}
/>
</Tooltip>
</Input.Group>
<div className='n9e-metric-views-dimensionLabel-content'>
{_.isEmpty(dimensionLabelValues) ? (
'暂无数据'
) : (
<div>
{_.map(
_.filter(dimensionLabelValues, (item) => {
let result = true;
if (dimensionLabelsSearch[dimensionLabel.label]) {
try {
const reg = new RegExp(dimensionLabelsSearch[dimensionLabel.label], 'gi');
result = reg.test(item);
} catch (e) {
console.log(e);
}
}
return result;
}),
(item: string) => {
return (
<div
key={item}
className={classNames({
'n9e-metric-views-dimensionLabel-content-item': true,
active: _.includes(dimensionLabel.value, item),
})}
onClick={() => {
const dimensionLabelValue = _.includes(dimensionLabel.value, item) ? _.without(dimensionLabel.value, item) : _.concat(dimensionLabel.value, item);
const newDimensionLabels = _.map(dimensionLabels, (item) => {
if (item.label === dimensionLabel.label) {
return {
...item,
value: _.compact(dimensionLabelValue),
};
}
return {
...item,
value: [],
};
});
onChange({
...value,
dimensionLabels: newDimensionLabels,
});
}}
>
{item}
</div>
);
},
)}
</div>
)}
</div>
</div>
</div>
);
})}
</div>
);
}
Example #10
| Source File: index.tsx From dashboard with Apache License 2.0 | 4 votes |
|
Material: React.FC<MaterialProps> = (props) => {
const [materalList, setMateralList] = useState<Material.Item[]>([])
const [filterVisible, setFilterVisible] = useState<boolean>(false)
const [modalFormVisible, setModalFormVisible] = useState<boolean>(false)
const [targetUpdateMaterial, setTargetUpdateMaterial] = useState<Material.Item>({} as Material.Item)
const [targetDeleteMaterial, setTargetDeleteMaterial] = useState<Material.Item>({} as Material.Item)
const [tagModalVisible, setTagModalVisible] = useState(false)
const [choosedTags, setChoosedTags] = useState<MaterialTag.Item[]>([])// 新增&修改素材时选择的标签
const [searchTags, setSearchTags] = useState<MaterialTag.Item[]>([])
const realSearchTags = useRef<MaterialTag.Item[]>([])
const [tagsForFilter, setTagsForFilter] = useState<MaterialTag.Item[]>([]) // 筛选标签的dropdown里的所有标签
const [keyword, setKeyword] = useState<string>('');
const [showSearchTags, setShowSearchTags] = useState(false)
const [linkFetching, setLinkFetching] = useState(false);
const [fileInfo, setFileInfo] = useState({fileName: '', fileSize: ''})
const [materialLoading, setMaterialLoading] = useState(true)
const modalFormRef = useRef<FormInstance>()
const {allTags, allTagsMap} = useContext(TagContext)
useEffect(() => {
const filteredTags = allTags.filter((tag) => {
if (keyword.trim() === '') {
return true;
}
if (tag.name?.includes(keyword)) {
return true;
}
return false;
});
setTagsForFilter(filteredTags);
}, [allTags, keyword])
// 查询素材列表
const queryMaterialList = (material_tag_list?: string[], title?: string) => {
QueryMaterialList({
page_size: 5000,
material_type: fileTypeMap[props.fileType].material_type,
material_tag_list,
title
}).then(res => {
setMaterialLoading(false)
if (res?.code === 0 && res?.data) {
setMateralList(res?.data?.items || [])
} else {
message.error(res?.message)
}
})
}
useEffect(() => {
setMaterialLoading(true)
queryMaterialList()
realSearchTags.current = []
setSearchTags([])
}, [props.fileType, allTags])
// 处理修改 删除的目标素材
const operateMaterial = (targetMaterial: Material.Item, operation: string) => {
setFileInfo({fileName: targetMaterial.title, fileSize: targetMaterial.file_size})
if (operation === 'update') {
setModalFormVisible(true)
setTargetUpdateMaterial(targetMaterial)
setChoosedTags(targetMaterial?.material_tag_list?.map((tagId: string) =>
allTagsMap[tagId]
))
setTimeout(() => {
modalFormRef.current?.setFieldsValue({
...targetMaterial,
file_url: targetMaterial.url,
file_size: targetMaterial.file_size
})
}, 100)
}
if (operation === 'delete') {
setTargetDeleteMaterial(targetMaterial)
}
}
return (
<TagContext.Consumer>
{
(contextValue) => (
<div>
<div>
<div className={styles.topNav}>
<div className={styles.topNavTitle}>
{props.fileType}素材(共{materalList?.length}篇)
</div>
<div className={styles.topNavOperator}>
<Input.Search placeholder={`搜索${props.fileType}标题`} style={{width: 300}} onSearch={(value) => {
queryMaterialList(realSearchTags.current.map(tag => tag?.id), value)
}}/>
<Dropdown
visible={filterVisible}
overlay={
<div className={styles.overlay}>
<div className={styles.overlayTitle}>素材标签 ( {contextValue.allTags.length} )</div>
{/* 筛选标签 */}
<Form
layout={'horizontal'}
>
<Input
allowClear={true}
placeholder={'输入关键词搜索标签'}
value={keyword}
onChange={(e) => {
setKeyword(e.currentTarget.value)
}}
style={{width: 320, marginLeft: 10}}
/>
<div style={{padding: "14px 4px"}}>
{tagsForFilter?.map((tag) => {
const isSelected = searchTags.map((searchTag) => searchTag.id)?.includes(tag?.id);
return (
<Space direction={'horizontal'} wrap={true}>
<Tag
className={`tag-item ${isSelected ? ' selected-tag-item' : ''}`}
style={{cursor: 'pointer', margin: '6px'}}
key={tag.id}
onClick={() => {
if (tag?.id && isSelected) {
setSearchTags(searchTags.filter((searchTag) => {
return searchTag.id !== tag?.id
}))
} else {
setSearchTags([...searchTags, tag])
}
}}
>
{tag.name}
</Tag>
</Space>
)
})}
</div>
{contextValue.allTags?.length === 0 &&
<Empty style={{marginTop: 36, marginBottom: 36}} image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
<Button onClick={() => setFilterVisible(false)}>取消</Button>
<Button
style={{marginLeft: 6}}
type='primary'
htmlType="submit"
onClick={() => {
setFilterVisible(false)
setShowSearchTags(true)
realSearchTags.current = searchTags
queryMaterialList(realSearchTags.current.map(tag => tag?.id) || [])
}}>完成</Button>
</div>
</Form>
</div>
} trigger={['click']}>
<div>
<Button
style={{margin: '0px 6px'}}
onClick={() => {
setFilterVisible(!filterVisible)
}}>筛选</Button>
</div>
</Dropdown>
<Button type={'primary'} onClick={() => {
setModalFormVisible(true)
}}>添加{props.fileType}</Button>
</div>
</div>
</div>
<div>
{
realSearchTags.current.length > 0 && showSearchTags ? <div className={styles.filterTagBox}>
{
realSearchTags.current.map(tag =>
<Tag
key={tag.id}
className={'tag-item selected-tag-item'}
>
{tag.name}
<span>
<CloseOutlined
style={{fontSize: '12px', cursor: 'pointer'}}
onClick={() => {
realSearchTags.current = realSearchTags.current.filter((t) => {
return t.id !== tag?.id
})
setSearchTags(realSearchTags.current)
queryMaterialList(realSearchTags.current.map(t => t?.id) || [])
}}
/>
</span>
</Tag>
)
}
<Button
type={'link'}
icon={<ClearOutlined/>}
style={{display: (showSearchTags && realSearchTags.current.length > 0) ? 'inline-block' : 'none'}}
onClick={() => {
setShowSearchTags(false)
setSearchTags([])
queryMaterialList()
}}>清空筛选</Button>
</div>
:
<div style={{margin: 0}}/>
}
{/* 素材列表 */}
<Spin spinning={materialLoading} style={{marginTop:50}}>
<div className={styles.articles}>
{
materalList?.map((item) => <MaterialCard {...item} callback={operateMaterial}/>)
}
</div>
</Spin>
{
materalList?.length === 0 && !materialLoading && <Empty style={{marginTop: 100}} image={Empty.PRESENTED_IMAGE_SIMPLE}/>
}
</div>
{/* 修改素材弹窗 */}
<ModalForm
formRef={modalFormRef}
className={'dialog from-item-label-100w'}
layout={'horizontal'}
width={'560px'}
visible={modalFormVisible}
onVisibleChange={(visible) => {
if (!visible) {
setTargetUpdateMaterial({} as Material.Item)
setChoosedTags([])
}
setModalFormVisible(visible)
modalFormRef.current?.resetFields()
}}
// @ts-ignore
onFinish={(params) => {
if (targetUpdateMaterial.id) {
const tagIdList = choosedTags.map(tag => {
return tag?.id
})
UpdateMaterial({
material_type: fileTypeMap[props.fileType].material_type, ...params,
id: targetUpdateMaterial.id,
material_tag_list: choosedTags.length > 0 ? tagIdList : [],
})
.then(res => {
if (res?.code === 0) {
message.success(`修改${props.fileType}成功`)
unstable_batchedUpdates(() => {
queryMaterialList(searchTags.map(tag => tag?.id) || [])
setModalFormVisible(false)
setChoosedTags([])
setTargetUpdateMaterial({} as Material.Item)
})
} else {
message.error(res.message)
}
})
} else {
const tagIdList = choosedTags.map(tag => {
return tag?.id
})
CreateMaterial({
material_type: fileTypeMap[props.fileType].material_type, ...params,
material_tag_list: choosedTags.length > 0 ? tagIdList : [],
})
.then(res => {
if (res?.code === 0) {
message.success(`新增${props.fileType}成功`)
unstable_batchedUpdates(() => {
queryMaterialList(searchTags.map(tag => tag?.id) || [])
setModalFormVisible(false)
setChoosedTags([])
})
} else {
message.error(res.message)
}
})
}
}}
>
{
// 修改链接素材 弹窗内容
props.fileType === '链接' && <div key={props.fileType}>
<Spin spinning={linkFetching}>
<h2 className='dialog-title'> {targetUpdateMaterial.id ? '修改链接' : '添加链接'} </h2>
<ProForm.Item initialValue={'link'} name={'msgtype'} noStyle={true}>
<input type={'hidden'}/>
</ProForm.Item>
<ProFormText
name='link'
label='链接地址'
placeholder="链接地址以http(s)开头"
width='md'
fieldProps={{
disabled: linkFetching,
addonAfter: (
<Tooltip title="点击抓取远程链接，自动填充标题，描述，图片">
<div
onClick={async () => {
setLinkFetching(true);
const res = await ParseURL(modalFormRef.current?.getFieldValue('link'))
setLinkFetching(false);
if (res.code !== 0) {
message.error(res.message);
} else {
message.success('解析链接成功');
modalFormRef?.current?.setFieldsValue({
customer_link_enable: 1,
title: res.data.title,
digest: res.data.desc,
file_url: res.data.img_url,
})
}
}}
style={{
cursor: "pointer",
width: 32,
height: 30,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<SyncOutlined/>
</div>
</Tooltip>
)
}}
rules={[
{
required: true,
message: '请输入链接地址',
},
{
type: 'url',
message: '请填写正确的的URL，必须是http或https开头',
},
]}
/>
<ProFormText
name='title'
label='链接标题'
width='md'
rules={[
{
required: true,
message: '请输入链接标题',
},
]}
/>
<ProFormTextArea
name='digest'
label='链接描述'
width='md'
/>
<Form.Item
label='链接封面'
name='file_url'
rules={[
{
required: true,
message: '请上传链接图片！',
},
]}
>
<Uploader
fileType='formImage'
fileInfo={fileInfo}
setFileInfo={setFileInfo}
customRequest={async (req) => {
try {
const file = req.file as RcFile;
const getUploadUrlRes = await GetSignedUrl({file_name: file.name})
if (getUploadUrlRes.code !== 0) {
message.error('获取上传地址失败');
return;
}
// 上传
const uploadRes = await fetch(getUploadUrlRes?.data?.upload_url, {
method: 'PUT',
body: file
});
if (uploadRes.clone().ok) {
modalFormRef?.current?.setFieldsValue({
file_url: getUploadUrlRes?.data?.download_url,
file_size: String(file.size)
})
return;
}
message.error('上传图片失败');
return;
} catch (e) {
message.error('上传图片失败');
}
}}
/>
</Form.Item>
<div style={{display: 'none'}}>
<ProFormText name='file_size'/>
</div>
</Spin>
</div>
}
{
// 修改海报素材 弹窗内容
props.fileType === '海报' && <div key={props.fileType}>
<h2 className='dialog-title'> {targetUpdateMaterial.id ? '修改海报' : '添加海报'} </h2>
<ProForm.Item
name='file_url'
>
<Uploader
fileType='海报'
fileInfo={fileInfo}
setFileInfo={setFileInfo}
customRequest={async (req) => {
try {
const file = req.file as RcFile;
const getUploadUrlRes = await GetSignedUrl({file_name: file.name})
if (getUploadUrlRes.code !== 0) {
message.error('获取上传地址失败');
return;
}
// 上传
const uploadRes = await fetch(getUploadUrlRes?.data?.upload_url, {
method: 'PUT',
body: file
});
if (uploadRes.clone().ok) {
modalFormRef?.current?.setFieldsValue({
file_url: getUploadUrlRes?.data?.download_url,
file_size: String(file.size),
title: file.name
})
return;
}
message.error('上传图片失败');
return;
} catch (e) {
message.error('上传图片失败');
}
}}
/>
</ProForm.Item>
<div style={{display: 'none'}}>
<ProFormText name='file_size'/>
</div>
<div style={{display: 'none'}}>
{/* 文件名 */}
<ProFormText name='title'/>
</div>
</div>
}
{
// 修改视频素材 弹窗内容
props.fileType === '视频' && <div key={props.fileType}>
<h2 className='dialog-title'> {targetUpdateMaterial.id ? '修改视频' : '添加视频'} </h2>
<ProForm.Item
name='file_url'
>
<Uploader
fileType='视频'
fileInfo={fileInfo}
setFileInfo={setFileInfo}
customRequest={async (req) => {
try {
const file = req.file as RcFile;
const getUploadUrlRes = await GetSignedUrl({file_name: file.name})
if (getUploadUrlRes.code !== 0) {
message.error('获取上传地址失败');
return;
}
// 上传
const uploadRes = await fetch(getUploadUrlRes?.data?.upload_url, {
method: 'PUT',
body: file
});
if (uploadRes.clone().ok) {
modalFormRef?.current?.setFieldsValue({
file_url: getUploadUrlRes?.data?.download_url,
file_size: String(file.size),
title: file.name
})
return;
}
message.error('上传视频失败');
return;
} catch (e) {
message.error('上传视频失败');
}
}}
/>
</ProForm.Item>
<div style={{display: 'none'}}>
<ProFormText name='file_size'/>
</div>
<div style={{display: 'none'}}>
{/* 文件名 */}
<ProFormText name='title'/>
</div>
</div>
}
{
// 修改文件类素材 弹窗内容
(props.fileType === 'PDF' || props.fileType === 'PPT' || props.fileType === '文档' || props.fileType === '表格') &&
<div key={props.fileType}>
<h2
className='dialog-title'> {targetUpdateMaterial.id ? `修改${props.fileType}` : `添加${props.fileType}`} </h2>
<ProForm.Item
name='file_url'
>
<Uploader
fileType={props.fileType}
fileInfo={fileInfo}
setFileInfo={setFileInfo}
customRequest={async (req) => {
try {
const file = req.file as RcFile;
const getUploadUrlRes = await GetSignedUrl({file_name: file.name})
if (getUploadUrlRes.code !== 0) {
message.error('获取上传地址失败');
return;
}
// 上传
const uploadRes = await fetch(getUploadUrlRes?.data?.upload_url, {
method: 'PUT',
body: file
});
if (uploadRes.clone().ok) {
modalFormRef?.current?.setFieldsValue({
file_url: getUploadUrlRes?.data?.download_url,
file_size: String(file.size),
title: file.name
})
return;
}
message.error(`上传${props.fileType}失败`);
return;
} catch (e) {
message.error(`上传${props.fileType}失败`);
}
}}
/>
</ProForm.Item>
<div style={{display: 'none'}}>
<ProFormText name='file_size'/>
</div>
<div style={{display: 'none'}}>
{/* 文件名 */}
<ProFormText name='title'/>
</div>
</div>
}
<div className={styles.modalTagBox}>
<Space direction={'horizontal'} wrap={true}>
<Button icon={<PlusOutlined/>} onClick={() => setTagModalVisible(true)}>选择标签</Button>
{
choosedTags?.length > 0 && choosedTags?.map((tag) =>
<Tag
key={tag?.id}
className={'tag-item selected-tag-item'}
>
{tag?.name}
<span>
<CloseOutlined
style={{fontSize: '12px', cursor: 'pointer'}}
onClick={() => {
setChoosedTags(choosedTags?.filter((choosedTag) => {
return choosedTag?.id !== tag?.id
}))
}}
/>
</span>
</Tag>
)}
</Space>
</div>
</ModalForm>
{/* 删除素材 */}
<Modal
visible={!!targetDeleteMaterial.id}
onOk={() => {
DeleteMaterial({ids: [targetDeleteMaterial.id]}).then(res => {
if (res?.code === 0) {
message.success('删除素材标签成功')
// setListTimestamp(Date.now)
queryMaterialList(searchTags?.map(tag => tag?.id) || [])
} else {
message.success('删除失败')
}
setTargetDeleteMaterial({} as Material.Item)
})
}}
onCancel={() => {
setTargetDeleteMaterial({} as Material.Item)
}}
>
<h3>提示</h3>
<h4>确定删除「{(targetDeleteMaterial as Material.Item).title}」这个素材吗？删除后不可恢复</h4>
</Modal>
{/* 选择素材标签弹窗 */}
<TagModal
width={560}
isEditable={false}
defaultCheckedTags={() => {
if (choosedTags?.length > 0) {
return choosedTags
}
const tempArr: MaterialTag.Item[] = []
targetUpdateMaterial?.material_tag_list?.forEach((tagId: string) => {
tempArr.push(contextValue.allTagsMap[tagId])
});
return tempArr || []
}}
allTags={contextValue.allTags}
setAllTags={contextValue.setAllTags}
visible={tagModalVisible}
setVisible={setTagModalVisible}
onCancel={() => {
setChoosedTags([])
}}
reloadTags={contextValue.setTagsItemsTimestamp}
onFinish={async (values) => {
setChoosedTags(values)
}}
/>
</div>
)
}
</TagContext.Consumer>
);
}
Example #11
| Source File: index.tsx From sidebar with Apache License 2.0 | 4 votes |
|
MaterialListCard: React.FC<MaterialListProps> = (props) => {
const {setKeyword, loading, items, allTags} = props;
const [filterVisible, setFilterVisible] = useState(false);
const [tagKeyword, setTagKeyword] = useState("");
const [filteredTags, setFilteredTags] = useState<MaterialLibraryTag[]>([])
const [selectedTags, setSelectedTags] = useState<MaterialLibraryTag[]>([])
useEffect(() => {
setFilteredTags(allTags.filter((tag) => tag.name.includes(tagKeyword)))
}, [tagKeyword, allTags])
return <>
<div className={styles.searchBar}>
<Input.Search placeholder="输入关键词" loading={loading} style={{marginRight: 12}} allowClear onSearch={(value) => {
setKeyword(value);
}}/>
<Dropdown
visible={filterVisible}
overlay={
<div className={styles.overlay}>
<div style={{padding: '0 8px'}}>
<div className={styles.overlayTitle}>素材标签 ( {allTags.length} )</div>
<Form
layout={'horizontal'}
>
<Input
allowClear={true}
placeholder={'输入关键词搜索标签'}
value={tagKeyword}
onChange={(e) => {
setTagKeyword(e.currentTarget.value)
}}
/>
<div style={{padding: "12px 0"}}>
{filteredTags?.map((tag) => {
const isSelected = selectedTags.map((selectedTag) => selectedTag.id)?.includes(tag?.id);
return (
<Space>
<Tag
style={{cursor: 'pointer'}}
className={`tag-item ${isSelected ? ' selected-tag-item' : ''}`}
key={tag.id}
onClick={() => {
if (tag?.id && isSelected) {
setSelectedTags(selectedTags.filter((selectedTag) => {
return selectedTag.id !== tag?.id
}))
} else {
setSelectedTags([...selectedTags, tag])
}
}}
>
{tag.name}
{isSelected && (
<CloseOutlined style={{marginLeft: 6, fontSize: 11}}/>
)}
</Tag>
</Space>
)
})}
</div>
{allTags?.length === 0 && <Empty style={{marginTop: 36, marginBottom: 36}}/>}
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
<Button onClick={() => setFilterVisible(false)}>取消</Button>
<Button
style={{marginLeft: 6}}
type='primary'
htmlType="submit"
onClick={() => {
setFilterVisible(false)
if (props.setSelectedTags) {
props.setSelectedTags(selectedTags || [])
}
}}>完成</Button>
</div>
</Form>
</div>
</div>
} trigger={['click']}>
<div>
<Button
onClick={() => {
setFilterVisible(!filterVisible)
}}>筛选</Button>
</div>
</Dropdown>
</div>
{selectedTags.length > 0 && (
<div className={styles.filterBar}>
<div className={styles.tagList}>
{selectedTags?.map((tag) => (
<span
key={tag.id}
className={styles.tag}
style={{cursor: 'pointer'}}
onClick={() => {
setSelectedTags(selectedTags.filter((item) => item.id !== tag.id))
}}
>
{tag.name}
<CloseOutlined style={{marginLeft: 6, fontSize: 11}}/>
</span>
))}
</div>
{selectedTags.length > 0 && (
<Button onClick={() => setSelectedTags([])} icon={<ClearOutlined/>} type={'link'}>清空筛选</Button>
)}
</div>
)}
<div>
{items.length === 0 && (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
)}
{items.length > 0 && (
<Space direction={'vertical'} className={styles.materialList}>
{items.map((item) => (
<Space direction={'horizontal'} className={styles.materialItem} key={item.id}>
<Space>
<span className={styles.sendButtonWrap}>
<Button
// 发送一组话术
onClick={async () => {
await SendMaterial(item);
}}
type={'link'}
className={styles.sendButton}
icon={getIcon('icon-fasong')}
/>
</span>
</Space>
<Space className={styles.materialPreview}>
<div className={styles.leftPart}>
{item.material_type === 'poster' && (
<Image src={calFileIcon(item)} fallback={fileIconImage}
preview={item.material_type === 'poster' ? {mask: <EyeOutlined/>} : false}/>
)}
{item.material_type === 'link' && (
<Image style={{cursor: 'pointer'}} onClick={() => {
window.open(item.link)
}} src={calFileIcon(item)} fallback={fileIconImage}
preview={false}/>
)}
{["video", "pdf", "ppt", "excel", "word"].includes(item.material_type) && (
<Image style={{cursor: 'pointer'}} onClick={() => {
window.open(item.url)
}} src={calFileIcon(item)} fallback={fileIconImage}
preview={false}/>
)}
</div>
<div className={styles.rightPart}>
<div className={styles.title}>{item.title}</div>
<div className={styles.desc}>{item.digest}</div>
<div className={styles.tagList}>
{item?.tags?.map((tag) => (
<span key={tag.id} className={styles.tag}>{tag.name}</span>
))}
</div>
</div>
</Space>
</Space>
))}
</Space>
)}
</div>
</>
}
