fix(json-schema): fix reactions isolate effect (#2590)

alibaba · Dec 8, 2021 · f04deb1 · f04deb1
1 parent ccf1bc8
commit f04deb1
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 11 deletions.
diff --git a/packages/json-schema/src/transformer.ts b/packages/json-schema/src/transformer.ts
@@ -178,11 +178,14 @@ const getBaseReactions =
     )
   }
 
-const getUserReactions =
-  (schema: ISchema, options: ISchemaTransformerOptions) => (field: Field) => {
-    const reactions: SchemaReaction[] = toArr(schema['x-reactions'])
-    const baseScope = getBaseScope(field, options)
-    reactions.forEach((unCompiled) => {
+const getUserReactions = (
+  schema: ISchema,
+  options: ISchemaTransformerOptions
+) => {
+  const reactions: SchemaReaction[] = toArr(schema['x-reactions'])
+  return reactions.map((unCompiled) => {
+    return (field: Field) => {
+      const baseScope = getBaseScope(field, options)
       const reaction = shallowCompile(unCompiled, baseScope)
       if (!reaction) return
       if (isFn(reaction)) {
@@ -227,18 +230,18 @@ const getUserReactions =
       } else {
         run()
       }
-    })
-  }
+    }
+  })
+}
 
 export const transformFieldProps = (
   schema: Schema,
   options: ISchemaTransformerOptions
 ): IFieldFactoryProps<any, any> => {
   return {
     name: schema.name,
-    reactions: [
-      getBaseReactions(schema, options),
-      getUserReactions(schema, options),
-    ],
+    reactions: [getBaseReactions(schema, options)].concat(
+      getUserReactions(schema, options)
+    ),
   }
 }
diff --git a/packages/react/src/__tests__/schema.markup.spec.tsx b/packages/react/src/__tests__/schema.markup.spec.tsx
@@ -916,3 +916,56 @@ test('x-reactions runner for target', async () => {
     expect(getTarget).toBeCalledTimes(1)
   })
 })
+
+test('multi x-reactions isolate effect', async () => {
+  const form = createForm()
+  const otherEffect = jest.fn()
+  const SchemaField = createSchemaField({
+    components: {
+      Input: () => <div data-testid="input"></div>,
+      Button: (props) => (
+        <button
+          data-testid="btn"
+          onClick={(e) => {
+            e.preventDefault()
+            props.onChange('123')
+          }}
+        >
+          Click {props.value}
+        </button>
+      ),
+    },
+  })
+
+  const { getByTestId, queryByTestId } = render(
+    <FormProvider form={form}>
+      <SchemaField>
+        <SchemaField.String
+          name="target"
+          x-reactions={[
+            otherEffect,
+            {
+              dependencies: ['btn'],
+              fulfill: {
+                state: {
+                  visible: '{{$deps[0] === "123"}}',
+                },
+              },
+            },
+          ]}
+          x-component="Input"
+        />
+        <SchemaField.String name="btn" x-component="Button" />
+      </SchemaField>
+    </FormProvider>
+  )
+  await waitFor(() => {
+    expect(queryByTestId('input')).toBeNull()
+  })
+  fireEvent.click(getByTestId('btn'))
+  await waitFor(() => {
+    expect(getByTestId('btn').textContent).toBe('Click 123')
+    expect(getByTestId('input')).not.toBeNull()
+    expect(otherEffect).toBeCalledTimes(1)
+  })
+})