fix: rerendering

ocadotechnology · Jun 20, 2023 · d08a24c · d08a24c
1 parent d3a37cf
commit d08a24c
Showing 1 changed file with 105 additions and 95 deletions.
diff --git a/src/components/form/TextField.tsx b/src/components/form/TextField.tsx
@@ -37,8 +37,11 @@ type BaseTextFieldProps = Omit<MuiTextFieldProps, 'defaultValue'> & {
 type RepeatTextFieldProps = BaseTextFieldProps & {
   repeat?: Array<Omit<BaseTextFieldProps, (
     'required' |
-    'split'
-  )>>;
+    'split' |
+    'type'
+  )> & {
+    inheritProps?: boolean;
+  }>;
 };
 
 export type TextFieldProps<
@@ -52,6 +55,94 @@ export type TextFieldProps<
   }
 );
 
+// Internal TextField.
+const _TextField: React.FC<BaseTextFieldProps & {
+  validate: Validate;
+  split?: Split;
+}> = ({
+  validate,
+  split,
+  name,
+  type = 'text',
+  InputProps = {},
+  onKeyUp,
+  onBlur,
+  ...otherTextFieldProps
+}) => {
+    const fieldConfig: FieldConfig = {
+      name,
+      type,
+      validate: async (value) => {
+        if (validate instanceof Schema) {
+          try {
+            validate.validateSync(value);
+          } catch (error) {
+            if (error instanceof ValidationError) {
+              return error.errors[0];
+            }
+            throw error;
+          }
+        } else if (validate !== undefined) {
+          return await validate(value);
+        }
+      }
+    };
+
+    return (
+      <Field {...fieldConfig}>
+        {({ meta, form }: FieldProps) => {
+          const [showError, setShowError] = React.useState(false);
+
+          let {
+            endAdornment,
+            ...otherInputProps
+          } = InputProps;
+
+          if (showError &&
+            meta.error !== undefined &&
+            meta.error !== ''
+          ) {
+            endAdornment = <>
+              {endAdornment}
+              <InputAdornment position='end'>
+                <ClickableTooltip title={meta.error}>
+                  <ErrorOutlineIcon color='error' />
+                </ClickableTooltip>
+              </InputAdornment>
+            </>;
+          }
+
+          onKeyUp = wrap({
+            after: (event: React.KeyboardEvent<HTMLDivElement>) => {
+              let value: string | string[] = (event.target as HTMLTextAreaElement).value;
+              if (split !== undefined) value = value.split(split);
+              form.setFieldValue(name, value, true);
+            }
+          }, onKeyUp);
+
+          onBlur = wrap({
+            after: () => { setShowError(true); }
+          }, onBlur);
+
+          return (
+            <MuiTextField
+              defaultValue={meta.initialValue}
+              name={name}
+              type={type}
+              onKeyUp={onKeyUp}
+              onBlur={onBlur}
+              InputProps={{
+                endAdornment,
+                ...otherInputProps
+              }}
+              {...otherTextFieldProps}
+            />
+          );
+        }}
+      </Field>
+    );
+  };
+
 interface ITextField<SingleValue extends boolean> {
   // eslint-disable-next-line @typescript-eslint/prefer-function-type
   (
@@ -84,93 +175,6 @@ const TextField: ITextField<true> & ITextField<false> = ({
     validate = validate.required();
   }
 
-  // Internal TextField.
-  const TextField: React.FC<BaseTextFieldProps & {
-    validate: Validate;
-    split?: Split;
-  }> = ({
-    validate,
-    split,
-    name,
-    type = 'text',
-    InputProps = {},
-    onKeyUp,
-    onBlur
-  }) => {
-      const fieldConfig: FieldConfig = {
-        name,
-        type,
-        validate: async (value) => {
-          if (validate instanceof Schema) {
-            try {
-              validate.validateSync(value);
-            } catch (error) {
-              if (error instanceof ValidationError) {
-                return error.errors[0];
-              }
-              throw error;
-            }
-          } else if (validate !== undefined) {
-            return await validate(value);
-          }
-        }
-      };
-
-      return (
-        <Field {...fieldConfig}>
-          {({ meta, form }: FieldProps) => {
-            const [showError, setShowError] = React.useState(false);
-
-            let {
-              endAdornment,
-              ...otherInputProps
-            } = InputProps;
-
-            if (showError &&
-              meta.error !== undefined &&
-              meta.error !== ''
-            ) {
-              endAdornment = <>
-                {endAdornment}
-                <InputAdornment position='end'>
-                  <ClickableTooltip title={meta.error}>
-                    <ErrorOutlineIcon color='error' />
-                  </ClickableTooltip>
-                </InputAdornment>
-              </>;
-            }
-
-            onKeyUp = wrap({
-              after: (event: React.KeyboardEvent<HTMLDivElement>) => {
-                let value: string | string[] = (event.target as HTMLTextAreaElement).value;
-                if (split !== undefined) value = value.split(split);
-                form.setFieldValue(name, value, true);
-              }
-            }, onKeyUp);
-
-            onBlur = wrap({
-              after: () => { setShowError(true); }
-            }, onBlur);
-
-            return (
-              <MuiTextField
-                defaultValue={meta.initialValue}
-                name={name}
-                type={type}
-                onKeyUp={onKeyUp}
-                onBlur={onBlur}
-                InputProps={{
-                  endAdornment,
-                  ...otherInputProps
-                }}
-                {...otherTextFieldProps}
-              />
-            );
-          }}
-        </Field>
-      );
-    };
-
   if (repeat.length > 0) {
     onKeyUp = wrap({
       after: (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -187,19 +191,25 @@ const TextField: ITextField<true> & ITextField<false> = ({
   }
 
   return <>
-    <TextField
+    <_TextField
       validate={validate}
       split={split}
       name={name}
       onKeyUp={onKeyUp}
       {...otherTextFieldProps}
     />
-    {repeat.map(textFieldProps =>
-      <TextField
-        key={textFieldProps.name}
+    {repeat.map(({
+      name,
+      inheritProps = true,
+      ...repeatTextFieldProps
+    }) =>
+      <_TextField
+        key={name}
+        name={name}
         validate={validateRepeat}
-        {...otherTextFieldProps}
-        {...textFieldProps}
+        type={otherTextFieldProps.type}
+        {...(inheritProps && otherTextFieldProps)}
+        {...repeatTextFieldProps}
       />
     )}
   </>;