@true-engineering/true-react-common-ui-kit 3.24.1 → 3.25.1

package/src/components/NumberInput/NumberInput.tsx

@@ -1,137 +1,137 @@
-import { FormEvent, KeyboardEvent, FocusEvent, forwardRef, useState } from 'react';
-import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import {
-  formatNumber,
-  formatStringNumber,
-  getNumberInRange,
-  removeStringFormat,
-  setCaretPosition,
-  stringToNumber,
-} from '../../helpers';
-import { useDidMountEffect } from '../../hooks';
-import { Input, IInputProps } from '../Input';
-import { constructRegExp, formatNumberWithDefault, getNewCaretPosition } from './helpers';
-
-export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
-  value?: number;
-  /** @default 3 */
-  precision?: number;
-  /** @default 7 */
-  intPartPrecision?: number;
-  defaultValue?: number;
-  /** @default false */
-  canBeFloat?: boolean;
-  /** @default false */
-  canBeNegative?: boolean;
-  min?: number;
-  max?: number;
-  onChange: (value: number | undefined, event?: FormEvent<HTMLInputElement>) => void;
-}
-
-export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
-  (
-    {
-      value,
-      canBeFloat = false,
-      canBeNegative = false,
-      defaultValue,
-      precision = 3,
-      intPartPrecision = 7,
-      onChange,
-      onBlur,
-      min,
-      max,
-      ...props
-    },
-    ref,
-  ) => {
-    const [showedValue, setShowedValue] = useState(() =>
-      formatNumberWithDefault(value, defaultValue),
-    );
-
-    // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
-    const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
-
-    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-      setIsDeleteForwardAction(event.key === 'Delete');
-    };
-
-    const setShowedValueWithDefault = (v: string) => {
-      setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
-    };
-
-    const handleChange = async (
-      inputValue: string,
-      event: FormEvent<HTMLInputElement>,
-    ): Promise<void> => {
-      const oldValue = showedValue;
-      const target = event.target as HTMLInputElement;
-      const defaultCaretPos = target.selectionStart ?? 0;
-      const numString = removeStringFormat(inputValue);
-
-      if (numString === '') {
-        onChange(undefined);
-        // не убирать - ломается каретка
-        setShowedValue('');
-        return;
-      }
-
-      const numberRegexp = new RegExp(
-        constructRegExp({
-          precision,
-          intPartPrecision,
-          canBeNegative,
-          canBeFloat,
-        }),
-      );
-
-      if (!numberRegexp.test(numString)) {
-        await setShowedValue(oldValue);
-        setCaretPosition(target, defaultCaretPos - 1);
-        return;
-      }
-
-      const hasDot = canBeFloat && /^[-]*[\d\s]*[.,]$/.test(inputValue);
-      const formattedValue = formatStringNumber(numString);
-      const newValue = hasDot ? `${formattedValue}.` : formattedValue;
-      await setShowedValue(newValue);
-      setCaretPosition(
-        target,
-        getNewCaretPosition(defaultCaretPos, oldValue, newValue, isDeleteForwardAction),
-      );
-    };
-
-    const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
-      const val = event.currentTarget.value;
-      const num = stringToNumber(val);
-      const newValue = num !== undefined ? getNumberInRange(num, min, max) : undefined;
-      if (newValue !== value) {
-        onChange(newValue);
-      } else {
-        setShowedValueWithDefault(formatNumber(value));
-      }
-      if (onBlur !== undefined) {
-        onBlur(event);
-      }
-    };
-
-    useDidMountEffect(() => {
-      if (value !== undefined) {
-        setShowedValueWithDefault(formatNumber(value));
-      } else {
-        setShowedValue(formatNumber(value));
-      }
-    }, [value]);
-
-    return (
-      <Input
-        value={showedValue}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+import { FormEvent, KeyboardEvent, FocusEvent, forwardRef, useState } from 'react';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import {
+  formatNumber,
+  formatStringNumber,
+  getNumberInRange,
+  removeStringFormat,
+  setCaretPosition,
+  stringToNumber,
+} from '../../helpers';
+import { useDidMountEffect } from '../../hooks';
+import { Input, IInputProps } from '../Input';
+import { constructRegExp, formatNumberWithDefault, getNewCaretPosition } from './helpers';
+
+export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
+  value?: number;
+  /** @default 3 */
+  precision?: number;
+  /** @default 7 */
+  intPartPrecision?: number;
+  defaultValue?: number;
+  /** @default false */
+  canBeFloat?: boolean;
+  /** @default false */
+  canBeNegative?: boolean;
+  min?: number;
+  max?: number;
+  onChange: (value: number | undefined, event?: FormEvent<HTMLInputElement>) => void;
+}
+
+export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
+  (
+    {
+      value,
+      canBeFloat = false,
+      canBeNegative = false,
+      defaultValue,
+      precision = 3,
+      intPartPrecision = 7,
+      onChange,
+      onBlur,
+      min,
+      max,
+      ...props
+    },
+    ref,
+  ) => {
+    const [showedValue, setShowedValue] = useState(() =>
+      formatNumberWithDefault(value, defaultValue),
+    );
+
+    // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
+    const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      setIsDeleteForwardAction(event.key === 'Delete');
+    };
+
+    const setShowedValueWithDefault = (v: string) => {
+      setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
+    };
+
+    const handleChange = async (
+      inputValue: string,
+      event: FormEvent<HTMLInputElement>,
+    ): Promise<void> => {
+      const oldValue = showedValue;
+      const target = event.target as HTMLInputElement;
+      const defaultCaretPos = target.selectionStart ?? 0;
+      const numString = removeStringFormat(inputValue);
+
+      if (numString === '') {
+        onChange(undefined);
+        // не убирать - ломается каретка
+        setShowedValue('');
+        return;
+      }
+
+      const numberRegexp = new RegExp(
+        constructRegExp({
+          precision,
+          intPartPrecision,
+          canBeNegative,
+          canBeFloat,
+        }),
+      );
+
+      if (!numberRegexp.test(numString)) {
+        await setShowedValue(oldValue);
+        setCaretPosition(target, defaultCaretPos - 1);
+        return;
+      }
+
+      const hasDot = canBeFloat && /^[-]*[\d\s]*[.,]$/.test(inputValue);
+      const formattedValue = formatStringNumber(numString);
+      const newValue = hasDot ? `${formattedValue}.` : formattedValue;
+      await setShowedValue(newValue);
+      setCaretPosition(
+        target,
+        getNewCaretPosition(defaultCaretPos, oldValue, newValue, isDeleteForwardAction),
+      );
+    };
+
+    const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
+      const val = event.currentTarget.value;
+      const num = stringToNumber(val);
+      const newValue = num !== undefined ? getNumberInRange(num, min, max) : undefined;
+      if (newValue !== value) {
+        onChange(newValue);
+      } else {
+        setShowedValueWithDefault(formatNumber(value));
+      }
+      if (onBlur !== undefined) {
+        onBlur(event);
+      }
+    };
+
+    useDidMountEffect(() => {
+      if (value !== undefined) {
+        setShowedValueWithDefault(formatNumber(value));
+      } else {
+        setShowedValue(formatNumber(value));
+      }
+    }, [value]);
+
+    return (
+      <Input
+        value={showedValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/NumberInput/helpers.ts

@@ -3,10 +3,7 @@ import { formatNumber, isSpaceChar } from '../../helpers';
 import type { INumberInputProps } from './NumberInput';
 
 const getPrevSpaces = (val: string, position: number): number =>
-  val
-    .slice(0, position - 1)
-    .split('')
-    .filter(isSpaceChar).length;
+  val.slice(0, position).split('').filter(isSpaceChar).length;
 
 export const getNewCaretPosition = (
   defaultPosition: number,
@@ -18,7 +15,8 @@ export const getNewCaretPosition = (
     return isDeleteForwardAction ? defaultPosition + 1 : defaultPosition;
   }
 
-  const oldPrevSpaces = getPrevSpaces(oldValue, defaultPosition);
+  const isAdding = newValue.length > oldValue.length;
+  const oldPrevSpaces = getPrevSpaces(oldValue, defaultPosition - (isAdding ? 1 : 0));
   const newPrevSpaces = getPrevSpaces(newValue, defaultPosition);
   const diff = newPrevSpaces - oldPrevSpaces;
   const res = defaultPosition + diff;
@@ -79,7 +77,7 @@ export const constructRegExp = ({
 //   console.log(getNewCaretPosition(5, '1 230 456', '1 230 456') === 5);
 //   console.log(getNewCaretPosition(4, '1 230 456', '123 456') === 3);
 //
-//   console.log(getNewCaretPosition(5, '1 234 567', '123 467') === 5);
+//   console.log(getNewCaretPosition(6, '1 234 567', '123 467') === 5);
 //   console.log(getNewCaretPosition(5, '1 234 567', '1 234') === 5);
 // };
 //

package/src/components/NumberInput/index.ts

@@ -1 +1 @@
-export * from './NumberInput';
+export * from './NumberInput';