fix: add form wrappedComponentRef feature

vueComponent · May 25, 2018 · c5e421c · c5e421c
1 parent 098e7ea
commit c5e421c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 8 deletions.
diff --git a/components/_util/antRefDirective.js b/components/_util/antRefDirective.js
@@ -4,8 +4,11 @@ export default {
       bind: function (el, binding, vnode) {
         binding.value(vnode)
       },
+      update: function (el, binding, vnode) {
+        binding.value(vnode)
+      },
       unbind: function (el, binding, vnode) {
-        binding.value()
+        binding.value(null)
       },
     })
   },

diff --git a/components/form/demo/advanced-search.vue b/components/form/demo/advanced-search.vue
@@ -88,10 +88,16 @@ const AdvancedSearchForm = {
 const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm)
 
 export default {
+  methods: {
+    saveFormRef (inst) {
+      this.formRef = inst
+      console.log('formRef', this.formRef)
+    },
+  },
   render () {
     return (
       <div id='components-form-demo-advanced-search'>
-        <WrappedAdvancedSearchForm />
+        <WrappedAdvancedSearchForm wrappedComponentRef={(inst) => this.saveFormRef(inst)}/>
         <div class='search-result-list'>Search Result List</div>
       </div>
     )

diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
@@ -30,6 +30,10 @@ const CustomizedForm = {}
 CustomizedForm = Form.create({})(CustomizedForm);
 ```
 
+Maintain an ref for wrapped component instance, use `wrappedComponentRef`.
+Example: [demo](#components-form-demo-advanced-search)
+
+
 The following `options` are available:
 
 | Property | Description | Type |
@@ -112,10 +116,10 @@ Note:
 | Property | Description | Type | Default Value |
 | -------- | ----------- | ---- | ------------- |
 | colon | Used with `label`, whether to display `:` after label text. | boolean | true |
-| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|ReactNode |  |
+| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|slot |  |
 | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
-| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode |  |
-| label | Label text | string\|ReactNode |  |
+| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|slot |  |
+| label | Label text | string\|slot |  |
 | labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/ant-design/components/grid/#Col) |  |
 | required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
 | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string |  |

diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
@@ -30,6 +30,10 @@ const CustomizedForm = {}
 CustomizedForm = Form.create({})(CustomizedForm);
 ```
 
+如果需要为包装组件实例维护一个ref，可以使用`wrappedComponentRef`。
+参考[示例](#components-form-demo-advanced-search)
+
+
 `options` 的配置项如下。
 
 | 参数 | 说明 | 类型 |
@@ -111,10 +115,10 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true |
-| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode |  |
+| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|slot |  |
 | hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |
-| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode |  |
-| label | label 标签的文本 | string\|ReactNode |  |
+| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|slot |  |
+| label | label 标签的文本 | string\|slot |  |
 | labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/ant-design/components/grid-cn/#Col) |  |
 | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string |  |

diff --git a/components/vc-form/src/createBaseForm.jsx b/components/vc-form/src/createBaseForm.jsx
@@ -91,6 +91,12 @@ function createBaseForm (option = {}, mixins = []) {
       mounted () {
         this.wrappedComponentRef(this.$refs.WrappedComponent)
       },
+      updated () {
+        this.wrappedComponentRef(this.$refs.WrappedComponent)
+      },
+      destroyed () {
+        this.wrappedComponentRef(null)
+      },
       methods: {
         onCollectCommon (name, action, args) {
           const fieldMeta = this.fieldsStore.getFieldMeta(name)