Merge branch 'feature-form'

Author: tangjinzhou

antd-tools/getBabelCommonConfig.js

@@ -7,6 +7,7 @@ module.exports = function (modules) {
     require.resolve('babel-plugin-transform-es3-property-literals'),
     require.resolve('babel-plugin-transform-object-assign'),
     require.resolve('babel-plugin-transform-object-rest-spread'),
+    require.resolve('babel-plugin-transform-class-properties'),
   ]
   plugins.push([require.resolve('babel-plugin-transform-runtime'), {
     polyfill: false,

components/_util/ContainerRender.jsx

@@ -1,6 +1,8 @@
 
 import Vue from 'vue'
 import PropTypes from './vue-types'
+import antRefDirective from './antRefDirective'
+Vue.use(antRefDirective)
 
 export default {
   props: {

components/_util/antRefDirective.js

@@ -0,0 +1,12 @@
+export default {
+  install: (Vue, options) => {
+    Vue.directive('ant-ref', {
+      bind: function (el, binding, vnode) {
+        binding.value(vnode)
+      },
+      unbind: function (el, binding, vnode) {
+        binding.value()
+      },
+    })
+  },
+}

components/_util/props-util.js

@@ -1,5 +1,10 @@
 import isPlainObject from 'lodash/isPlainObject'
 
+function getType (fn) {
+  const match = fn && fn.toString().match(/^\s*function (\w+)/)
+  return match ? match[1] : ''
+}
+
 const camelizeRE = /-(\w)/g
 const camelize = (str) => {
   return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
@@ -40,9 +45,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 = {}
@@ -67,8 +72,11 @@ const getOptionProps = (instance) => {
     const props = (Ctor.options || {}).props || {}
     const res = {}
     for (const [k, v] of Object.entries(props)) {
-      if (v.default !== undefined) {
-        res[k] = typeof v.default === 'function' ? v.default() : v.default
+      const def = v.default
+      if (def !== undefined) {
+        res[k] = typeof def === 'function' && getType(v.type) !== 'Function'
+          ? def.call(instance)
+          : def
       }
     }
     return { ...res, ...propsData }

components/_util/vnode.js

@@ -60,7 +60,7 @@ export function cloneElement (n, nodeProps, deep) {
     return null
   }
   const node = cloneVNode(ele, deep)
-  const { props = {}, key, on = {}, children } = nodeProps
+  const { props = {}, key, on = {}, children, directives = [] } = nodeProps
   const data = node.data || {}
   let cls = {}
   let style = {}
@@ -101,6 +101,7 @@ export function cloneElement (n, nodeProps, deep) {
     class: cls,
     domProps: { ...data.domProps, ...domProps },
     scopedSlots: { ...data.scopedSlots, ...scopedSlots },
+    directives: [...(data.directives || []), ...directives],
   })
 
   if (node.componentOptions) {

components/auto-complete/index.jsx

@@ -4,7 +4,7 @@ import Select, { AbstractSelectProps, SelectValue } from '../select'
 import Input from '../input'
 import InputElement from './InputElement'
 import PropTypes from '../_util/vue-types'
-import { getComponentFromProp, getOptionProps, filterEmpty } from '../_util/props-util'
+import { getComponentFromProp, getOptionProps, filterEmpty, isValidElement, getEvents, getStyle, getClass } from '../_util/props-util'
 
 const DataSourceItemObject = PropTypes.shape({
   value: String,
@@ -24,7 +24,7 @@ const AutoCompleteProps = {
   ...AbstractSelectProps,
   value: SelectValue,
   defaultValue: SelectValue,
-  dataSource: PropTypes.arrayOf(DataSourceItemType),
+  dataSource: PropTypes.array,
   optionLabelProp: String,
   dropdownMatchSelectWidth: PropTypes.bool,
   // onChange?: (value: SelectValue) => void;
@@ -57,6 +57,13 @@ export default {
       const { $slots } = this
       const children = filterEmpty($slots.default)
       const element = children.length ? children[0] : <Input />
+      console.log(element)
+      const eleProps = {
+        props: getOptionProps(element),
+        on: getEvents(element),
+        style: getStyle(element),
+        class: getClass(element),
+      }
       return (
         <InputElement>{element}</InputElement>
       )
@@ -97,6 +104,9 @@ export default {
       options = childArray
     } else {
       options = dataSource ? dataSource.map((item) => {
+        if (isValidElement(item)) {
+          return item
+        }
         switch (typeof item) {
           case 'string':
             return <Option key={item}>{item}</Option>

components/cascader/index.jsx

@@ -7,7 +7,7 @@ import omit from 'omit.js'
 import KeyCode from '../_util/KeyCode'
 import Input from '../input'
 import Icon from '../icon'
-import { hasProp, filterEmpty, getOptionProps } from '../_util/props-util'
+import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs } from '../_util/props-util'
 import BaseMixin from '../_util/BaseMixin'
 
 const CascaderOptionType = PropTypes.shape({
@@ -83,6 +83,7 @@ function defaultSortFilteredOption (a, b, inputValue) {
 const defaultDisplayRender = ({ labels }) => labels.join(' / ')
 
 export default {
+  inheritAttrs: false,
   name: 'ACascader',
   mixins: [BaseMixin],
   props: CascaderProps,
@@ -280,6 +281,7 @@ export default {
       [`${prefixCls}-picker-arrow-expand`]: sPopupVisible,
     })
     const pickerCls = classNames(
+      getClass(this),
       `${prefixCls}-picker`, {
         [`${prefixCls}-picker-with-value`]: inputValue,
         [`${prefixCls}-picker-disabled`]: disabled,
@@ -345,11 +347,13 @@ export default {
         keydown: this.handleKeyDown,
         change: showSearch ? this.handleInputChange : noop,
       },
+      attrs: getAttrs(this),
     }
     const children = filterEmpty($slots.default)
     const input = children.length ? children : (
       <span
         class={pickerCls}
+        style={getStyle(this)}
       >
         { showSearch ? <span class={`${prefixCls}-picker-label`}>
           {this.getLabel()}

components/checkbox/Checkbox.jsx

@@ -1,6 +1,8 @@
-
-import hasProp from '../_util/props-util'
+import classNames from 'classnames'
+import hasProp, { getClass, getStyle } from '../_util/props-util'
+import PropTypes from '../_util/vue-types'
 export default {
+  inheritAttrs: false,
   name: 'ACheckbox',
   props: {
     prefixCls: {
@@ -14,6 +16,7 @@ export default {
     value: [String, Number, Boolean],
     name: String,
     indeterminate: Boolean,
+    type: PropTypes.string.def('checkbox'),
   },
   model: {
     prop: 'checked',
@@ -52,14 +55,13 @@ export default {
     handleChange (event) {
       const targetChecked = event.target.checked
       this.$emit('input', targetChecked)
-      const { name, value, checked, checkboxGroupContext, sChecked } = this
+      const { checked, checkboxGroupContext } = this
       if ((checked === undefined && !checkboxGroupContext) || (checkboxGroupContext && checkboxGroupContext.sValue === undefined)) {
         this.sChecked = targetChecked
       }
       const target = {
-        name,
-        value,
-        checked: !sChecked,
+        ...this.$props,
+        checked: targetChecked,
       }
       this.$emit('change', {
         target,
@@ -103,9 +105,13 @@ export default {
       onChange = () => checkboxGroupContext.toggleOption({ value: props.value })
       disabled = props.disabled || checkboxGroupContext.disabled
     }
+    const classString = classNames(getClass(this), {
+      [`${prefixCls}-wrapper`]: true,
+    })
     return (
       <label
-        class={`${prefixCls}-wrapper`}
+        class={classString}
+        style={getStyle(this)}
         onMouseenter={this.onMouseEnter}
         onMouseleave={this.onMouseLeave}
       >