tailchat/client/packages/design/components/WebMetaForm/index.tsx

import React, { useMemo } from 'react';
import {
  FastifyForm,
  regField,
  FastifyFormContainerComponent,
  regFormContainer,
} from 'react-fastify-form';
import { Form, Button } from 'antd';

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

    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>
    );
  }
);
WebFastifyFormContainer.displayName = 'WebFastifyFormContainer';
regFormContainer(WebFastifyFormContainer);

export const WebMetaForm = FastifyForm;
(WebMetaForm as any).displayName = 'WebMetaForm';