How to use @uform/react - 10 common examples

: val
  if (isArr(result)) {
    result = result.map(item => ({
      ...item,
      // 必须要有一个不重复的uid
      uid:
        item.uid ||
        Math.random()
          .toFixed(16)
          .slice(2, 10)
    }))
  }
  return result
}

registerFormField(
  'upload',
  connect({
    getProps: mapStyledProps
  })(
    class Uploader extends React.Component {
      static defaultProps = {
        action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',
        listType: 'text',
        multiple: true,
        className: 'antd-uploader'
      }

      constructor(props) {
        super(props)
        this.state = {
          value: shallowClone(toArr(props.value))

{children.reduce((buf, child, key) => {
            return child
              ? buf.concat(
                  
                    {child}
                  
                )
              : buf
          }, [])}
        
      )
    }
  }
)

export const FormCard = createVirtualBox(
  'card',
  styled(
    class extends Component {
      public static defaultProps = {
        // bodyHeight: 'auto'
      }
      public render() {
        const { children, className, ...props } = this.props
        return (
          
            {children}
          
        )
      }
    }
  )`

}
    }
  )`
    margin-bottom: 30px;
    .ant-card-body {
      padding-top: 30px;
      padding-bottom: 0 !important;
    }
    &.ant-card {
      display: block;
      margin-bottom: 30px;
    }
  `
)

export const FormBlock = createVirtualBox(
  'block',
  styled(
    class extends Component {
      public static defaultProps = {
        // bodyHeight: 'auto'
      }

      public render() {
        const { children, className, ...props } = this.props
        return (
          
            {children}
          
        )
      }
    }

}
  )`
    margin-bottom: 0px;
    .next-card-body {
      padding-top: 20px;
      padding-bottom: 0 !important;
    }
    &.next-card {
      border: none;
      padding: 0 15px;
      padding-bottom: 15px;
    }
  `
)

export const FormTextBox = createControllerBox(
  'text-box',
  styled(({ children, schema, className }) => {
    const { title, help, text, name, extra, ...props } = schema['x-props']
    const ref: React.RefObject = useRef()
    const arrChildren = toArr(children)
    const split = String(text).split('%s')
    let index = 0
    useLayoutEffect(() => {
      if (ref.current) {
        const elements = ref.current.querySelectorAll('.text-box-field')
        const syncLayouts = Array.prototype.map.call(
          elements,
          (el: HTMLElement) => {
            return [
              el,
              () => {

padding-bottom: 15px;
      display: block;
      box-shadow: none;
    }
    .ant-card-head {
      padding: 0 !important;
      min-height: 24px;
      font-weight: normal;
    }
    .ant-card-head-title {
      padding: 0;
    }
  `
)

export const FormTextBox = createControllerBox(
  'text-box',
  styled(({ children, schema, className }) => {
    const { title, help, text, name, extra, ...props } = schema['x-props']
    const ref: React.RefObject = useRef()
    const arrChildren = toArr(children)
    const split = String(text).split('%s')
    useLayoutEffect(() => {
      if (ref.current) {
        const elements = ref.current.querySelectorAll('.text-box-field')
        const syncLayouts = Array.prototype.map.call(
          elements,
          (el: HTMLElement) => {
            return [
              el,
              () => {
                const ctrl = el.querySelector(

import { connect, registerFormField } from '@uform/react'
import { Checkbox } from 'antd'
import {
  transformDataSourceKey,
  mapStyledProps,
  mapTextComponent
} from '../utils'

const { Group: CheckboxGroup } = Checkbox

registerFormField(
  'checkbox',
  connect({
    getProps: mapStyledProps,
    getComponent: mapTextComponent
  })(transformDataSourceKey(CheckboxGroup, 'options'))
)

registerFormField(
  'month',
  connect({
    getValueFromEvent(_, value) {
      return transformMoment(value)
    },
    getProps: compose(
      mapStyledProps,
      mapMomentValue
    ),
    getComponent: mapTextComponent
  })(MonthPicker)
)

registerFormField(
  'week',
  connect({
    getValueFromEvent(_, value) {
      return transformMoment(value, 'gggg-wo')
    },
    getProps: compose(
      mapStyledProps,
      props => {
        if (isStr(props.value) && props.value) {
          const parsed = props.value.match(/\D*(\d+)\D*(\d+)\D*/) || [
            '',
            '',
            ''
          ]
          props.value = moment(parsed[1], 'YYYY').add(parsed[2] - 1, 'weeks')
        }

import React from 'react'
import { connect, registerFormField } from '@uform/react'
import { Slider } from 'antd'
import { mapStyledProps } from '../utils'

registerFormField(
  'range',
  connect({
    defaultProps: {
      style: {
        width: 320
      }
    },
    getProps: mapStyledProps
  })(
    class Component extends React.Component {
      render() {
        const { onChange, value, min, max, marks } = this.props
        let newMarks = {}
        if (Array.isArray(marks)) {
          marks.forEach(mark => {
            newMarks[mark] = mark

import { connect, registerFormField } from '@uform/react'
import { Radio } from 'antd'
import {
  transformDataSourceKey,
  mapStyledProps,
  mapTextComponent
} from '../utils'

const { Group: RadioGroup } = Radio

registerFormField(
  'radio',
  connect({
    getProps: mapStyledProps,
    getComponent: mapTextComponent
  })(transformDataSourceKey(RadioGroup, 'options'))
)

import { connect, registerFormField } from '@uform/react'
import { acceptEnum, mapStyledProps } from '../utils'
import { Switch } from 'antd'

registerFormField(
  'boolean',
  connect({
    valueName: 'checked',
    getProps: mapStyledProps
  })(acceptEnum(Switch))
)