bugfix (#920)

* fix(react): fix react form can not update children * fix(antd/next-components): add style.ts * fix(ci): fix ci * fix(antd/next): move styled-components to peerDeps
alibaba · Jun 30, 2020 · 4f41b56 · 4f41b56
1 parent 5f10da1
commit 4f41b56
Show file tree

Hide file tree

Showing 14 changed files with 27 additions and 69 deletions.
diff --git a/docs/zh-cn/schema-develop/faq.md b/docs/zh-cn/schema-develop/faq.md
@@ -1,51 +0,0 @@
-```jsx
-import React from 'react'
-import ReactDOM from 'react-dom'
-import {
-  SchemaForm,
-  FormButtonGroup,
-  SchemaMarkupField as Field,
-  Submit,
-  FormPath,
-  createFormActions
-} from '@formily/next'
-import { Input, FormCard, setup } from '@formily/next-components'
-import '@alifd/next/dist/next.css'
-
-setup()
-
-const actions = createFormActions()
-
-const App = () => {
-  return (
-    <SchemaForm
-      initialValues={{
-        container: [{ bb: '123' }, { bb: '123' }]
-      }}
-      effects={($, { setFieldState }) => {
-        $('onFieldChange', 'container.*.bb').subscribe(
-          async ({ value, name }) => {
-            const siblingName = FormPath.transform(name, /\d+/, $d => {
-              return `container.${$d}.aa`
-            })
-            await setFieldState(siblingName, state => {
-              state.visible = value !== '123'
-            })
-          }
-        )
-      }}
-    >
-      <Field name="container" type="array">
-        <Field name="object" type="object">
-          <FormCard>
-            <Field name="aa" required type="string" />
-            <Field name="bb" required type="string" />
-          </FormCard>
-        </Field>
-      </Field>
-      <button type="submit">Submit</button>
-    </SchemaForm>
-  )
-}
-ReactDOM.render(<App />, document.getElementById('root'))
-```

diff --git a/packages/antd-components/package.json b/packages/antd-components/package.json
@@ -27,16 +27,16 @@
     "@types/styled-components": "^4.1.19",
     "antd": "^3.14.1 || ^4.0.0",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "styled-components": "^4.1.1"
   },
   "dependencies": {
     "@ant-design/icons": "^4.0.0-rc.0",
     "@formily/antd": "^1.2.2",
     "@formily/react-schema-renderer": "^1.2.2",
     "@formily/react-shared-components": "^1.2.2",
     "@formily/shared": "^1.2.2",
-    "classnames": "^2.2.6",
-    "styled-components": "^4.1.1"
+    "classnames": "^2.2.6"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/antd-components/src/form-layout/style.ts b/packages/antd-components/src/form-layout/style.ts
diff --git a/packages/antd-components/src/form-slot/style.ts b/packages/antd-components/src/form-slot/style.ts
diff --git a/packages/antd-components/src/form-text-box/style.ts b/packages/antd-components/src/form-text-box/style.ts
diff --git a/packages/antd/package.json b/packages/antd/package.json
@@ -28,7 +28,8 @@
     "@types/styled-components": "^4.1.19",
     "antd": "^3.14.1 || ^4.0.0",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "styled-components": "^4.1.1"
   },
   "dependencies": {
     "@formily/react-schema-renderer": "^1.2.2",
@@ -37,8 +38,7 @@
     "classnames": "^2.2.6",
     "react-eva": "^1.0.0-alpha.0",
     "react-stikky": "^0.1.15",
-    "rxjs": "^6.5.1",
-    "styled-components": "^4.1.1"
+    "rxjs": "^6.5.1"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/antd/src/components/Button.tsx b/packages/antd/src/components/Button.tsx
@@ -31,14 +31,15 @@ export const Submit = ({ showLoading, onSubmit, ...props }: ISubmitProps) => {
         return (
           <Button
             onClick={e => {
-              if (props.htmlType !== 'submit') {
+              if (onSubmit) {
                 form.submit(onSubmit)
               }
               if (props.onClick) {
                 props.onClick(e)
               }
             }}
             {...props}
+            htmlType={onSubmit ? 'button' : 'submit'}
             loading={showLoading ? state.submitting : undefined}
           >
             {props.children || '提交'}

diff --git a/packages/next-components/package.json b/packages/next-components/package.json
@@ -24,15 +24,15 @@
     "@types/classnames": "^2.2.9",
     "@types/styled-components": "^4.1.19",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "styled-components": "^4.1.1"
   },
   "dependencies": {
     "@formily/next": "^1.2.2",
     "@formily/react-schema-renderer": "^1.2.2",
     "@formily/react-shared-components": "^1.2.2",
     "@formily/shared": "^1.2.2",
-    "classnames": "^2.2.6",
-    "styled-components": "^4.1.1"
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
     "@alifd/next": "^1.19.1",

diff --git a/packages/next-components/src/form-layout/style.ts b/packages/next-components/src/form-layout/style.ts
diff --git a/packages/next-components/src/form-slot/style.ts b/packages/next-components/src/form-slot/style.ts
diff --git a/packages/next-components/src/form-text-box/style.ts b/packages/next-components/src/form-text-box/style.ts
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -24,7 +24,8 @@
     "@types/classnames": "^2.2.9",
     "@types/styled-components": "^4.1.19",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "styled-components": "^4.1.1"
   },
   "dependencies": {
     "@formily/react-schema-renderer": "^1.2.2",
@@ -33,8 +34,7 @@
     "classnames": "^2.2.6",
     "react-eva": "^1.0.0-alpha.0",
     "react-stikky": "^0.1.15",
-    "rxjs": "^6.5.1",
-    "styled-components": "^4.1.1"
+    "rxjs": "^6.5.1"
   },
   "devDependencies": {
     "@alifd/next": "^1.19.1",

diff --git a/packages/next/src/components/Button.tsx b/packages/next/src/components/Button.tsx
@@ -31,14 +31,15 @@ export const Submit = ({ showLoading, onSubmit, ...props }: ISubmitProps) => {
         return (
           <Button
             onClick={e => {
-              if (props.htmlType !== 'submit') {
+              if (onSubmit) {
                 form.submit(onSubmit)
               }
               if (props.onClick) {
                 props.onClick(e)
               }
             }}
             {...props}
+            htmlType={onSubmit ? 'button' : 'submit'}
             loading={showLoading ? state.submitting : undefined}
           >
             {props.children || '提交'}

diff --git a/packages/react/src/components/Form.tsx b/packages/react/src/components/Form.tsx
@@ -4,13 +4,20 @@ import { useForm } from '../hooks/useForm'
 import FormContext from '../context'
 import { IFormProps, IFormActions, IFormAsyncActions } from '../types'
 
-export const Form: React.FunctionComponent<
-  IFormProps<any, any, any, IFormActions | IFormAsyncActions>
-> = (props = {}) => {
+export const Form: React.FunctionComponent<IFormProps<
+  any,
+  any,
+  any,
+  IFormActions | IFormAsyncActions
+>> = (props = {}) => {
   const form = useForm(props)
   return (
     <FormContext.Provider value={form}>
-      {isFn(props.children) ? props.children(form) : props.children}
+      {isFn(props.children)
+        ? props.children(form)
+        : React.Children.map(props.children, (node: React.ReactElement) => {
+            return React.cloneElement(node)
+          })}
     </FormContext.Provider>
   )
 }