chore: improve FormProvider (#2322)

packages/core/client/src/schema-component/core/FormProvider.tsx

@@ -7,13 +7,12 @@ import {
 import React, { useContext, useMemo } from 'react';
 import { SchemaComponentOptions } from './SchemaComponentOptions';
 
-export const FormProvider: React.FC<any> = (props) => {
+const WithForm = (props) => {
-  const { children, ...others } = props;
+  const { children, form, ...others } = props;
   const options = useContext(SchemaOptionsContext);
   const expressionScope = useContext(SchemaExpressionScopeContext);
   const scope = { ...options?.scope, ...expressionScope };
   const components = { ...options?.components };
-  const form = useMemo(() => props.form || createForm(), []);
   return (
     <FormilyFormProvider {...others} form={form}>
       <SchemaComponentOptions components={components} scope={scope}>
@@ -22,3 +21,23 @@ export const FormProvider: React.FC<any> = (props) => {
     </FormilyFormProvider>
   );
 };
+
+const WithoutForm = (props) => {
+  const { children, ...others } = props;
+  const options = useContext(SchemaOptionsContext);
+  const expressionScope = useContext(SchemaExpressionScopeContext);
+  const scope = { ...options?.scope, ...expressionScope };
+  const components = { ...options?.components };
+  const form = useMemo(() => createForm(), []);
+  return (
+    <FormilyFormProvider {...others} form={form}>
+      <SchemaComponentOptions components={components} scope={scope}>
+        {children}
+      </SchemaComponentOptions>
+    </FormilyFormProvider>
+  );
+};
+
+export const FormProvider: React.FC<any> = (props) => {
+  return props.form ? <WithForm {...props} /> : <WithoutForm {...props} />;
+};

packages/plugins/data-visualization/src/client/block/ChartConfigure.tsx

@@ -1,17 +1,11 @@
 import { RightSquareOutlined } from '@ant-design/icons';
-import { ArrayItems, Editable, Form, FormCollapse, FormItem, Switch } from '@formily/antd-v5';
+import { ArrayItems, Editable, FormCollapse, FormItem, FormLayout, Switch } from '@formily/antd-v5';
 import { Form as FormType, ObjectField, createForm, onFieldChange, onFormInit } from '@formily/core';
 import { FormConsumer, ISchema, Schema } from '@formily/react';
 import {
   AutoComplete,
-  Cascader,
+  FormProvider,
-  DatePicker,
-  Filter,
-  Input,
-  InputNumber,
-  Radio,
   SchemaComponent,
-  Select,
   gridRowColWrap,
   useCollectionFieldsOptions,
   useCollectionFilterOptions,
@@ -126,17 +120,14 @@ export const ChartConfigure: React.FC<{
   };
   const chartType = useDefaultChartType();
   const form = useMemo(
-    () => {
+    () =>
-      return createForm({
+      createForm({
         values: { config: { chartType }, ...(initialValues || field?.decoratorProps), collection },
         effects: (form) => {
           onFieldChange('config.chartType', () => initChart(true));
-          onFormInit(() => {
+          onFormInit(() => queryReact(form));
-            queryReact(form);
-          });
-        },
-      });
         },
+      }),
     // visible, collection added here to re-initialize form when visible, collection change
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [field, visible, collection],
@@ -223,7 +214,8 @@ export const ChartConfigure: React.FC<{
         background: 'rgba(128, 128, 128, 0.08)',
       }}
     >
-      <Form layout="vertical" form={form}>
+      <FormProvider form={form}>
+        <FormLayout layout="vertical">
           <Row gutter={8}>
             <Col span={7}>
               <Card
@@ -286,7 +278,8 @@ export const ChartConfigure: React.FC<{
               </Card>
             </Col>
           </Row>
-      </Form>
+        </FormLayout>
+      </FormProvider>
     </Modal>
   );
 };
@@ -358,24 +351,7 @@ ChartConfigure.Query = function Query() {
         collection: current?.collection,
         useOrderReaction: useOrderReaction(compiledFieldOptions, fields),
       }}
-      components={{
+      components={{ ArrayItems, Editable, FormCollapse, FormItem, Space, Switch, FromSql }}
-        ArrayItems,
-        Editable,
-        FormCollapse,
-        Card,
-        Switch,
-        Select,
-        Input,
-        InputNumber,
-        FormItem,
-        Radio,
-        Space,
-        Filter,
-        DatePicker,
-        Text,
-        FromSql,
-        Cascader,
-      }}
     />
   );
 };
@@ -410,7 +386,7 @@ ChartConfigure.Config = function Config() {
           <SchemaComponent
             schema={getConfigSchema(schema)}
             scope={{ t, chartTypes, useChartFields: getChartFields, getReference }}
-            components={{ Card, Select, Input, FormItem, ArrayItems, Space, AutoComplete }}
+            components={{ FormItem, ArrayItems, Space, AutoComplete }}
           />
         );
       }}
@@ -426,7 +402,7 @@ ChartConfigure.Transform = function Transform() {
   return (
     <SchemaComponent
       schema={transformSchema}
-      components={{ Select, FormItem, ArrayItems, Space }}
+      components={{ FormItem, ArrayItems, Space }}
       scope={{ useChartFields: getChartFields, useFieldTypeOptions, useTransformers, t }}
     />
   );

yarn.lock

@@ -3103,7 +3103,6 @@
 "@eslint-community/regexpp@^4.5.1":
   version "4.6.1"
   resolved "https://registry.npmmirror.com/@eslint-community/regexpp/-/regexpp-4.6.1.tgz#0b371c118b8e4ebf9dbddb56120ab4befd791211"
-  integrity sha512-O7x6dMstWLn2ktjcoiNLDkAGG2EjveHL+Vvc+n0fXumkJYAcSqcVYKtwDU+hDZ0uDUsnUagSYaZrOLAYE8un1A==
 
 "@eslint/eslintrc@^2.1.0":
   version "2.1.0"
@@ -6499,7 +6498,6 @@
 "@typescript-eslint/eslint-plugin@^6.2.0":
   version "6.2.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.2.0.tgz#57047c400be0632d4797ac081af8d399db3ebc3b"
-  integrity sha512-rClGrMuyS/3j0ETa1Ui7s6GkLhfZGKZL3ZrChLeAiACBE/tRc1wq8SNZESUuluxhLj9FkUefRs2l6bCIArWBiQ==
   dependencies:
     "@eslint-community/regexpp" "^4.5.1"
     "@typescript-eslint/scope-manager" "6.2.0"
@@ -6517,7 +6515,6 @@
 "@typescript-eslint/parser@5.48.1", "@typescript-eslint/parser@^6.2.0":
   version "6.2.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-6.2.0.tgz#d37c30b0f459c6f39455335d8f4f085919a1c644"
-  integrity sha512-igVYOqtiK/UsvKAmmloQAruAdUHihsOCvplJpplPZ+3h4aDkC/UKZZNKgB6h93ayuYLuEymU3h8nF1xMRbh37g==
   dependencies:
     "@typescript-eslint/scope-manager" "6.2.0"
     "@typescript-eslint/types" "6.2.0"
@@ -6535,7 +6532,6 @@
 "@typescript-eslint/scope-manager@5.62.0":
   version "5.62.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
-  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
   dependencies:
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
@@ -6543,7 +6539,6 @@
 "@typescript-eslint/scope-manager@6.2.0":
   version "6.2.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-6.2.0.tgz#412a710d8fa20bc045533b3b19f423810b24f87a"
-  integrity sha512-1ZMNVgm5nnHURU8ZSJ3snsHzpFeNK84rdZjluEVBGNu7jDymfqceB3kdIZ6A4xCfEFFhRIB6rF8q/JIqJd2R0Q==
   dependencies:
     "@typescript-eslint/types" "6.2.0"
     "@typescript-eslint/visitor-keys" "6.2.0"
@@ -6551,7 +6546,6 @@
 "@typescript-eslint/type-utils@5.48.1":
   version "5.48.1"
   resolved "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-5.48.1.tgz#5d94ac0c269a81a91ad77c03407cea2caf481412"
-  integrity sha512-Hyr8HU8Alcuva1ppmqSYtM/Gp0q4JOp1F+/JH5D1IZm/bUBrV0edoewQZiEc1r6I8L4JL21broddxK8HAcZiqQ==
   dependencies:
     "@typescript-eslint/typescript-estree" "5.48.1"
     "@typescript-eslint/utils" "5.48.1"
@@ -6561,7 +6555,6 @@
 "@typescript-eslint/type-utils@6.2.0":
   version "6.2.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-6.2.0.tgz#02b27a3eeb41aa5460d6275d12cce5dd72e1c9fc"
-  integrity sha512-DnGZuNU2JN3AYwddYIqrVkYW0uUQdv0AY+kz2M25euVNlujcN2u+rJgfJsBFlUEzBB6OQkUqSZPyuTLf2bP5mw==
   dependencies:
     "@typescript-eslint/typescript-estree" "6.2.0"
     "@typescript-eslint/utils" "6.2.0"
@@ -6575,17 +6568,14 @@
 "@typescript-eslint/types@5.62.0":
   version "5.62.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
-  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
 "@typescript-eslint/types@6.2.0":
   version "6.2.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/types/-/types-6.2.0.tgz#b341a4e6d5f609267306b07afc6f62bcf92b1495"
-  integrity sha512-1nRRaDlp/XYJQLvkQJG5F3uBTno5SHPT7XVcJ5n1/k2WfNI28nJsvLakxwZRNY5spuatEKO7d5nZWsQpkqXwBA==
 
 "@typescript-eslint/typescript-estree@5.48.1":
   version "5.48.1"
   resolved "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.1.tgz#9efa8ee2aa471c6ab62e649f6e64d8d121bc2056"
-  integrity sha512-Hut+Osk5FYr+sgFh8J/FHjqX6HFcDzTlWLrFqGoK5kVUN3VBHF/QzZmAsIXCQ8T/W9nQNBTqalxi1P3LSqWnRA==
   dependencies:
     "@typescript-eslint/types" "5.48.1"
     "@typescript-eslint/visitor-keys" "5.48.1"
@@ -6598,7 +6588,6 @@
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
-  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
   dependencies:
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
@@ -6611,7 +6600,6 @@
 "@typescript-eslint/typescript-estree@6.2.0":
   version "6.2.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.2.0.tgz#4969944b831b481996aa4fbd73c7164ca683b8ef"
-  integrity sha512-Mts6+3HQMSM+LZCglsc2yMIny37IhUgp1Qe8yJUYVyO6rHP7/vN0vajKu3JvHCBIy8TSiKddJ/Zwu80jhnGj1w==
   dependencies:
     "@typescript-eslint/types" "6.2.0"
     "@typescript-eslint/visitor-keys" "6.2.0"
@@ -6624,7 +6612,6 @@
 "@typescript-eslint/utils@5.48.1":
   version "5.48.1"
   resolved "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-5.48.1.tgz#20f2f4e88e9e2a0961cbebcb47a1f0f7da7ba7f9"
-  integrity sha512-SmQuSrCGUOdmGMwivW14Z0Lj8dxG1mOFZ7soeJ0TQZEJcs3n5Ndgkg0A4bcMFzBELqLJ6GTHnEU+iIoaD6hFGA==
   dependencies:
     "@types/json-schema" "^7.0.9"
     "@types/semver" "^7.3.12"
@@ -6638,7 +6625,6 @@
 "@typescript-eslint/utils@6.2.0":
   version "6.2.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-6.2.0.tgz#606a20e5c13883c2d2bd0538ddc4b96b8d410979"
-  integrity sha512-RCFrC1lXiX1qEZN8LmLrxYRhOkElEsPKTVSNout8DMzf8PeWoQG7Rxz2SadpJa3VSh5oYKGwt7j7X/VRg+Y3OQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     "@types/json-schema" "^7.0.12"
@@ -6651,7 +6637,6 @@
 "@typescript-eslint/utils@^5.10.0", "@typescript-eslint/utils@^5.58.0":
   version "5.62.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
-  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@types/json-schema" "^7.0.9"
@@ -6672,7 +6657,6 @@
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
-  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
   dependencies:
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
@@ -6680,7 +6664,6 @@
 "@typescript-eslint/visitor-keys@6.2.0":
   version "6.2.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.2.0.tgz#71943f42fdaa2ec86dc3222091f41761a49ae71a"
-  integrity sha512-QbaYUQVKKo9bgCzpjz45llCfwakyoxHetIy8CAvYCtd16Zu1KrpzNHofwF8kGkpPOxZB2o6kz+0nqH8ZkIzuoQ==
   dependencies:
     "@typescript-eslint/types" "6.2.0"
     eslint-visitor-keys "^3.4.1"
@@ -11892,7 +11875,6 @@ eslint-plugin-react@7.32.2:
 eslint-plugin-react@^7.33.0:
   version "7.33.0"
   resolved "https://registry.npmmirror.com/eslint-plugin-react/-/eslint-plugin-react-7.33.0.tgz#6c356fb0862fec2cd1b04426c669ea746e9b6eb3"
-  integrity sha512-qewL/8P34WkY8jAqdQxsiL82pDUeT7nhs8IsuXgfgnsEloKCT4miAV9N9kGtx7/KM9NH/NCGUE7Edt9iGxLXFw==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.flatmap "^1.3.1"
@@ -11957,7 +11939,6 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1:
 eslint@^8.45.0:
   version "8.45.0"
   resolved "https://registry.npmmirror.com/eslint/-/eslint-8.45.0.tgz#bab660f90d18e1364352c0a6b7c6db8edb458b78"
-  integrity sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.4.0"
@@ -20469,7 +20450,6 @@ prettier@2.2.1:
 prettier@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz#e7b19f691245a21d618c68bc54dc06122f6105ae"
-  integrity sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==
 
 pretty-error@^4.0.0:
   version "4.0.0"
@@ -22621,12 +22601,10 @@ semver@7.x, semver@^7.1.1, semver@^7.1.3, semver@^7.2, semver@^7.3.2, semver@^7.
 semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
-  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -24205,7 +24183,6 @@ trough@^2.0.0:
 ts-api-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/ts-api-utils/-/ts-api-utils-1.0.1.tgz#8144e811d44c749cd65b2da305a032510774452d"
-  integrity sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==
 
 ts-dedent@^2.2.0:
   version "2.2.0"