qm-ui/src/ConsoleUI.js

千米公有云管理端UI基础组件库

/**
 * @author gcy[of1518]
 * @date 16/10/11
 *
 * @description Console 与 From 耦合使用，调用fromSource进行提交、校验、清除、重置等操作
 */
import React, { Component } from 'react'
import { Row, Button } from 'antd'

const noop = () => undefined

export default class ConsoleUI extends Component {
  static defaultProps = {
    formData: {},
    formSnapData: {},
    formSource: {},
    formState: '',
    onFetch: noop,
    onSubmit: noop,
    onFormReset: noop, //表单重置
    onFormState: noop, //
  }

  constructor(props) {
    super(props)
  }

  render() {
    let {
      children,
      formData,
      formSnapData,
      formSource,
      formState,
      onSubmit,
      onFormReset,
      onFormState,
      onFetch,
    } = this.props
    let consoleBody = null
    if (children == null) {
      consoleBody = (
        <Row>
          <Button onClick={onSubmit}>确认</Button>
        </Row>
      )
    } else if (typeof children === 'function') {
      //若子组件为方法,传参执行
      consoleBody = children({ ...this.props })
    } else if (React.isValidElement(children)) {
      //若为React.element
      consoleBody = React.Children.map(children, (child, k) => {
        let props = {
          formData,
          formSnapData,
          formSource,
          formState,
          onSubmit,
          onFormReset,
          onFormState,
          onFetch,
          onClick: (data, extra) => {
            if (child.props.onClick && typeof child.props.onClick == 'function') {
              child.props.onClick(data, extra)
            }
            return onClick({
              formData,
              formSnapData,
              formSource,
              formState,
              onSubmit,
              onFormReset,
              onFormState,
              onFetch,
            })
          },
        }
        return React.cloneElement(child, { ...props })
      })
    } else if (Array.isArray(children)) {
    }
    return consoleBody
  }
}