@true-engineering/true-react-common-ui-kit 1.0.2 → 1.2.0

package/src/components/SmartInput/SmartInput.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, forwardRef} from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import { Input, IInputProps } from '../Input';
 import {
   CharactersMap,
@@ -38,140 +38,143 @@ export const SMART_INPUT_REGEX_MAP = {
   benefitCert: /^[a-zA-Z0-9/]*$/i,
 };
 
-export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(({
-  onChange,
-  isUpperCase,
-  smartType = 'default',
-  regExp,
-  value = '',
-  maxLength,
-  ...rest
-}, ref) => {
-  const [currentValue, setCurrentValue] = useState<string>(
-    getUpperCaseIfNeeded(value),
-  );
-  const [caretPosition, setCaretPosition] = useState<number | null>(null);
-  const [input, setInput] = useState<HTMLInputElement | null>(null);
-  const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
-
-  useEffect(() => {
-    if (
-      input &&
-      input.type !== 'email' &&
-      input.selectionStart !== caretPosition
-    ) {
-      input.selectionStart = caretPosition;
-      input.selectionEnd = caretPosition;
+export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
+  (
+    {
+      onChange,
+      isUpperCase,
+      smartType = 'default',
+      regExp,
+      value = '',
+      maxLength,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [currentValue, setCurrentValue] = useState<string>(
+      getUpperCaseIfNeeded(value),
+    );
+    const [caretPosition, setCaretPosition] = useState<number | null>(null);
+    const [input, setInput] = useState<HTMLInputElement | null>(null);
+    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
+
+    useEffect(() => {
+      if (
+        input &&
+        input.type !== 'email' &&
+        input.selectionStart !== caretPosition
+      ) {
+        input.selectionStart = caretPosition;
+        input.selectionEnd = caretPosition;
+      }
+    }, [caretPosition]);
+
+    useEffect(() => {
+      setCurrentValue(getUpperCaseIfNeeded(value));
+    }, [value]);
+
+    function getUpperCaseIfNeeded(str: string) {
+      return isUpperCase ? str.toUpperCase() : str;
     }
-  }, [caretPosition]);
 
-  useEffect(() => {
-    setCurrentValue(getUpperCaseIfNeeded(value));
-  }, [value]);
+    const handleChange = (
+      str: string,
+      event?: React.FormEvent<HTMLInputElement>,
+    ) => {
+      const mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(
+                smartType,
+                smartType !== 'email'
+                  ? CharactersMap
+                  : { ...CharactersMap, '"': '@' },
+                symbol,
+              ),
+        )
+        .filter((symbol) => regex.test(symbol))
+        .join('');
+      const domElement = event?.currentTarget;
+
+      if (domElement) {
+        if (!input) {
+          setInput(domElement);
+        }
+
+        setCurrentValue(getUpperCaseIfNeeded(mappedValue));
+        onChange(getUpperCaseIfNeeded(mappedValue));
+
+        if (mappedValue !== currentValue) {
+          setCaretPosition(domElement.selectionStart);
+        } else {
+          setCaretPosition(
+            domElement.selectionStart ? domElement.selectionStart - 1 : null,
+          );
+        }
+      }
+    };
 
-  function getUpperCaseIfNeeded(str: string) {
-    return isUpperCase ? str.toUpperCase() : str;
-  }
+    const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+      const str = event.clipboardData.getData('text/plain').split('').join('');
+      const domElement = event.currentTarget;
 
-  const handleChange = (
-    str: string,
-    event?: React.FormEvent<HTMLInputElement>,
-  ) => {
-    const mappedValue = str
-      .split('')
-      .map((symbol) =>
-        regex.test(symbol)
-          ? symbol
-          : transformCaseSensitive(
-              smartType,
-              smartType !== 'email'
-                ? CharactersMap
-                : { ...CharactersMap, '"': '@' },
-              symbol,
-            ),
-      )
-      .filter((symbol) => regex.test(symbol))
-      .join('');
-    const domElement = event?.currentTarget;
-
-    if (domElement) {
       if (!input) {
         setInput(domElement);
       }
 
-      setCurrentValue(getUpperCaseIfNeeded(mappedValue));
-      onChange(getUpperCaseIfNeeded(mappedValue));
-
-      if (mappedValue !== currentValue) {
-        setCaretPosition(domElement.selectionStart);
-      } else {
-        setCaretPosition(
-          domElement.selectionStart ? domElement.selectionStart - 1 : null,
-        );
+      event.preventDefault();
+      const selectionStart = domElement.selectionStart ?? 0;
+      const selectionEnd = domElement.selectionEnd ?? 0;
+
+      let mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(smartType, TransliterationMap, symbol),
+        )
+        .filter((letter) => regex.test(letter))
+        .join('');
+
+      const newValueLength =
+        mappedValue.length +
+        currentValue.length -
+        (selectionEnd - selectionStart);
+
+      if (
+        maxLength !== undefined &&
+        maxLength >= 0 &&
+        newValueLength > maxLength
+      ) {
+        const validMappedValueLength =
+          mappedValue.length - (newValueLength - maxLength);
+
+        mappedValue = mappedValue.substring(0, validMappedValueLength);
       }
-    }
-  };
-
-  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
-    const str = event.clipboardData.getData('text/plain').split('').join('');
-    const domElement = event.currentTarget;
-
-    if (!input) {
-      setInput(domElement);
-    }
 
-    event.preventDefault();
-    const selectionStart = domElement.selectionStart ?? 0;
-    const selectionEnd = domElement.selectionEnd ?? 0;
-
-    let mappedValue = str
-      .split('')
-      .map((symbol) =>
-        regex.test(symbol)
-          ? symbol
-          : transformCaseSensitive(smartType, TransliterationMap, symbol),
-      )
-      .filter((letter) => regex.test(letter))
-      .join('');
-
-    const newValueLength =
-      mappedValue.length +
-      currentValue.length -
-      (selectionEnd - selectionStart);
-
-    if (
-      maxLength !== undefined &&
-      maxLength >= 0 &&
-      newValueLength > maxLength
-    ) {
-      const validMappedValueLength =
-        mappedValue.length - (newValueLength - maxLength);
-
-      mappedValue = mappedValue.substring(0, validMappedValueLength);
-    }
-
-    const newValue = getUpperCaseIfNeeded(
-      `${currentValue?.substring(
-        0,
-        selectionStart,
-      )}${mappedValue}${currentValue?.substring(
-        selectionEnd,
-      )}`,
+      const newValue = getUpperCaseIfNeeded(
+        `${currentValue?.substring(
+          0,
+          selectionStart,
+        )}${mappedValue}${currentValue?.substring(selectionEnd)}`,
+      );
+
+      setCaretPosition(selectionStart + mappedValue.length);
+      setCurrentValue(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Input
+        {...rest}
+        ref={ref}
+        maxLength={maxLength}
+        onChange={handleChange}
+        onPaste={handlePaste}
+        value={currentValue}
+      />
     );
-
-    setCaretPosition(selectionStart + mappedValue.length);
-    setCurrentValue(newValue);
-    onChange(newValue);
-  };
-
-  return (
-    <Input
-      {...rest}
-      ref={ref}
-      maxLength={maxLength}
-      onChange={handleChange}
-      onPaste={handlePaste}
-      value={currentValue}
-    />
-  );
-});
+  },
+);