[2.5.4] FieldArray now supports Component as renderField prop

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,43 @@
+## 2.5.4
+
+### Updated
+
+- `renderField` now supports not only a function as prop value, also it supports any Component
+- A Component will get `{ data, fields, name }` options, where `data` is an Array, `fields` is an Object with methods to manipulate that Array, `name` is a String passed as a `name` to `ArrayField` component
+
+```js
+import Form, { ArrayField } from '@detools/vue-form'
+import Tasklist from '@/components/Tasklist'
+
+// OK
+const renderAsFunction = {
+  render() {
+    methods: {
+      renderTasklist({ data, fields, name }) {
+        return <Tasklist data={data} fields={fields} name={name} />
+      },
+    },
+
+    return (
+      <Form>
+        <ArrayField name="tasklist" renderField={this.renderTasklist} />
+      </Form>
+    )
+  }
+}
+
+// NOW OK
+const renderAsComponent = {
+  render() {
+    return (
+      <Form>
+        <ArrayField name="tasklist" renderField={Tasklist} />
+      </Form>
+    )
+  }
+}
+```
+
 ## 2.5.3
 
 ### Fixed

README.md

@@ -79,6 +79,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 
 ## Changelog
 
+- [2.5.4](/CHANGELOG.md#254)
 - [2.5.3](/CHANGELOG.md#253)
 - [2.5.2](/CHANGELOG.md#252)
 - [2.5.1](/CHANGELOG.md#251)

VueForm/components/ConnectedArrayField.js

@@ -1,5 +1,6 @@
 import without from 'lodash/without'
 import last from 'lodash/last'
+import isFunction from 'lodash/isFunction'
 import { ConnectedArrayFieldMixin } from '../mixins/ConnectedControl'
 
 export default {
@@ -18,7 +19,7 @@ export default {
     asyncValidators: Array,
 
     renderField: {
-      type: Function,
+      type: [Function, Object],
       required: true,
     },
   },
@@ -169,8 +170,14 @@ export default {
       return nextArray
     },
 
-    renderComponent(value) {
-      return this.renderField({ data: value, fields: this.fields })
+    renderComponent(value, setValue, createElement) {
+      const props = { data: value, fields: this.fields, name: this.name }
+
+      if (isFunction(this.renderField)) {
+        return this.renderField(props)
+      }
+
+      return createElement(this.renderField, { props })
     },
   },
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@detools/vue-form",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "Form State Management for VueJS",
   "main": "VueForm/index.js",
   "scripts": {