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 {
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 (
<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 (
<Form.Item
wrapperCol={
layout === 'vertical'
? { xs: 24 }
: { sm: 24, md: { span: 16, offset: 8 } }
}
<Form
layout={layout}
labelCol={layout === 'vertical' ? { xs: 24 } : { sm: 24, md: 8 }}
wrapperCol={layout === 'vertical' ? { xs: 24 } : { sm: 24, md: 16 }}
>
<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.children}
{submitButtonRender}
</Form>
);
}, [
props.loading,
props.handleSubmit,
props.canSubmit,
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);
}
);
WebFastifyFormContainer.displayName = 'WebFastifyFormContainer';
regFormContainer(WebFastifyFormContainer);
export const WebMetaForm = MetaForm;
WebMetaForm.displayName = 'WebMetaForm';
export const WebMetaForm = FastifyForm;
(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 { 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 (
<Form.Item
label={label}
validateStatus={getValidateStatus(error)}
help={error}
>
<Checkbox
name={name}
checked={Boolean(value)}
onChange={(e) => onChange(e.target.checked)}
return (
<Form.Item
label={label}
validateStatus={getValidateStatus(error)}
help={error}
>
{label}
</Checkbox>
</Form.Item>
);
});
MetaFormCheckbox.displayName = 'MetaFormCheckbox';
<Checkbox
name={name}
checked={Boolean(value)}
onChange={(e) => onChange(e.target.checked)}
>
{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 { 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<{
</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 { 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 (
<Form.Item
label={label}
validateStatus={getValidateStatus(error)}
help={error}
>
<Input.Password
name={name}
type="password"
size="large"
maxLength={maxLength}
placeholder={placeholder}
value={value}
onChange={(e) => onChange(e.target.value)}
/>
</Form.Item>
);
});
MetaFormPassword.displayName = 'MetaFormPassword';
return (
<Form.Item
label={label}
validateStatus={getValidateStatus(error)}
help={error}
>
<Input.Password
name={name}
type="password"
size="large"
maxLength={maxLength}
placeholder={placeholder}
value={value}
onChange={(e) => onChange(e.target.value)}
/>
</Form.Item>
);
}
);
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 _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<{
</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 { 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 (
<Form.Item
label={label}
validateStatus={getValidateStatus(error)}
help={error}
>
<Input
name={name}
size="large"
maxLength={maxLength}
placeholder={placeholder}
value={value}
onChange={(e) => onChange(e.target.value)}
/>
</Form.Item>
);
});
MetaFormText.displayName = 'MetaFormText';
return (
<Form.Item
label={label}
validateStatus={getValidateStatus(error)}
help={error}
>
<Input
name={name}
size="large"
maxLength={maxLength}
placeholder={placeholder}
value={value}
onChange={(e) => onChange(e.target.value)}
/>
</Form.Item>
);
}
);
FastifyFormText.displayName = 'FastifyFormText';

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

@ -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 (
<Form.Item
label={label}
validateStatus={getValidateStatus(error)}
help={error}
>
<Input.TextArea
name={name}
rows={4}
maxLength={maxLength}
placeholder={placeholder}
value={value}
onChange={(e) => onChange(e.target.value)}
/>
</Form.Item>
);
});
MetaFormTextArea.displayName = 'MetaFormTextArea';
return (
<Form.Item
label={label}
validateStatus={getValidateStatus(error)}
help={error}
>
<Input.TextArea
name={name}
rows={4}
maxLength={maxLength}
placeholder={placeholder}
value={value}
onChange={(e) => onChange(e.target.value)}
/>
</Form.Item>
);
}
);
FastifyFormTextArea.displayName = 'FastifyFormTextArea';

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

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

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

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

13
pnpm-lock.yaml
Unescape Escape View File

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

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

@ -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')),
});

Write Preview
Loading…
Cancel
Save