antd#Row 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>
)

Demo = () => {
  const generator = React.useRef(null);

  return (
    <React.Fragment>
      <Row>
        <Button type="primary" onClick={() => { console.log(generator.current?.getSchemaValue()); }}>获取schema</Button>
      </Row>
      <DripTableGenerator
        ref={generator}
        style={{ height: 720 }}
        schema={initialSchema}
        dataSource={mockData}
        onExportSchema={(schema) => { console.log(schema); }}
      />
    </React.Fragment>
  );
}

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

PeopleRow = ({people}: ContributorsPeopleProps) => (
  <Row
    className="normal-width"
    justify="center"
    gutter={{xs: 8, sm: 16, md: 24, lg: 32}}
    align="top"
  >
    {people.map((person, key) => (
      <Person data={person} key={key} />
    ))}
  </Row>
)

function SelectItem({ icon, label, description, onClick }: SelectItemInterface): JSX.Element {
    return (
        <div onClick={onClick}>
            <Row align={'middle'}>
                {icon}
                <div style={{ fontSize: 14, fontWeight: 500, marginLeft: 8 }}>{label}</div>
            </Row>
            {description && <div style={{ fontSize: 12, color: 'rgba(0, 0, 0, 0.5)' }}>{description}</div>}
        </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 ColorTable({ palette, onChange }) {
  const columns = [
    {
      title: '#',
      render(r, v, idx) {
        return idx + 1;
      },
    },
    {
      title: '色值',
      dataIndex: 'color',
    },
    {
      title: '点击调整',
      dataIndex: 'color',
      render(val, _, idx) {
        return (
          <Popover
            trigger="click"
            content={
              <SketchPicker
                disableAlpha
                presetColors={[]}
                color={val}
                onChangeComplete={(evt) => {
                  const nextBasicColors = [...palette.basicColors];
                  nextBasicColors.splice(idx, 1, evt.hex);
                  onChange({
                    ...palette,
                    basicColors: nextBasicColors,
                  });
                }}
              />
            }
          >
            <Row justify="center">
              <div
                style={{
                  width: 30,
                  height: 30,
                  boxShadow: `0 0 8px rgba(0, 0, 0, 0.2)`,
                  cursor: 'pointer',
                  backgroundColor: val,
                }}
              />
            </Row>
          </Popover>
        );
      },
    },
    {
      title: '说明',
      dataIndex: 'desc',
    },
  ];

  const dataSource = palette.basicColors.map((color, idx) => ({
    color,
    desc: paletteDesc[idx],
  }));

  return (
    <Table
      size="small"
      rowKey="desc"
      bordered
      columns={columns}
      pagination={false}
      dataSource={dataSource}
    />
  );
}

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

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