aiden
/
tailchat
mirror of https://github.com/msgbyte/tailchat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: 使用react-fastify-form替代meta-form

Browse Source
pull/49/head
moonrailgun 3 years ago
parent b7ff2a9875
commit 1371b080dd
11 changed files with 190 additions and 154 deletions
Show Stats Download Patch File Download Diff File

120
packages/design/components/WebMetaForm/index.tsx
Unescape Escape View File

@ -1,71 +1,73 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { import {
MetaForm, FastifyForm,
regField, regField,
MetaFormContainerComponent, FastifyFormContainerComponent,
regFormContainer, regFormContainer,
} from 'meta-form'; } from 'react-fastify-form';
import { Form, Button } from 'antd'; import { Form, Button } from 'antd';
import { MetaFormText } from './types/Text'; import { FastifyFormText } from './types/Text';
import { MetaFormTextArea } from './types/TextArea'; import { FastifyFormTextArea } from './types/TextArea';
import { MetaFormPassword } from './types/Password'; import { FastifyFormPassword } from './types/Password';
import { MetaFormSelect } from './types/Select'; import { FastifyFormSelect } from './types/Select';
import { MetaFormCheckbox } from './types/Checkbox'; import { FastifyFormCheckbox } from './types/Checkbox';
import { MetaFormCustom } from './types/Custom'; import { FastifyFormCustom } from './types/Custom';
regField('text', MetaFormText); regField('text', FastifyFormText);
regField('textarea', MetaFormTextArea); regField('textarea', FastifyFormTextArea);
regField('password', MetaFormPassword); regField('password', FastifyFormPassword);
regField('select', MetaFormSelect); regField('select', FastifyFormSelect);
regField('checkbox', MetaFormCheckbox); regField('checkbox', FastifyFormCheckbox);
regField('custom', MetaFormCustom); regField('custom', FastifyFormCustom);
const WebFastifyFormContainer: FastifyFormContainerComponent = React.memo(
(props) => {
const layout = props.layout;
const submitButtonRender = useMemo(() => {
return (
<Form.Item
wrapperCol={
layout === 'vertical'
? { xs: 24 }
: { sm: 24, md: { span: 16, offset: 8 } }
}
>
<Button
loading={props.loading}
type="primary"
size="large"
htmlType="button"
style={{ width: '100%' }}
onClick={() => props.handleSubmit()}
disabled={props.canSubmit === false}
>
{props.submitLabel ?? '提交'}
</Button>
</Form.Item>
);
}, [
props.loading,
props.handleSubmit,
props.canSubmit,
props.submitLabel,
layout,
]);
const WebMetaFormContainer: MetaFormContainerComponent = React.memo((props) => {
const layout = props.layout;
const submitButtonRender = useMemo(() => {
return ( return (
<Form.Item <Form
wrapperCol={ layout={layout}
layout === 'vertical' labelCol={layout === 'vertical' ? { xs: 24 } : { sm: 24, md: 8 }}
? { xs: 24 } wrapperCol={layout === 'vertical' ? { xs: 24 } : { sm: 24, md: 16 }}
: { sm: 24, md: { span: 16, offset: 8 } }
}
> >
<Button {props.children}
loading={props.loading} {submitButtonRender}
type="primary" </Form>
size="large"
htmlType="button"
style={{ width: '100%' }}
onClick={() => props.handleSubmit()}
disabled={props.canSubmit === false}
>
{props.submitLabel ?? '提交'}
</Button>
</Form.Item>
); );
}, [ }
props.loading, );
props.handleSubmit, WebFastifyFormContainer.displayName = 'WebFastifyFormContainer';
props.canSubmit, regFormContainer(WebFastifyFormContainer);
props.submitLabel,
layout,
]);
return (
<Form
layout={layout}
labelCol={layout === 'vertical' ? { xs: 24 } : { sm: 24, md: 8 }}
wrapperCol={layout === 'vertical' ? { xs: 24 } : { sm: 24, md: 16 }}
>
{props.children}
{submitButtonRender}
</Form>
);
});
WebMetaFormContainer.displayName = 'WebMetaFormContainer';
regFormContainer(WebMetaFormContainer);
export const WebMetaForm = MetaForm; export const WebMetaForm = FastifyForm;
WebMetaForm.displayName = 'WebMetaForm'; (WebMetaForm as any).displayName = 'WebMetaForm';

40
packages/design/components/WebMetaForm/types/Checkbox.tsx
Unescape Escape View File

@ -1,25 +1,27 @@
import React from 'react'; import React from 'react';
import { Form, Checkbox } from 'antd'; import { Form, Checkbox } from 'antd';
import type { MetaFormFieldComponent } from 'meta-form'; import type { FastifyFormFieldComponent } from 'react-fastify-form';
import { getValidateStatus } from '../utils'; import { getValidateStatus } from '../utils';
export const MetaFormCheckbox: MetaFormFieldComponent = React.memo((props) => { export const FastifyFormCheckbox: FastifyFormFieldComponent = React.memo(
const { name, label, value, onChange, error } = props; (props) => {
const { name, label, value, onChange, error } = props;
return ( return (
<Form.Item <Form.Item
label={label} label={label}
validateStatus={getValidateStatus(error)} validateStatus={getValidateStatus(error)}
help={error} help={error}
>
<Checkbox
name={name}
checked={Boolean(value)}
onChange={(e) => onChange(e.target.checked)}
> >
{label} <Checkbox
</Checkbox> name={name}
</Form.Item> checked={Boolean(value)}
); onChange={(e) => onChange(e.target.checked)}
}); >
MetaFormCheckbox.displayName = 'MetaFormCheckbox'; {label}
</Checkbox>
</Form.Item>
);
}
);
FastifyFormCheckbox.displayName = 'FastifyFormCheckbox';

13
packages/design/components/WebMetaForm/types/Custom.tsx
Unescape Escape View File

@ -1,10 +1,13 @@
import React from 'react'; import React from 'react';
import { Form } from 'antd'; import { Form } from 'antd';
import type { MetaFormFieldComponent, MetaFormFieldProps } from 'meta-form'; import type {
import { CustomField } from 'meta-form'; FastifyFormFieldComponent,
FastifyFormFieldProps,
} from 'react-fastify-form';
import { CustomField } from 'react-fastify-form';
export const MetaFormCustom: MetaFormFieldComponent<{ export const FastifyFormCustom: FastifyFormFieldComponent<{
render: (props: MetaFormFieldProps) => React.ReactNode; render: (props: FastifyFormFieldProps) => React.ReactNode;
}> = React.memo((props) => { }> = React.memo((props) => {
const { label } = props; const { label } = props;
@ -14,4 +17,4 @@ export const MetaFormCustom: MetaFormFieldComponent<{
</Form.Item> </Form.Item>
); );
}); });
MetaFormCustom.displayName = 'MetaFormCustom'; FastifyFormCustom.displayName = 'FastifyFormCustom';

47
packages/design/components/WebMetaForm/types/Password.tsx
Unescape Escape View File

@ -1,27 +1,30 @@
import React from 'react'; import React from 'react';
import { Input, Form } from 'antd'; import { Input, Form } from 'antd';
import type { MetaFormFieldComponent } from 'meta-form'; import type { FastifyFormFieldComponent } from 'react-fastify-form';
import { getValidateStatus } from '../utils'; import { getValidateStatus } from '../utils';
export const MetaFormPassword: MetaFormFieldComponent = React.memo((props) => { export const FastifyFormPassword: FastifyFormFieldComponent = React.memo(
const { name, label, value, onChange, error, maxLength, placeholder } = props; (props) => {
const { name, label, value, onChange, error, maxLength, placeholder } =
props;
return ( return (
<Form.Item <Form.Item
label={label} label={label}
validateStatus={getValidateStatus(error)} validateStatus={getValidateStatus(error)}
help={error} help={error}
> >
<Input.Password <Input.Password
name={name} name={name}
type="password" type="password"
size="large" size="large"
maxLength={maxLength} maxLength={maxLength}
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
/> />
</Form.Item> </Form.Item>
); );
}); }
MetaFormPassword.displayName = 'MetaFormPassword'; );
FastifyFormPassword.displayName = 'FastifyFormPassword';

10
packages/design/components/WebMetaForm/types/Select.tsx
Unescape Escape View File

@ -2,17 +2,17 @@ import React, { useEffect } from 'react';
import { Select, Form } from 'antd'; import { Select, Form } from 'antd';
import _get from 'lodash/get'; import _get from 'lodash/get';
import _isNil from 'lodash/isNil'; import _isNil from 'lodash/isNil';
import type { MetaFormFieldComponent } from 'meta-form'; import type { FastifyFormFieldComponent } from 'react-fastify-form';
const Option = Select.Option; const Option = Select.Option;
interface MetaFormSelectOptionsItem { interface FastifyFormSelectOptionsItem {
label: string; label: string;
value: string; value: string;
} }
export const MetaFormSelect: MetaFormFieldComponent<{ export const FastifyFormSelect: FastifyFormFieldComponent<{
options: MetaFormSelectOptionsItem[]; options: FastifyFormSelectOptionsItem[];
}> = React.memo((props) => { }> = React.memo((props) => {
const { name, label, value, onChange, options } = props; const { name, label, value, onChange, options } = props;
@ -35,4 +35,4 @@ export const MetaFormSelect: MetaFormFieldComponent<{
</Form.Item> </Form.Item>
); );
}); });
MetaFormSelect.displayName = 'MetaFormSelect'; FastifyFormSelect.displayName = 'FastifyFormSelect';

45
packages/design/components/WebMetaForm/types/Text.tsx
Unescape Escape View File

@ -1,26 +1,29 @@
import React from 'react'; import React from 'react';
import { Input, Form } from 'antd'; import { Input, Form } from 'antd';
import type { MetaFormFieldComponent } from 'meta-form'; import type { FastifyFormFieldComponent } from 'react-fastify-form';
import { getValidateStatus } from '../utils'; import { getValidateStatus } from '../utils';
export const MetaFormText: MetaFormFieldComponent = React.memo((props) => { export const FastifyFormText: FastifyFormFieldComponent = React.memo(
const { name, label, value, onChange, error, maxLength, placeholder } = props; (props) => {
const { name, label, value, onChange, error, maxLength, placeholder } =
props;
return ( return (
<Form.Item <Form.Item
label={label} label={label}
validateStatus={getValidateStatus(error)} validateStatus={getValidateStatus(error)}
help={error} help={error}
> >
<Input <Input
name={name} name={name}
size="large" size="large"
maxLength={maxLength} maxLength={maxLength}
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
/> />
</Form.Item> </Form.Item>
); );
}); }
MetaFormText.displayName = 'MetaFormText'; );
FastifyFormText.displayName = 'FastifyFormText';

45
packages/design/components/WebMetaForm/types/TextArea.tsx
Unescape Escape View File

@ -1,26 +1,29 @@
import React from 'react'; import React from 'react';
import { Input, Form } from 'antd'; import { Input, Form } from 'antd';
import type { MetaFormFieldComponent } from 'meta-form'; import type { FastifyFormFieldComponent } from 'react-fastify-form';
import { getValidateStatus } from '../utils'; import { getValidateStatus } from '../utils';
export const MetaFormTextArea: MetaFormFieldComponent = React.memo((props) => { export const FastifyFormTextArea: FastifyFormFieldComponent = React.memo(
const { name, label, value, onChange, error, maxLength, placeholder } = props; (props) => {
const { name, label, value, onChange, error, maxLength, placeholder } =
props;
return ( return (
<Form.Item <Form.Item
label={label} label={label}
validateStatus={getValidateStatus(error)} validateStatus={getValidateStatus(error)}
help={error} help={error}
> >
<Input.TextArea <Input.TextArea
name={name} name={name}
rows={4} rows={4}
maxLength={maxLength} maxLength={maxLength}
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
/> />
</Form.Item> </Form.Item>
); );
}); }
MetaFormTextArea.displayName = 'MetaFormTextArea'; );
FastifyFormTextArea.displayName = 'FastifyFormTextArea';

1
packages/design/package.json
Unescape Escape View File

@ -26,6 +26,7 @@
"antd": "^4.19.5", "antd": "^4.19.5",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"meta-form": "^1.0.0", "meta-form": "^1.0.0",
"react-fastify-form": "^1.0.3",
"str2int": "^1.1.0" "str2int": "^1.1.0"
}, },
"devDependencies": { "devDependencies": {

2
packages/design/tsconfig.json
Unescape Escape View File

@ -4,5 +4,5 @@
"declaration": true, "declaration": true,
"declarationDir": ".", "declarationDir": ".",
}, },
"include": ["./components/**/*"] "include": ["components/**/*"]
} }

13
pnpm-lock.yaml
Unescape Escape View File

@ -74,6 +74,7 @@ importers:
meta-form: ^1.0.0 meta-form: ^1.0.0
react: 17.0.2 react: 17.0.2
react-dom: 17.0.2 react-dom: 17.0.2
react-fastify-form: ^1.0.3
str2int: ^1.1.0 str2int: ^1.1.0
typescript: ^4.5.2 typescript: ^4.5.2
webpack: ^5.72.0 webpack: ^5.72.0
@ -82,6 +83,7 @@ importers:
antd: 4.20.4_sfoxds7t5ydpegc3knd667wn6m antd: 4.20.4_sfoxds7t5ydpegc3knd667wn6m
lodash: 4.17.21 lodash: 4.17.21
meta-form: link:../meta-form meta-form: link:../meta-form
react-fastify-form: 1.0.3_react@17.0.2
str2int: 1.1.0 str2int: 1.1.0
devDependencies: devDependencies:
'@babel/core': 7.17.10 '@babel/core': 7.17.10
@ -14938,6 +14940,17 @@ packages:
/react-fast-compare/3.2.0: /react-fast-compare/3.2.0:
resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==} 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: /react-helmet-async/1.3.0_sfoxds7t5ydpegc3knd667wn6m:
resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==} resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==}
peerDependencies: peerDependencies:

8
web/plugins/com.msgbyte.webview/src/index.tsx
Unescape Escape View File

@ -7,7 +7,13 @@ regGroupPanel({
name: `${PLUGIN_NAME}/grouppanel`, name: `${PLUGIN_NAME}/grouppanel`,
label: Translate.webpanel, label: Translate.webpanel,
provider: PLUGIN_NAME, provider: PLUGIN_NAME,
extraFormMeta: [{ type: 'text', name: 'url', label: Translate.website }], extraFormMeta: [
{
type: 'text',
name: 'url',
label: Translate.website,
},
],
render: Loadable(() => import('./group/GroupWebPanelRender')), render: Loadable(() => import('./group/GroupWebPanelRender')),
}); });

Write Preview
Loading…
Cancel
Save