antd#Col TypeScript Examples

MiddleBlock = ({ title, content, button, t }: MiddleBlockProps) => {
  const scrollTo = (id: string) => {
    const element = document.getElementById(id) as HTMLDivElement;
    element.scrollIntoView({
      behavior: "smooth",
    });
  };
  return (
    <MiddleBlockSection>
      <Slide direction="up">
        <Row justify="center" align="middle">
          <ContentWrapper>
            <Col lg={24} md={24} sm={24} xs={24}>
              <h6>{t(title)}</h6>
              <Content>{t(content)}</Content>
              {button && (
                <Button name="submit" onClick={() => scrollTo("mission")}>
                  {t(button)}
                </Button>
              )}
            </Col>
          </ContentWrapper>
        </Row>
      </Slide>
    </MiddleBlockSection>
  );
}

StructureComponent = () => (
  <Row gutter={16} role="grid">
    <Col span={12}>
      <Card
        title="Column one header"
        tabIndex={0}
        role="gridcell"
        className={styles.focusInnerHighlight}
      >
        Content
      </Card>
    </Col>

    <Col span={12}>
      <Card
        title="Column two header"
        tabIndex={0}
        role="gridcell"
        className={styles.focusInnerHighlight}
      >
        Content
      </Card>
    </Col>
  </Row>
)

private renderAttributeItem(schema: DTGComponentPropertySchema, index: number, parentIndex: number) {
    if (!this.visible(schema, index, parentIndex)) { return null; }
    return (
      <Row key={index} style={{ lineHeight: '32px', margin: '6px 0' }}>
        <Col span={8}>
          { schema['ui:title'] }
          {
            schema['ui:description']
              ? (
                <Popover content={<RichText html={schema['ui:description'].title} />}>
                  <QuestionCircleOutlined style={{ marginLeft: '12px', cursor: 'pointer' }} />
                </Popover>
              )
              : null
          }
        </Col>
        <Col span={16}>{ this.renderAttributeComponent(schema, index, parentIndex) }</Col>
      </Row>
    );
  }

MainHeader = () => {
  const { Title, Text } = Typography;
  const location = useLocation();

  const isCartedPage: boolean = location.pathname === CART_PATH;

  return (
    <>
      <Row>
        <Col xs={20} sm={12}>
          <NavLink to={PRODUCTS_LIST_PATH}>
            <Title style={titleStyle}>KYU SHOP</Title>
          </NavLink>
        </Col>
        <Col xs={4} sm={12} style={{ textAlign: 'right' }}>
          {isCartedPage ? (
            <NavLinkIconButton
              to={PRODUCTS_LIST_PATH}
              icon="appstore"
              text="상품목록"
            />
          ) : (
            <NavLinkIconButton
              to={CART_PATH}
              icon="shopping-cart"
              text="장바구니"
            />
          )}
        </Col>
      </Row>
    </>
  );
}

Person = ({data}: PersonProps) => (
  <Col xs={24} sm={8} className="text-align-center margin-bottom contributor">
    <div>
      {data.avatarUrl ? (
        <Avatar src={data.avatarUrl} size={64} />
      ) : (
        <Avatar size={64}>{data.name.charAt(0)}</Avatar>
      )}
    </div>
    <div>
      {data.url ? (
        <a href={data.url} target="_blank" rel="noopener noreferrer">
          {data.name}
        </a>
      ) : (
        <>{data.name}</>
      )}
    </div>
    <div>
      {data.location ? `${data.location} - ` : ""}
      {data.roles.join(", ")}
    </div>
  </Col>
)

export function PerformanceWaterfall(): JSX.Element {
    return (
        <div className="apm-performance-waterfall">
            <PageHeader
                title={
                    <Row align="middle">
                        Web Performance
                        <LemonTag type="warning" style={{ marginLeft: 8 }}>
                            Beta
                        </LemonTag>
                    </Row>
                }
            />
            <Row gutter={[0, 32]}>
                <Col span={24}>
                    <EventsWithPerformanceTable />
                </Col>
                <Col span={24}>
                    <WaterfallChart />
                </Col>
                <Col span={24}>
                    <DebugPerfData />
                </Col>
            </Row>
        </div>
    )
}

export default function AuthLayout(props) {
  return (
    <StyledLayout className="layout-container">
      <Row className="content-row">
        <Col span={12} className="form-column">
          <div className="auth-form">
            <img
              src="/logo_white.png"
              width="207px"
              alt="infoImage"
            />
            {props.children}
          </div>
        </Col>
        <Col span={12} className="illustration-column">
          <span className="headline">
            Own the roadmap to your future
          </span>
        </Col>
      </Row>
    </StyledLayout>
  )
}

Title = ({ title }: { title: string }) => {
  return (
    <Row justify="center">
      <Col span={24} style={{ textAlign: 'center' }}>
        <span className="title">{title}</span>
      </Col>
    </Row>
  );
}

function App() {
    return (
        <RelayEnvironmentProvider environment={environment}>
            <Suspense fallback={
                <div className={css({textAlign: 'center'})}>
                    <Spin tip="Loading..."/>
                </div>
            }>
                <Row gutter={20}>
                    <Col span={12}>
                        <DepartmentList/>
                    </Col>
                    <Col span={12}>
                        <EmployeeList/>
                    </Col>
                </Row>
            </Suspense>
        </RelayEnvironmentProvider>
    );
}

function Animate(props: AnimatePropsType, ref: any) {
	const { value, onChange } = props
	const [dropdownVisible, setDropdownVisible] = useState(false)

	function handleChange(val: any) {
		let animatedClass = val ? `${val} animated` : undefined
		onChange && onChange(animatedClass)
	}

	function renderAnimateBox(animateName: string) {
		const animateClass = animateName ? `${animateName} animated` : ''

		return (
			<div className={styles['animate-wrap']}>
				{/* //这里一定要加上key
            //className是animate.css中的类名，显示不同动画 */}
				<div
					key="amache"
					className={classNames(styles['animate-box'], animateClass)}
				>
					Animate
				</div>
			</div>
		)
	}

	return (
		<Row gutter={10} className={styles['animate-component-warp']}>
			<Col style={{ lineHeight: 0 }} span={14}>
				<TreeSelect
					showSearch
					value={value ? value.split(' ')[0] : ''}
					style={{ width: '100%' }}
					dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
					placeholder="请选择"
					allowClear
					treeDefaultExpandAll
					dropdownMatchSelectWidth
					className={styles['select-box']}
					onChange={handleChange}
				>
					{map(options, (optGroup) => (
						<TreeNode
							value={optGroup.title}
							title={optGroup.title}
							key={optGroup.title}
							disabled
						>
							{map(optGroup.data, (option) => (
								<TreeNode value={option} title={option} key={option} />
							))}
						</TreeNode>
					))}
				</TreeSelect>
			</Col>
			<Col
				style={{ lineHeight: 0, position: 'relative' }}
				span={10}
				id="drop-down"
			>
				<Dropdown
					visible={dropdownVisible}
					getPopupContainer={(triggerNode: any) => triggerNode}
					overlay={renderAnimateBox(value ? value.split(' ')[0] : '')}
					placement="bottomRight"
				>
					<Button
						size={'small'}
						className={styles['animate-btn']}
						onClick={() => setDropdownVisible(!dropdownVisible)}
					>
						Animate It
					</Button>
				</Dropdown>
			</Col>
		</Row>
	)
}

export function BasicLayout(props: React.PropsWithChildren<any>) {
  return (
    <Layout>
      <br />
      <br />
      <Layout id="main-content-wrap" className="main-content-wrap">
        <Row gutter={16}>
          <Col className="gutter-row" span={2}/>
          <Col className="gutter-row" span={20}>
            <Layout.Content
              id="main-content"
              className="main-content"
              role="main"
            >
              {props.children}
            </Layout.Content>
          </Col>
          <Col className="gutter-row" span={2}/>
        </Row>
      </Layout>
    </Layout>
  );
}

export function RowInput(props: RowItemsProps): React.ReactElement {
  const { row, form, columns, prefixId } = props;
  const { getFieldDecorator } = form;

  const InputItemSpan = Math.floor(inputSpan / props.columns.length);

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement>,
    key: string
  ) => {
    const value = e.target.value;
    props.onChange?.(value, key);
  };

  return (
    <>
      {columns.map((item, index) => {
        return (
          <Col span={InputItemSpan} key={index}>
            <Form.Item>
              {getFieldDecorator(`${prefixId}.${item.name}`, {
                initialValue: row[item.name],
                rules: item.rules,
              })(
                <Input
                  onChange={(e) => handleChange(e, item.name)}
                  placeholder={item.placeholder}
                  type={item.type}
                  disabled={item.disabled}
                />
              )}
            </Form.Item>
          </Col>
        );
      })}
    </>
  );
}

SortableItem = SortableElement(
    ({
        value,
        htmlInput,
        index,
        onChange,
        onMinus,
        describe,
    }: SortableItemProps) => {
        return (
            <Row
                className={classNames(s.row, 'arrayarguments')}
                gutter={4}
                key={index}
            >
                <Col span={22}>
                    <DragHandle />
                    <Input
                        onChange={(e) => onChange(e.target.value)}
                        prefix={<div className={s.prefix}>{index}</div>}
                        suffix={htmlInput ? <HtmlSuffix /> : null}
                        placeholder={`请输入值${describe || ''}`}
                        type="text"
                        value={value}
                    />
                </Col>
                <Col span={2} className={s.btn}>
                    {true ? (
                        <Button
                            size="small"
                            onClick={() => onMinus(index)}
                            icon={<MinusOutlined />}
                        />
                    ) : null}
                </Col>
            </Row>
        );
    }
)

Contact = ({ title, content, id, t }: ContactProps) => {
  const { values, errors, handleChange, handleSubmit } = useForm(
    validate
  ) as any;

  const ValidationType = ({ type }: ValidationTypeProps) => {
    const ErrorMessage = errors[type];
    return (
      <Zoom direction="left">
        <Span erros={errors[type]}>{ErrorMessage}</Span>
      </Zoom>
    );
  };

  return (
    <ContactContainer id={id}>
      <Row justify="space-between" align="middle">
        <Col lg={12} md={11} sm={24} xs={24}>
          <Slide direction="left">
            <Block title={title} content={content} />
          </Slide>
        </Col>
        <Col lg={12} md={12} sm={24} xs={24}>
          <Slide direction="right">
            <FormGroup autoComplete="off" onSubmit={handleSubmit}>
              <Col span={24}>
                <Input
                  type="text"
                  name="name"
                  placeholder="Your Name"
                  value={values.name || ""}
                  onChange={handleChange}
                />
                <ValidationType type="name" />
              </Col>
              <Col span={24}>
                <Input
                  type="text"
                  name="email"
                  placeholder="Your Email"
                  value={values.email || ""}
                  onChange={handleChange}
                />
                <ValidationType type="email" />
              </Col>
              <Col span={24}>
                <TextArea
                  placeholder="Your Message"
                  value={values.message || ""}
                  name="message"
                  onChange={handleChange}
                />
                <ValidationType type="message" />
              </Col>
              <ButtonContainer>
                <Button name="submit">{t("Submit")}</Button>
              </ButtonContainer>
            </FormGroup>
          </Slide>
        </Col>
      </Row>
    </ContactContainer>
  );
}

CarCardsGrid = observer(() => {
  const {
    items,
    count,
    executeListQuery,
    listQueryResult: { loading, error },
    handlePaginationChange,
    entityListState
  } = useEntityList<Car>({
    listQuery: SCR_CAR_LIST,
    entityName: ENTITY_NAME,
    routingPath: ROUTING_PATH,
    paginationConfig: defaultGridPaginationConfig,
    onPagination: saveHistory
  });

  if (error != null) {
    console.error(error);
    return <RetryDialog onRetry={executeListQuery} />;
  }

  if (loading || items == null) {
    return <Spinner />;
  }

  return (
    <div className={styles.narrowLayout}>
      <Row gutter={[12, 12]} role="grid">
        {items.map(item => (
          <Col key={item.id ? getStringId(item.id) : undefined} xl={8} sm={24}>
            <Card
              title={item._instanceName}
              style={{ height: "100%" }}
              tabIndex={0}
              className={styles.focusInnerHighlight}
              role="gridcell"
            >
              {getFields(item).map(fieldName => (
                <EntityProperty
                  entityName={Car.NAME}
                  propertyName={fieldName}
                  value={item[fieldName]}
                  key={fieldName}
                />
              ))}
            </Card>
          </Col>
        ))}
      </Row>

      <div style={{ margin: "12px 0 12px 0", float: "right" }}>
        <Paging
          paginationConfig={entityListState.pagination ?? {}}
          onPagingChange={handlePaginationChange}
          total={count}
        />
      </div>
    </div>
  );
})

DetailModal = ({
  id,
  name,
  description,
  locations,
  isPublic,
  foundedOn,
  memberCount,
  memberCountIncreaseWeekly,
  postCountIncreaseDaily,
  postCountIncreaseMonthly,
}: Props) => {
  const [modalVisible, setModalVisible] = useState<boolean>(false);

  const showModal = () => {
    setModalVisible(true);
  };

  const hideModal = () => {
    setModalVisible(false);
  };

  return (
    <>
      <div data-testid="eye-icon" className="button" onClick={showModal}>
        <EyeTwoTone />
      </div>
      <AntDModal
        title={name}
        visible={modalVisible}
        onOk={hideModal}
        onCancel={hideModal}
        footer={null}
      >
        <Row>
          <Col>
            {description && <Paragraph>{description}</Paragraph>}
            {id && (
              <Paragraph className="text-align-center">
                <SiteLink id={id} />
              </Paragraph>
            )}
            {locations && (
              <Paragraph>
                Locations:
                <ul>
                  {locations.map((location, id) => (
                    <li key={id}>{location}</li>
                  ))}
                </ul>
              </Paragraph>
            )}
          </Col>
        </Row>
        <RowValue title="Created on:" value={moment(foundedOn).format("YYYY-MM-DD")} />
        <RowValue title="Members:" value={memberCount?.toString()} />
        <RowValue
          title="New members this week:"
          value={memberCountIncreaseWeekly?.toString()}
        />
        <RowValue title="Posts today:" value={postCountIncreaseDaily?.toString()} />
        <RowValue
          title="Posts this month:"
          value={postCountIncreaseMonthly?.toString()}
        />
      </AntDModal>
    </>
  );
}

export function InsightLegend(): JSX.Element {
    const { insightProps, filters } = useValues(insightLogic)
    const logic = trendsLogic(insightProps)
    const { indexedResults, hiddenLegendKeys } = useValues(logic)
    const { toggleVisibility } = useActions(logic)
    const colorList = getChartColors('white', indexedResults.length, !!filters.compare)

    return (
        <div className="insight-legend-menu">
            <div className="insight-legend-menu-scroll">
                {indexedResults &&
                    indexedResults.map((item) => {
                        return (
                            <Row key={item.id} className="insight-legend-menu-item" wrap={false}>
                                <div
                                    className="insight-legend-menu-item-inner"
                                    onClick={() => toggleVisibility(item.id)}
                                >
                                    <Col>
                                        <PHCheckbox
                                            color={colorList[item.id]}
                                            checked={!hiddenLegendKeys[item.id]}
                                            onChange={() => {}}
                                        />
                                    </Col>
                                    <Col>
                                        <InsightLabel
                                            key={item.id}
                                            seriesColor={colorList[item.id]}
                                            action={item.action}
                                            fallbackName={item.breakdown_value === '' ? 'None' : item.label}
                                            hasMultipleSeries={indexedResults.length > 1}
                                            breakdownValue={
                                                item.breakdown_value === '' ? 'None' : item.breakdown_value?.toString()
                                            }
                                            compareValue={filters.compare ? formatCompareLabel(item) : undefined}
                                            pillMidEllipsis={item?.filter?.breakdown === '$current_url'} // TODO: define set of breakdown values that would benefit from mid ellipsis truncation
                                            hideIcon
                                        />
                                    </Col>
                                </div>
                            </Row>
                        )
                    })}
            </div>
        </div>
    )
}

DatePicker: React.FC<BaseProps> = React.memo(({ value, onChange }) => {
  const { t } = useTranslation(I18nKey);

  const [_value, setValue] = useState<Moment>();

  useEffect(() => {
    if (value && isDate(value)) {
      setValue(moment(parseDate(value)));
    }
  }, [value]);

  const doUpdate = useCallback((dt: Moment) => {
    setValue(dt);
  }, []);

  const applyDate = useCallback(() => {
    if (_value && onChange) {
      onChange(`${_value.startOf("day").toISOString()}`);
    }
  }, [_value, onChange]);

  const applyButton = useCallback(
    () => (
      <Row justify="end">
        <Col>
          <Button size="small" type="primary" disabled={!_value} onClick={applyDate}>
            {t("label.apply")}
          </Button>
        </Col>
      </Row>
    ),
    [_value, applyDate, t]
  );

  return (
    <InlineDatePicker
      value={_value}
      showToday={false}
      onChange={doUpdate as AnyObject}
      renderExtraFooter={applyButton}
      className="ant-ext-sd__picker ant-ext-sd__picker--date"
    />
  );
})

Background = ({ activePath, label, overrideAttribute }: BackgroundProps) => {
  const attribute = overrideAttribute || ATTRIBUTE;
  const { mjmlJson, setMjmlJson } = useEditor();
  const [active, setActive] = useState(() => false);
  const [color, setColor] = useState(() => '#ccc');
  const [visible, path] = useVisibility({ attribute, customPath: activePath });

  useEffect(() => {
    if (visible && path) {
      const item = _.get(mjmlJson, path);
      if (item && item.attributes && item.attributes[attribute]) {
        setColor(item.attributes[attribute]);
      }
    }
    logger.log('background reloading,', path, visible);
  }, [path, visible]);

  const handleColorChange = (color: any) => {
    const hexCode = `${color.hex}${decimalToHex(color.rgb.a)}`;
    setColor(hexCode);
    if (path && visible) {
      let element = _.get(mjmlJson, path);
      element.attributes[attribute] = hexCode;
      let json = _.set(mjmlJson, path, element);

      setMjmlJson({ ...json });
    }
  };

  return visible ? (
    <>
      <Row>
        <Col flex="auto">
          <Form.Item label={label ? label : 'Background'}></Form.Item>
        </Col>

        <ColorPicker color={color} flex="none">
          <div className="swatch" onClick={() => setActive(true)}>
            <div className="color"></div>
          </div>
          {active ? (
            <div className="popover">
              <div className="cover" onClick={() => setActive(false)}></div>
              <ChromePicker disableAlpha={false} color={color} onChange={(color: any) => handleColorChange(color)} />
            </div>
          ) : null}
        </ColorPicker>
      </Row>
    </>
  ) : null;
}

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>
  );
}

Features: React.FC<FeaturesProps> = ({ title, features = [], className, style, id }) => {
  const getCards = () => {
    const children = features.map(card => (
      <Col className={styles.cardWrapper} key={card.title} md={8} xs={24}>
        <FeatureCard {...card} />
      </Col>
    ));
    return children;
  };

  // for small screen
  const getDots = () => {
    const dots: Array<Record<string, any>> = [];
    const { length } = features;
    const startTop = 45;
    const cardHeight = 350;
    const startLeftPercent = 0.028;
    const rows = length + 1;
    for (let i = 0; i < rows; i += 1) {
      const yOffset = 1;
      const top = `${startTop + cardHeight * i - yOffset}px`;
      const leftColLeft = `${startLeftPercent * 100}%`;
      const rigthColLeft = `${(startLeftPercent + 0.892) * 100}%`;
      dots.push(<div key={`${i}-0`} className={styles.dot} style={{ marginLeft: leftColLeft, marginTop: top }} />);
      dots.push(<div key={`${i}-1`} className={styles.dot} style={{ marginLeft: rigthColLeft, marginTop: top }} />);
    }

    return dots;
  };

  return (
    <div id={id} className={classNames(styles.wrapper, className)} style={style}>
      {title ? (
        <div className={classNames(styles.lefttopWithTitle, styles.lefttop)} />
      ) : (
        <div className={classNames(styles.lefttopWithoutTitle, styles.lefttop)} />
      )}
      <div className={title ? styles.rightbottom : classNames(styles.rightbottomWithoutTitle, styles.rightbottom)}>
        <div className={classNames(styles.slicerbar, styles.slicerbarv, styles.slicerbarv1)} />
        <div className={classNames(styles.slicerbar, styles.slicerbarv, styles.slicerbarv2)} />
        <div className={classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh1)} />
        <div className={classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh2)} />
        <div className={classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh3)} />
        <div className={classNames(styles.slicerbar, styles.slicerbarh, styles.slicerbarh4)} />
        {getDots()}
      </div>
      <div className={styles.content}>
        <div key="content">
          <p key="title" className={styles.title}>
            {title}
          </p>
          <div key="block" className={styles.cardsContainer}>
            <Row key="cards" className={styles.cards}>
              {getCards()}
            </Row>
          </div>
        </div>
      </div>
    </div>
  );
}

EmployeeList: FC = memo(() => {

    const [queryReference, refetch] = useTypedQueryLoader(EMPLOYEE_LIST_QUERY, EMPLOYEE_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 onDepartmentIdChange = useCallback(departmentId => {
        refetch({...queryReference!.variables, departmentId}, {fetchPolicy: "network-only"});
    }, [refetch, queryReference]);

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

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

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

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

    return (
        <>
            <Space direction="vertical" className={FULL_WIDTH}>
                <Form labelCol={{span: 8}} wrapperCol={{span: 16}} className={css({margin: "1rem"})}>
                    <Form.Item label="Name">
                        <Input value={queryReference?.variables?.name} onChange={onNameChange}/>
                    </Form.Item>
                    <Form.Item label="Department">
                        <DepartmentSelect optional value={queryReference?.variables?.departmentId} onChange={onDepartmentIdChange}/>
                    </Form.Item>
                    <Form.Item label="Supervisor">
                        <EmployeeSelect optional value={queryReference?.variables?.supervisorId} onChange={onSupvervisorIdChagne}/>
                    </Form.Item>
                    <Form.Item>
                        <Row>
                            <Col offset={8} span={16}>
                                <Space>
                                    <Button onClick={onRefreshClick}>Refresh</Button>
                                    <Button onClick={onAddEmployeeClick}>Add Employee...</Button>
                                </Space>
                            </Col>
                        </Row>
                    </Form.Item>
                </Form>
                <Suspense fallback={<Spin tip="Refetch employees..."/>}>
                    <EmployeeListImpl queryReference={queryReference!}/>
                </Suspense>
            </Space>
            {
                dialog && <EmployeeDialog listFilter={extractBusinessArgs(queryReference!)} onClose={onDialogClose}/>
            }
        </>
    );
})

GridDescription: React.FC<GridDescriptionProps> = (props) => (
  <>
    <Title>{props.title || ''}</Title>
    <Row
      gutter={[36, 4]}
      style={{
        filter: 'drop-shadow(0px 0px 25px rgba(0, 0, 0, 0.15))',
      }}
    >
      {props.descriptions.map(({label, value}, i) => (
        <Col {...columnsToSpan(props.column)} key={i}>
          <Row
            style={{
              whiteSpace: 'nowrap',
            }}
          >
            <Col
              style={{
                padding: '16px 24px',
                borderRight: '1px solid #f0f0f0',
                background: COLOR_BODY_BG1,
                fontSize: '16px',
              }}
              xs={10}
            >
              {label}
            </Col>
            <Col
              style={{
                // bottom padding is set to 0 so horizontal scroll doesn't expand height
                padding: '16px 24px 0px 24px',
                overflowX: 'auto',
                background: 'white',
              }}
              xs={14}
            >
              {value}
            </Col>
          </Row>
        </Col>
      ))}
    </Row>
  </>
)

function NumberComponent(props: NumberComponentPropsType) {
	const {
		units = UNITS,
		hasUnit = false,
		numberSpan = 13,
		value,
		unitSpan = 11,
		size,
		numberDisabled,
		onChange,
	} = props
	const { formatNumber, formatUnit = 'px' }: any = formatValue(
		value,
		units,
		hasUnit,
	)

	const [number, setNumber] = useState(formatNumber)
	const [unit, setUnit] = useState(formatUnit)
	const outputValue = hasUnit ? `${number}${unit}` : number

	useEffect(() => {
		const { formatNumber, formatUnit = 'px' }: any = formatValue(
			value,
			units,
			hasUnit,
		)
		setNumber(formatNumber)
		setUnit(formatUnit)
	}, [value, units, hasUnit,setNumber,setUnit])

	useEffect(() => {
		let timer = setTimeout(
			() => onChange && onChange(number && outputValue),
			100,
		)
		return () => clearTimeout(timer)
	}, [number, unit,onChange])

	return (
		<Row className={styles['number-unit-container']}>
			<Col span={numberSpan}>
				<InputNumber
					className={styles['input-num']}
					disabled={numberDisabled}
					value={number}
					size={size}
					onChange={(newNumber) => setNumber(newNumber)}
				/>
			</Col>
			{hasUnit && (
				<Col span={unitSpan}>
					<EnumComponent
						allowClear={false}
						value={unit}
						enumData={units}
						onChange={(newUnit) => setUnit(newUnit)}
					/>
				</Col>
			)}
		</Row>
	)
}

export function FooterText() {
  const dendronRouter = useDendronRouter();
  const engine = useEngineAppSelector((state) => state.engine);
  const { noteActive } = useNoteActive(dendronRouter.getActiveNoteId());
  const { config } = engine;

  // Sanity check
  if (!noteActive || !config) {
    return null;
  }

  const siteLastModified = ConfigUtils.getSiteLastModified(config);
  const githubConfig = ConfigUtils.getGithubConfig(config);

  const lastUpdated = ms2ShortDate(noteActive.updated);
  return (
    <Row>
      <Row>
        <Col sm={24} md={14}>
          {siteLastModified && (
            <Text type="secondary">
              Page last modified: {lastUpdated} {"   "}
            </Text>
          )}
        </Col>
        <Col sm={24} md={12}>
          {GitUtils.canShowGitLink({ config, note: noteActive }) && (
            <Link
              href={GitUtils.githubUrl({ note: noteActive, config })}
              target="_blank"
            >
              {githubConfig.editLinkText}
            </Link>
          )}
        </Col>
      </Row>
      <Col sm={24} md={12} style={{ textAlign: "right" }}>
        <Text>
          {" "}
          ? with ? using{" "}
          <Link href="https://www.dendron.so/" target="_blank">
            Dendron ?
          </Link>
        </Text>
      </Col>
    </Row>
  );
}

AnimationIterationCount: React.FC<Props> = ({
  defaultValue,
  onChange,
}) => {
  // 接管默认值
  const [value, setValue] = useState<number>(0);

  const [isInfinite, setIsInfinite] = useState<boolean>(false);

  useEffect(() => {
    if (defaultValue === 'infinite') {
      setIsInfinite(true);
    } else {
      setIsInfinite(false);
      setValue(Number(defaultValue) || 0);
    }
  }, [defaultValue]);

  const handleInfinite = useCallback(() => {
    setIsInfinite((isInfinite) => {
      if (typeof onChange === 'function') {
        if (!isInfinite === true) {
          onChange('infinite');
        } else {
          onChange(value || 0);
        }
      }
      return !isInfinite;
    });
  }, [value, onChange]);

  const onChangeNum = useCallback(
    (data) => {
      if (typeof onChange === 'function') onChange(data as number);
      setValue(data);
    },
    [onChange],
  );

  return (
    <>
      <Col span={12}>
        <NumberInput
          label="播放次数"
          placeholder="定义动画播放次数"
          unit="次"
          min={0}
          defaultValue={Number(value) || undefined}
          onChange={onChangeNum}
          disabled={isInfinite}
        />
      </Col>
      <Col span={12}>
        <Row className={s.row} gutter={4}>
          <Col className={s.label} span={2}></Col>
          <Col>
            <Checkbox checked={isInfinite} onChange={handleInfinite}>
              无限次
            </Checkbox>
          </Col>
        </Row>
      </Col>
    </>
  );
}