refactor: panels preferences

src/component/elements/CheckController.tsx

@@ -0,0 +1,31 @@
+import { Checkbox, CheckboxProps } from '@blueprintjs/core';
+import { Controller, ControllerProps, FieldValues } from 'react-hook-form';
+
+interface CheckControllerProps<TFieldValues extends FieldValues = FieldValues>
+  extends Omit<CheckboxProps, 'name'>,
+    Pick<ControllerProps<TFieldValues>, 'control' | 'name'> {
+  controllerProps?: Omit<
+    ControllerProps<TFieldValues>,
+    'control' | 'name' | 'render'
+  >;
+}
+
+export function CheckController<TFieldValues extends FieldValues = FieldValues>(
+  props: CheckControllerProps<TFieldValues>,
+) {
+  const { name, control, controllerProps, ...otherProps } = props;
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      {...controllerProps}
+      render={({ field }) => {
+        const { value, ...otherFieldProps } = field;
+        return (
+          <Checkbox checked={value} {...otherFieldProps} {...otherProps} />
+        );
+      }}
+    />
+  );
+}

src/component/elements/FormatField.tsx

@@ -0,0 +1,74 @@
+import { CSSProperties } from 'react';
+import { ControllerProps, FieldValues } from 'react-hook-form';
+
+import { CheckController } from './CheckController';
+import { Input2Controller } from './Input2Controller';
+import Label, { LabelStyle } from './Label';
+
+export const formatFieldInputStyle: CSSProperties = {
+  textAlign: 'center',
+};
+
+export const fieldLabelStyle: LabelStyle = {
+  label: {
+    flex: 4,
+    fontSize: '11px',
+    fontWeight: 'bold',
+    color: '#232323',
+  },
+  wrapper: {
+    flex: 8,
+  },
+};
+
+export interface FormatFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+> extends Pick<ControllerProps<TFieldValues>, 'control'> {
+  label: string;
+  checkFieldName?: ControllerProps<TFieldValues>['name'];
+  formatFieldName?: ControllerProps<TFieldValues>['name'];
+  disableFormat?: boolean;
+  hideFormatField?: boolean;
+  hideCheckField?: boolean;
+}
+
+export function FormatField<TFieldValues extends FieldValues = FieldValues>(
+  props: FormatFieldProps<TFieldValues>,
+) {
+  const {
+    label,
+    checkFieldName,
+    formatFieldName,
+    disableFormat = false,
+    hideFormatField = false,
+    hideCheckField = false,
+    control,
+  } = props;
+
+  return (
+    <Label title={label} style={fieldLabelStyle}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          ...(hideFormatField && { height: '25px' }),
+        }}
+      >
+        {!hideCheckField && checkFieldName ? (
+          <CheckController name={checkFieldName} control={control} />
+        ) : (
+          <div style={{ width: '23px' }} />
+        )}
+        {!hideFormatField && formatFieldName && (
+          <Input2Controller
+            style={formatFieldInputStyle}
+            name={formatFieldName}
+            control={control}
+            disabled={disableFormat}
+            controllerProps={{ rules: { required: true } }}
+          />
+        )}
+      </div>
+    </Label>
+  );
+}

src/component/elements/NumberInput2Controller.tsx

@@ -6,7 +6,10 @@ interface NumberInput2ControllerProps<
   TFieldValues extends FieldValues = FieldValues,
 > extends Omit<NumberInput2Props, 'name'>,
     Pick<ControllerProps<TFieldValues>, 'control' | 'name'> {
-  controllerProps?: Omit<ControllerProps<TFieldValues>, 'render'>;
+  controllerProps?: Omit<
+    ControllerProps<TFieldValues>,
+    'control' | 'name' | 'render'
+  >;
   noShadowBox?: boolean;
 }
 

src/component/panels/IntegralsPanel/IntegralPanel.tsx

@@ -15,6 +15,7 @@ import useSpectrum from '../../hooks/useSpectrum';
 import ChangeSumModal from '../../modal/changeSum/ChangeSumModal';
 import { booleanToString } from '../../utility/booleanToString';
 import { tablePanelStyle } from '../extra/BasicPanelStyle';
+import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
 import DefaultPanelHeader from '../header/DefaultPanelHeader';
 import PreferencesHeader from '../header/PreferencesHeader';
 
@@ -41,7 +42,7 @@ function IntegralPanelInner({
 
   const alert = useAlert();
   const [isFlipped, setFlipStatus] = useState(false);
-  const settingRef = useRef<any>();
+  const settingRef = useRef<SettingsRef | null>(null);
 
   function handleShowIntegralsValues() {
     dispatch({
@@ -79,9 +80,11 @@ function IntegralPanelInner({
     setFlipStatus(!isFlipped);
   }, [isFlipped]);
 
-  const saveSettingHandler = useCallback(() => {
-    settingRef.current.saveSetting();
-    setFlipStatus(false);
+  const saveSettingHandler = useCallback(async () => {
+    const isSettingValid = await settingRef.current?.saveSetting();
+    if (isSettingValid) {
+      setFlipStatus(false);
+    }
   }, []);
 
   const handleOnFilter = useCallback(() => {

src/component/panels/IntegralsPanel/IntegralsPreferences.tsx

@@ -1,18 +1,11 @@
-import { Formik } from 'formik';
-import {
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  memo,
-  forwardRef,
-  useMemo,
-} from 'react';
+import { useCallback, memo, forwardRef, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { usePreferences } from '../../context/PreferencesContext';
+import { ColorPickerDropdownController } from '../../elements/ColorPickerDropdownController';
+import { fieldLabelStyle } from '../../elements/FormatField';
 import Label from '../../elements/Label';
-import FormikColorPickerDropdown from '../../elements/formik/FormikColorPickerDropdown';
-import { formatFieldLabelStyle } from '../../elements/formik/FormikColumnFormatField';
-import FormikInput from '../../elements/formik/FormikInput';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
 import useNucleus from '../../hooks/useNucleus';
 import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences';
 import { getUniqueNuclei } from '../../utility/getUniqueNuclei';
@@ -21,48 +14,52 @@ import {
   NucleusPreferences,
 } from '../extra/preferences/NucleusPreferences';
 import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
+import {
+  SettingsRef,
+  useSettingImperativeHandle,
+} from '../extra/utilities/settingImperativeHandle';
 
 const formatFields: NucleusPreferenceField[] = [
   {
     id: 1,
     label: 'Serial number :',
-    checkControllerName: 'showSerialNumber',
+    checkFieldName: 'showSerialNumber',
     hideFormatField: true,
   },
   {
     id: 2,
     label: 'Absolute :',
-    checkControllerName: 'absolute.show',
-    formatControllerName: 'absolute.format',
+    checkFieldName: 'absolute.show',
+    formatFieldName: 'absolute.format',
   },
   {
     id: 3,
     label: 'Relative :',
-    checkControllerName: 'relative.show',
-    formatControllerName: 'relative.format',
+    checkFieldName: 'relative.show',
+    formatFieldName: 'relative.format',
   },
   {
     id: 4,
     label: 'from :',
-    checkControllerName: 'from.show',
-    formatControllerName: 'from.format',
+    checkFieldName: 'from.show',
+    formatFieldName: 'from.format',
   },
   {
     id: 5,
     label: 'to :',
-    checkControllerName: 'to.show',
-    formatControllerName: 'to.format',
+    checkFieldName: 'to.show',
+    formatFieldName: 'to.format',
   },
   {
     id: 6,
     label: 'Kind :',
-    checkControllerName: 'showKind',
+    checkFieldName: 'showKind',
     hideFormatField: true,
   },
   {
     id: 7,
     label: 'Delete action :',
-    checkControllerName: 'showDeleteAction',
+    checkFieldName: 'showDeleteAction',
     hideFormatField: true,
   },
 ];
@@ -73,8 +70,6 @@ function IntegralsPreferences(props, ref) {
   const nuclei = useMemo(() => getUniqueNuclei(nucleus), [nucleus]);
   const preferencesByNuclei = usePanelPreferencesByNuclei('integrals', nuclei);
 
-  const formRef = useRef<any>();
-
   const saveHandler = useCallback(
     (values) => {
       preferences.dispatch({
@@ -84,63 +79,51 @@ function IntegralsPreferences(props, ref) {
     },
     [preferences],
   );
+  const { handleSubmit, control } = useForm<any>({
+    defaultValues: preferencesByNuclei,
+  });
 
-  useImperativeHandle(ref, () => ({
-    saveSetting: () => {
-      formRef.current.submitForm();
-    },
-  }));
+  useSettingImperativeHandle(ref, handleSubmit, saveHandler);
 
   return (
     <PreferencesContainer>
-      <Formik
-        initialValues={preferencesByNuclei}
-        onSubmit={saveHandler}
-        innerRef={formRef}
-      >
-        <>
-          {nuclei?.map((n) => (
-            <NucleusPreferences
-              key={n}
-              nucleus={n}
-              fields={formatFields}
-              renderTop={() => (
-                <>
-                  <Label title="Color" style={formatFieldLabelStyle}>
-                    <div style={{ display: 'flex', padding: '2px 0' }}>
-                      <div style={{ width: '23px' }} />
-                      <FormikColorPickerDropdown name={`nuclei.${n}.color`} />
-                    </div>
-                  </Label>
-                  <Label title="Stroke width:" style={formatFieldLabelStyle}>
-                    <div style={{ display: 'flex', padding: '2px 0' }}>
-                      <div style={{ width: '23px' }} />
-                      <FormikInput
-                        name={`nuclei.${n}.strokeWidth`}
-                        type="number"
-                        style={{
-                          input: {
-                            textAlign: 'center',
-                            padding: '2px',
-                          },
-                          inputWrapper: {
-                            width: '60%',
-                          },
-                        }}
-                        min={1}
-                        max={9}
-                        pattern="[1-9]+"
-                      />
-                    </div>
-                  </Label>
-                </>
-              )}
-            />
-          ))}
-        </>
-      </Formik>
+      {nuclei?.map((n) => (
+        <NucleusPreferences
+          key={n}
+          control={control}
+          nucleus={n}
+          fields={formatFields}
+          renderTop={() => (
+            <>
+              <Label title="Color" style={fieldLabelStyle}>
+                <div style={{ display: 'flex', padding: '2px 0' }}>
+                  <div style={{ width: '23px' }} />
+                  <ColorPickerDropdownController
+                    control={control}
+                    name={`nuclei.${n}.color`}
+                  />
+                </div>
+              </Label>
+              <Label title="Stroke width:" style={fieldLabelStyle}>
+                <div style={{ display: 'flex', padding: '2px 0' }}>
+                  <div style={{ width: '23px' }} />
+                  <NumberInput2Controller
+                    name={`nuclei.${n}.strokeWidth`}
+                    control={control}
+                    min={1}
+                    max={9}
+                    controllerProps={{
+                      rules: { min: 1, max: 9, required: true },
+                    }}
+                  />
+                </div>
+              </Label>
+            </>
+          )}
+        />
+      ))}
     </PreferencesContainer>
   );
 }
 
-export default memo(forwardRef(IntegralsPreferences));
+export default memo(forwardRef<SettingsRef>(IntegralsPreferences));

src/component/panels/PeaksPanel/PeaksPanel.tsx

@@ -20,6 +20,7 @@ import useSpectrum from '../../hooks/useSpectrum';
 import { booleanToString } from '../../utility/booleanToString';
 import { FilterType } from '../../utility/filterType';
 import { tablePanelStyle } from '../extra/BasicPanelStyle';
+import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
 import DefaultPanelHeader, {
   ToolbarItemProps,
 } from '../header/DefaultPanelHeader';
@@ -57,7 +58,7 @@ function PeaksPanelInner({
   const toaster = useToaster();
   const isExperimental = useCheckExperimentalFeature();
 
-  const settingRef = useRef<any>();
+  const settingRef = useRef<SettingsRef | null>(null);
 
   const yesHandler = useCallback(() => {
     dispatch({ type: 'DELETE_PEAK', payload: {} });
@@ -77,10 +78,12 @@ function PeaksPanelInner({
     setFlipStatus(!isFlipped);
   }, [isFlipped]);
 
-  const saveSettingHandler = useCallback(() => {
-    settingRef.current.saveSetting();
-    setFlipStatus(false);
-  }, []);
+  async function saveSettingHandler() {
+    const isSettingsValid = await settingRef.current?.saveSetting();
+    if (isSettingsValid) {
+      setFlipStatus(false);
+    }
+  }
 
   const handleOnFilter = useCallback(() => {
     setFilterIsActive(!filterIsActive);