@true-engineering/true-react-common-ui-kit 1.4.1 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -21,6 +21,7 @@ Default.args = {
   precision: 3,
   intPartPrecision: 7,
   canBeFloat: false,
+  canBeNegative: false,
   label: 'Label',
   placeholder: 'Placeholder',
   infoMessage: 'Message Info',

package/src/components/NumberInput/NumberInput.tsx

@@ -1,4 +1,10 @@
-import React, { forwardRef, useState } from 'react';
+import {
+  FormEvent,
+  KeyboardEvent,
+  FocusEvent,
+  forwardRef,
+  useState,
+} from 'react';
 
 import {
   formatNumber,
@@ -10,23 +16,27 @@ import {
   stringToNumber,
 } from '../../helpers';
 import { Input, IInputProps } from '../Input';
-import { formatNumberWithDefault, getNewCaretPosition } from './helpers';
+import {
+  constructRegExp,
+  formatNumberWithDefault,
+  getNewCaretPosition,
+} from './helpers';
 import { useDidMountEffect } from '../../hooks';
 
 export interface INumberInputProps
   extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
   value?: number;
-  canBeFloat?: boolean;
   precision?: number;
   intPartPrecision?: number;
   defaultValue?: number;
-  // canBeNegative....TODO
+  canBeFloat?: boolean;
+  canBeNegative?: boolean;
   min?: number;
   max?: number;
-  onChange: (
+  onChange(
     value: number | undefined,
-    event?: React.FormEvent<HTMLInputElement>,
-  ) => void;
+    event?: FormEvent<HTMLInputElement>,
+  ): void;
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
@@ -34,10 +44,10 @@ export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
     {
       value,
       canBeFloat = false,
+      canBeNegative = false,
       defaultValue,
       precision = 3,
       intPartPrecision = 7,
-      // canBeNegative....TODO
       onChange,
       onBlur,
       min,
@@ -53,7 +63,7 @@ export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
     // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
     const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
       setIsDeleteForwardAction(event.key === 'Delete');
     };
 
@@ -63,7 +73,7 @@ export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
 
     const handleChange = async (
       inputValue: string,
-      event: React.FormEvent<HTMLInputElement>,
+      event: FormEvent<HTMLInputElement>,
     ): Promise<void> => {
       const oldValue = showedValue;
       const target = event.target as HTMLInputElement;
@@ -77,20 +87,22 @@ export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
         return;
       }
 
-      const intRegexp = new RegExp(`^\\d{0,${intPartPrecision}}$`);
-      const floatRegexp = new RegExp(
-        `^\\d{0,${intPartPrecision}}(\\.\\d{0,${precision}})?$`,
+      const numberRegexp = new RegExp(
+        constructRegExp({
+          precision,
+          intPartPrecision,
+          canBeNegative,
+          canBeFloat,
+        }),
       );
-      const numberRegexp =
-        canBeFloat && precision > 0 ? floatRegexp : intRegexp;
 
-      if (!numString.match(numberRegexp)) {
+      if (!numberRegexp.test(numString)) {
         await setShowedValue(oldValue);
         setCaretPosition(target, defaultCaretPos - 1);
         return;
       }
 
-      const hasDot = canBeFloat && inputValue.match(/^[\d\s]*[.,]$/);
+      const hasDot = canBeFloat && /^[-]*[\d\s]*[.,]$/.test(inputValue);
       const formattedValue = formatStringNumber(numString);
       const newValue = hasDot ? `${formattedValue}.` : formattedValue;
       await setShowedValue(newValue);
@@ -105,7 +117,7 @@ export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
       );
     };
 
-    const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
+    const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
       const val = event.currentTarget.value;
       const num = stringToNumber(val);
       const newValue =

package/src/components/NumberInput/helpers.ts

@@ -1,4 +1,5 @@
 import { formatNumber, isNotEmpty, isSpaceChar } from '../../helpers';
+import { INumberInputProps } from './NumberInput';
 
 const getPrevSpaces = (val: string, position: number): number =>
   val
@@ -34,6 +35,24 @@ export const formatNumberWithDefault = (
   return isNotEmpty(val) ? val : formatNumber(defaultValue);
 };
 
+export const constructRegExp = ({
+  canBeFloat,
+  canBeNegative,
+  intPartPrecision,
+  precision,
+}: Pick<
+  INumberInputProps,
+  'canBeFloat' | 'canBeNegative' | 'intPartPrecision' | 'precision'
+>): string => {
+  const basePart = `\\d{0,${intPartPrecision}}`;
+  const floatPart = `(\\.\\d{0,${precision}})?`;
+  const negativePart = '(\\-)?';
+
+  return `^${canBeNegative ? negativePart : ''}${basePart}${
+    canBeFloat ? floatPart : ''
+  }$`;
+};
+
 // const testNewCaretPosition = () => {
 //   console.log(getNewCaretPosition(1, '', '1') === 1);
 //   console.log(getNewCaretPosition(2, '1', '12') === 2);

package/src/components/Select/Select.tsx

@@ -170,6 +170,13 @@ export function Select<Value>({
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    // Когда что-то блокирует открытие листа, но блур все равно должен сработать
+    // например minSymbolsCount
+    if (isListOpen && !isOpen) {
+      handleListClose(event);
+      return;
+    }
+
     if (!isNotEmpty(event.relatedTarget) || !isNotEmpty(list.current)) {
       return;
     }
@@ -482,7 +489,7 @@ export function Select<Value>({
             event.preventDefault();
           }}
           onClick={onArrowClick}
-          className={clsx(classes.arrow, isListOpen && classes.activeArrow)}
+          className={clsx(classes.arrow, isOpen && classes.activeArrow)}
         >
           <Icon type={dropdownIcon} />
         </div>