From 1371b080ddca3d3bae1e66f595b0b276a6831317 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Mon, 1 Aug 2022 21:07:37 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8react-fastify-for?= =?UTF-8?q?m=E6=9B=BF=E4=BB=A3meta-form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../design/components/WebMetaForm/index.tsx | 120 +++++++++--------- .../components/WebMetaForm/types/Checkbox.tsx | 40 +++--- .../components/WebMetaForm/types/Custom.tsx | 13 +- .../components/WebMetaForm/types/Password.tsx | 47 +++---- .../components/WebMetaForm/types/Select.tsx | 10 +- .../components/WebMetaForm/types/Text.tsx | 45 ++++--- .../components/WebMetaForm/types/TextArea.tsx | 45 ++++--- packages/design/package.json | 1 + packages/design/tsconfig.json | 2 +- pnpm-lock.yaml | 13 ++ web/plugins/com.msgbyte.webview/src/index.tsx | 8 +- 11 files changed, 190 insertions(+), 154 deletions(-) diff --git a/packages/design/components/WebMetaForm/index.tsx b/packages/design/components/WebMetaForm/index.tsx index 14efda88..bf537bec 100644 --- a/packages/design/components/WebMetaForm/index.tsx +++ b/packages/design/components/WebMetaForm/index.tsx @@ -1,71 +1,73 @@ import React, { useMemo } from 'react'; import { - MetaForm, + FastifyForm, regField, - MetaFormContainerComponent, + FastifyFormContainerComponent, regFormContainer, -} from 'meta-form'; +} from 'react-fastify-form'; import { Form, Button } from 'antd'; -import { MetaFormText } from './types/Text'; -import { MetaFormTextArea } from './types/TextArea'; -import { MetaFormPassword } from './types/Password'; -import { MetaFormSelect } from './types/Select'; -import { MetaFormCheckbox } from './types/Checkbox'; -import { MetaFormCustom } from './types/Custom'; +import { FastifyFormText } from './types/Text'; +import { FastifyFormTextArea } from './types/TextArea'; +import { FastifyFormPassword } from './types/Password'; +import { FastifyFormSelect } from './types/Select'; +import { FastifyFormCheckbox } from './types/Checkbox'; +import { FastifyFormCustom } from './types/Custom'; -regField('text', MetaFormText); -regField('textarea', MetaFormTextArea); -regField('password', MetaFormPassword); -regField('select', MetaFormSelect); -regField('checkbox', MetaFormCheckbox); -regField('custom', MetaFormCustom); +regField('text', FastifyFormText); +regField('textarea', FastifyFormTextArea); +regField('password', FastifyFormPassword); +regField('select', FastifyFormSelect); +regField('checkbox', FastifyFormCheckbox); +regField('custom', FastifyFormCustom); + +const WebFastifyFormContainer: FastifyFormContainerComponent = React.memo( + (props) => { + const layout = props.layout; + const submitButtonRender = useMemo(() => { + return ( + + + + ); + }, [ + props.loading, + props.handleSubmit, + props.canSubmit, + props.submitLabel, + layout, + ]); -const WebMetaFormContainer: MetaFormContainerComponent = React.memo((props) => { - const layout = props.layout; - const submitButtonRender = useMemo(() => { return ( - - - + {props.children} + {submitButtonRender} + ); - }, [ - props.loading, - props.handleSubmit, - props.canSubmit, - props.submitLabel, - layout, - ]); - - return ( -
- {props.children} - {submitButtonRender} -
- ); -}); -WebMetaFormContainer.displayName = 'WebMetaFormContainer'; -regFormContainer(WebMetaFormContainer); + } +); +WebFastifyFormContainer.displayName = 'WebFastifyFormContainer'; +regFormContainer(WebFastifyFormContainer); -export const WebMetaForm = MetaForm; -WebMetaForm.displayName = 'WebMetaForm'; +export const WebMetaForm = FastifyForm; +(WebMetaForm as any).displayName = 'WebMetaForm'; diff --git a/packages/design/components/WebMetaForm/types/Checkbox.tsx b/packages/design/components/WebMetaForm/types/Checkbox.tsx index f3b7fa90..ba7501f3 100644 --- a/packages/design/components/WebMetaForm/types/Checkbox.tsx +++ b/packages/design/components/WebMetaForm/types/Checkbox.tsx @@ -1,25 +1,27 @@ import React from 'react'; import { Form, Checkbox } from 'antd'; -import type { MetaFormFieldComponent } from 'meta-form'; +import type { FastifyFormFieldComponent } from 'react-fastify-form'; import { getValidateStatus } from '../utils'; -export const MetaFormCheckbox: MetaFormFieldComponent = React.memo((props) => { - const { name, label, value, onChange, error } = props; +export const FastifyFormCheckbox: FastifyFormFieldComponent = React.memo( + (props) => { + const { name, label, value, onChange, error } = props; - return ( - - onChange(e.target.checked)} + return ( + - {label} - - - ); -}); -MetaFormCheckbox.displayName = 'MetaFormCheckbox'; + onChange(e.target.checked)} + > + {label} + + + ); + } +); +FastifyFormCheckbox.displayName = 'FastifyFormCheckbox'; diff --git a/packages/design/components/WebMetaForm/types/Custom.tsx b/packages/design/components/WebMetaForm/types/Custom.tsx index 799061d8..e724f67d 100644 --- a/packages/design/components/WebMetaForm/types/Custom.tsx +++ b/packages/design/components/WebMetaForm/types/Custom.tsx @@ -1,10 +1,13 @@ import React from 'react'; import { Form } from 'antd'; -import type { MetaFormFieldComponent, MetaFormFieldProps } from 'meta-form'; -import { CustomField } from 'meta-form'; +import type { + FastifyFormFieldComponent, + FastifyFormFieldProps, +} from 'react-fastify-form'; +import { CustomField } from 'react-fastify-form'; -export const MetaFormCustom: MetaFormFieldComponent<{ - render: (props: MetaFormFieldProps) => React.ReactNode; +export const FastifyFormCustom: FastifyFormFieldComponent<{ + render: (props: FastifyFormFieldProps) => React.ReactNode; }> = React.memo((props) => { const { label } = props; @@ -14,4 +17,4 @@ export const MetaFormCustom: MetaFormFieldComponent<{ ); }); -MetaFormCustom.displayName = 'MetaFormCustom'; +FastifyFormCustom.displayName = 'FastifyFormCustom'; diff --git a/packages/design/components/WebMetaForm/types/Password.tsx b/packages/design/components/WebMetaForm/types/Password.tsx index 940c4c5d..a169a69a 100644 --- a/packages/design/components/WebMetaForm/types/Password.tsx +++ b/packages/design/components/WebMetaForm/types/Password.tsx @@ -1,27 +1,30 @@ import React from 'react'; import { Input, Form } from 'antd'; -import type { MetaFormFieldComponent } from 'meta-form'; +import type { FastifyFormFieldComponent } from 'react-fastify-form'; import { getValidateStatus } from '../utils'; -export const MetaFormPassword: MetaFormFieldComponent = React.memo((props) => { - const { name, label, value, onChange, error, maxLength, placeholder } = props; +export const FastifyFormPassword: FastifyFormFieldComponent = React.memo( + (props) => { + const { name, label, value, onChange, error, maxLength, placeholder } = + props; - return ( - - onChange(e.target.value)} - /> - - ); -}); -MetaFormPassword.displayName = 'MetaFormPassword'; + return ( + + onChange(e.target.value)} + /> + + ); + } +); +FastifyFormPassword.displayName = 'FastifyFormPassword'; diff --git a/packages/design/components/WebMetaForm/types/Select.tsx b/packages/design/components/WebMetaForm/types/Select.tsx index b33dee2e..bed1961c 100644 --- a/packages/design/components/WebMetaForm/types/Select.tsx +++ b/packages/design/components/WebMetaForm/types/Select.tsx @@ -2,17 +2,17 @@ import React, { useEffect } from 'react'; import { Select, Form } from 'antd'; import _get from 'lodash/get'; import _isNil from 'lodash/isNil'; -import type { MetaFormFieldComponent } from 'meta-form'; +import type { FastifyFormFieldComponent } from 'react-fastify-form'; const Option = Select.Option; -interface MetaFormSelectOptionsItem { +interface FastifyFormSelectOptionsItem { label: string; value: string; } -export const MetaFormSelect: MetaFormFieldComponent<{ - options: MetaFormSelectOptionsItem[]; +export const FastifyFormSelect: FastifyFormFieldComponent<{ + options: FastifyFormSelectOptionsItem[]; }> = React.memo((props) => { const { name, label, value, onChange, options } = props; @@ -35,4 +35,4 @@ export const MetaFormSelect: MetaFormFieldComponent<{ ); }); -MetaFormSelect.displayName = 'MetaFormSelect'; +FastifyFormSelect.displayName = 'FastifyFormSelect'; diff --git a/packages/design/components/WebMetaForm/types/Text.tsx b/packages/design/components/WebMetaForm/types/Text.tsx index e56e4b7b..5d15756d 100644 --- a/packages/design/components/WebMetaForm/types/Text.tsx +++ b/packages/design/components/WebMetaForm/types/Text.tsx @@ -1,26 +1,29 @@ import React from 'react'; import { Input, Form } from 'antd'; -import type { MetaFormFieldComponent } from 'meta-form'; +import type { FastifyFormFieldComponent } from 'react-fastify-form'; import { getValidateStatus } from '../utils'; -export const MetaFormText: MetaFormFieldComponent = React.memo((props) => { - const { name, label, value, onChange, error, maxLength, placeholder } = props; +export const FastifyFormText: FastifyFormFieldComponent = React.memo( + (props) => { + const { name, label, value, onChange, error, maxLength, placeholder } = + props; - return ( - - onChange(e.target.value)} - /> - - ); -}); -MetaFormText.displayName = 'MetaFormText'; + return ( + + onChange(e.target.value)} + /> + + ); + } +); +FastifyFormText.displayName = 'FastifyFormText'; diff --git a/packages/design/components/WebMetaForm/types/TextArea.tsx b/packages/design/components/WebMetaForm/types/TextArea.tsx index e35eb1ff..89493dd1 100644 --- a/packages/design/components/WebMetaForm/types/TextArea.tsx +++ b/packages/design/components/WebMetaForm/types/TextArea.tsx @@ -1,26 +1,29 @@ import React from 'react'; import { Input, Form } from 'antd'; -import type { MetaFormFieldComponent } from 'meta-form'; +import type { FastifyFormFieldComponent } from 'react-fastify-form'; import { getValidateStatus } from '../utils'; -export const MetaFormTextArea: MetaFormFieldComponent = React.memo((props) => { - const { name, label, value, onChange, error, maxLength, placeholder } = props; +export const FastifyFormTextArea: FastifyFormFieldComponent = React.memo( + (props) => { + const { name, label, value, onChange, error, maxLength, placeholder } = + props; - return ( - - onChange(e.target.value)} - /> - - ); -}); -MetaFormTextArea.displayName = 'MetaFormTextArea'; + return ( + + onChange(e.target.value)} + /> + + ); + } +); +FastifyFormTextArea.displayName = 'FastifyFormTextArea'; diff --git a/packages/design/package.json b/packages/design/package.json index 5a31d6e6..53abc49d 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -26,6 +26,7 @@ "antd": "^4.19.5", "lodash": "^4.17.21", "meta-form": "^1.0.0", + "react-fastify-form": "^1.0.3", "str2int": "^1.1.0" }, "devDependencies": { diff --git a/packages/design/tsconfig.json b/packages/design/tsconfig.json index 3a4f5a50..cd2160cc 100644 --- a/packages/design/tsconfig.json +++ b/packages/design/tsconfig.json @@ -4,5 +4,5 @@ "declaration": true, "declarationDir": ".", }, - "include": ["./components/**/*"] + "include": ["components/**/*"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b5aff76..06f043a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,7 @@ importers: meta-form: ^1.0.0 react: 17.0.2 react-dom: 17.0.2 + react-fastify-form: ^1.0.3 str2int: ^1.1.0 typescript: ^4.5.2 webpack: ^5.72.0 @@ -82,6 +83,7 @@ importers: antd: 4.20.4_sfoxds7t5ydpegc3knd667wn6m lodash: 4.17.21 meta-form: link:../meta-form + react-fastify-form: 1.0.3_react@17.0.2 str2int: 1.1.0 devDependencies: '@babel/core': 7.17.10 @@ -14938,6 +14940,17 @@ packages: /react-fast-compare/3.2.0: resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==} + /react-fastify-form/1.0.3_react@17.0.2: + resolution: {integrity: sha512-O7ZLO336s4vUnAX1ygqtSUIHUsxBbw1IfVA1VgFz1ogImfWwuG3hIeh4wAKP091cZaGYARS4QKxui2sqP82yOw==} + peerDependencies: + react: ^16.14.0 + dependencies: + formik: 2.2.9_react@17.0.2 + lodash: 4.17.21 + react: 17.0.2 + yup: 0.32.11 + dev: false + /react-helmet-async/1.3.0_sfoxds7t5ydpegc3knd667wn6m: resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==} peerDependencies: diff --git a/web/plugins/com.msgbyte.webview/src/index.tsx b/web/plugins/com.msgbyte.webview/src/index.tsx index 6ee645d8..6e79c428 100644 --- a/web/plugins/com.msgbyte.webview/src/index.tsx +++ b/web/plugins/com.msgbyte.webview/src/index.tsx @@ -7,7 +7,13 @@ regGroupPanel({ name: `${PLUGIN_NAME}/grouppanel`, label: Translate.webpanel, provider: PLUGIN_NAME, - extraFormMeta: [{ type: 'text', name: 'url', label: Translate.website }], + extraFormMeta: [ + { + type: 'text', + name: 'url', + label: Translate.website, + }, + ], render: Loadable(() => import('./group/GroupWebPanelRender')), });