feat: add form

Author: tangjinzhou

components/_util/props-util.js

@@ -40,9 +40,9 @@ const filterProps = (props, propsData = {}) => {
   return res
 }
 const getSlots = (ele) => {
-  let componentOptions = ele.componentOptions
+  let componentOptions = ele.componentOptions || {}
   if (ele.$vnode) {
-    componentOptions = ele.$vnode.componentOptions
+    componentOptions = ele.$vnode.componentOptions || {}
   }
   const children = componentOptions.children || []
   const slots = {}

components/form/Form.jsx

@@ -0,0 +1,193 @@
+import PropTypes from '../_util/vue-types'
+import classNames from 'classnames'
+import isRegExp from 'lodash/isRegExp'
+import createDOMForm from '../vc-form/src/createDOMForm'
+import createFormField from '../vc-form/src/createFormField'
+import FormItem from './FormItem'
+import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants'
+import { initDefaultProps } from '../_util/props-util'
+
+export const FormCreateOption = {
+  onFieldsChange: PropTypes.func,
+  onValuesChange: PropTypes.func,
+  mapPropsToFields: PropTypes.func,
+  withRef: PropTypes.bool,
+}
+
+// function create
+export const WrappedFormUtils = {
+  /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值 */
+  getFieldsValue: PropTypes.func,
+  /** 获取一个输入控件的值*/
+  getFieldValue: PropTypes.func,
+  /** 设置一组输入控件的值*/
+  setFieldsValue: PropTypes.func,
+  /** 设置一组输入控件的值*/
+  setFields: PropTypes.func,
+  /** 校验并获取一组输入域的值与 Error */
+  validateFields: PropTypes.func,
+  // validateFields(fieldNames: Array<string>, options: Object, callback: ValidateCallback): void;
+  // validateFields(fieldNames: Array<string>, callback: ValidateCallback): void;
+  // validateFields(options: Object, callback: ValidateCallback): void;
+  // validateFields(callback: ValidateCallback): void;
+  // validateFields(): void;
+  /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */
+  validateFieldsAndScroll: PropTypes.func,
+  // validateFieldsAndScroll(fieldNames?: Array<string>, options?: Object, callback?: ValidateCallback): void;
+  // validateFieldsAndScroll(fieldNames?: Array<string>, callback?: ValidateCallback): void;
+  // validateFieldsAndScroll(options?: Object, callback?: ValidateCallback): void;
+  // validateFieldsAndScroll(callback?: ValidateCallback): void;
+  // validateFieldsAndScroll(): void;
+  /** 获取某个输入控件的 Error */
+  getFieldError: PropTypes.func,
+  getFieldsError: PropTypes.func,
+  /** 判断一个输入控件是否在校验状态*/
+  isFieldValidating: PropTypes.func,
+  isFieldTouched: PropTypes.func,
+  isFieldsTouched: PropTypes.func,
+  /** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */
+  resetFields: PropTypes.func,
+
+  getFieldDecorator: PropTypes.func,
+}
+
+export const FormProps = {
+  layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
+  form: PropTypes.shape(WrappedFormUtils).loose,
+  // onSubmit: React.FormEventHandler<any>;
+  prefixCls: PropTypes.string,
+  hideRequiredMark: PropTypes.bool,
+}
+
+export const ValidationRule = {
+  /** validation error message */
+  message: PropTypes.string,
+  /** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
+  type: PropTypes.string,
+  /** indicates whether field is required */
+  required: PropTypes.boolean,
+  /** treat required fields that only contain whitespace as errors */
+  whitespace: PropTypes.boolean,
+  /** validate the exact length of a field */
+  len: PropTypes.number,
+  /** validate the min length of a field */
+  min: PropTypes.number,
+  /** validate the max length of a field */
+  max: PropTypes.number,
+  /** validate the value from a list of possible values */
+  enum: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
+  /** validate from a regular expression */
+  pattern: PropTypes.custom(isRegExp),
+  /** transform a value before validation */
+  transform: PropTypes.func,
+  /** custom validate function (Note: callback must be called) */
+  validator: PropTypes.func,
+}
+
+// export type ValidateCallback = (errors: any, values: any) => void;
+
+// export type GetFieldDecoratorOptions = {
+//   /** 子节点的值的属性，如 Checkbox 的是 'checked' */
+//   valuePropName?: string;
+//   /** 子节点的初始值，类型、可选值均由子节点决定 */
+//   initialValue?: any;
+//   /** 收集子节点的值的时机 */
+//   trigger?: string;
+//   /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */
+//   getValueFromEvent?: (...args: any[]) => any;
+//   /** 校验子节点值的时机 */
+//   validateTrigger?: string | string[];
+//   /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
+//   rules?: ValidationRule[];
+//   /** 是否和其他控件互斥，特别用于 Radio 单选控件 */
+//   exclusive?: boolean;
+//   /** Normalize value to form component */
+//   normalize?: (value: any, prevValue: any, allValues: any) => any;
+//   /** Whether stop validate on first rule of error for this field.  */
+//   validateFirst?: boolean;
+// };
+
+export default {
+  name: 'AForm',
+  props: initDefaultProps(FormProps, {
+    prefixCls: 'ant-form',
+    layout: 'horizontal',
+    hideRequiredMark: false,
+  }),
+  // static defaultProps = {
+  //   prefixCls: 'ant-form',
+  //   layout: 'horizontal',
+  //   hideRequiredMark: false,
+  //   onSubmit (e) {
+  //     e.preventDefault()
+  //   },
+  // };
+
+  // static propTypes = {
+  //   prefixCls: PropTypes.string,
+  //   layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
+  //   children: PropTypes.any,
+  //   onSubmit: PropTypes.func,
+  //   hideRequiredMark: PropTypes.bool,
+  // };
+
+  Item: FormItem,
+
+  createFormField: createFormField,
+
+  create: (options = {}) => {
+    return createDOMForm({
+      fieldNameProp: 'id',
+      ...options,
+      fieldMetaProp: FIELD_META_PROP,
+      fieldDataProp: FIELD_DATA_PROP,
+    })
+  },
+
+  // constructor (props) {
+  //   super(props)
+
+  //   warning(!props.form, 'It is unnecessary to pass `form` to `Form` after [email protected].')
+  // }
+
+  // shouldComponentUpdate(...args) {
+  //   return PureRenderMixin.shouldComponentUpdate.apply(this, args);
+  // }
+
+  // getChildContext () {
+  //   const { layout } = this.props
+  //   return {
+  //     vertical: layout === 'vertical',
+  //   }
+  // },
+  provide () {
+    return {
+      FormProps: this.$props,
+    }
+  },
+  methods: {
+    onSubmit (e) {
+      const { $listeners } = this
+      if (!$listeners.submit) {
+        e.preventDefault()
+      } else {
+        this.$emit('submit', e)
+      }
+    },
+  },
+
+  render () {
+    const {
+      prefixCls, hideRequiredMark, layout, onSubmit, $slots,
+    } = this
+
+    const formClassName = classNames(prefixCls, {
+      [`${prefixCls}-horizontal`]: layout === 'horizontal',
+      [`${prefixCls}-vertical`]: layout === 'vertical',
+      [`${prefixCls}-inline`]: layout === 'inline',
+      [`${prefixCls}-hide-required-mark`]: hideRequiredMark,
+    })
+
+    return <form onSubmit={onSubmit} class={formClassName}>{$slots.default}</form>
+  },
+}