update rendering

UN-OCHA · May 21, 2024 · ef3f54b · ef3f54b
1 parent 8ba1e33
commit ef3f54b
Show file tree

Hide file tree

Showing 6 changed files with 384 additions and 370 deletions.
diff --git a/libs/hpc-ui/src/lib/components/form-fields/async-single-select-field.tsx b/libs/hpc-ui/src/lib/components/form-fields/async-single-select-field.tsx
@@ -121,36 +121,44 @@ const AsyncSingleSelect = memo(
       },
       [name, returnObject]
     );
+    const endAdornment = useMemo(
+      () => (
+        <CircularProgressBox>
+          {field.value && (
+            <StyledIconButton
+              onClick={() => setFieldValue(name, '')}
+              size="small"
+            >
+              <CloseIcon fontSize="small" />
+            </StyledIconButton>
+          )}
+          {loading ? (
+            <CircularProgress sx={tw`me-6`} color="inherit" size={20} />
+          ) : null}
+        </CircularProgressBox>
+      ),
+      [field.value, loading, setFieldValue, name]
+    );
+    const inputElement = useMemo(
+      () => (
+        <OutlinedInput
+          onBlur={onBlur}
+          error={!!errorMsg}
+          value={(field.value as FormObjectValue).displayLabel}
+          endAdornment={endAdornment}
+          label={label}
+        />
+      ),
+      [field.value, errorMsg, label, onBlur, loading, setFieldValue, name]
+    );
     const singleSelectConfig: SelectProps<FormObjectValue | string | number> =
       useMemo(
         () => ({
           ...field,
           ...otherProps,
           labelId: `${label.toLowerCase().replace(' ', '-').trim()}-label`,
           onChange: handleChange,
-          input: (
-            <OutlinedInput
-              onBlur={onBlur}
-              error={!!errorMsg}
-              value={(field.value as FormObjectValue).displayLabel}
-              endAdornment={
-                <CircularProgressBox>
-                  {field.value && (
-                    <StyledIconButton
-                      onClick={() => setFieldValue(name, '')}
-                      size="small"
-                    >
-                      <CloseIcon fontSize="small" />
-                    </StyledIconButton>
-                  )}
-                  {loading ? (
-                    <CircularProgress sx={tw`me-6`} color="inherit" size={20} />
-                  ) : null}
-                </CircularProgressBox>
-              }
-              label={label}
-            />
-          ),
+          input: inputElement,
           onOpen: () => setOpen(true),
           onClose: () => setOpen(false),
           size: 'small',
@@ -171,6 +179,16 @@ const AsyncSingleSelect = memo(
     if (meta && meta.touched && meta.error) {
       singleSelectConfig.error = true;
     }
+    const handleSetValue = useCallback(() => {
+      if (entryInfo) {
+        setFieldValue(name, entryInfo.value);
+        if (rejectInputEntry) rejectInputEntry(name);
+      }
+    }, [entryInfo, name, setFieldValue, rejectInputEntry]);
+
+    const handleRejectValue = useCallback(() => {
+      if (rejectInputEntry) rejectInputEntry(name);
+    }, [rejectInputEntry, name]);
     return (
       <>
         <FormControl sx={{ width: '100%' }} size="small">
@@ -212,13 +230,8 @@ const AsyncSingleSelect = memo(
         {entryInfo && rejectInputEntry && (
           <InputEntry
             info={entryInfo}
-            setValue={() => {
-              setFieldValue(name, entryInfo.value);
-              rejectInputEntry(name);
-            }}
-            rejectValue={() => {
-              rejectInputEntry(name);
-            }}
+            setValue={handleSetValue}
+            rejectValue={handleRejectValue}
           />
         )}
       </>

diff --git a/libs/hpc-ui/src/lib/components/form-fields/checkbox.tsx b/libs/hpc-ui/src/lib/components/form-fields/checkbox.tsx
@@ -5,114 +5,109 @@ import {
   CheckboxProps,
 } from '@mui/material';
 import { useField, useFormikContext } from 'formik';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, memo } from 'react';
 
-const FormikCheckBox = ({
-  name,
-  label,
-  size,
-  value,
-  onChange,
-  disabled,
-  ...otherProps
-}: {
-  name: string;
-  value?: any;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | any;
-  label?: string | React.ReactNode;
-  size?: 'small' | 'medium';
-  disabled?: boolean;
-  [key: string]: any;
-}) => {
-  const [field] = useField(name);
-  const { setFieldValue } = useFormikContext();
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (onChange) {
-      const values = onChange(event);
-      setFieldValue(name, values);
-    } else {
-      setFieldValue(name, !field.value);
-    }
-  };
-
-  const configCheckBox: CheckboxProps = {
-    ...field,
-    ...otherProps,
-    checked:
-      field.value === true
-        ? true
-        : field.value &&
-          typeof field.value === 'object' &&
-          field.value.some((item: any) => item.id === value.id),
-    onChange: handleChange,
-    disabled: disabled || false,
-  };
-  return (
-    <FormControlLabel
-      control={<Checkbox {...configCheckBox} />}
-      label={label}
-    />
-  );
-};
-
-FormikCheckBox.defaultProps = {
-  size: 'medium',
-};
+const FormikCheckBox = memo(
+  ({
+    name,
+    label,
+    size,
+    value,
+    onChange,
+    disabled,
+    ...otherProps
+  }: {
+    name: string;
+    value?: any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | any;
+    label?: string | React.ReactNode;
+    size?: 'small' | 'medium';
+    disabled?: boolean;
+    [key: string]: any;
+  }) => {
+    const [field] = useField(name);
+    const { setFieldValue } = useFormikContext();
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange) {
+        const values = onChange(event);
+        setFieldValue(name, values);
+      } else {
+        setFieldValue(name, !field.value);
+      }
+    };
 
-const CheckBox = ({
-  name,
-  label,
-  size,
-  value,
-  onChange,
-  disabled,
-  withoutFormik = false,
-  ...otherProps
-}: {
-  name: string;
-  label?: string | React.ReactNode;
-  value?: any;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | any;
-  size?: 'small' | 'medium';
-  disabled?: boolean;
-  withoutFormik?: boolean;
-  [key: string]: any;
-}) => {
-  if (!withoutFormik) {
+    const configCheckBox = useMemo(() => {
+      return {
+        ...field,
+        ...otherProps,
+        checked:
+          field.value === true
+            ? true
+            : field.value &&
+              typeof field.value === 'object' &&
+              field.value.some((item: any) => item.id === value.id),
+        onChange: handleChange,
+        disabled: disabled || false,
+      };
+    }, [field, otherProps, handleChange, value, disabled]);
     return (
-      <FormikCheckBox
-        name={name}
+      <FormControlLabel
+        control={<Checkbox {...configCheckBox} />}
         label={label}
-        size={size}
-        value={value}
-        onChange={onChange}
-        disabled={disabled}
-        {...otherProps}
       />
     );
   }
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (onChange) {
-      const values = onChange(event);
+);
+
+const CheckBox = memo(
+  ({
+    name,
+    label,
+    size,
+    value,
+    onChange,
+    disabled,
+    withoutFormik = false,
+    ...otherProps
+  }: {
+    name: string;
+    label?: string | React.ReactNode;
+    value?: any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | any;
+    size?: 'small' | 'medium';
+    disabled?: boolean;
+    withoutFormik?: boolean;
+    [key: string]: any;
+  }) => {
+    if (!withoutFormik) {
+      return (
+        <FormikCheckBox
+          name={name}
+          label={label}
+          size={size}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          {...otherProps}
+        />
+      );
     }
-  };
-  const configCheckBox: FormControlLabelProps = {
-    ...otherProps,
-    label: label,
-    id: name,
-    control: (
-      <Checkbox
-        onChange={(event) => handleChange(event)}
-        size={size}
-        disabled={disabled}
-      />
-    ),
-  };
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange) {
+        const values = onChange(event);
+      }
+    };
+    const configCheckBox: FormControlLabelProps = {
+      ...otherProps,
+      label: label,
+      id: name,
+      control: (
+        <Checkbox onChange={handleChange} size={size} disabled={disabled} />
+      ),
+    };
 
-  return <FormControlLabel {...configCheckBox} />;
-};
+    return <FormControlLabel {...configCheckBox} />;
+  }
+);
 
-CheckBox.defaultProps = {
-  size: 'medium',
-};
 export default CheckBox;