@ant-design/icons#ArrowDownOutlined TypeScript Examples

The following examples show how to use @ant-design/icons#ArrowDownOutlined. 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 vote down vote up
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: ChartSelectedDrill.tsx    From datart with Apache License 2.0 6 votes vote down vote up
ChartSelectedDrill: FC<{ fontSize?: string /** eg. 32px */ }> = memo(
  ({ fontSize }) => {
    const { drillOption, onDrillOptionChange } = useContext(ChartDrillContext);

    return (
      <StyledChartSelectedDrill
        visibility={Boolean(drillOption?.canSelect)}
        fontSize={fontSize || FONT_SIZE_HEADING}
        className={classnames({
          active: drillOption?.isSelectedDrill,
        })}
        onClick={() => {
          if (drillOption) {
            drillOption?.toggleSelectedDrill();
            onDrillOptionChange?.(drillOption);
          }
        }}
      >
        <ArrowDownOutlined />
      </StyledChartSelectedDrill>
    );
  },
)
Example #3
Source File: index.tsx    From visual-layout with MIT License 5 votes vote down vote up
Project: React.FC<{
  project: ProjectObject;
  appService: AppService;
  setVisible: (visible: boolean) => void;
}> = ({ project, appService, setVisible }) => {
  const operation = [
    {
      key: 'EditOutlined',
      icon: (
        <div
          className={styles.item}
          onClick={() => {
            appService.set(project.id);
            setVisible(false);
          }}
        >
          <EditOutlined />
        </div>
      ),
    },
    {
      key: 'ArrowDownOutlined',
      icon: (
        <div
          className={styles.item}
          onClick={() => {
            exportCode(appService.project);
          }}
        >
          <ArrowDownOutlined />
        </div>
      ),
    },
    {
      key: 'DeleteOutlined',
      icon: (
        <Popconfirm
          title="确定删除项目"
          onConfirm={() => appService.delete(project.id)}
          onCancel={() => {}}
          okText="是"
          cancelText="否"
        >
          <div className={styles.item}>
            <DeleteOutlined style={{ color: 'red' }} />
          </div>
        </Popconfirm>
      ),
    },
  ];

  const isSelect = appService.project.id === project.id;

  return (
    <div className={styles.container}>
      <div className={styles.operation}>
        <span className={isSelect ? styles.select : ''} />
        {operation.map(({ key, icon }) => (
          <div key={key}>{icon}</div>
        ))}
      </div>
      <div className={styles.info}>
        <div>
          <span>项目名: </span>
          <span>{project.name ? project.name : '--'}</span>
        </div>
        <div>
          <span>项目描述: </span>
          <span>{project.description ? project.description : '--'}</span>
        </div>
      </div>
    </div>
  );
}
Example #4
Source File: index.tsx    From nanolooker with MIT License 5 votes vote down vote up
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 vote down vote up
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 vote down vote up
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: InviteSignup.tsx    From posthog-foss with MIT License 4 votes vote down vote up
function UnauthenticatedAcceptInvite({ invite }: { invite: PrevalidatedInvite }): JSX.Element {
    const [formValues, setFormValues] = useState({
        firstName: invite?.first_name || '',
        password: '',
        emailOptIn: true,
    })
    const [formState, setFormState] = useState({ submitted: false, passwordInvalid: false })
    const passwordInputRef = useRef<Input | null>(null)
    const { acceptInvite } = useActions(inviteSignupLogic)
    const { acceptedInviteLoading } = useValues(inviteSignupLogic)
    const { socialAuthAvailable } = useValues(preflightLogic)

    const parentContainerRef = useRef<HTMLDivElement | null>(null) // Used for scrolling on mobile
    const mainContainerRef = useRef<HTMLDivElement | null>(null) // Used for scrolling on mobile

    const goToMainContent = (): void => {
        const yPos = mainContainerRef.current ? mainContainerRef.current.getBoundingClientRect().top : null
        if (yPos) {
            parentContainerRef.current?.scrollTo(0, yPos)
        }
    }

    const handlePasswordChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
        const { value } = e.target
        setFormValues({ ...formValues, password: value })
        if (value.length >= 8) {
            setFormState({ ...formState, passwordInvalid: false })
        } else {
            setFormState({ ...formState, passwordInvalid: true })
        }
    }

    const handleFormSubmit = (e: React.FormEvent<EventTarget>): void => {
        e.preventDefault()
        if (formState.passwordInvalid) {
            setFormState({ ...formState, submitted: true })
            if (passwordInputRef.current) {
                passwordInputRef.current.focus()
            }
            return
        }

        const payload = {
            first_name: formValues.firstName,
            password: formValues.password,
            email_opt_in: formValues.emailOptIn,
        }
        acceptInvite(payload)
    }

    return (
        <div className="unauthenticated-invite" ref={parentContainerRef}>
            <Row>
                <Col span={24} md={10} className="image-showcase-container">
                    <div className="image-showcase ant-col-24 ant-col-md-10">
                        <div className="the-mountains" />
                        <div className="main-logo">
                            <img src={smLogo} alt="" />
                        </div>
                        <div className="showcase-content">
                            <h1 className="page-title">
                                Hello{invite?.first_name ? ` ${invite.first_name}` : ''}! You've been invited to join
                            </h1>
                            <div className="company">{invite?.organization_name || 'us'}</div>
                            <h1 className="page-title">on PostHog</h1>
                            <div className="mobile-continue">
                                <Button icon={<ArrowDownOutlined />} type="default" onClick={goToMainContent}>
                                    Continue
                                </Button>
                            </div>
                        </div>
                    </div>
                </Col>
                <Col span={24} md={14} className="rhs-content" ref={mainContainerRef}>
                    <div className="rhs-inner">
                        <SocialLoginButtons
                            title="Continue with a provider"
                            caption={`Remember to log in with ${invite?.target_email}`}
                            queryString={invite ? `?invite_id=${invite.id}` : ''}
                        />
                        <div className="password-login">
                            <h3 className="l3 text-center">
                                {socialAuthAvailable ? 'Or create your own password' : 'Create your PostHog account'}
                            </h3>
                            <form onSubmit={handleFormSubmit}>
                                <div className="input-set">
                                    <label htmlFor="email">Email</label>
                                    <Input type="email" disabled id="email" value={invite?.target_email} />
                                </div>
                                <div
                                    className={`input-set${
                                        formState.submitted && formState.passwordInvalid ? ' errored' : ''
                                    }`}
                                    style={{ paddingBottom: 8 }}
                                >
                                    <label htmlFor="password">Password</label>
                                    <Input
                                        placeholder="*******"
                                        type="password"
                                        required
                                        disabled={acceptedInviteLoading}
                                        autoFocus={window.screen.width >= 768} // do not autofocus on small-width screens
                                        value={formValues.password}
                                        onChange={handlePasswordChanged}
                                        id="password"
                                        ref={passwordInputRef}
                                    />
                                    <span className="caption">Your password must have at least 8 characters.</span>
                                    <Suspense fallback={<></>}>
                                        <PasswordStrength password={formValues.password} />
                                    </Suspense>
                                </div>
                                <div className="input-set">
                                    <label htmlFor="first_name">First Name</label>
                                    <Input
                                        placeholder="Jane"
                                        type="text"
                                        required
                                        disabled={acceptedInviteLoading}
                                        id="first_name"
                                        value={formValues.firstName}
                                        onChange={(e) => setFormValues({ ...formValues, firstName: e.target.value })}
                                    />
                                    {invite?.first_name && (
                                        <span className="caption">
                                            Your name was provided in the invite, feel free to change it.
                                        </span>
                                    )}
                                </div>
                                <div className="mb">
                                    <Checkbox
                                        checked={formValues.emailOptIn}
                                        onChange={(e) => setFormValues({ ...formValues, emailOptIn: e.target.checked })}
                                        disabled={acceptedInviteLoading}
                                        style={{ fontSize: 12, color: 'var(--muted)' }}
                                    >
                                        Send me product and security updates
                                    </Checkbox>
                                </div>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    data-attr="password-signup"
                                    disabled={formState.submitted && formState.passwordInvalid}
                                    loading={acceptedInviteLoading}
                                    block
                                >
                                    Continue
                                </Button>
                            </form>
                            <div className="mt text-center">
                                By clicking continue you agree to our{' '}
                                <a href="https://posthog.com/terms" target="_blank" rel="noopener">
                                    Terms of Service
                                </a>{' '}
                                and{' '}
                                <a href="https://posthog.com/privacy" target="_blank" rel="noopener">
                                    Privacy Policy
                                </a>
                                .
                            </div>
                            <div className="mt text-center text-muted" style={{ marginBottom: 60 }}>
                                Already have an account? <Link to="/login">Log in</Link>
                            </div>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    )
}
Example #8
Source File: PlayerEvents.tsx    From posthog-foss with MIT License 4 votes vote down vote up
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 #9
Source File: Icon.tsx    From html2sketch with MIT License 4 votes vote down vote up
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 #10
Source File: EditItem.tsx    From fe-v5 with Apache License 2.0 4 votes vote down vote up
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: EditItem.tsx    From fe-v5 with Apache License 2.0 4 votes vote down vote up
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 #12
Source File: UnControlledTableHeaderPanel.tsx    From datart with Apache License 2.0 4 votes vote down vote up
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 #13
Source File: useExtraBtn.tsx    From amiya with MIT License 4 votes vote down vote up
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 #14
Source File: App.tsx    From pcap2socks-gui with MIT License 4 votes vote down vote up
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>
    );
  };