feat(core): Support form state modified property (#717)

alibaba · Mar 12, 2020 · 68e395f · 68e395f
1 parent e6be51c
commit 68e395f
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 22 deletions.
diff --git a/docs/zh-cn/jsx-develop/form-state.md b/docs/zh-cn/jsx-develop/form-state.md
@@ -8,6 +8,7 @@
 | ------------- | ------------------------------------------- | --------------- | ----------- |
 | displayName   | Form 状态标识                               | string          | "FormState" |
 | pristine      | 表单 value 是否等于 initialValues           | boolean         | false       |
+| modified      | 表单 value 是否发生变化                     | boolean         | false       |
 | valid         | 表单是否处于合法态                          | boolean         | true        |
 | invalid       | 表单是否处于非法态，如果校验失败则会为 true | boolean         | False       |
 | loading       | 表单是否处于加载态                          | boolean         | false       |

diff --git a/docs/zh-cn/schema-develop/form-state.md b/docs/zh-cn/schema-develop/form-state.md
@@ -8,6 +8,7 @@
 | ------------- | ------------------------------------------- | --------------- | ----------- |
 | displayName   | Form 状态标识                               | string          | "FormState" |
 | pristine      | 表单 value 是否等于 initialValues           | boolean         | false       |
+| modified      | 表单 value 是否发生变化                     | boolean         | false       |
 | valid         | 表单是否处于合法态                          | boolean         | true        |
 | invalid       | 表单是否处于非法态，如果校验失败则会为 true | boolean         | False       |
 | loading       | 表单是否处于加载态                          | boolean         | false       |
@@ -17,13 +18,13 @@
 | editable      | 表单是否可编辑                              | boolean         | false       |
 | errors        | 表单错误信息集合                            | `Array<string>` | []          |
 | warnings      | 表单警告信息集合                            | `Array<string>` | []          |
-| values        | 表单值                                     | object          | {}          |
+| values        | 表单值                                      | object          | {}          |
 | initialValues | 表单初始值                                  | object          | {}          |
 | mounted       | 表单是否已挂载                              | boolean         | false       |
 | unmounted     | 表单是否已卸载                              | boolean         | false       |
 | 扩展状态      | 通过 setFormState 可以直接设置扩展状态      | any             |             |
 
-> 注意，这里的values是状态名，如果是表单组件属性名，对应的是value，而不是values，因为状态管理是独立于React的，选用value作为SchemaForm/Form属性，主要是与React规范对齐 
+> 注意，这里的 values 是状态名，如果是表单组件属性名，对应的是 value，而不是 values，因为状态管理是独立于 React 的，选用 value 作为 SchemaForm/Form 属性，主要是与 React 规范对齐
 
 ## FieldState
 

diff --git a/packages/core/src/__tests__/__snapshots__/index.spec.ts.snap b/packages/core/src/__tests__/__snapshots__/index.spec.ts.snap
@@ -13,6 +13,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -42,6 +43,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -145,6 +147,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -248,6 +251,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -351,6 +355,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -454,6 +459,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -480,6 +486,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -506,6 +513,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -566,6 +574,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -626,6 +635,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -686,6 +696,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -749,6 +760,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -852,6 +864,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -951,6 +964,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -1063,6 +1077,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -1211,6 +1226,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -1368,6 +1384,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -1717,6 +1734,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -1934,6 +1952,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -2272,6 +2291,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -2575,6 +2595,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -2764,6 +2785,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -3072,6 +3094,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -3220,6 +3243,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -3368,6 +3392,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -3527,6 +3552,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -3854,6 +3880,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -3986,6 +4013,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -4313,6 +4341,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -4640,6 +4669,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": true,
     "props": Object {},
@@ -4956,6 +4986,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": false,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -5252,6 +5283,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},
@@ -5548,6 +5580,7 @@ Object {
     "initialized": true,
     "invalid": false,
     "loading": false,
+    "modified": true,
     "mounted": false,
     "pristine": false,
     "props": Object {},

diff --git a/packages/core/src/__tests__/form.state.spec.ts b/packages/core/src/__tests__/form.state.spec.ts
@@ -10,6 +10,7 @@ test('computeState', () => {
     invalid: false,
     loading: false,
     validating: false,
+    modified: false,
     initialized: false,
     submitting: false,
     errors: [],
@@ -60,11 +61,11 @@ test('computeState', () => {
 
   // cannot set invalid props
   expect(state.getState().props).toEqual({})
-  state.setState((draft) => {
+  state.setState(draft => {
     draft.props = { hello: 'world' }
   })
   expect(state.getState().props).toEqual({ hello: 'world' })
-  state.setState((draft) => {
+  state.setState(draft => {
     draft.props = undefined
   })
   expect(state.getState().props).toEqual({ hello: 'world' })
@@ -138,26 +139,45 @@ test('setState', () => {
   const state = new FormState({ useDirty: false })
   const susCb = jest.fn()
   state.subscribe(susCb)
-  const cb1 = (draft) => { draft.values = { change: true } }
-  const cb2 = (draft) => { draft.values = { withNotify: true } }
-  const cb3 = (draft) => { draft.values = { withBatching: true } }
-  const cb4 = (draft) => { draft.values = { ...draft.values, withBatching2: true } }
+  const cb1 = draft => {
+    draft.values = { change: true }
+  }
+  const cb2 = draft => {
+    draft.values = { withNotify: true }
+  }
+  const cb3 = draft => {
+    draft.values = { withBatching: true }
+  }
+  const cb4 = draft => {
+    draft.values = { ...draft.values, withBatching2: true }
+  }
   const prevState1 = state.getState()
   expect(prevState1.values.change).toEqual(undefined)
 
   // 默认 slient = false, 触发notify 通知UI更新
   state.setState(cb1)
   expect(state.getState().values.change).toEqual(true)
-  expect(state.getState()).toEqual({ ...prevState1, pristine: false, values: { change: true } })
+  expect(state.getState()).toEqual({
+    ...prevState1,
+    pristine: false,
+    values: { change: true }
+  })
   expect(susCb).toBeCalledTimes(1)
-  expect(susCb).toBeCalledWith({ ...prevState1, pristine: false, values: { change: true } })
-
+  expect(susCb).toBeCalledWith({
+    ...prevState1,
+    pristine: false,
+    values: { change: true }
+  })
+
   // slient = true 不触发notify
   const prevState2 = state.getState()
   expect(prevState2.values.withNotify).toEqual(undefined)
   state.setState(cb2, true)
   expect(state.getState().values.withNotify).toEqual(true)
-  expect(state.getState()).toEqual({ ...prevState2, values: { withNotify: true }})
+  expect(state.getState()).toEqual({
+    ...prevState2,
+    values: { withNotify: true }
+  })
   expect(susCb).toBeCalledTimes(1)
 
   // batching 相当于slient = true
@@ -171,10 +191,16 @@ test('setState', () => {
 
   expect(state.getState().values.withBatching).toEqual(true)
   expect(state.getState().values.withBatching2).toEqual(true)
-  expect(state.getState()).toEqual({ ...prevState3, values: { withBatching: true, withBatching2: true } })
+  expect(state.getState()).toEqual({
+    ...prevState3,
+    values: { withBatching: true, withBatching2: true }
+  })
   // 这次notify是由batch批处理结束调用的
   expect(susCb).toBeCalledTimes(2)
-  expect(susCb).toBeCalledWith({ ...prevState3, values: { withBatching: true, withBatching2: true } })
+  expect(susCb).toBeCalledWith({
+    ...prevState3,
+    values: { withBatching: true, withBatching2: true }
+  })
 })
 test('getSourceState', () => {
   const state = new FormState({ useDirty: false })
@@ -192,7 +218,7 @@ test('getSourceState', () => {
 })
 test('setSourceState', () => {
   const state = new FormState({ useDirty: false })
-  const cb1 = (draft) => draft.change = true
+  const cb1 = draft => (draft.change = true)
   const prevState1 = state.getSourceState()
   expect(prevState1.change).toEqual(undefined)