antd#Space TypeScript Examples

CustomAppLayouts = () => {
    return (
      <div className={appStyles.narrowLayout}>
        <Space direction="vertical" style={{width: "100%"}}>
          <Card title="App layouts" size="small">
              <AppLayout >
                  <Header className={styles.header}>Header</Header>
                  <AppLayout>
                      <Sidebar className={styles.sider}>Sidebar</Sidebar>
                      <Content className={styles.content}>Content</Content>
                  </AppLayout>
                  <Footer className={styles.footer}>Footer</Footer>
              </AppLayout>
          </Card>
        </Space>
      </div>
    )
}

MyHeader: React.FC = () => {
  const user = useStore((state) => state.user);

  const handleChange = (e: { key: string }) => {
    if (e.key === '0') {
      localStorage.removeItem('vite-react-ts-antd-token');
      window.location.href = '/user/login';
    }
  };

  const menu = (
    <Menu onClick={handleChange}>
      <Menu.Item key="0">退出登录</Menu.Item>
    </Menu>
  );
  return (
    <Header className={cls.layout_header}>
      <Dropdown overlay={menu}>
        <Space>
          <Avatar src={logo} />
          {user?.username}
        </Space>
      </Dropdown>
    </Header>
  );
}

/**
 * Track list header component.
 */
export default function TrackListHeader(props: Props): JSX.Element {
    return (
        <div style={{ display: 'flex' }}>
            <Space>
                <a
                    target="_blank"
                    rel="noopener noreferrer"
                    href={`https://open.spotify.com/user/${props.username}`}
                    style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Image preview={false} className="spotify-icon" src={SpotifyIcon} width={100}></Image>
                </a>
                <Text className="spotify-title">Recently Played</Text>
            </Space>
        </div>
    );
}

export function PluginAboutButton({ url, disabled = false }: { url: string; disabled?: boolean }): JSX.Element {
    return (
        <Space>
            <Tooltip title="About">
                <LinkButton to={url} target="_blank" rel="noopener noreferrer" disabled={disabled}>
                    <InfoCircleOutlined />
                </LinkButton>
            </Tooltip>
        </Space>
    )
}

export default function PageHeading({
  title,
  description,
  renderEdit,
}: {
  title?: string
  description?: string
  renderEdit?: any
}) {
  return (
    <Space>
      <PageTitle title={title} />
      {description ? (
        <Tooltip placement="bottom" title={description}>
          <InfoCircleOutlined />
        </Tooltip>
      ) : null}
      {renderEdit ? renderEdit() : null}
    </Space>
  )
}

RangeSelect = (props) => {
  const { data, dataName, onChange } = props;
  const min = Math.min(...data);
  const max = Math.max(...data);
  const [info, setInfo] = useState({ min, max });
  const handleChange = (value, key) => {
    const tempInfo = Object.assign({}, info);
    tempInfo[key] = value;
    setInfo(tempInfo);

    onChange({
      key: dataName,
      value: [tempInfo.min, tempInfo.max],
    });
  };

  return (
    <Space>
      <InputNumber
        placeholder={'最小值'}
        min={min}
        max={max}
        defaultValue={min}
        onChange={(e) => handleChange(e, 'min')}
      />
      <InputNumber
        placeholder={'最大值'}
        min={min}
        max={max}
        defaultValue={max}
        onChange={(e) => handleChange(e, 'max')}
      />
    </Space>
  );
}

RadioButton = ({
  value,
  customCSS,
}: {
  value: GraphThemeEnum;
  customCSS?: string;
}) => {
  let singleSelectOptions = Object.keys(GraphThemeEnum).map(
    (k) => GraphThemeEnum[k as GraphThemeEnum]
  );
  if (!customCSS) {
    singleSelectOptions = singleSelectOptions.filter(
      (option) => option !== GraphThemeEnum.Custom
    );
  }
  const ideDispatch = ideHooks.useIDEAppDispatch();
  return (
    <Radio.Group
      onChange={(e) => {
        updateGraphTheme(e.target.value);
        ideDispatch(ideSlice.actions.setGraphTheme(e.target.value));
      }}
      value={value}
    >
      <Space direction="vertical">
        {singleSelectOptions.map((option) => (
          <Radio key={option} value={option}>
            {option}
          </Radio>
        ))}
      </Space>
    </Radio.Group>
  );
}

export function AppLayout({ children }: any) {
  return (
    <Layout>
      <Header />
      <Content
        style={{
          padding: "0 50px",
          marginTop: 64,
        }}
      >
        {children}
        <Affix style={{ position: "fixed", bottom: 13, right: 50 }}>
          <Row>
            <Space>
              <Text code>Leek v{env.LEEK_VERSION}</Text>
              <span>-</span>
              <a
                href="https://tryleek.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                Docs
              </a>
            </Space>
          </Row>
        </Affix>
      </Content>
    </Layout>
  );
}

TaskList: FC<{ keyName: string }> = memo(({ keyName }) => {
  return (
    <>
      <Form.List name={[keyName, 'list']}>
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Space
                key={key}
                style={{ display: 'flex', marginBottom: 8, justifyContent: 'space-around' }}
                align="baseline"
              >
                <Form.Item
                  {...restField}
                  name={[name, 'check']}
                  style={{ marginBottom: '16px' }}
                  valuePropName="checked"
                >
                  <Checkbox></Checkbox>
                </Form.Item>
                <Form.Item {...restField} name={[name, 'text']} style={{ marginBottom: '16px' }}>
                  <Input />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} title="移除" />
              </Space>
            ))}
            <Form.Item style={{ marginBottom: '16px' }}>
              <Button onClick={() => add()} block icon={<PlusOutlined />}>
                添加数据
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
    </>
  );
})

PanelCommonHeader: React.FC<PanelCommonHeaderProps> = React.memo(
  (props) => {
    return (
      <SectionHeader>
        <div className="flex flex-wrap text-xl justify-between">
          <div className="flex items-center">
            <div className="text-gray-500 mr-1">{props.prefix}</div>
            <div className="text-base">{props.children}</div>
            <div className="ml-2">{props.suffix}</div>
          </div>

          <Space>{props.actions}</Space>
        </div>
      </SectionHeader>
    );
  }
)

Component: React.ForwardRefRenderFunction<
  EditPolicyAccessDrawerRef,
  EditPolicyAccessDrawerProps
> = (props, ref) => {
  const { onClose } = props
  const [policy, setPolicy] = useState<IPermissionPolicy>(__defaultPolicy)
  const [dataSource, setDataSource] = useState<IPermissionAccess[]>([])

  const [visible, setVisible] = useState(false)
  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([])

  // ref
  useImperativeHandle(ref, () => {
    return {
      // 打开抽屉
      open: (policy: IPermissionPolicy) => {
        services.permissionAccess.find_all_ext_status({ id: policy.id }).then((hr) => {
          setDataSource(hr.data.resource)
          setSelectedRowKeys(hr.data.resource.filter((item) => item.status).map((item) => item.id))
        })
        setPolicy(policy)
        setVisible(true)
      },
    }
  })

  // 关闭抽屉
  const closeDrawer = useCallback(() => {
    onClose && onClose()
    setVisible(false)
  }, [onClose])

  const handleSave = useCallback(async () => {
    console.log(policy)
    services.permissionPolicy.update_access({ id: policy.id, access: selectedRowKeys })
    closeDrawer()
  }, [policy, selectedRowKeys, closeDrawer])

  return (
    <Drawer
      title="访问规则配置"
      width={720}
      onClose={closeDrawer}
      visible={visible}
      bodyStyle={{ paddingBottom: 80 }}
    >
      <Form layout="vertical" requiredMark={false}>
        <Form.Item>
          <Table
            rowKey="id"
            rowSelection={{
              selectedRowKeys,
              onChange: (keys) => setSelectedRowKeys(keys as number[]),
            }}
            columns={columns}
            dataSource={dataSource}
            size="small"
          />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button onClick={closeDrawer}>关闭</Button>
            <Button onClick={handleSave} type="primary">
              保存
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Drawer>
  )
}

CustomEntityFilterTest = observer(() => {
    const {
        items,
        listQueryResult: {loading},
        entityListState: {pagination},
        handlePaginationChange,
        handleFilterChange,
        count,
    } = useEntityList<Car>({
        listQuery: SCR_CAR_LIST,
        entityName: ENTITY_NAME,
        routingPath: ROUTING_PATH,
    });

    return (
        <div className={appStyles.narrowLayout}>
            <Space direction="vertical" style={{width: "100%"}}>
                <Card title="EntityFilter" size="small">
                    <Space direction="vertical" style={{width: "100%"}} size="middle">
                        <EntityFilter
                            entityName={ENTITY_NAME}
                            onFilterApply={handleFilterChange}
                        />
                        <List
                            itemLayout="horizontal"
                            bordered
                            loading={loading}
                            dataSource={items}
                            renderItem={(item: EntityInstance<Car>) => (
                                <List.Item>
                                    <div style={{flexGrow: 1}}>
                                        {getFields(item).map(p => (
                                            <EntityProperty
                                                entityName={ENTITY_NAME}
                                                propertyName={p}
                                                value={item[p]}
                                                key={p}
                                            />
                                        ))}
                                    </div>
                                </List.Item>
                            )}
                        />
                        <Paging
                            paginationConfig={pagination ?? {}}
                            onPagingChange={handlePaginationChange}
                            total={count}
                        />
                    </Space>
                </Card>
            </Space>
        </div>
    )
})

/**
 * Component containing Markdown snippets and a preview of the SVG widget.
 */
export default function MarkdownSnippet(props: Props): JSX.Element | null {
    const { username } = props;
    if (!username) {
        return null;
    }

    const svgSrc = `${Constants.BaseUrl}/api?user=${username}`;
    const markdownCode = `![Alt text](${svgSrc})`;
    const customCount = `![Alt text](${svgSrc}&count={count})`;
    const customWidth = `![Alt text](${svgSrc}&width={width})`;
    const uniqueTracks = `![Alt text](${svgSrc}&unique={true|1|on|yes})`;

    return (
        <Space className="vert-space" direction="vertical" size="small">
            <Title level={5}>Authenticated as {username}</Title>
            <Text>Markdown code snippet:</Text>
            <TextArea className="markdown" autoSize readOnly value={markdownCode} />
            <Text>
                For custom count (
                <b>
                    {Constants.minCount} &#8804; &#123;count&#125; &#8804; {Constants.maxCount}
                </b>
                ):
            </Text>
            <TextArea className="markdown" autoSize readOnly value={customCount} />
            <Text>
                For custom width (
                <b>
                    {Constants.minWidth} &#8804; &#123;width&#125; &#8804; {Constants.maxWidth}
                </b>
                ):
            </Text>
            <TextArea className="markdown" autoSize readOnly value={customWidth} />
            <Text>For unique tracks :</Text>
            <TextArea className="markdown" autoSize readOnly value={uniqueTracks} />
            <object type="image/svg+xml" data={svgSrc}></object>
        </Space>
    );
}

function AuthenticatedAcceptInvite({ invite }: { invite: PrevalidatedInvite }): JSX.Element {
    const { user } = useValues(userLogic)
    const { acceptInvite } = useActions(inviteSignupLogic)
    const { acceptedInviteLoading, acceptedInvite } = useValues(inviteSignupLogic)

    return (
        <div className="authenticated-invite">
            <Space className="inner" direction="vertical" align="center">
                <Row>
                    <h1 className="page-title">You have been invited to join {invite.organization_name}</h1>
                </Row>
                <Row>
                    <span>
                        You will accept the invite under your <b>existing PostHog account</b> ({user?.email})
                    </span>
                </Row>
                {user && (
                    <Row>
                        <div className="whoami-mock">
                            <div className="whoami-inner-container">
                                <WhoAmI user={user} />
                            </div>
                        </div>
                    </Row>
                )}
                <Row>
                    You can change organizations at any time by clicking on the dropdown at the top right corner of the
                    navigation bar.
                </Row>
                <div>
                    {!acceptedInvite ? (
                        <>
                            <Button
                                type="primary"
                                block
                                onClick={() => acceptInvite()}
                                disabled={acceptedInviteLoading}
                            >
                                Accept invite
                            </Button>
                            <div className="mt">
                                <Link to="/">
                                    <ArrowLeftOutlined /> Go back to PostHog
                                </Link>
                            </div>
                        </>
                    ) : (
                        <Button block onClick={() => (window.location.href = '/')}>
                            Go to PostHog <ArrowRightOutlined />
                        </Button>
                    )}
                </div>
            </Space>
        </div>
    )
}

export default function TaskGuideCard({ guide }) {
  const guideLink = (
    <>
      <a
        href={guide?.detailsUrl}
        target="_blank"
        rel="noopener noreferrer"
      >
        <img
          width={16}
          alt="external link"
          src="https://image.flaticon.com/icons/svg/25/25284.svg"
        />
      </a>
    </>
  )
  return (
    <>
      <Card
        title={guide?.title}
        bordered={false}
        style={{ marginBottom: 24 }}
        extra={guideLink}
      >
        <Space direction="vertical">
          <img
            width="100%"
            src={guide?.imageUrl}
            alt={guide?.title || 'Guide title'}
          />
          <div>{guide?.about}</div>
          <a
            href={guide?.detailsUrl as string}
            target="_blank"
            rel="noopener noreferrer"
          >
            Read More
          </a>
        </Space>
      </Card>
    </>
  )
}

ToSketchLayout: FC<FooterProps> = ({ elements, children, buttons }) => {
  const { sketchJSON, generateGroup, generateSymbol } = useSketchJSON();
  const [showJSON, setShowJSON] = useState(false);

  return (
    <div>
      {children}
      <Divider dashed />
      <Row style={{ zIndex: 99999 }}>
        <Col span={24}>
          <Row justify="space-between">
            <Col>
              <Button
                disabled={!sketchJSON}
                onClick={() => {
                  setShowJSON(!showJSON);
                }}
              >
                {showJSON ? '隐藏' : '显示'} JSON
              </Button>
            </Col>
            <Col>
              <Space>
                {buttons?.map((button) => (
                  <Button key={button.name} onClick={button.onClick}>
                    {button.name}
                  </Button>
                ))}
                <Button
                  onClick={() => {
                    generateGroup(elements);
                  }}
                >
                  转换为 Group
                </Button>
                <Button
                  type="primary"
                  onClick={() => {
                    generateSymbol(elements);
                  }}
                >
                  转换为 Symbol
                </Button>
              </Space>
            </Col>
          </Row>
        </Col>
        {showJSON ? (
          <Col span={24}>
            <Card>
              <ReactJson name="Sketch JSON" src={sketchJSON || {}} />
            </Card>
          </Col>
        ) : null}
      </Row>
    </div>
  );
}

operation = ({
  optConfig,
  isEditing,
  isAddEdit,
  save,
  isOptDelete,
  cancel,
  onDelete,
  edit,
  newAdd,
  editingKey,
  rowKey,
  multiple,
}: OperationProps): ColumnsProps[] => [
    {
      title: '操作',
      align: 'center',
      width: 120,
      ...optConfig,
      render: (item: any, record: any, index: number) => {
        const editable = isEditing(record);
        const isNewAdd = isAddEdit(record);
        if (optConfig && optConfig.render) {
          return optConfig.render(item, record, index, {
            editable,
            isNewAdd,
            save,
            cancel,
            onDelete,
            edit,
            newAdd,
            editingKey,
          });
        }
        return editable ? (
          <span>
            <Typography.Link
              onClick={() => save(record[rowKey], record, index)}
              style={{ marginRight: 8 }}
            >
              保存
            </Typography.Link>
            <Popconfirm
              title="是否取消当前行编辑?"
              okText="是"
              cancelText="否"
              onConfirm={
                // 如果是新增操作的数据，进行判断 取消时使用删除方法
                isNewAdd
                  ? onDelete.bind(this, record[rowKey], record, index)
                  : cancel.bind(this, record[rowKey])
              }
            >
              <Typography.Link>取消</Typography.Link>
            </Popconfirm>
          </span>
        ) : (
          <Space>
            <Typography.Link
              disabled={!!editingKey.length && !multiple}
              onClick={() => edit(record)}
            >
              编辑
            </Typography.Link>
            {isOptDelete && (
              <Popconfirm
                title="是否删除当前行数据?"
                okText="是"
                cancelText="否"
                onConfirm={() => onDelete(record[rowKey], record, index)}
              >
                <Typography.Link>删除</Typography.Link>
              </Popconfirm>
            )}
          </Space>
        );
      },
    },
  ]

function MainLayout() {
  const dataCfg: S2DataConfig = {
    fields: {
      columns,
    },
    meta,
    data,
  } as unknown as S2DataConfig;

  const options: S2Options = {
    width: 800,
    height: 600,
    showSeriesNumber: true,
    interaction: {
      enableCopy: true,
    },
    style: {
      cellCfg: {
        height: 32,
      },
      device: 'pc',
    },

    frozenRowCount: 2,
    frozenColCount: 1,
    frozenTrailingColCount: 1,
    frozenTrailingRowCount: 1,
    linkFieldIds: ['order_id', 'customer_name'],
    tooltip: {
      showTooltip: true,
      operation: {
        filter: true,
      },
    },
  } as S2Options;

  const s2Ref = React.useRef<SpreadSheet>(null);

  return (
    <Space direction="vertical">
      <Button
        onClick={() => {
          s2Ref.current.emit(S2Event.RANGE_FILTER, {
            filterKey: 'customer_type',
            filteredValues: ['消费者'],
          });
        }}
      >
        Filter
      </Button>

      <Button
        onClick={() => {
          s2Ref.current.emit(S2Event.RANGE_FILTER, {
            filterKey: 'customer_type',
            filteredValues: [],
          });
        }}
      >
        Reset
      </Button>
      <SheetComponent
        dataCfg={dataCfg}
        adaptive={false}
        options={options}
        sheetType={'table'}
        spreadsheet={getSpreadSheet(s2Ref)}
      />
    </Space>
  );
}

DepartmentList: FC = memo(() => {

    const [queryReference, refetch] = useTypedQueryLoader(DEPARTMENT_LIST_QUERY, DEPARRTMENT_LIST_INITIAL_QUERY_REFERENCE);

    const [dialog, setDialog] = useState(false);

    const onNameChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        const name = value !== "" ? value : undefined;
        refetch({...queryReference!.variables, name}, {fetchPolicy: 'network-only'});
    }, [refetch, queryReference]);

    const onRefreshClick = useCallback(() => {
        refetch(queryReference!.variables, {fetchPolicy: 'network-only'});
    }, [refetch, queryReference]);

    const onAddDepartmentClick = useCallback(() => {
        setDialog(true);
    }, []);

    const onDialogClose = useCallback(() => {
        setDialog(false);
    }, []);

    return (
        <>
            <Space direction="vertical" className={FULL_WIDTH}>
                <Form layout="inline" className={css({margin: "1rem"})}>
                    <Form.Item label="Name">
                        <Input value={queryReference?.variables?.name} onChange={onNameChange}/>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={onRefreshClick}>Refresh</Button>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={onAddDepartmentClick}>Add Department...</Button>
                    </Form.Item>
                </Form>
                <Suspense fallback={<Spin tip="Refetch departments..."/>}>
                    <DepartmentPagination queryReference={queryReference!}/>
                </Suspense>
            </Space>
            {
                dialog &&
                <DepartemntDialog listFilter={extractBusinessArgs(queryReference!)} onClose={onDialogClose}/>
            }
        </>
    );
})

FilterViewStringInput = ({
  fieldKey,
  label,
  entry,
  updateConfigField,
  nodeCount,
}: {
  fieldKey: string;
  label: string;
  entry: GraphConfigItem<string>;
  updateConfigField: (key: string, value: string | number | boolean) => void;
  nodeCount: number;
}) => {
  const [updateTimeout, setUpdateTimeout] = useState<NodeJS.Timeout | null>(
    null
  );

  // This timeout is designed to maximize filter responsiveness while minimizing hang times
  const handleChange = (newValue: string) => {
    const delay = nodeCount < 100 ? 0 : 400;

    if (updateTimeout) clearTimeout(updateTimeout);

    setUpdateTimeout(
      setTimeout(() => {
        updateConfigField(fieldKey, newValue);

        setUpdateTimeout(null);
      }, delay)
    );
  };

  return (
    <Space direction="vertical" style={{ margin: "0.5rem 0rem" }}>
      <Typography>{label}</Typography>
      <Input
        defaultValue={entry.value}
        onChange={(newValue) => handleChange(newValue.target.value)}
        disabled={!entry.mutable}
        placeholder={entry.placeholder || ""}
        suffix={
          <Spin
            size="small"
            style={{
              display: updateTimeout ? "inline-block" : "none",
            }}
          />
        }
        style={{
          maxWidth: 200,
        }}
      />
    </Space>
  );
}

ArrayComponent = observer(() => {
  const field = useField<ArrayFieldType>();
  return (
    <>
      <div>
        {field.value?.map((_item, index) => (
          // eslint-disable-next-line react/no-array-index-key
          <div key={index} style={{ display: 'flex-block', marginBottom: 10 }}>
            <Space>
              <Field name={index} component={[Input]} />
              <Button
                onClick={() => {
                  field.remove(index);
                }}
              >
                Remove
              </Button>
              <Button
                onClick={() => {
                  field.moveUp(index);
                }}
              >
                Move Up
              </Button>
              <Button
                onClick={() => {
                  field.moveDown(index);
                }}
              >
                Move Down
              </Button>
            </Space>
          </div>
        ))}
      </div>
      <Button
        onClick={() => {
          field.push('');
        }}
      >
        Add
      </Button>
    </>
  );
})

render (): React.ReactNode {
    if (this.props.metadata === undefined) {
      return null
    }

    const isSelectable = (
      this.props.opticalPaths.length > 1 &&
      this.props.selectedPresentationStateUID == null
    )
    const opticalPathItems: React.ReactNode[] = []
    const optionItems: React.ReactNode[] = []
    this.props.opticalPaths.forEach(opticalPath => {
      const opticalPathIdentifier = opticalPath.identifier
      const images = this.props.metadata[opticalPathIdentifier]
      const seriesInstanceUID = images[0].SeriesInstanceUID
      images[0].OpticalPathSequence.forEach(opticalPathItem => {
        const id = opticalPathItem.OpticalPathIdentifier
        const description = opticalPathItem.OpticalPathDescription
        if (opticalPath.identifier === id) {
          if (this.props.activeOpticalPathIdentifiers.includes(id)) {
            opticalPathItems.push(
              <OpticalPathItem
                key={`${seriesInstanceUID}-${id}`}
                opticalPath={opticalPath}
                metadata={images}
                isVisible={this.props.visibleOpticalPathIdentifiers.includes(id)}
                defaultStyle={this.props.defaultOpticalPathStyles[id]}
                onVisibilityChange={this.props.onOpticalPathVisibilityChange}
                onStyleChange={this.props.onOpticalPathStyleChange}
                onRemoval={this.handleItemRemoval}
                isRemovable={isSelectable}
              />
            )
          } else {
            let title
            if (description !== '') {
              title = `${id} - ${description}`
            } else {
              title = `${id}`
            }
            optionItems.push(
              <Option key={id} value={id}>{title}</Option>
            )
          }
        }
      })
    })

    let opticalPathSelector
    if (isSelectable) {
      opticalPathSelector = (
        <Space align='center' size={20} style={{ padding: '14px' }}>
          <Select
            defaultValue=''
            style={{ width: 200 }}
            onChange={this.handleItemSelectionChange}
            value={this.state.selectedOpticalPathIdentifier}
            allowClear
          >
            {optionItems}
          </Select>
          <Tooltip title='Add'>
            <Btn
              icon={<AppstoreAddOutlined />}
              type='primary'
              onClick={this.handleItemAddition}
            />
          </Tooltip>
        </Space>
      )
    }

    return (
      <Menu selectable={false}>
        {opticalPathItems}
        {opticalPathSelector}
      </Menu>
    )
  }

VisualFormItem: React.FC<IVisualFormItemProps> = (props) => {
  const { type, desc } = props;

  return (
    <React.Fragment>
      <div className={styles.itemHeader}>
        <span className={styles.itemTitleText}>{type}</span>
        <span className={styles.itemDescText}>{desc}</span>
      </div>
      <Form.List name={type}>
        {(fields, { add, remove }) => (
          <React.Fragment>
            {fields.map((field) => (
              <Space key={field.key} align={'baseline'}>
                <Form.Item
                  {...field}
                  label={'key'}
                  name={[field.name, 'key']}
                  fieldKey={[field.fieldKey, 'key']}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  {...field}
                  label={'value'}
                  name={[field.name, 'value']}
                  fieldKey={[field.fieldKey, 'value']}
                >
                  <Input />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(field.name)} />
              </Space>
            ))}
            <Form.Item>
              <Button
                block={true}
                type={'dashed'}
                icon={<PlusOutlined />}
                onClick={() => add()}
              >
                新增
              </Button>
            </Form.Item>
          </React.Fragment>
        )}
      </Form.List>
    </React.Fragment>
  );
}

render () {
        const { 
            total, 
            pageNo, 
            pageSize, 
            loading, 
            dataSource, 
            columns, 
            visible, 
            title,
            textBtn,
            currentRowData 
        } = this.state;
        const { Option } = Select;

        return (
            <DocumentTitle title={'首页'}>
                <div className="home-container">
                    <Header curActive={'active'} />

                    <div className="content clearfix">
                        <div className="list">
                            <h2>任务列表</h2>
                            <div className="list-right">
                                <Space size="middle">
                                    <Select size="large" onChange={ this.handleChange } style={{ width: 160 }} allowClear placeholder="请筛选任务状态">
                                        <Option value=''>全部</Option>
                                        <Option value={ 0 }>待办</Option>
                                        <Option value={ 1 }>完成</Option>
                                        <Option value={ 2 }>删除</Option>
                                    </Select>
                                    <Button type="primary" size="large" onClick={ this.addTask }><PlusOutlined /> 添加任务</Button>
                                </Space>
                            </div>
                        </div>
                        
                        <Table 
                            bordered
                            rowKey={ record => record.id  } 
                            dataSource={ dataSource } 
                            columns={ columns }
                            loading={ loading }
                            pagination={ false } 
                        />
                        <Pagination
                            className="pagination"
                            total={ total }
                            style={{ display: loading && total === 0 ? 'none' : '' }}
                            showTotal={total => `共 ${total} 条数据`}
                            onChange={ this.changePage }
                            current={ pageNo }
                            showSizeChanger={ false }
                            defaultPageSize={ pageSize }
                            hideOnSinglePage={ false }
                        />
                    </div>

                    <Footer />

                    <AddEditTaskForm
                        title={ title }
                        textBtn={ textBtn } 
                        visible={ visible }
                        currentRowData={ currentRowData }
                        onSubmitDrawer={ this.onSubmit }
                        onCloseDrawer={ this.onClose }
                    />
                   
                </div>
            </DocumentTitle>
        )
    }

function IndicesData() {
  return [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (name) => {
        return (
          <Space direction="horizontal">
            <Text strong>{name}</Text>
          </Space>
        );
      },
    },
    {
      title: "Docs count",
      dataIndex: "docs_count",
      key: "docs_count",
      render: (docs_count) => {
        return <Tag>{docs_count}</Tag>;
      },
    },
    {
      title: "Store size",
      dataIndex: "size",
      key: "size",
      render: (size) => {
        return <Tag>{size}</Tag>;
      },
    },
    {
      title: "Total indexed",
      dataIndex: "index_total",
      key: "index_total",
      render: (index_total) => {
        return <Tag>{index_total}</Tag>;
      },
    },
    {
      title: "Index time",
      dataIndex: "index_time",
      key: "index_time",
      render: (index_time) => {
        return <Tag>{index_time}</Tag>;
      },
    },
  ];
}

Border: FC<FormProps<valueType>> = memo(function Border({ value, onChange }) {
  const [border, setBorder] = useSetState<Partial<valueType>>({
    w: undefined,
    s: undefined,
    c: undefined,
  });

  const triggerChange = (changedValue: Partial<valueType>) => {
    onChange && onChange({ ...border, ...changedValue });
  };

  const handle = (flag: keyof valueType, val: any) => {
    if (flag === 'w' || flag === 's') {
      triggerChange({ [flag]: val });
    } else {
      triggerChange({ [flag]: val.target.value });
    }
  };
  useEffect(() => {
    if (value) {
      setBorder(value);
    }
  }, [value]);
  return (
    <Space style={{ display: 'flex' }}>
      <InputNumber
        min={0}
        style={{ width: '100%' }}
        onChange={(val) => handle('w', val)}
        value={border.w}
        title="宽度"
      />
      <Select
        data={lineList}
        valKey="key"
        valName="name"
        onChange={(val) => handle('s', val)}
        value={border.s}
      />
      <Input type={'color'} onChange={(val) => handle('c', val)} value={border.c} title="颜色" />
    </Space>
  );
})

FullModalFieldEditor: React.FC<FullModalFieldProps> = React.memo(
  (props) => {
    const [isEditing, setIsEditing] = useState(false);
    const [editingValue, setEditingValue] = useState(props.value ?? '');
    const valueTitle = useTitle(props.value);

    useEffect(() => {
      setEditingValue(props.value ?? '');
    }, [props.value]);

    const handleEditing = useCallback(() => {
      setIsEditing(!isEditing);
    }, [isEditing]);

    const handleSave = useCallback(() => {
      props.onSave?.(editingValue);
      setIsEditing(false);
    }, [props.onSave, editingValue]);

    const EditorComponent = props.renderEditor;

    return (
      <div className="flex w-full">
        {/* 内容 */}
        <div className="truncate">
          {isEditing && !_isNil(EditorComponent) ? (
            <EditorComponent value={editingValue} onChange={setEditingValue} />
          ) : (
            <span className="select-text" title={valueTitle}>
              {props.content ?? props.value}
            </span>
          )}
        </div>

        {/* 操作 */}
        <div className="ml-2">
          {!isEditing ? (
            <DelayTip title={t('编辑')}>
              <IconBtn icon="mdi:square-edit-outline" onClick={handleEditing} />
            </DelayTip>
          ) : (
            <Space>
              <DelayTip title={t('取消')}>
                <IconBtn icon="mdi:close" onClick={handleEditing} />
              </DelayTip>
              <DelayTip title={t('保存变更')}>
                <IconBtn type="primary" icon="mdi:check" onClick={handleSave} />
              </DelayTip>
            </Space>
          )}
        </div>
      </div>
    );
  }
)

export default function ColumnSelect(props: Props) {
  const { onSeverityChange, onEventTypeChange, onBusiGroupChange, onClusterChange, noLeftPadding, noRightPadding = true } = props;
  const { clusters, busiGroups } = useSelector<RootState, CommonStoreState>((state) => state.common);
  const [filteredBusiGroups, setFilteredBusiGroups] = useState(busiGroups);
  const fetchBusiGroup = (e) => {
    getBusiGroups(e).then((res) => {
      setFilteredBusiGroups(res.dat || []);
    });
  };
  const handleSearch = useCallback(debounce(fetchBusiGroup, 800), []);

  return (
    <Space style={{ marginLeft: noLeftPadding ? 0 : 8, marginRight: noRightPadding ? 0 : 8 }}>
      {onClusterChange && (
        <Select mode='multiple' allowClear style={{ minWidth: 80 }} placeholder='集群' onChange={onClusterChange} getPopupContainer={() => document.body}>
          {clusters.map((k) => (
            <Select.Option value={k} key={k}>
              {k}
            </Select.Option>
          ))}
        </Select>
      )}
      {onBusiGroupChange && (
        <Select
          allowClear
          showSearch
          style={{ minWidth: 120 }}
          placeholder='业务组'
          dropdownClassName='overflow-586'
          filterOption={false}
          onSearch={handleSearch}
          getPopupContainer={() => document.body}
          onFocus={() => {
            getBusiGroups('').then((res) => {
              setFilteredBusiGroups(res.dat || []);
            });
          }}
          onClear={() => {
            getBusiGroups('').then((res) => {
              setFilteredBusiGroups(res.dat || []);
            });
          }}
          onChange={onBusiGroupChange}
        >
          {filteredBusiGroups.map((item) => (
            <Select.Option value={item.id} key={item.id}>
              {item.name}
            </Select.Option>
          ))}
        </Select>
      )}
      {onSeverityChange && (
        <Select suffixIcon={<CaretDownOutlined />} allowClear style={{ minWidth: 80 }} placeholder='事件级别' onChange={onSeverityChange} getPopupContainer={() => document.body}>
          <Select.Option value={1}>一级告警</Select.Option>
          <Select.Option value={2}>二级告警</Select.Option>
          <Select.Option value={3}>三级告警</Select.Option>
        </Select>
      )}
      {onEventTypeChange && (
        <Select suffixIcon={<CaretDownOutlined />} allowClear style={{ minWidth: 80 }} placeholder='事件类别' onChange={onEventTypeChange} getPopupContainer={() => document.body}>
          <Select.Option value={0}>Triggered</Select.Option>
          <Select.Option value={1}>Recovered</Select.Option>
        </Select>
      )}
    </Space>
  );
}

Profile = () => {
  const {
    state: {
      uploaderProfiles,
      configuration: { defaultUploaderProfileId }
    }
  } = useAppContext();

  const { id } = useParams<{ id: string }>();

  const [curUploaderProfileId, setCurUploaderProfileId] = useState('');

  const uploaderProfileFormRef = useRef({} as UploaderProfileFormHandle);

  useEffect(() => {
    const currentId = id || (defaultUploaderProfileId as string);
    handleUploaderProfileChange(currentId);
  }, []);

  const handleUploaderProfileChange = (id: string) => {
    setCurUploaderProfileId(id);
    uploaderProfileFormRef.current.handleUploaderProfilesSelect(id);
  };

  const handleSubmit = () => {
    uploaderProfileFormRef.current.handleSubmit();
  };

  const handleDelete = () => {
    uploaderProfileFormRef.current.handleDelete();
  };

  const handleTest = () => {
    uploaderProfileFormRef.current.handleTest();
  };

  return (
    <div className="profile-page">
      <header>
        <span>上传器配置</span>
        <Divider />
      </header>
      <div className="header-menu">
        <Select
          style={{ minWidth: 120 }}
          value={curUploaderProfileId || '请选择'}
          onChange={handleUploaderProfileChange}
        >
          {uploaderProfiles.map(item => (
            <Select.Option key={item.name} value={item.id}>
              {item.name}
            </Select.Option>
          ))}
        </Select>
      </div>
      <main>
        <UploaderProfileForm ref={uploaderProfileFormRef} />
      </main>
      <footer>
        <Divider />
        <Space>
          <Button type="primary" onClick={handleSubmit}>
            更新配置
          </Button>
          <Button danger onClick={handleDelete}>
            删除
          </Button>
          <Button onClick={handleTest}>测试</Button>
        </Space>
      </footer>
    </div>
  );
}