Fix new antd v4 progress.

erkutgokergil · Jul 11, 2020 · d502bf8 · d502bf8
1 parent 6c12c9d
commit d502bf8
Show file tree

Hide file tree

Showing 19 changed files with 217 additions and 208 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -8,7 +8,8 @@
     "es6": true
   },
   "plugins": [
-    "react"
+    "react",
+    "react-hooks"
   ],
   "parserOptions": {
     "sourceType": "module"
@@ -17,6 +18,7 @@
     // don't force es6 functions to include space before paren
     "space-before-function-paren": 0,
     "jsx-quotes":"off",
+    "react/prop-types": 0,
     "comma-dangle": "off",
     "import/no-webpack-loader-syntax": 0,
     // allow specifying true explicitly for boolean props

diff --git a/examples-v4/.eslintrc b/examples-v4/.eslintrc
@@ -0,0 +1,27 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "standard",
+    "standard-react"
+  ],
+  "env": {
+    "es6": true
+  },
+  "plugins": [
+    "react",
+    "react-hooks"
+  ],
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    // don't force es6 functions to include space before paren
+    "space-before-function-paren": 0,
+    "jsx-quotes":"off",
+    "react/prop-types": 0,
+    "comma-dangle": "off",
+    "import/no-webpack-loader-syntax": 0,
+    // allow specifying true explicitly for boolean props
+    "react/jsx-boolean-value": 0
+  }
+}
diff --git a/examples-v4/src/examples/AsyncDataSource.js b/examples-v4/src/examples/AsyncDataSource.js
@@ -19,37 +19,40 @@ const fetchCities = country => {
 }
 
 export default () => {
-  const [form] = FormBuilder.useForm()
+  const [form] = Form.useForm()
   const [cities, setCities] = useState({})
-
+  const forceUpdate = FormBuilder.useForceUpdate()
   const country = form.getFieldValue('country')
   const loading = country && !cities[country]
-  const meta = [
-    {
-      key: 'country',
-      label: 'Country',
-      widget: 'select',
-      options: ['China', 'USA', 'France'],
-      placeholder: 'Select country...',
-      initialValue: 'China',
-      dynamic: true,
-      widgetProps: {
-        onChange: () => {
-          // Clear city value when country is changed
-          form.setFieldsValue({ city: undefined })
+  const getMeta = useCallback(() => {
+    const meta = [
+      {
+        key: 'country',
+        label: 'Country',
+        widget: 'select',
+        options: ['China', 'USA', 'France'],
+        placeholder: 'Select country...',
+        initialValue: 'China',
+        dynamic: true,
+        widgetProps: {
+          onChange: () => {
+            // Clear city value when country is changed
+            form.setFieldsValue({ city: undefined })
+          },
         },
       },
-    },
-    {
-      key: 'city',
-      label: 'City',
-      widget: 'select',
-      options: country ? cities[country] || [] : [],
-      placeholder: loading ? 'Loading...' : 'Select city...',
-      widgetProps: { loading },
-      disabled: loading || !country,
-    },
-  ]
+      {
+        key: 'city',
+        label: 'City',
+        widget: 'select',
+        options: country ? cities[country] || [] : [],
+        placeholder: loading ? 'Loading...' : 'Select city...',
+        widgetProps: { loading },
+        disabled: loading || !country,
+      },
+    ]
+    return meta
+  }, [forceUpdate, country, loading, cities])
 
   const handleFinish = useCallback(values => {
     console.log('Submit: ', values)
@@ -65,8 +68,8 @@ export default () => {
 
   // If country selected but no cities in store, then it's loading
   return (
-    <Form form={form} onValuesChange={form.handleValuesChange} onFinish={handleFinish}>
-      <FormBuilder meta={meta} form={form} />
+    <Form form={form} onFinish={handleFinish} onValuesChange={forceUpdate}>
+      <FormBuilder getMeta={getMeta} form={form} />
       <Form.Item wrapperCol={{ span: 16, offset: 8 }}>
         <Button type="primary" htmlType="submit">
           Submit

diff --git a/examples-v4/src/examples/Basic.js b/examples-v4/src/examples/Basic.js
@@ -1,37 +1,49 @@
 import React, { Component } from 'react'
-import { Form, Button, Rate } from 'antd'
+import { Form, Button, Rate, Radio } from 'antd'
 import FormBuilder from 'antd-form-builder'
 
 export default class App extends Component {
-  form = FormBuilder.createForm(this)
+  formRef = React.createRef()
   handleFinish = evt => {
-    console.log('submit: ', this.form.getFieldsValue())
+    console.log('submit: ', this.formRef.current.getFieldsValue())
   }
 
-  render() {
+  getMeta = () => {
     const options = ['Apple', 'Orange', 'Banana']
     const meta = {
       columns: 1,
-      dynamicFields: '*',
       initialValues: { obj: { input: 12 } },
       fields: [
         {
           key: 'obj.input',
           label: 'Input',
           required: true,
+          initialValue: 'hello',
           tooltip: 'This is the tooltip.',
         },
-        { key: 'checkbox', label: 'Checkbox', widget: 'checkbox', initialValue: true },
+        { key: 'checkbox', label: 'Checkbox', widget: 'checkbox' },
         { key: 'rating', label: 'Rating', widget: Rate, initialValue: 2 },
         { key: 'switch', label: 'Switch', widget: 'switch', initialValue: true },
         { key: 'select', label: 'Select', widget: 'select', options },
-        { key: 'checkbox-group', label: 'Checkbox Group', widget: 'checkbox-group', options },
-        { key: 'radio-group', label: 'Radio Group', widget: 'radio-group', options },
+        {
+          key: 'checkbox-group',
+          label: 'Checkbox Group',
+          widget: 'checkbox-group',
+          options,
+        },
+        {
+          key: 'radio-group',
+          label: 'Radio Group',
+          widget: 'radio-group',
+          forwardRef: true,
+          options,
+        },
         {
           key: 'radio-button-group',
           label: 'Radio Button Group',
           widget: 'radio-group',
           buttonGroup: true,
+          forwardRef: true,
           options,
         },
         { key: 'password', label: 'Password', widget: 'password' },
@@ -41,14 +53,19 @@ export default class App extends Component {
       ],
     }
 
+    const form = this.formRef.current
+
+    // Just example of how to dynamicly change fields based on user's input
+    if (form && form.getFieldValue('checkbox')) {
+      meta.fields.splice(2, 1)
+    }
+    return meta
+  }
+
+  render() {
     return (
-      <Form
-        form={this.form}
-        layout="horizontal"
-        onValuesChange={this.form.handleValuesChange}
-        onFinish={this.handleFinish}
-      >
-        <FormBuilder meta={meta} form={this.form} />
+      <Form ref={this.formRef} layout="horizontal" onFinish={this.handleFinish}>
+        <FormBuilder getMeta={this.getMeta} form={this.formRef} />
         <Form.Item wrapperCol={{ span: 16, offset: 8 }} className="form-footer">
           <Button htmlType="submit" type="primary" onClick={() => this.forceUpdate()}>
             Submit

diff --git a/examples-v4/src/examples/ComplexLayout.js b/examples-v4/src/examples/ComplexLayout.js
@@ -3,7 +3,7 @@ import { Form, Button } from 'antd'
 import FormBuilder from 'antd-form-builder'
 
 export default () => {
-  const [form] = FormBuilder.useForm()
+  const [form] = Form.useForm()
   const handleFinish = useCallback(values => {
     console.log('Submit: ', values)
   })

diff --git a/examples-v4/src/examples/Coordinated.js b/examples-v4/src/examples/Coordinated.js
@@ -3,7 +3,7 @@ import { Form, Button } from 'antd'
 import FormBuilder from 'antd-form-builder'
 
 export default () => {
-  const [form] = FormBuilder.useForm()
+  const [form] = Form.useForm()
   const handleFinish = useCallback(values => {
     console.log('Submit: ', values)
   })

diff --git a/examples-v4/src/examples/CustomComponent.js b/examples-v4/src/examples/CustomComponent.js
@@ -5,23 +5,27 @@ import FormBuilder from 'antd-form-builder'
 const Option = Select.Option
 // Here define a custom component just for layout
 // For demo, it accept price string like "18.8 USD"
-const PriceInput = ({ value, onChange }) => (
-  <Row gutter={10}>
-    <Col span={16}>
-      <InputNumber
-        style={{ width: '100%' }}
-        value={value.price}
-        onChange={v => onChange({ price: v, currency: value.currency })}
-      />
-    </Col>
-    <Col span={8}>
-      <Select value={value.currency} onChange={v => onChange({ price: value.price, currency: v })}>
-        <Option value="RMB">RMB</Option>
-        <Option value="USD">USD</Option>
-      </Select>
-    </Col>
-  </Row>
-)
+const PriceInput = ({ value, onChange }) =>
+  value ? (
+    <Row gutter={10}>
+      <Col span={16}>
+        <InputNumber
+          style={{ width: '100%' }}
+          value={value.price}
+          onChange={v => onChange({ price: v, currency: value.currency })}
+        />
+      </Col>
+      <Col span={8}>
+        <Select
+          value={value.currency}
+          onChange={v => onChange({ price: value.price, currency: v })}
+        >
+          <Option value="RMB">RMB</Option>
+          <Option value="USD">USD</Option>
+        </Select>
+      </Col>
+    </Row>
+  ) : null
 // This widget is just a wrapper of Input to add a button
 const CaptchaInput = props => (
   <Row gutter={10}>
@@ -34,39 +38,20 @@ const CaptchaInput = props => (
   </Row>
 )
 export default () => {
-  const [form] = FormBuilder.useForm()
+  const [form] = Form.useForm()
   const handleFinish = useCallback(values => {
     console.log('Submit: ', values)
   })
-
   const meta = [
     { key: 'product', label: 'Product' },
     {
       key: '_temp_price_currency',
       label: 'Price',
       // Set forwardRef to true if use functional component as field widget
-      // to remove warnings
+      // to avoid warnings
       forwardRef: true,
       widget: PriceInput,
-      normalize(value, prevValue, allValues) {
-        return {
-          price: allValues.price,
-          currency: allValues.currency,
-        }
-      },
-      widgetProps: {
-        onChange(obj) {
-          console.log('obj:', obj)
-          // setTimeout(() => form.setFieldsValue(obj), 500)
-        },
-      },
-      getInitialValue(f, allValues) {
-        console.log('all values: ', allValues)
-        return {
-          price: allValues.price,
-          currency: allValues.currency,
-        }
-      },
+      initialValue: { price: 8, currency: 'USD' },
     },
     {
       key: 'captcha',
@@ -108,7 +93,7 @@ export default () => {
 
   return (
     <Form form={form} onFinish={handleFinish} style={{ width: '500px' }}>
-      <FormBuilder meta={meta} form={form} initialValues={{ price: 8, currency: 'USD' }} />
+      <FormBuilder meta={meta} form={form} />
       <Form.Item wrapperCol={{ span: 16, offset: 8 }}>
         <Button type="primary" htmlType="submit">
           Submit

diff --git a/examples-v4/src/examples/DynamicFields.js b/examples-v4/src/examples/DynamicFields.js
@@ -1,34 +1,37 @@
 import React, { useCallback } from 'react'
 import { Form, Button } from 'antd'
 import FormBuilder from 'antd-form-builder'
-window.r2 = React
+
 export default () => {
-  const [form] = FormBuilder.useForm()
+  const [form] = Form.useForm()
   const handleFinish = useCallback(values => {
     console.log('Submit: ', values)
   })
 
-  const meta = [
-    {
-      key: 'favoriteFruit',
-      label: 'Favorite Fruit',
-      widget: 'radio-group',
-      options: ['Apple', 'Orange', 'Other'],
-      initialValue: 'Apple',
-    },
-  ]
+  const getMeta = useCallback(() => {
+    const meta = [
+      {
+        key: 'favoriteFruit',
+        label: 'Favorite Fruit',
+        widget: 'radio-group',
+        options: ['Apple', 'Orange', 'Other'],
+        initialValue: 'Apple',
+      },
+    ]
 
-  // Push other input if choose others
-  if (form.getFieldValue('favoriteFruit') === 'Other') {
-    meta.push({
-      key: 'otherFruit',
-      label: 'Other',
-    })
-  }
+    // Push other input if choose others
+    if (form.getFieldValue('favoriteFruit') === 'Other') {
+      meta.push({
+        key: 'otherFruit',
+        label: 'Other',
+      })
+    }
+    return meta
+  }, [form])
 
   return (
-    <Form form={form} onValuesChange={form.handleValuesChange} onFinish={handleFinish}>
-      <FormBuilder meta={meta} form={form} />
+    <Form form={form} onFinish={handleFinish}>
+      <FormBuilder getMeta={getMeta} form={form} />
       <Form.Item wrapperCol={{ span: 16, offset: 8 }}>
         <Button type="primary" htmlType="submit">
           Submit