feat(@uform/antd/next): improve form step (#431)

alibaba · Nov 25, 2019 · b446c02 · b446c02
1 parent 476d4cb
commit b446c02
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/packages/antd/src/components/FormStep.tsx b/packages/antd/src/components/FormStep.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, Fragment } from 'react'
+import React, { useMemo, useRef, Fragment } from 'react'
 import {
   createControllerBox,
   ISchemaVirtualFieldComponentProps,
@@ -30,8 +30,13 @@ type StepComponentExtendsProps = StateMap
 export const FormStep: React.FC<IFormStep> &
   StepComponentExtendsProps = createControllerBox<IFormStep>(
   'step',
-  ({ form, schema, children }: ISchemaVirtualFieldComponentProps) => {
-    const [current, setCurrent] = useState(0)
+  ({
+    form,
+    path,
+    schema,
+    current,
+    children
+  }: ISchemaVirtualFieldComponentProps) => {
     const ref = useRef(current)
     const { dataSource, ...stepProps } = schema.getExtendsComponentProps()
     const items = toArr(dataSource)
@@ -40,8 +45,11 @@ export const FormStep: React.FC<IFormStep> &
         value: cur,
         preValue: current
       })
-      setCurrent(cur)
+      form.setFieldState(path, state => {
+        state.current = cur
+      })
     }
+    current = current || 0
     useFormEffects(({ setFieldState }) => {
       items.forEach(({ name }, index) => {
         setFieldState(name, (state: any) => {

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -146,6 +146,7 @@ export interface IFieldState<FieldProps = any> {
   mounted: boolean
   unmounted: boolean
   props: FieldProps
+  [key: string]: any
 }
 export type FieldStateDirtyMap = StateDirtyMap<IFieldState>
 
@@ -209,6 +210,7 @@ export interface IFormState<FormProps = any> {
   mounted: boolean
   unmounted: boolean
   props: FormProps
+  [key: string]: any
 }
 
 export type FormStateDirtyMap = StateDirtyMap<IFormState>
@@ -239,6 +241,7 @@ export interface IVirtualFieldState<FieldProps = any> {
   mounted: boolean
   unmounted: boolean
   props: FieldProps
+  [key: string]: any
 }
 export type VirtualFieldStateDirtyMap = StateDirtyMap<IFieldState>
 

diff --git a/packages/next/src/components/FormStep.tsx b/packages/next/src/components/FormStep.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, Fragment } from 'react'
+import React, { useMemo, useRef, Fragment } from 'react'
 import {
   createControllerBox,
   ISchemaVirtualFieldComponentProps,
@@ -30,8 +30,13 @@ type StepComponentExtendsProps = StateMap
 export const FormStep: React.FC<IFormStep> &
   StepComponentExtendsProps = createControllerBox<IFormStep>(
   'step',
-  ({ props, form, children }: ISchemaVirtualFieldComponentProps) => {
-    const [current, setCurrent] = useState(0)
+  ({
+    props,
+    form,
+    path,
+    current,
+    children
+  }: ISchemaVirtualFieldComponentProps) => {
     const ref = useRef(current)
     const { dataSource, ...stepProps } = props['x-component-props'] || {}
     const items = toArr(dataSource)
@@ -40,8 +45,11 @@ export const FormStep: React.FC<IFormStep> &
         value: cur,
         preValue: current
       })
-      setCurrent(cur)
+      form.setFieldState(path, state => {
+        state.current = cur
+      })
     }
+    current = current || 0
     useFormEffects(({ setFieldState }) => {
       items.forEach(({ name }, index) => {
         setFieldState(name, (state: any) => {
@@ -52,7 +60,7 @@ export const FormStep: React.FC<IFormStep> &
         items.forEach(({ name }, index) => {
           if (!name)
             throw new Error('FormStep dataSource must include `name` property')
-          
+
           setFieldState(name, (state: any) => {
             state.display = index === value
           })