mirror of https://github.com/msgbyte/tailchat
refactor: 使用react-fastify-form替代meta-form
parent
b7ff2a9875
commit
1371b080dd
@ -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';
|
||||||
|
@ -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';
|
||||||
|
@ -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';
|
||||||
|
@ -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';
|
||||||
|
@ -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';
|
||||||
|
Loading…
Reference in New Issue