How to use the @uform/react.createVirtualBox function in @uform/react

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

} from '../type'

const { Row, Col } = Grid

const normalizeCol = (
  col: { span: number; offset?: number } | number,
  defaultValue: { span: number } = { span: 0 }
): { span: number; offset?: number } => {
  if (!col) {
    return defaultValue
  } else {
    return typeof col === 'object' ? col : { span: col }
  }
}

export const FormLayout = createVirtualBox(
  'layout',
  ({ children, ...props }) => {
    return (
      
        {value => {
          let newValue = { ...value, ...props }
          let child =
            newValue.inline || newValue.className || newValue.style ? (
              <div style="{newValue.style}">
                {children}
              </div>

FormItem,
        {
          labelAlign,
          labelTextAlign,
          labelCol,
          wrapperCol,
          autoAddColon,
          size,
          ...props
        },
        props.children
      )
    }
  )

export const FormItemGrid = createVirtualBox(
  'grid',
  class extends Component {
    renderFormItem(children) {
      const { title, help, name, extra, ...props } = this.props
      return React.createElement(
        FormLayoutItem,
        {
          label: title,
          noMinHeight: true,
          id: name,
          extra,
          help,
          ...props
        } as IFormItemGridProps,
        children
      )

{children}
          
        )
      }
    }
  )`
    margin-bottom: 30px;
    .next-card-body {
      padding-top: 30px;
      padding-bottom: 0 !important;
    }
  `
)

export const FormBlock = createVirtualBox(
  'block',
  styled(
    class extends Component {
      static defaultProps = {
        contentHeight: 'auto'
      }
      render() {
        const { children, className, ...props } = this.props
        return (
          
            {children}
          
        )
      }
    }
  )`

>
                {children}
              
            ) : (
              children
            )
          return (
            {child}
          )
        }}
      
    )
  }
)

export const FormItemGrid = createVirtualBox(
  'grid',
  class extends Component {
    public render() {
      const { title } = this.props
      if (title) {
        return this.renderFormItem(this.renderGrid())
      } else {
        return this.renderGrid()
      }
    }

    private renderFormItem(children) {
      const { title, help, name, extra, ...props } = this.props
      return React.createElement(
        FormLayoutItem,
        {

{
          labelAlign,
          labelTextAlign,
          labelCol,
          wrapperCol,
          autoAddColon,
          size,
          ...props
        },
        props.children
      )
    }
  )
}

export const FormLayout = createVirtualBox(
  'layout',
  ({ children, ...props }) => {
    return (
      
        {value => {
          const newValue = { ...value, ...props }
          const child =
            newValue.inline || newValue.className || newValue.style ? (
              <div style="{newValue.style}">
                {children}
              </div>

)
    }

    render() {
      const { title } = this.props
      if (title) {
        return this.renderFormItem(this.renderGrid())
      } else {
        return this.renderGrid()
      }
    }
  }
)

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