@ant-design/icons#ArrowUpOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#ArrowUpOutlined.
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: sorting.tsx From posthog-foss with MIT License | 6 votes |
|
export function SortingIndicator({ order }: { order: SortOrder | null }): JSX.Element {
return (
<div
style={{
fontSize: 10,
marginLeft: 8,
whiteSpace: 'nowrap',
width: 20,
display: 'flex',
justifyContent: 'center',
}}
>
{order === -1 ? <ArrowDownOutlined /> : order === 1 ? <ArrowUpOutlined /> : null}
<MenuOutlined />
</div>
)
}
Example #2
| Source File: icons.tsx From posthog-foss with MIT License | 6 votes |
|
// AntD arrows rotated at convenient angles
export function ArrowBottomRightOutlined({ style }: { style?: CSSProperties }): JSX.Element {
return (
<span className="anticon anticon-wraper-arrow bottomRight">
<ArrowUpOutlined style={style} />
</span>
)
}
Example #3
| Source File: icons.tsx From posthog-foss with MIT License | 5 votes |
|
export function ArrowTopRightOutlined({ style }: { style?: CSSProperties }): JSX.Element {
return (
<span className="anticon anticon-wraper-arrow topRight">
<ArrowUpOutlined style={style} />
</span>
)
}
Example #4
| Source File: index.tsx From nanolooker with MIT License | 5 votes |
|
StatisticsChange: React.FC<StatisticsChangeProps> = ({
value,
isPercent,
isNumber,
suffix,
}) => {
const { theme } = React.useContext(PreferencesContext);
const color = (value === 0
? Colors.PENDING
: value < 0
? theme === Theme.DARK
? Colors.SEND_DARK
: Colors.SEND
: theme === Theme.DARK
? Colors.RECEIVE_DARK
: Colors.RECEIVE) as string;
const styles = {
color,
fontSize: "12px",
};
return !isNaN(value) && value !== Infinity ? (
<>
<span
style={{
marginRight: "3px",
...styles,
}}
>
{isPercent ? `${new BigNumber(value).toFormat(2)}%` : null}
{isNumber ? value : null}
</span>
{value >= 0 ? (
<ArrowUpOutlined style={styles} />
) : (
<ArrowDownOutlined style={styles} />
)}
{suffix}
</>
) : null;
}
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>
<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 #6
| 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 #7
| Source File: PlayerEvents.tsx From posthog-foss with MIT License | 4 votes |
|
export function PlayerEvents(): JSX.Element {
const listRef = useRef<List>(null)
const {
localFilters,
listEvents,
currentEventsBoxSizeAndPosition,
showPositionFinder,
isRowIndexRendered,
isEventCurrent,
isDirectionUp,
renderedRows,
} = useValues(eventsListLogic)
const { sessionEventsDataLoading } = useValues(sessionRecordingLogic)
const { setLocalFilters, setRenderedRows, setList, scrollTo, disablePositionFinder, handleEventClick } =
useActions(eventsListLogic)
useEffect(() => {
if (listRef?.current) {
setList(listRef.current)
}
}, [listRef.current])
const rowRenderer = useCallback(
function _rowRenderer({ index, style, key }: ListRowProps): JSX.Element {
const event = listEvents[index]
const hasDescription = getKeyMapping(event.event, 'event')
const isCurrent = isEventCurrent(index)
return (
<Row
key={key}
className={clsx('event-list-item', { 'current-event': isCurrent })}
align="top"
style={{ ...style, zIndex: listEvents.length - index }}
onClick={() => {
handleEventClick(event.playerPosition)
}}
>
<Col className="event-item-icon">
<div className="event-item-icon-wrapper">{renderIcon(event)}</div>
</Col>
<Col
className={clsx('event-item-content', {
rendering: !isRowIndexRendered(index),
})}
>
<Row className="event-item-content-top-row">
<PropertyKeyInfo
className="event-item-content-title"
value={event.event}
disableIcon
disablePopover
ellipsis={true}
/>
<span className="event-item-content-timestamp">{event.colonTimestamp}</span>
</Row>
{hasDescription && (
<EventDescription description={capitalizeFirstLetter(eventToDescription(event, true))} />
)}
<Skeleton active paragraph={{ rows: 2, width: ['40%', '100%'] }} title={false} />
</Col>
</Row>
)
},
[
listEvents.length,
renderedRows.startIndex,
renderedRows.stopIndex,
currentEventsBoxSizeAndPosition.top,
currentEventsBoxSizeAndPosition.height,
]
)
const cellRangeRenderer = useCallback(
function _cellRangeRenderer(props: GridCellRangeProps): React.ReactNode[] {
const children = defaultCellRangeRenderer(props)
if (listEvents.length > 0) {
children.push(
<div
key="highlight-box"
className="current-events-highlight-box"
style={{
height: currentEventsBoxSizeAndPosition.height,
transform: `translateY(${currentEventsBoxSizeAndPosition.top}px)`,
}}
/>
)
}
return children
},
[
currentEventsBoxSizeAndPosition.top,
currentEventsBoxSizeAndPosition.height,
sessionEventsDataLoading,
listEvents.length,
]
)
return (
<Col className="player-events-container">
<Input
prefix={<SearchOutlined />}
placeholder="Search for events"
value={localFilters.query}
onChange={(e) => setLocalFilters({ query: e.target.value })}
/>
<Col className="event-list">
{sessionEventsDataLoading ? (
<Loading />
) : (
<>
<div className={clsx('current-events-position-finder', { visible: showPositionFinder })}>
<Row
className="left"
align="middle"
wrap={false}
onClick={() => {
scrollTo()
}}
>
{isDirectionUp ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
Jump to current time
</Row>
<Row
className="right"
align="middle"
justify="center"
wrap={false}
onClick={() => {
disablePositionFinder()
}}
>
<CloseOutlined />
</Row>
</div>
<AutoSizer>
{({ height, width }: { height: number; width: number }) => {
return (
<List
ref={listRef}
className="event-list-virtual"
height={height}
width={width}
onRowsRendered={setRenderedRows}
noRowsRenderer={noRowsRenderer}
cellRangeRenderer={cellRangeRenderer}
overscanRowCount={OVERSCANNED_ROW_COUNT} // in case autoscrolling scrolls faster than we render.
overscanIndicesGetter={overscanIndicesGetter}
rowCount={listEvents.length}
rowRenderer={rowRenderer}
rowHeight={DEFAULT_ROW_HEIGHT}
/>
)
}}
</AutoSizer>
</>
)}
</Col>
</Col>
)
}
Example #8
| 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 #9
| Source File: EditItem.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
export default function EditItem(props: Props) {
const { visible, onChange, value, range, id } = props;
const { t } = useTranslation();
const [form] = Form.useForm();
useEffect(() => {
value && form.setFieldsValue(value);
}, [value]);
const handleOk = async () => {
await form.validateFields();
const v: FormType = form.getFieldsValue();
onChange(v);
};
const onCancel = () => {
onChange(undefined);
};
const onFinish = (values) => {
console.log('Received values of form:', values);
};
const handleBlur = (index) => {
const reg = form.getFieldValue(['var', index, 'reg']);
const expression = form.getFieldValue(['var', index, 'definition']);
if ((!reg || new RegExp('^/(.*?)/(g?i?m?y?)$').test(reg)) && expression) {
const formData = form.getFieldsValue();
var newExpression = replaceExpressionVars(expression, formData, index, id);
convertExpressionToQuery(newExpression, range).then((res) => {
const regFilterRes = res.filter((i) => !reg || !stringToRegex(reg) || (stringToRegex(reg) as RegExp).test(i));
if (regFilterRes.length > 0) {
setVaraiableSelected(formData.var[index].name, regFilterRes[0], id);
}
// form.setFields([{ name: ['var', index, 'selected'], value: regFilterRes[0] }]);
});
}
};
return (
<Modal title={t('大盘变量')} width={950} visible={visible} onOk={handleOk} onCancel={onCancel} wrapClassName='variable-modal'>
<Form name='dynamic_form_nest_item' onFinish={onFinish} autoComplete='off' preserve={false} form={form}>
<Row gutter={[6, 6]} className='tag-header'>
<Col span={4}>{t('变量名')}</Col>
<Col span={6}>
{t('变量定义')}
<QuestionCircleOutlined
style={{ marginLeft: 5 }}
onClick={() => window.open('https://grafana.com/docs/grafana/latest/datasources/prometheus/#query-variable', '_blank')}
/>
</Col>
<Col span={6}>{t('筛值正则')}</Col>
<Col span={2}>{t('Multi')}</Col>
<Col span={2}>{t('All Option')}</Col>
<Col span={4}>{t('操作')}</Col>
</Row>
<Form.List name='var'>
{(fields, { add, remove, move }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<Row gutter={[6, 6]} className='tag-content-item' key={key}>
<Col span={4}>
<Form.Item
{...restField}
name={[name, 'name']}
fieldKey={[fieldKey, 'name']}
rules={[
{ required: true, message: t('请输入变量名') },
{ pattern: /^[0-9a-zA-Z_]+$/, message: t('仅支持数字和字符下划线') },
]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
{...restField}
name={[name, 'definition']}
fieldKey={[fieldKey, 'definition']}
rules={[
{ required: true, message: t('请输入变量定义') },
{
validator(_, value) {
if (/^\s*label_values.+,\s*\$.+/.test(value)) {
return Promise.reject(new Error('label_values表达式的label不允许使用变量'));
}
return Promise.resolve();
},
},
]}
>
<Input onBlur={(v) => handleBlur(name)} />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item {...restField} name={[name, 'reg']} fieldKey={[fieldKey, 'reg']} rules={[{ pattern: new RegExp('^/(.*?)/(g?i?m?y?)$'), message: t('格式不对') }]}>
<Input placeholder='/*.hna/' onBlur={(v) => handleBlur(name)} />
</Form.Item>
</Col>
<Col span={2}>
<Form.Item {...restField} name={[name, 'multi']} fieldKey={[fieldKey, 'multi']} valuePropName='checked'>
<Switch />
</Form.Item>
</Col>
<Col span={2}>
<Form.Item shouldUpdate style={{ margin: 0 }}>
{() => {
return (
form.getFieldValue(['var', name, 'multi']) && (
<Form.Item {...restField} name={[name, 'allOption']} fieldKey={[fieldKey, 'allOption']} valuePropName='checked'>
<Switch />
</Form.Item>
)
);
}}
</Form.Item>
</Col>
{/* <Form.Item {...restField} name={[name, 'selected']} fieldKey={[fieldKey, 'selected']} hidden>
<Input />
</Form.Item> */}
<Col span={4}>
<Button type='link' size='small' onClick={() => move(name, name + 1)} disabled={name === fields.length - 1}>
<ArrowDownOutlined />
</Button>
<Button type='link' size='small' onClick={() => move(name, name - 1)} disabled={name === 0}>
<ArrowUpOutlined />
</Button>
<Button
type='link'
size='small'
onClick={() => {
const v = form.getFieldValue(['var', name]);
add({ ...v, name: 'copy_of_' + v.name });
}}
>
<CopyOutlined />
</Button>
<Button type='link' size='small' onClick={() => remove(name)}>
<DeleteOutlined />
</Button>
</Col>
</Row>
))}
<Form.Item>
<Button type='dashed' onClick={() => add()} block icon={<PlusOutlined />}>
{t('新增变量')}
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
</Modal>
);
}
Example #10
| Source File: EditItem.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
export default function EditItem(props: Props) {
const { visible, onChange, value, range, id } = props;
const { t } = useTranslation();
const [form] = Form.useForm();
useEffect(() => {
value && form.setFieldsValue(value);
}, [value]);
const handleOk = async () => {
await form.validateFields();
const v: FormType = form.getFieldsValue();
onChange(v);
};
const onCancel = () => {
onChange(undefined);
};
const onFinish = (values) => {
console.log('Received values of form:', values);
};
const handleBlur = (index) => {
const reg = form.getFieldValue(['var', index, 'reg']);
const expression = form.getFieldValue(['var', index, 'definition']);
if ((!reg || new RegExp('^/(.*?)/(g?i?m?y?)$').test(reg)) && expression) {
const formData = form.getFieldsValue();
var newExpression = replaceExpressionVars(expression, formData, index, id);
convertExpressionToQuery(newExpression, range).then((res) => {
const regFilterRes = res.filter((i) => !reg || !stringToRegex(reg) || (stringToRegex(reg) as RegExp).test(i));
if (regFilterRes.length > 0) {
setVaraiableSelected(formData.var[index].name, regFilterRes[0], id);
}
// form.setFields([{ name: ['var', index, 'selected'], value: regFilterRes[0] }]);
});
}
};
return (
<Modal title={t('大盘变量')} width={950} visible={visible} onOk={handleOk} onCancel={onCancel} wrapClassName='variable-modal'>
<Form name='dynamic_form_nest_item' onFinish={onFinish} autoComplete='off' preserve={false} form={form}>
<Row gutter={[6, 6]} className='tag-header'>
<Col span={4}>{t('变量名')}</Col>
<Col span={6}>
{t('变量定义')}
<QuestionCircleOutlined
style={{ marginLeft: 5 }}
onClick={() => window.open('https://grafana.com/docs/grafana/latest/datasources/prometheus/#query-variable', '_blank')}
/>
</Col>
<Col span={6}>{t('筛值正则')}</Col>
<Col span={2}>{t('Multi')}</Col>
<Col span={2}>{t('All Option')}</Col>
<Col span={4}>{t('操作')}</Col>
</Row>
<Form.List name='var'>
{(fields, { add, remove, move }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<Row gutter={[6, 6]} className='tag-content-item' key={key}>
<Col span={4}>
<Form.Item
{...restField}
name={[name, 'name']}
fieldKey={[fieldKey, 'name']}
rules={[
{ required: true, message: t('请输入变量名') },
{ pattern: /^[0-9a-zA-Z_]+$/, message: t('仅支持数字和字符下划线') },
]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
{...restField}
name={[name, 'definition']}
fieldKey={[fieldKey, 'definition']}
rules={[
{ required: true, message: t('请输入变量定义') },
{
validator(_, value) {
if (/^\s*label_values.+,\s*\$.+/.test(value)) {
return Promise.reject(new Error('label_values表达式的label不允许使用变量'));
}
return Promise.resolve();
},
},
]}
>
<Input onBlur={(v) => handleBlur(name)} />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item {...restField} name={[name, 'reg']} fieldKey={[fieldKey, 'reg']} rules={[{ pattern: new RegExp('^/(.*?)/(g?i?m?y?)$'), message: t('格式不对') }]}>
<Input placeholder='/*.hna/' onBlur={(v) => handleBlur(name)} />
</Form.Item>
</Col>
<Col span={2}>
<Form.Item {...restField} name={[name, 'multi']} fieldKey={[fieldKey, 'multi']} valuePropName='checked'>
<Switch />
</Form.Item>
</Col>
<Col span={2}>
<Form.Item shouldUpdate style={{ margin: 0 }}>
{() => {
return (
form.getFieldValue(['var', name, 'multi']) && (
<Form.Item {...restField} name={[name, 'allOption']} fieldKey={[fieldKey, 'allOption']} valuePropName='checked'>
<Switch />
</Form.Item>
)
);
}}
</Form.Item>
</Col>
{/* <Form.Item {...restField} name={[name, 'selected']} fieldKey={[fieldKey, 'selected']} hidden>
<Input />
</Form.Item> */}
<Col span={4}>
<Button type='link' size='small' onClick={() => move(name, name + 1)} disabled={name === fields.length - 1}>
<ArrowDownOutlined />
</Button>
<Button type='link' size='small' onClick={() => move(name, name - 1)} disabled={name === 0}>
<ArrowUpOutlined />
</Button>
<Button
type='link'
size='small'
onClick={() => {
const v = form.getFieldValue(['var', name]);
add({ ...v, name: 'copy_of_' + v.name });
}}
>
<CopyOutlined />
</Button>
<Button type='link' size='small' onClick={() => remove(name)}>
<DeleteOutlined />
</Button>
</Col>
</Row>
))}
<Form.Item>
<Button type='dashed' onClick={() => add()} block icon={<PlusOutlined />}>
{t('新增变量')}
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
</Modal>
);
}
Example #11
| Source File: UnControlledTableHeaderPanel.tsx From datart with Apache License 2.0 | 4 votes |
|
UnControlledTableHeaderPanel: FC<ItemLayoutProps<ChartStyleConfig>> =
memo(
({
ancestors,
translate: t = title => title,
data,
onChange,
dataConfigs,
}) => {
const [selectedRowUids, setSelectedRowUids] = useState<string[]>([]);
const [myData, setMyData] = useState(() => CloneValueDeep(data));
const [tableDataSource, setTableDataSource] = useState<
TableColumnsList[]
>(() => {
const originalFlattenHeaderRows = getFlattenHeaders(dataConfigs);
const currentHeaderRows: TableColumnsList[] = myData?.value || [];
const unusedHeaderRows = getUnusedHeaderRows(
originalFlattenHeaderRows || [],
currentHeaderRows,
);
return currentHeaderRows.concat(unusedHeaderRows);
});
const mergeRowToGroup = () => {
if (selectedRowUids.length === 0) {
return;
}
const lineageRowUids = selectedRowUids.map(uid =>
getAncestorRowUids(undefined, uid, tableDataSource),
);
const noDuplicateLineageRows =
mergeSameLineageAncesterRows(lineageRowUids);
const ancestorsRows = makeSameLinageRows(noDuplicateLineageRows);
const newDataSource = groupTreeNode(ancestorsRows, tableDataSource);
setSelectedRowUids([]);
handleConfigChange([...newDataSource]);
};
const mergeSameLineageAncesterRows = lineageRowUids => {
const allRowKeys = lineageRowUids.map((lr: string[]) =>
lr.join(DATARTSEPERATOR),
);
return lineageRowUids.reduce((acc, next) => {
const key = next.join(DATARTSEPERATOR);
if (
allRowKeys.some(k => k.includes(key) && k.length !== key.length)
) {
return acc;
}
return acc.concat([next]);
}, []);
};
const makeSameLinageRows = rowAncestors => {
if (rowAncestors && rowAncestors.length === 0) {
return [];
}
const theSortestLength = Math.min(...rowAncestors.map(ra => ra.length));
let ancestorGeneration = 0;
for (let i = 0; i < theSortestLength; i++) {
const ancestor = rowAncestors[0][i];
if (rowAncestors.every(a => a[i] === ancestor)) {
ancestorGeneration = i;
} else {
break;
}
}
return rowAncestors
.map(ra => ra.slice(0, ancestorGeneration + 1))
.reduce((acc, next) => {
const key = next.join(DATARTSEPERATOR);
const allRowKeys = acc.map(lr => lr.join(DATARTSEPERATOR));
if (allRowKeys.includes(key)) {
return acc;
}
return acc.concat([next]);
}, []);
};
const getAncestorRowUids = (parentUid, rowUid, treeRows) => {
if (treeRows.find(tr => tr.uid === rowUid)) {
return !!parentUid ? [parentUid, rowUid] : [rowUid];
}
return treeRows.reduce((acc, next) => {
return acc.concat(
getAncestorRowUids(next.uid, rowUid, next.children || []),
);
}, []);
};
const groupTreeNode = (rowAncestors, collection) => {
if (rowAncestors && rowAncestors.length < 1) {
return collection;
}
const rows = collection || [];
const linageGeneration = rowAncestors[0].length - 1;
if (linageGeneration === 0) {
const mergedKeys = rowAncestors.flatMap(ra => ra);
return mergeBrotherRows(mergedKeys, rows);
} else {
const ancestor = rowAncestors[0][0];
const subRowAncestors = rowAncestors.map(ra => ra.slice(1));
const childRow = rows.find(c => c.colName === ancestor);
childRow.children = groupTreeNode(subRowAncestors, childRow.children);
return rows;
}
};
const mergeBrotherRows = (
mergeKeys: string[],
rows: TableColumnsList[],
) => {
const selectedRows = rows.filter(r => mergeKeys.includes(r.uid!));
const restRows = rows.filter(r => !mergeKeys.includes(r.uid!));
const insertIndex = rows.findIndex(r => r.uid === mergeKeys[0]);
const groupRowUid = selectedRows.map(d => d.uid).join(DATARTSEPERATOR);
const groupRow = {
uid: groupRowUid,
colName: groupRowUid,
label: t('table.header.newName'),
isGroup: true,
children: selectedRows,
};
if (!restRows.find(rr => rr.uid === groupRowUid)) {
restRows.splice(insertIndex, 0, groupRow);
}
return restRows;
};
const handleRowMoveUp = () => {
selectedRowUids.forEach(rowUid => {
const brotherRows = findRowBrothers(rowUid, tableDataSource);
const idx = brotherRows.findIndex(s => s.uid === rowUid);
if (idx < 1) {
return;
}
const temp = brotherRows[idx - 1];
brotherRows[idx - 1] = brotherRows[idx];
brotherRows[idx] = temp;
});
handleConfigChange([...tableDataSource]);
};
const handleRowMoveDown = () => {
selectedRowUids.forEach(uid => {
const brotherRows = findRowBrothers(uid, tableDataSource);
const idx = brotherRows.findIndex(s => s.uid === uid);
if (idx >= brotherRows.length - 1) {
return;
}
const temp = brotherRows[idx];
brotherRows[idx] = brotherRows[idx + 1];
brotherRows[idx + 1] = temp;
handleConfigChange([...tableDataSource]);
});
};
const handleRollback = () => {
const originalFlattenHeaders = getFlattenHeaders(dataConfigs);
myData.value = [];
setTableDataSource(originalFlattenHeaders);
setMyData(myData);
onChange?.(ancestors, myData);
};
const handleTableRowChange = rowUid => style => prop => (_, value) => {
const brotherRows = findRowBrothers(rowUid, tableDataSource);
const row = brotherRows.find(r => r.uid === rowUid);
if (!row) {
return;
}
if (style) {
row.style = Object.assign({}, row.style, {
...row.style,
[prop]: value,
});
} else {
row[prop] = value;
}
handleConfigChange([...tableDataSource]);
};
const handleDeleteGroupRow = rowUid => {
const brotherRows = findRowBrothers(rowUid, tableDataSource);
const idx = brotherRows.findIndex(s => s.uid === rowUid);
brotherRows.splice(idx, 1, ...(brotherRows[idx].children || []));
handleConfigChange([...tableDataSource]);
};
const handleConfigChange = (dataSource: TableColumnsList[]) => {
myData.value = dataSource;
setTableDataSource(dataSource);
setMyData(myData);
onChange?.(ancestors, myData);
};
const findRowBrothers = (uid, rows) => {
let row = rows.find(r => r.uid === uid);
if (!!row) {
return rows;
}
let subRows = [];
for (let i = 0; i < rows.length; i++) {
subRows = findRowBrothers(uid, rows[i].children || []);
if (!!subRows && subRows.length > 0) {
break;
}
}
return subRows;
};
const tableColumnsSettings = [
{
title: t('table.header.columnName'),
dataIndex: 'colName',
key: 'colName',
render: (_, record) => {
const { label, isGroup, uid } = record;
return isGroup ? (
<>
<DeleteOutlined
style={{ marginRight: 10 }}
onClick={_ => handleDeleteGroupRow(uid)}
/>
<EditableLabel
label={label}
onChange={value =>
handleTableRowChange(uid)(undefined)('label')([], value)
}
/>
</>
) : (
getColumnRenderName(record)
);
},
},
];
const rowSelection = {
selectedRowKeys: selectedRowUids,
onChange: (selectedRowKeys: any[]) => {
setSelectedRowUids(selectedRowKeys);
},
};
return (
<StyledUnControlledTableHeaderPanel direction="vertical">
<Row gutter={24}>
<Col span={20}>
<Space>
<Button
disabled={selectedRowUids.length === 0}
type="primary"
onClick={mergeRowToGroup}
>
{t('table.header.merge')}
</Button>
<Button
disabled={selectedRowUids.length === 0}
icon={<ArrowUpOutlined />}
onClick={handleRowMoveUp}
>
{t('table.header.moveUp')}
</Button>
<Button
disabled={selectedRowUids.length === 0}
icon={<ArrowDownOutlined />}
onClick={handleRowMoveDown}
>
{t('table.header.moveDown')}
</Button>
</Space>
</Col>
<Col span={4}>
<Row justify="end" align="middle">
<Button icon={<RedoOutlined />} onClick={handleRollback}>
{t('table.header.reset')}
</Button>
</Row>
</Col>
</Row>
<Row gutter={24}>
<Col span={24}>
<Table
size="small"
bordered={true}
pagination={false}
{...myData}
rowKey={record => record.uid!}
columns={tableColumnsSettings}
dataSource={tableDataSource}
rowSelection={rowSelection}
/>
</Col>
</Row>
</StyledUnControlledTableHeaderPanel>
);
},
itemLayoutComparer,
)
Example #12
| Source File: useExtraBtn.tsx From amiya with MIT License | 4 votes |
|
useFieldsEdit = (
tableFields: Array<AyTableField>,
setTableFields: Dispatch<React.SetStateAction<AyTableField[]>>
) => {
const [visible, setVisible] = useState<boolean>(false)
let [normalFields, setNormalFields] = useState<Array<FieldEdit>>(
// @ts-ignore
tableFields
.filter(field => {
// 已经设置过展示的，直接通过判定
if (field.__extraTouched) {
return true
}
return !field.hidden
})
.map((field, i) => {
return {
checked: field.__hidden === false || field.__hidden === undefined,
title: field.title || '',
key: field.key || '',
order: field.__order ?? i,
alias: field.__alias || ''
}
})
)
const handleCheckedChange = (i: number, value: boolean) => {
// @ts-ignore
let newFields = [...normalFields]
let fieldEdit = newFields[i]
fieldEdit.checked = value
setNormalFields(newFields)
}
const handleAliasChange = (i: number, value: string) => {
let newFields = [...normalFields]
let fieldEdit = newFields[i]
fieldEdit.alias = value || ''
setNormalFields(newFields)
}
/**
* 向上移动元素位置
* @param i 当前位置
*/
const handleMoveUp = (i: number) => {
if (i === 0) {
return
}
const newFields = [...normalFields]
const current = newFields[i]
const prev = newFields[i - 1]
let currentOrder = current.order
current.order = prev.order
prev.order = currentOrder
;[newFields[i], newFields[i - 1]] = [newFields[i - 1], newFields[i]]
setNormalFields(newFields)
}
/**
* 向下移动元素位置
* @param i 当前位置
*/
const handleMoveDown = (i: number) => {
if (i === normalFields.length - 1) {
return
}
const newFields = [...normalFields]
// 赋值 order
const current = newFields[i]
const next = newFields[i + 1]
let currentOrder = current.order
current.order = next.order
next.order = currentOrder
;[newFields[i], newFields[i + 1]] = [newFields[i + 1], newFields[i]]
setNormalFields(newFields)
}
/**
* 确认修改
*/
const handleConfirm = () => {
let newFields = [...tableFields]
newFields.forEach(field => {
let target: FieldEdit | undefined = normalFields.find((item: FieldEdit) => item.key === field.key)
if (target) {
field.__extraTouched = true
field.__hidden = !target.checked
field.__order = target.order
field.__alias = target.alias
}
})
setTableFields(newFields)
setVisible(false)
}
return (
<>
<AyDialog title={locale.extra.columnSetting} visible={visible} setVisible={setVisible} onConfirm={handleConfirm}>
{normalFields.map((fieldEdit, i) => {
return (
<div className="ay-search-table-extra-fields-edit-line" key={fieldEdit.key}>
<div className="ay-search-table-extra-fields-edit-line-left">
<Checkbox defaultChecked={fieldEdit.checked} onChange={e => handleCheckedChange(i, e.target.checked)}>
{fieldEdit.title}
</Checkbox>
</div>
<div className="ay-search-table-extra-fields-edit-line-right">
<Input
style={{ marginRight: 20 }}
value={fieldEdit.alias}
placeholder={locale.extra.rename}
onChange={(e: ChangeEvent<HTMLInputElement>) => handleAliasChange(i, e.target.value)}
allowClear
/>
<Tooltip title={locale.extra.moveUp} placement="left">
<AyButton type="link" icon={<ArrowUpOutlined />} onClick={() => handleMoveUp(i)}></AyButton>
</Tooltip>
<Tooltip title={locale.extra.moveDown} placement="right">
<AyButton type="link" icon={<ArrowDownOutlined />} onClick={() => handleMoveDown(i)}></AyButton>
</Tooltip>
</div>
</div>
)
})}
</AyDialog>
<Tooltip title={locale.extra.columnSetting}>
<SettingOutlined onClick={() => setVisible(true)} />
</Tooltip>
</>
)
}
Example #13
| Source File: App.tsx From pcap2socks-gui with MIT License | 4 votes |
|
renderRunning = () => {
return (
<div className="content-content">
<Row className="content-content-row" gutter={[16, 16]} justify="center">
<Col className="content-content-col" span={24}>
{(() => {
if (Number.isNaN(this.state.time)) {
return <QuestionCircleTwoTone className="content-content-icon" />;
} else {
return <CheckCircleTwoTone className="content-content-icon" twoToneColor="#52c41a" />;
}
})()}
</Col>
</Row>
<Row className="content-content-row" gutter={[16, 32]} justify="center">
<Col className="content-content-col" span={24}>
<Paragraph>
<Title level={3}>
{(() => {
if (Number.isNaN(this.state.time)) {
return "未运行";
} else {
return "运行中";
}
})()}
</Title>
</Paragraph>
</Col>
</Row>
<Row gutter={[16, 0]} justify="center">
<Col xs={24} sm={12} md={6} style={{ marginBottom: "16px" }}>
<Card className="card" hoverable>
<Statistic
precision={2}
prefix={<ClockCircleOutlined />}
title="运行时间"
value={Convert.convertTime(this.state.time)}
/>
</Card>
</Col>
<Col xs={24} sm={12} md={6} style={{ marginBottom: "16px" }}>
<Card className="card" hoverable>
<Statistic
prefix={<HourglassOutlined />}
title="延迟"
value={Convert.convertDuration(this.state.latency)}
valueStyle={(() => {
if (this.state.latency === Infinity) {
return { color: "#cf1322" };
} else if (this.state.latency >= 100) {
return { color: "#faad14" };
}
})()}
suffix={Convert.convertDurationUnit(this.state.latency)}
/>
</Card>
</Col>
<Col xs={24} sm={12} md={6} style={{ marginBottom: "16px" }}>
<Card hoverable onClick={this.switchTraffic}>
<Statistic
precision={2}
prefix={<ArrowUpOutlined />}
title="上传"
value={this.showUploadValue()}
suffix={this.showUploadUnit()}
/>
</Card>
</Col>
<Col xs={24} sm={12} md={6} style={{ marginBottom: "16px" }}>
<Card hoverable onClick={this.switchTraffic}>
<Statistic
precision={2}
prefix={<ArrowDownOutlined />}
title="下载"
value={this.showDownloadValue()}
suffix={this.showDownloadUnit()}
/>
</Card>
</Col>
</Row>
</div>
);
};
