perf: 优化表单与布局，增加表单校验

msgbyte · Aug 5, 2022 · fdd7c6f · fdd7c6f
1 parent f1f63be
commit fdd7c6f
Show file tree

Hide file tree

Showing 17 changed files with 221 additions and 94 deletions.
diff --git a/package.json b/package.json
@@ -1,6  1,6 @@
 {
   "name": "tushan",
-  "version": "1.0.0",
   "version": "0.0.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -44,7  44,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-fastify-form": "^1.0.2",
     "react-fastify-form": "^1.0.8",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "reflect-metadata": "^0.1.13",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/Tushan.ts b/src/Tushan.ts
@@ -47,6  47,14 @@ export class Tushan {
     return componentId;
   }
 
   static getCacheDir(): string {
     const cacheDir = findCacheDir({ name: 'tushan' });
     if (!cacheDir) {
       throw new Error('cannot find package.json file');
     }
     return cacheDir;
   }
 
   datasource: DataSource;
 
   constructor(public options: TushanOptions) {
@@ -89,18  97,13 @@ export class Tushan {
       createViteServer();
     }
 
-    this.buildComponentEntry();
     await this.buildComponentEntry();
   }
 
   private async buildComponentEntry() {
-    const cacheDir = findCacheDir({ name: 'tushan' });
-    if (!cacheDir) {
-      throw new Error('cannot find package.json file');
-    }
     const cacheDir = Tushan.getCacheDir();
     await fs.ensureDir(cacheDir);
 
-    console.log(Tushan.customComponents);
-
     const js = `
 ${Object.entries(Tushan.customComponents)
   .map(([name, url]) => `import ${name} from '${url}';`)

diff --git a/src/client/index.html b/src/client/index.html
@@ -7,7  7,7 @@
   <title>Tushan</title>
 </head>
 <body>
-  <div id="app">
   <div id="app" class="h-full">
 
   </div>
   <!--SCRIPTS-SLOT-->

diff --git a/src/client/src/components/form/index.tsx b/src/client/src/components/form/index.tsx
@@ -1,9  1,12 @@
-import React, { useMemo } from 'react';
 import React, { useEffect, useMemo } from 'react';
 import {
   FastifyForm,
   regField,
   regFormContainer,
   FastifyFormContainerProps,
   useFastifyFormContext,
   FastifyFormInstance,
   FastifyFormProps,
 } from 'react-fastify-form';
 import { Form, Button } from '@arco-design/web-react';
 import { FastifyFormText } from './types/Text';
@@ -22,55  25,71 @@ regField('select', FastifyFormSelect);
 regField('checkbox', FastifyFormCheckbox);
 regField('custom', FastifyFormCustom);
 
-const FastifyFormContainer: React.FC<FastifyFormContainerProps> = React.memo(
-  (props) => {
-    const layout = props.layout;
-    const hiddenSubmit: boolean = props.extraProps?.hiddenSubmit ?? false;
 interface FastifyFormContainerExtraProps {
   hiddenSubmit?: boolean;
   onFormMount?: (form: FastifyFormInstance) => void;
 }
 
-    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 FastifyFormContainer: React.FC<
   FastifyFormContainerProps<FastifyFormContainerExtraProps>
 > = React.memo((props) => {
   const layout = props.layout;
   const hiddenSubmit: boolean = props.extraProps?.hiddenSubmit ?? false;
   const form = useFastifyFormContext();
 
   useEffect(() => {
     if (form) {
       props.extraProps?.onFormMount?.(form);
     }
   }, []);
 
   const submitButtonRender = useMemo(() => {
     return (
-      <Form
-        layout={layout}
-        labelCol={layout === 'vertical' ? { xs: 24 } : { sm: 24, md: 8 }}
-        wrapperCol={layout === 'vertical' ? { xs: 24 } : { sm: 24, md: 16 }}
       <Form.Item
         wrapperCol={
           layout === 'vertical'
             ? { xs: 24 }
             : { sm: 24, md: { span: 16, offset: 8 } }
         }
       >
-        {props.children}
-        {!hiddenSubmit && submitButtonRender}
-      </Form>
         <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}
       {!hiddenSubmit && submitButtonRender}
     </Form>
   );
 });
 FastifyFormContainer.displayName = 'FastifyFormContainer';
 regFormContainer(FastifyFormContainer);
 
-export const WebFastifyForm = FastifyForm;
-WebFastifyForm.displayName = 'WebFastifyForm';
 export const WebFastifyForm = FastifyForm as <
   T extends Record<string, any> = {}
 >(
   props: FastifyFormProps<T, FastifyFormContainerExtraProps>
 ) => React.ReactElement | null;
 (WebFastifyForm as any).displayName = 'WebFastifyForm';
diff --git a/src/client/src/components/form/types/Checkbox.tsx b/src/client/src/components/form/types/Checkbox.tsx
@@ -5,13  5,14 @@ import { getValidateStatus } from '../utils';
 
 export const FastifyFormCheckbox: FastifyFormFieldComponent = React.memo(
   (props) => {
-    const { name, label, value, onChange, error } = props;
     const { name, label, required, value, onChange, error } = props;
 
     return (
       <Form.Item
         label={label}
         validateStatus={getValidateStatus(error)}
         help={error}
         required={required}
       >
         <Checkbox
           checked={Boolean(value)}

diff --git a/src/client/src/components/form/types/Custom.tsx b/src/client/src/components/form/types/Custom.tsx
@@ -9,10  9,10 @@ import { CustomField } from 'react-fastify-form';
 export const FastifyFormCustom: FastifyFormFieldComponent<{
   render: (props: FastifyFormFieldProps) => React.ReactNode;
 }> = React.memo((props) => {
-  const { label } = props;
   const { label, required } = props;
 
   return (
-    <Form.Item label={label}>
     <Form.Item label={label} required={required}>
       <CustomField {...props} />
     </Form.Item>
   );

diff --git a/src/client/src/components/form/types/Number.tsx b/src/client/src/components/form/types/Number.tsx
@@ -5,14  5,23 @@ import { getValidateStatus } from '../utils';
 
 export const FastifyFormNumber: FastifyFormFieldComponent = React.memo(
   (props) => {
-    const { name, label, value, onChange, error, maxLength, placeholder } =
-      props;
     const {
       name,
       label,
       required,
       value,
       onChange,
       error,
       maxLength,
       placeholder,
     } = props;
 
     return (
       <Form.Item
         label={label}
         validateStatus={getValidateStatus(error)}
         help={error}
         required={required}
       >
         <InputNumber
           name={name}

diff --git a/src/client/src/components/form/types/Password.tsx b/src/client/src/components/form/types/Password.tsx
@@ -5,14  5,23 @@ import { getValidateStatus } from '../utils';
 
 export const FastifyFormPassword: FastifyFormFieldComponent = React.memo(
   (props) => {
-    const { name, label, value, onChange, error, maxLength, placeholder } =
-      props;
     const {
       name,
       label,
       required,
       value,
       onChange,
       error,
       maxLength,
       placeholder,
     } = props;
 
     return (
       <Form.Item
         label={label}
         validateStatus={getValidateStatus(error)}
         help={error}
         required={required}
       >
         <Input.Password
           name={name}

diff --git a/src/client/src/components/form/types/Select.tsx b/src/client/src/components/form/types/Select.tsx
@@ -14,7  14,7 @@ interface FastifyFormSelectOptionsItem {
 export const FastifyFormSelect: FastifyFormFieldComponent<{
   options: FastifyFormSelectOptionsItem[];
 }> = React.memo((props) => {
-  const { name, label, value, onChange, options } = props;
   const { name, label, required, value, onChange, options } = props;
 
   useEffect(() => {
     if (_isNil(value) || value === '') {
@@ -24,7  24,7 @@ export const FastifyFormSelect: FastifyFormFieldComponent<{
   }, []);
 
   return (
-    <Form.Item label={label}>
     <Form.Item label={label} required={required}>
       <Select size="large" value={value} onChange={(val) => onChange(val)}>
         {options.map((option, i) => (
           <Option key={`${option.value}${i}`} value={option.value}>

diff --git a/src/client/src/components/form/types/Text.tsx b/src/client/src/components/form/types/Text.tsx
@@ -5,14  5,23 @@ import { getValidateStatus } from '../utils';
 
 export const FastifyFormText: FastifyFormFieldComponent = React.memo(
   (props) => {
-    const { name, label, value, onChange, error, maxLength, placeholder } =
-      props;
     const {
       name,
       label,
       value,
       onChange,
       error,
       required,
       maxLength,
       placeholder,
     } = props;
 
     return (
       <Form.Item
         label={label}
         validateStatus={getValidateStatus(error)}
         help={error}
         required={required}
       >
         <Input
           name={name}

diff --git a/src/client/src/components/form/types/TextArea.tsx b/src/client/src/components/form/types/TextArea.tsx
@@ -5,14  5,23 @@ import { getValidateStatus } from '../utils';
 
 export const FastifyFormTextArea: FastifyFormFieldComponent = React.memo(
   (props) => {
-    const { name, label, value, onChange, error, maxLength, placeholder } =
-      props;
     const {
       name,
       label,
       value,
       onChange,
       error,
       required,
       maxLength,
       placeholder,
     } = props;
 
     return (
       <Form.Item
         label={label}
         validateStatus={getValidateStatus(error)}
         help={error}
         required={required}
       >
         <Input.TextArea
           name={name}