antd#ColProps TypeScript Examples

ResponsiveCol = ({ style, children, ...otherProps }: ColProps) => {
    const { isSmall } = useLayoutContext()
    const modifiedStyle = {
        ...style,
        maxWidth: isSmall ? '600px' : '320px',
    }

    return (
        <Col style={modifiedStyle} {...otherProps}>
            {children}
        </Col>
    )
}

StatsContainer: React.FC<ColProps> = (props) => {
    const { children, ...allProps } = props
    return <Col css={statsContainerCss} {...allProps}>{children}</Col>
}

getFormItem = (
  fields: Array<AyFormField | AySearchTableField>,
  formInstans: AnyKeyProps,
  props: AyFormProps,
  childrenType?: 'group' | 'card' | 'input-group' | 'list'
) => {
  const { span, readonly, formLayout, gutter } = props
  const ayFormProps: AyFormProps = props

  return fields.map((field: AyFormField | AySearchTableField, index: number) => {
    // 把其它属性 添加到 props 里面
    field = {
      ...field,
      props: {
        ...omitObj(field, fieldKeys),
        ...field.props
      }
    }

    const fieldSpan = field.span !== 0 ? field.span || span || 24 : span || 24

    if (field.type === FORM_TYPE_CARD) {
      let children = field.children || []
      if (!Array.isArray(children)) {
        children = [children]
      }
      let content = getFormItem(
        children as Array<AyFormField | AySearchTableField>,
        formInstans,
        ayFormProps,
        FORM_TYPE_CARD
      )
      return (
        <Col key={field.key} span={field.span || 24}>
          <AyCard title={field.title} {...field.props}>
            <Row gutter={gutter}>{content}</Row>
          </AyCard>
        </Col>
      )
    }
    if (childrenType === FORM_TYPE_LIST) {
      // debugger
    }

    let visible = true

    // 隐藏该项目，保留占位，但是保留值
    if (field.visible !== undefined) {
      visible = typeof field.visible === 'function' ? field.visible() : field.visible
    }

    let hidden = false

    // 隐藏该项目，不保留占位，但是保留值
    if (field.hidden !== undefined) {
      hidden = typeof field.hidden === 'function' ? field.hidden() : field.hidden
    }

    // 隐藏该项，只显示占位，保留 form 值
    if (!visible || hidden) {
      field = getNoVisibleField(field)
    }

    // 设置 Form.Item 的属性
    let formItemProps: AnyKeyProps = {
      ...field.formItemProps,
      label: field.title,
      name: field.key,
      extra: field.help
    }

    // 如果自元素类型是列表，则重置 name，此时一定有 field.formItemProps
    if (childrenType === FORM_TYPE_LIST) {
      formItemProps.name = field.formItemProps.name
    }

    // 组合元素的 formItem 不需要样式
    if (childrenType === FORM_TYPE_GROUP || childrenType === FORM_TYPE_INPUT_GROUP) {
      formItemProps.noStyle = true
    }

    // 设定 开关、多选框 等的值类型 （这是 ant design form 的限制）
    if (field.type && fieldMap[field.type]) {
      formItemProps.valuePropName = fieldMap[field.type].valuePropName || 'value'
    }

    // 设置每个【表单项】的占位
    const colProps: ColProps = {
      span: fieldSpan,
      offset: field.offset
    }

    // 填充 rules 属性
    if (field.rules) {
      formItemProps.rules = [...field.rules]
    }

    // 填充快捷 required 属性
    if (field.required) {
      let rule = { required: true, message: getPlaceholder(field) + locale.form.requiredText }
      if (field.children && field.type !== FORM_TYPE_CHECKBOX) {
        formItemProps.label = (
          <span>
            <span className="required-mark">*</span>
            {field.title}
          </span>
        )
      } else {
        if (formItemProps.rules) {
          formItemProps.rules.push(rule)
        } else {
          formItemProps.rules = [rule]
        }
      }
    }

    // 不保留占位
    if (hidden) {
      colProps.span = 0
      colProps.xs = 0
      colProps.sm = 0
      colProps.md = 0
      colProps.lg = 0
      colProps.xl = 0
    }

    // 不显示状态下 rule 无效
    if (hidden || !visible) {
      formItemProps.rules = []
    }

    // 支持 tooltip 属性
    if (field.tooltip) {
      formItemProps.label = (
        <span>
          {field.title}
          <Tooltip placement="top" title={field.tooltip}>
            <QuestionCircleOutlined style={{ marginLeft: 4 }} />
          </Tooltip>
        </span>
      )
    }

    let tag: ReactNode

    switch (field.type) {
      // 组合类型
      case FORM_TYPE_GROUP:
        tag = (
          <Row className="ay-form-group" {...field.props}>
            {getFormItem(
              field.children as Array<AyFormField | AySearchTableField>,
              formInstans,
              ayFormProps,
              FORM_TYPE_GROUP
            )}
          </Row>
        )
        break
      // 输入框组合
      case FORM_TYPE_INPUT_GROUP:
        tag = (
          <Input.Group compact {...field.props}>
            {getFormItem(
              field.children as Array<AyFormField | AySearchTableField>,
              formInstans,
              ayFormProps,
              FORM_TYPE_INPUT_GROUP
            )}
          </Input.Group>
        )
        break
      // 列表类型
      case FORM_TYPE_LIST:
        tag = (
          <AyFormList
            field={field as AyFormField}
            formInstant={formInstans}
            getFormItem={getFormItem}
            ayFormProps={ayFormProps}
          />
        )
        break

      default:
        tag = getTag(field, fields, formInstans, readonly)
        break
    }

    const content = field.render ? (
      field.render(field as AyFormField, formInstans.getFieldsValue() || getDefaultValue(fields), index)
    ) : (
      <Form.Item key={field.key} {...formItemProps}>
        {tag}
      </Form.Item>
    )

    if (formLayout === 'inline' || childrenType === FORM_TYPE_INPUT_GROUP) {
      return content
    }

    return (
      <Col key={field.key} {...colProps}>
        {content}
      </Col>
    )
  })
}