From df3a0ffd70bed49b5fec9d0d6ef9e8ab0ca7b170 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Fri, 25 Oct 2024 20:12:33 +0200
Subject: [PATCH 1/2] refactor: add auto highlights the entire content
 functionality to number input component

---
 src/component/elements/NumberInput2.tsx | 27 +++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/component/elements/NumberInput2.tsx b/src/component/elements/NumberInput2.tsx
index a1a9a39ee..29d14cd64 100644
--- a/src/component/elements/NumberInput2.tsx
+++ b/src/component/elements/NumberInput2.tsx
@@ -8,20 +8,26 @@ import {
   useState,
   isValidElement,
   forwardRef,
+  useRef,
 } from 'react';
+import type { ForwardedRef } from 'react';
+
+import useCombinedRefs from '../hooks/useCombinedRefs.js';
 
 interface ValueProps
   extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'style'>,
     Pick<NumericInputProps, 'onValueChange' | 'value'> {
   checkValue?: (element?: number) => boolean;
   debounceTime?: number;
+  autoSelect?: boolean;
+}
+interface UseInputProps extends Omit<ValueProps, 'name'> {
+  ref: ForwardedRef<HTMLInputElement>;
 }
-type UseInputProps = Omit<ValueProps, 'name'>;
 export interface NumberInput2Props
   extends Omit<HTMLInputProps & NumericInputProps, 'value' | 'onValueChange'>,
     ValueProps {
   format?: () => (element: string) => number | string;
-  autoSelect?: boolean;
 }
 
 function useNumberInput(props: UseInputProps) {
@@ -29,9 +35,13 @@ function useNumberInput(props: UseInputProps) {
     value: externalValue,
     debounceTime,
     onValueChange,
+    ref,
+    autoSelect,
     checkValue,
   } = props;
   const [internalValue, setValue] = useState<number | string>();
+  const localRef = useRef<HTMLInputElement>();
+  const innerRef = useCombinedRefs([ref, localRef]);
   const value = debounceTime ? internalValue : externalValue;
   const [isDebounced, setDebouncedStatus] = useState<boolean>(false);
 
@@ -57,6 +67,12 @@ function useNumberInput(props: UseInputProps) {
     }
   }, [debounceTime, externalValue]);
 
+  useEffect(() => {
+    if (autoSelect) {
+      innerRef?.current?.select();
+    }
+  }, [autoSelect, innerRef]);
+
   function handleValueChange(
     valueAsNumber: number,
     valueAsString: string,
@@ -79,6 +95,7 @@ function useNumberInput(props: UseInputProps) {
     debounceOnValueChange,
     isDebounced,
     value,
+    innerRef,
   };
 }
 
@@ -110,9 +127,11 @@ function InnerNumberInput(props: NumberInput2Props, ref) {
     ...otherInputProps
   } = props;
 
-  const { handleValueChange, isDebounced, value } = useNumberInput({
+  const { handleValueChange, isDebounced, value, innerRef } = useNumberInput({
     value: externalValue,
     debounceTime,
+    autoSelect,
+    ref,
     onValueChange,
     checkValue,
   });
@@ -124,7 +143,7 @@ function InnerNumberInput(props: NumberInput2Props, ref) {
     <NumericInput
       leftIcon={icon}
       inputClassName={classes}
-      inputRef={ref}
+      inputRef={innerRef}
       onValueChange={handleValueChange}
       value={value}
       selectAllOnFocus={autoSelect}

From 101c9a67b54e30ee51d9e315b010f8fae639c3c9 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Mon, 28 Oct 2024 11:23:37 +0100
Subject: [PATCH 2/2] refactor: improve editable input field component

---
 src/component/elements/EditableColumn.tsx     | 247 ++++++++++++------
 .../panels/IntegralsPanel/IntegralTable.tsx   |   2 +-
 .../panels/MoleculesPanel/MoleculeHeader.tsx  |   5 +-
 .../panels/PeaksPanel/PeaksTable.tsx          |   2 +-
 .../TableColumns/RangeAssignmentColumn.tsx    |   3 +-
 .../TableColumns/RelativeColumn.tsx           |   2 +-
 .../TableColumns/SignalDeltaColumn.tsx        |   2 +-
 .../CorrelationTable/CorrelationTableRow.tsx  |   2 +-
 .../TableColumns/SignalDeltaColumn.tsx        |   2 +-
 .../ZoneAssignmentLabelColumn.tsx             |   3 +-
 test-e2e/panels/ranges.test.ts                |   6 +-
 11 files changed, 184 insertions(+), 92 deletions(-)

diff --git a/src/component/elements/EditableColumn.tsx b/src/component/elements/EditableColumn.tsx
index bf4e13eb2..f16ef1ab2 100644
--- a/src/component/elements/EditableColumn.tsx
+++ b/src/component/elements/EditableColumn.tsx
@@ -1,4 +1,6 @@
-import type { CSSProperties, ChangeEvent, KeyboardEvent } from 'react';
+import { Button } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { CSSProperties, KeyboardEvent } from 'react';
 import {
   forwardRef,
   useCallback,
@@ -7,8 +9,41 @@ import {
   useState,
 } from 'react';
 
-import type { InputProps } from './Input.js';
-import Input from './Input.js';
+import { Input2 } from './Input2.js';
+import { NumberInput2 } from './NumberInput2.js';
+
+interface OverflowProps {
+  textOverflowEllipses: boolean;
+}
+
+const Text = styled.span<OverflowProps>`
+  display: table-cell;
+  vertical-align: middle;
+  width: 100%;
+  height: 100%;
+  ${({ textOverflowEllipses }) =>
+    textOverflowEllipses &&
+    `
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    `}
+`;
+const Container = styled.span<OverflowProps>`
+  display: table;
+  width: 100%;
+  min-height: 22px;
+  height: 100%;
+  ${({ textOverflowEllipses }) =>
+    textOverflowEllipses &&
+    `
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-flex;
+      align-items:end;
+    `}
+`;
 
 function extractNumber(val: string | number, type: string) {
   if (type === 'number' && typeof val !== 'number') {
@@ -18,37 +53,45 @@ function extractNumber(val: string | number, type: string) {
   return val;
 }
 
-interface EditableColumnProps
-  extends Omit<InputProps, 'style' | 'value' | 'type'> {
+function handleMousedown(event) {
+  event.stopPropagation();
+}
+
+const style: CSSProperties = { minWidth: 60 };
+const className = 'editable-column';
+
+interface BaseEditableColumnProps {
+  type: 'number' | 'text';
+  value: number | string;
+  validate?: (value?: string | number) => boolean;
+}
+
+interface EditableColumnProps extends BaseEditableColumnProps {
   onSave?: (element: KeyboardEvent<HTMLInputElement>) => void;
   onEditStart?: (element: boolean) => void;
-  type?: 'number' | 'text';
   editStatus?: boolean;
-  value: string | number;
   style?: CSSProperties;
-  validate?: (value?: string | number) => boolean;
-  textOverFlowEllipses?: boolean;
+  textOverflowEllipses?: boolean;
+  clickType?: 'single' | 'double';
 }
 
-const EditableColumn = forwardRef(function EditableColumn(
+export const EditableColumn = forwardRef(function EditableColumn(
   props: EditableColumnProps,
   ref: any,
 ) {
   const {
-    onSave = () => null,
+    onSave,
     value,
-    type = 'text',
+    type,
     style,
-    onEditStart = () => null,
+    onEditStart,
     editStatus = false,
-    validate = () => true,
-    textOverFlowEllipses = false,
-    ...InputProps
+    validate,
+    textOverflowEllipses = false,
+    clickType = 'single',
   } = props;
 
   const [enabled, enableEdit] = useState<boolean | undefined>();
-  const [isValid, setValid] = useState<boolean>(true);
-  const [val, setVal] = useState(extractNumber(value, type));
   useEffect(() => {
     enableEdit(editStatus);
   }, [editStatus]);
@@ -71,85 +114,131 @@ const EditableColumn = forwardRef(function EditableColumn(
 
   function startEditHandler() {
     globalThis.addEventListener('mousedown', mouseClickCallback);
-    onEditStart(true);
+    onEditStart?.(true);
     enableEdit(true);
   }
 
-  function saveHandler(event: KeyboardEvent<HTMLInputElement>) {
-    const valid = validate(val);
-    setValid(valid);
-    // when press Enter or Tab
-    if (valid && ['Enter', 'Tab'].includes(event.key)) {
-      onSave(event);
-      enableEdit(false);
-      globalThis.removeEventListener('mousedown', mouseClickCallback);
-    }
-    // close edit mode if press Enter, Tab or Escape
-    if (['Escape'].includes(event.key)) {
-      enableEdit(false);
-      globalThis.removeEventListener('mousedown', mouseClickCallback);
-    }
+  function onConfirm(event: KeyboardEvent<HTMLInputElement>) {
+    onSave?.(event);
+    enableEdit(false);
+    globalThis.removeEventListener('mousedown', mouseClickCallback);
+  }
+
+  function onCancel() {
+    enableEdit(false);
+    globalThis.removeEventListener('mousedown', mouseClickCallback);
   }
 
-  function handleChange(e: ChangeEvent<HTMLInputElement>) {
-    setVal(e.target.value);
+  let clickHandler = {};
+
+  if (clickType === 'single' && !enabled) {
+    clickHandler = { onClick: startEditHandler };
+  }
+
+  if (clickType === 'double' && !enabled) {
+    clickHandler = { onDoubleClick: startEditHandler };
   }
 
   return (
-    <div
-      style={{
-        display: 'table',
-        width: '100%',
-        height: '100%',
-        ...(textOverFlowEllipses
-          ? { whiteSpace: 'nowrap', overflow: 'hidden', display: 'inline-flex' }
-          : {}),
-        ...style,
-      }}
+    <Container
+      style={style}
+      textOverflowEllipses={textOverflowEllipses}
       className="editable-column-input"
-      onDoubleClick={startEditHandler}
+      {...clickHandler}
     >
       {!enabled && (
-        <span
-          style={{
-            display: 'table-cell',
-            verticalAlign: 'middle',
-            width: '100%',
-            ...(textOverFlowEllipses
-              ? { textOverflow: 'ellipsis', overflow: 'hidden' }
-              : {}),
-          }}
-        >
-          {value} &nbsp;
-        </span>
+        <Text textOverflowEllipses={textOverflowEllipses}>
+          {value ?? '&nbsp;'}
+        </Text>
       )}
       {enabled && (
         <div style={{ display: 'table-cell', verticalAlign: 'middle' }}>
-          <Input
-            style={{
-              inputWrapper: {
-                ...(!isValid && { borderColor: 'red' }),
-                width: '100%',
-              },
-              input: {
-                padding: '5px',
-                width: '100%',
-                minWidth: '60px',
-              },
-            }}
-            autoSelect
-            className="editable-column"
-            value={val}
+          <EditFiled
+            value={value}
             type={type}
-            onChange={handleChange}
-            onKeyDown={saveHandler}
-            onMouseDown={(e) => e.stopPropagation()}
-            {...InputProps}
+            onConfirm={onConfirm}
+            onCancel={onCancel}
+            validate={validate}
           />
         </div>
       )}
-    </div>
+    </Container>
   );
 });
 
-export default EditableColumn;
+interface EditFiledProps extends BaseEditableColumnProps {
+  onConfirm: (event: KeyboardEvent<HTMLInputElement>) => void;
+  onCancel: (event?: KeyboardEvent<HTMLInputElement>) => void;
+}
+
+function EditFiled(props: EditFiledProps) {
+  const { value: externalValue, type, onConfirm, onCancel, validate } = props;
+
+  const [isValid, setValid] = useState<boolean>(true);
+  const [value, setVal] = useState(extractNumber(externalValue, type));
+
+  function handleKeydown(event: KeyboardEvent<HTMLInputElement>) {
+    const valid = typeof validate === 'function' ? validate(value) : true;
+    setValid(valid);
+    // when press Enter or Tab
+    if (valid && ['Enter', 'Tab'].includes(event.key)) {
+      onConfirm(event);
+    }
+    // close edit mode if press Enter, Tab or Escape
+    if (['Escape'].includes(event.key)) {
+      onCancel(event);
+    }
+  }
+
+  function handleChange(value: string | number) {
+    setVal(value);
+  }
+
+  const intent = !isValid ? 'danger' : 'none';
+
+  const rightElement = (
+    <Button
+      minimal
+      icon="cross"
+      onMouseDown={handleMousedown}
+      onClick={() => onCancel()}
+    />
+  );
+
+  if (type === 'number') {
+    return (
+      <NumberInput2
+        intent={intent}
+        style={style}
+        autoSelect
+        className={className}
+        value={value}
+        onValueChange={(valueAsNumber, valueString) =>
+          handleChange(valueString ?? Number(valueString))
+        }
+        onKeyDown={handleKeydown}
+        onMouseDown={handleMousedown}
+        small
+        fill
+        buttonPosition="none"
+        stepSize={1}
+        rightElement={rightElement}
+      />
+    );
+  }
+
+  return (
+    <Input2
+      intent={intent}
+      style={style}
+      autoSelect
+      className={className}
+      value={value as string}
+      onChange={(value) => handleChange(value)}
+      onKeyDown={handleKeydown}
+      onMouseDown={handleMousedown}
+      small
+      rightElement={rightElement}
+    />
+  );
+}
diff --git a/src/component/panels/IntegralsPanel/IntegralTable.tsx b/src/component/panels/IntegralsPanel/IntegralTable.tsx
index 1264bf498..d0812b8a2 100644
--- a/src/component/panels/IntegralsPanel/IntegralTable.tsx
+++ b/src/component/panels/IntegralsPanel/IntegralTable.tsx
@@ -6,7 +6,7 @@ import { FaRegTrashAlt } from 'react-icons/fa';
 import { SIGNAL_KINDS } from '../../../data/constants/signalsKinds.js';
 import { checkIntegralKind } from '../../../data/data1d/Spectrum1D/index.js';
 import { useDispatch } from '../../context/DispatchContext.js';
-import EditableColumn from '../../elements/EditableColumn.js';
+import { EditableColumn } from '../../elements/EditableColumn.js';
 import ReactTable from '../../elements/ReactTable/ReactTable.js';
 import type { CustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
 import addCustomColumn, {
diff --git a/src/component/panels/MoleculesPanel/MoleculeHeader.tsx b/src/component/panels/MoleculesPanel/MoleculeHeader.tsx
index 0f1315325..0eb5acaf6 100644
--- a/src/component/panels/MoleculesPanel/MoleculeHeader.tsx
+++ b/src/component/panels/MoleculesPanel/MoleculeHeader.tsx
@@ -8,7 +8,7 @@ import {
   extractNumber,
 } from '../../../data/molecules/MoleculeManager.js';
 import { useDispatch } from '../../context/DispatchContext.js';
-import EditableColumn from '../../elements/EditableColumn.js';
+import { EditableColumn } from '../../elements/EditableColumn.js';
 import Label from '../../elements/Label.js';
 
 interface MoleculeHeaderProps {
@@ -61,7 +61,8 @@ export default function MoleculeHeader(props: MoleculeHeaderProps) {
           style={styles.labelInput}
           validate={validateLabel}
           onSave={(event) => saveLabelHandler(currentMolecule.id, event)}
-          textOverFlowEllipses
+          textOverflowEllipses
+          type="text"
         />
       </Label>
       <span>
diff --git a/src/component/panels/PeaksPanel/PeaksTable.tsx b/src/component/panels/PeaksPanel/PeaksTable.tsx
index 1b7baaf42..58818714a 100644
--- a/src/component/panels/PeaksPanel/PeaksTable.tsx
+++ b/src/component/panels/PeaksPanel/PeaksTable.tsx
@@ -4,7 +4,7 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { FaEdit, FaRegTrashAlt } from 'react-icons/fa';
 
 import { useDispatch } from '../../context/DispatchContext.js';
-import EditableColumn from '../../elements/EditableColumn.js';
+import { EditableColumn } from '../../elements/EditableColumn.js';
 import ReactTable from '../../elements/ReactTable/ReactTable.js';
 import type { ControlCustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
 import addCustomColumn, {
diff --git a/src/component/panels/RangesPanel/TableColumns/RangeAssignmentColumn.tsx b/src/component/panels/RangesPanel/TableColumns/RangeAssignmentColumn.tsx
index f46613b48..3500c751c 100644
--- a/src/component/panels/RangesPanel/TableColumns/RangeAssignmentColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/RangeAssignmentColumn.tsx
@@ -1,5 +1,5 @@
 import { useDispatch } from '../../../context/DispatchContext.js';
-import EditableColumn from '../../../elements/EditableColumn.js';
+import { EditableColumn } from '../../../elements/EditableColumn.js';
 import type { OnHoverEvent, RowSpanTags } from '../RangesTableRow.js';
 import type { RangeData } from '../hooks/useMapRanges.js';
 
@@ -29,6 +29,7 @@ export function RangeAssignmentColumn({
         value={row?.assignment || ''}
         onSave={saveHandler}
         style={{ padding: '0.1rem 0.4rem' }}
+        type="text"
       />
     </td>
   );
diff --git a/src/component/panels/RangesPanel/TableColumns/RelativeColumn.tsx b/src/component/panels/RangesPanel/TableColumns/RelativeColumn.tsx
index 6832f8f6d..276a7474d 100644
--- a/src/component/panels/RangesPanel/TableColumns/RelativeColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/RelativeColumn.tsx
@@ -1,6 +1,6 @@
 import { checkRangeKind } from '../../../../data/utilities/RangeUtilities.js';
 import { useDispatch } from '../../../context/DispatchContext.js';
-import EditableColumn from '../../../elements/EditableColumn.js';
+import { EditableColumn } from '../../../elements/EditableColumn.js';
 import { formatNumber } from '../../../utility/formatNumber.js';
 import type { RangeColumnProps } from '../RangesTableRow.js';
 
diff --git a/src/component/panels/RangesPanel/TableColumns/SignalDeltaColumn.tsx b/src/component/panels/RangesPanel/TableColumns/SignalDeltaColumn.tsx
index 2ad8d52b9..394a9b356 100644
--- a/src/component/panels/RangesPanel/TableColumns/SignalDeltaColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/SignalDeltaColumn.tsx
@@ -1,7 +1,7 @@
 import { checkMultiplicity } from 'nmr-processing';
 
 import { useDispatch } from '../../../context/DispatchContext.js';
-import EditableColumn from '../../../elements/EditableColumn.js';
+import { EditableColumn } from '../../../elements/EditableColumn.js';
 import { formatNumber } from '../../../utility/formatNumber.js';
 import type { RangeColumnProps } from '../RangesTableRow.js';
 
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTableRow.tsx b/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTableRow.tsx
index 53581b21f..84315adc8 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTableRow.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTableRow.tsx
@@ -13,7 +13,7 @@ import { useAlert } from '../../../elements/Alert.js';
 import type { ContextMenuItem } from '../../../elements/ContextMenuBluePrint.js';
 import { ContextMenu } from '../../../elements/ContextMenuBluePrint.js';
 import { useDialog } from '../../../elements/DialogManager.js';
-import EditableColumn from '../../../elements/EditableColumn.js';
+import { EditableColumn } from '../../../elements/EditableColumn.js';
 import { useHighlight } from '../../../highlight/index.js';
 import { convertValuesString } from '../utilities/Utilities.js';
 import useInView from '../utilities/useInView.js';
diff --git a/src/component/panels/ZonesPanel/TableColumns/SignalDeltaColumn.tsx b/src/component/panels/ZonesPanel/TableColumns/SignalDeltaColumn.tsx
index 92f34887d..130fa70ce 100644
--- a/src/component/panels/ZonesPanel/TableColumns/SignalDeltaColumn.tsx
+++ b/src/component/panels/ZonesPanel/TableColumns/SignalDeltaColumn.tsx
@@ -1,7 +1,7 @@
 import lodashGet from 'lodash/get.js';
 
 import { useDispatch } from '../../../context/DispatchContext.js';
-import EditableColumn from '../../../elements/EditableColumn.js';
+import { EditableColumn } from '../../../elements/EditableColumn.js';
 import { usePanelPreferences } from '../../../hooks/usePanelPreferences.js';
 import { formatNumber } from '../../../utility/formatNumber.js';
 import type { ZoneData } from '../hooks/useMapZones.js';
diff --git a/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentLabelColumn.tsx b/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentLabelColumn.tsx
index 4ec1fe798..8b9f7b1a2 100644
--- a/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentLabelColumn.tsx
+++ b/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentLabelColumn.tsx
@@ -1,5 +1,5 @@
 import { useDispatch } from '../../../context/DispatchContext.js';
-import EditableColumn from '../../../elements/EditableColumn.js';
+import { EditableColumn } from '../../../elements/EditableColumn.js';
 import type { ZoneData } from '../hooks/useMapZones.js';
 
 interface ZoneAssignmentLabelColumnProps {
@@ -27,6 +27,7 @@ export function ZoneAssignmentLabelColumn({
         value={rowData?.assignment || ''}
         onSave={saveHandler}
         style={{ padding: '0.1rem 0.4rem' }}
+        type="text"
       />
     </td>
   );
diff --git a/test-e2e/panels/ranges.test.ts b/test-e2e/panels/ranges.test.ts
index 0db726142..811eefff4 100644
--- a/test-e2e/panels/ranges.test.ts
+++ b/test-e2e/panels/ranges.test.ts
@@ -288,7 +288,7 @@ test('Range state', async ({ page }) => {
   await test.step('Check that first spectrum range state saved', async () => {
     // Change spectra
     await nmrium.page.click(
-      '_react=SpectraTable >> _react=ReactTableRow>> nth=0',
+      '_react=SpectraTable >> _react=ReactTableRow >> nth=0',
     );
     // Change spectra
     await nmrium.page.click(
@@ -458,7 +458,7 @@ test('2D spectra reference change', async ({ page }) => {
       .locator(
         '_react=ZonesPanel >> _react=ZonesTableRow >> nth=0 >> td >> nth=1',
       )
-      .dblclick();
+      .click();
 
     await nmrium.page.keyboard.type(x.toString());
     await nmrium.page.keyboard.press('Enter');
@@ -467,7 +467,7 @@ test('2D spectra reference change', async ({ page }) => {
       .locator(
         '_react=ZonesPanel >> _react=ZonesTableRow >> nth=0 >> td >> nth=2',
       )
-      .dblclick();
+      .click();
 
     await nmrium.page.keyboard.type(y.toString());
     await nmrium.page.keyboard.press('Enter');