Merge pull request #53 from OpenLMIS/OLMIS-7987-input-cell-modify

OLMIS-7987: react components update
OpenLMIS · Oct 20, 2024 · 005f64e · 005f64e
2 parents b15b840 + a55f7d4
commit 005f64e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 51 deletions.
diff --git a/src/react-components/inputs/numeric-input.jsx b/src/react-components/inputs/numeric-input.jsx
@@ -14,69 +14,65 @@
  */
 
 import React from 'react';
-import WebTooltip from '../modals/web-tooltip';
 
 const NumericInput = ({
-  onChange,
-  numeric,
-  allowNegative = false,
-  isInvalid,
-  errorMessage,
-  ...props
+    onChange,
+    numeric,
+    allowNegative = false,
+    isInvalid,
+    errorMessage,
+    ...props
 }) => {
 
-  const inputProps = numeric ? {
-      className: 'number',
-      ...props,
-      inputMode: 'numeric',
-      pattern: '[0-9]*'
-  } : props;
+    const inputProps = numeric ? {
+        className: 'number',
+        ...props,
+        disabled: props.disabled,
+        inputMode: 'numeric',
+        pattern: '[0-9]*'
+    } : props;
 
-  const parseNumber = stringValue => {
-      const n = Number(stringValue);
+    const parseNumber = stringValue => {
+        const n = Number(stringValue);
 
-      if (Number.isNaN(n) || !Number.isSafeInteger(n)) {
-          return null;
-      }
+        if (Number.isNaN(n) || !Number.isSafeInteger(n)) {
+            return null;
+        }
 
-      return n;
-  };
+        return n;
+    };
 
-  const handleChange = (event) => {
-      const { value } = event.target;
+    const handleChange = (event) => {
+        const { value } = event.target;
 
-      if (value === '') {
-          onChange(null);
-          return;
-      }
+        if (value === '') {
+            onChange(null);
+            return;
+        }
 
-      const positiveNumberRegex = '^\\d+$';
-      const negativeNumberRegex = '^\\-?\d*$';
+        const positiveNumberRegex = '^\\d+$';
+        const negativeNumberRegex = '^\\-?\d*$';
 
-      const numberRegex = allowNegative ? negativeNumberRegex : positiveNumberRegex;
+        const numberRegex = allowNegative ? negativeNumberRegex : positiveNumberRegex;
 
-      const match = value.match(numberRegex);
+        const match = value.match(numberRegex);
 
-      if (match !== null) {
-          const parsedNumber = parseNumber(value);
+        if (match !== null) {
+            const parsedNumber = parseNumber(value);
 
-          if (parsedNumber !== null) {
-              onChange(parsedNumber);
-          }
-      }
-  };
+            if (parsedNumber !== null) {
+                onChange(parsedNumber);
+            }
+        }
+    };
 
     return (
-      <WebTooltip shouldDisplayTooltip={isInvalid} tooltipContent={errorMessage}>
-        <div className={`input-control ${isInvalid ? 'is-invalid' : ''} ${props.disabled ? 'is-disabled' : ''}`}>
-            <input
-                className='number'
-                type='text'
-                onChange={handleChange}
-                {...inputProps}
-            />
-        </div>
-      </WebTooltip>
+        <input
+            className='number'
+            type='text'
+            onChange={handleChange}
+            {...inputProps}
+        />
     );
 };
 

diff --git a/src/react-components/table/input-cell.jsx b/src/react-components/table/input-cell.jsx
@@ -25,11 +25,11 @@ const InputCell = ({
     updateTableData,
     validateRow,
     showValidationErrors,
-    numeric = false
+    numeric = false,
+    disabled = false
 }) => {
     const [value, setValue] = useState(initialValue);
     const [valid, setValid] = useState(true);
-
     const onChange = val => {
         setValue(val);
 
@@ -58,8 +58,8 @@ const InputCell = ({
 
     return (
         <div className={`form-control ${valid ? '' : 'is-invalid'}`}>
-            {numeric && <NumericInput value={value} onChange={onChange} onBlur={onBlur}/>}
-            {!numeric && <Input value={value} onChange={onChange} onBlur={onBlur}/>}
+            {numeric && <NumericInput value={value} onChange={onChange} onBlur={onBlur} disabled={disabled} />}
+            {!numeric && <Input value={value} onChange={onChange} onBlur={onBlur} disabled={disabled} />}
         </div>
     );
 };