chore: improve FormProvider (#2322)

This commit is contained in:
YANG QIA 2023-07-26 15:32:59 +08:00 committed by GitHub
parent f9de7c3156
commit 0de4458936
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 97 additions and 125 deletions

View File

@ -7,13 +7,12 @@ import {
import React, { useContext, useMemo } from 'react';
import { SchemaComponentOptions } from './SchemaComponentOptions';
export const FormProvider: React.FC<any> = (props) => {
const { children, ...others } = props;
const WithForm = (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} />;
};

View File

@ -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,
DatePicker,
Filter,
Input,
InputNumber,
Radio,
FormProvider,
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(() => {
queryReact(form);
});
onFormInit(() => 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,70 +214,72 @@ export const ChartConfigure: React.FC<{
background: 'rgba(128, 128, 128, 0.08)',
}}
>
<Form layout="vertical" form={form}>
<Row gutter={8}>
<Col span={7}>
<Card
style={{
height: 'calc(100vh - 300px)',
overflow: 'auto',
margin: '12px 0 12px 12px',
}}
ref={queryRef}
>
<Tabs
tabBarExtraContent={<RunButton />}
items={[
{
label: t('Query'),
key: 'query',
children: <ChartConfigure.Query />,
},
{
label: t('Data'),
key: 'data',
children: <ChartConfigure.Data />,
},
]}
/>
</Card>
</Col>
<Col span={6}>
<Card
style={{
height: 'calc(100vh - 300px)',
overflow: 'auto',
margin: '12px 3px 12px 3px',
}}
ref={configRef}
>
<Tabs
items={[
{
label: t('Chart'),
key: 'chart',
children: <ChartConfigure.Config />,
},
{
label: t('Transform'),
key: 'transform',
children: <ChartConfigure.Transform />,
},
]}
/>
</Card>
</Col>
<Col span={11}>
<Card
style={{
margin: '12px 12px 12px 0',
}}
>
<ChartConfigure.Renderer />
</Card>
</Col>
</Row>
</Form>
<FormProvider form={form}>
<FormLayout layout="vertical">
<Row gutter={8}>
<Col span={7}>
<Card
style={{
height: 'calc(100vh - 300px)',
overflow: 'auto',
margin: '12px 0 12px 12px',
}}
ref={queryRef}
>
<Tabs
tabBarExtraContent={<RunButton />}
items={[
{
label: t('Query'),
key: 'query',
children: <ChartConfigure.Query />,
},
{
label: t('Data'),
key: 'data',
children: <ChartConfigure.Data />,
},
]}
/>
</Card>
</Col>
<Col span={6}>
<Card
style={{
height: 'calc(100vh - 300px)',
overflow: 'auto',
margin: '12px 3px 12px 3px',
}}
ref={configRef}
>
<Tabs
items={[
{
label: t('Chart'),
key: 'chart',
children: <ChartConfigure.Config />,
},
{
label: t('Transform'),
key: 'transform',
children: <ChartConfigure.Transform />,
},
]}
/>
</Card>
</Col>
<Col span={11}>
<Card
style={{
margin: '12px 12px 12px 0',
}}
>
<ChartConfigure.Renderer />
</Card>
</Col>
</Row>
</FormLayout>
</FormProvider>
</Modal>
);
};
@ -358,24 +351,7 @@ ChartConfigure.Query = function Query() {
collection: current?.collection,
useOrderReaction: useOrderReaction(compiledFieldOptions, fields),
}}
components={{
ArrayItems,
Editable,
FormCollapse,
Card,
Switch,
Select,
Input,
InputNumber,
FormItem,
Radio,
Space,
Filter,
DatePicker,
Text,
FromSql,
Cascader,
}}
components={{ ArrayItems, Editable, FormCollapse, FormItem, Space, Switch, FromSql }}
/>
);
};
@ -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 }}
/>
);

View File

@ -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"