refactor: summary panel modals (#2996)

* refactor: shift tolerances modal * refactor: set molecular formula modal
cheminfo · Mar 26, 2024 · c535803 · c535803
1 parent 8ff77c7
commit c535803
Show file tree

Hide file tree

Showing 8 changed files with 302 additions and 404 deletions.
diff --git a/src/component/1d/ranges/Range.tsx b/src/component/1d/ranges/Range.tsx
@@ -19,8 +19,8 @@ import { IntegralIndicator } from '../integral/IntegralIndicator';
 import { useScaleX } from '../utilities/scale';
 
 import { AssignmentActionsButtons } from './AssignmentActionsButtons';
-import { Atoms } from './Atoms';
 import { AssignmentLabel } from './AssignmentLabel';
+import { Atoms } from './Atoms';
 
 const style = css`
   .target {

diff --git a/src/component/elements/MolecularFormulaInput.tsx b/src/component/elements/MolecularFormulaInput.tsx
diff --git a/src/component/elements/formik/FormikError.tsx b/src/component/elements/formik/FormikError.tsx
@@ -4,7 +4,6 @@ import { CSSProperties, ReactNode } from 'react';
 
 const styles: Record<'container' | 'text', CSSProperties> = {
   container: {
-    padding: '0.4rem',
     display: 'flex',
     flexDirection: 'column',
   },
@@ -22,15 +21,13 @@ export interface FormikErrorProps {
 }
 
 function FormikError({ style, name, children }: FormikErrorProps) {
-  const { errors, isValid, dirty, touched } = useFormikContext();
+  const { errors, isValid, dirty } = useFormikContext();
 
   const errorText = lodashGet(errors, name);
-  const isTouched = lodashGet(touched, name);
-
   return (
     <div style={{ ...styles.container, ...style?.container }}>
       {children}
-      {!isValid && dirty && isTouched && (
+      {!isValid && dirty && (
         <span style={{ ...styles.text, ...style?.text }}>{errorText}</span>
       )}
     </div>

diff --git a/src/component/elements/formik/FormikInput.tsx b/src/component/elements/formik/FormikInput.tsx
@@ -26,7 +26,7 @@ function FormikInput(props: FormikInputProps & InputProps) {
     ...resProps
   } = props;
 
-  const { values, handleChange, errors, touched, setFieldValue } =
+  const { values, handleChange, errors, touched, setFieldValue, handleBlur } =
     useFormikContext();
 
   function changeHandler(e) {
@@ -37,7 +37,6 @@ function FormikInput(props: FormikInputProps & InputProps) {
       handleChange(e);
     }
   }
-
   let isInvalid = lodashGet(errors, name);
 
   if (checkErrorAfterInputTouched) {
@@ -46,11 +45,13 @@ function FormikInput(props: FormikInputProps & InputProps) {
 
   let val = value || lodashGet(values, name);
   val = mapValue ? mapValue(val) : val;
+
   return (
     <Input
       name={name}
       value={val}
       onChange={changeHandler}
+      onBlur={handleBlur}
       type={type}
       style={{
         ...style,

diff --git a/src/component/panels/RangesPanel/RangesHeader.tsx b/src/component/panels/RangesPanel/RangesHeader.tsx
@@ -7,8 +7,8 @@ import lodashGet from 'lodash/get';
 import { RangesViewState } from 'nmr-load-save';
 import { rangesToACS } from 'nmr-processing';
 import { FaFileExport, FaUnlink, FaSitemap, FaChartBar } from 'react-icons/fa';
-import { LuSubtitles } from 'react-icons/lu';
 import { ImLink } from 'react-icons/im';
+import { LuSubtitles } from 'react-icons/lu';
 
 import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents';
 import { useClipboard } from '../../../utils/clipboard/clipboardHooks';