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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "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/types.ts

@@ -1,106 +1,106 @@
-import { Styles } from 'react-jss';
-import { Modifier, Placement } from 'react-overlays/usePopper';
-import {
-  ICommonIcon,
-  IComplexIcon,
-  IPreloaderSvgType,
-  ISvgIcon,
-} from './components';
-
-export interface IDataAttributes {
-  [key: string]: unknown;
-}
-
-export interface ICommonProps {
-  data?: IDataAttributes;
-}
-
-export interface IDropdownWithPopperOptions {
-  shouldUsePopper?: boolean;
-  shouldRenderInBody?: boolean;
-  scrollParent?: 'auto' | 'document' | Element;
-
-  shouldHideOnScroll?: boolean; // работает весьма условно без shouldUsePopper
-  canBeFlipped?: boolean; // только с shouldUsePopper
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  modifiers?: Array<Partial<Modifier<any, any>>>; // только с shouldUsePopper
-  placement?: Placement; // only with shouldUsePopper
-  // https://popper.js.org/docs/v2/modifiers/flip/
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  flipOptions?: Record<string, any>; // только с shouldUsePopper
-}
-
-export type ComponentStyles<StyleSheet, Props = unknown> = Partial<
-  Styles<keyof StyleSheet, Props>
->;
-
-// TODO: Скрипт
-export type ComponentName =
-  | 'AccountInfo'
-  | 'AddButton'
-  | 'Button'
-  | 'CloseButton'
-  | 'Checkbox'
-  | 'CssBaseline'
-  | 'Colors'
-  | 'DateInput'
-  | 'DatePicker'
-  | 'DatePickerInput'
-  | 'DatePickerHeader'
-  | 'Description'
-  | 'DotsPreloader'
-  | 'SvgPreloader'
-  | 'FiltersPane'
-  | 'FilterInterval'
-  | 'FilterSelect'
-  | 'FilterWithDates'
-  | 'FilterWithPeriod'
-  | 'FilterWrapper'
-  | 'FiltersPaneSearch'
-  | 'Flag'
-  | 'FlexibleTable'
-  | 'Icon'
-  | 'IncrementInput'
-  | 'Input'
-  | 'List'
-  | 'Modal'
-  | 'MoreMenu'
-  | 'MultiSelect'
-  | 'MultiSelectInput'
-  | 'MultiSelectList'
-  | 'Notification'
-  | 'PhoneInput'
-  | 'PhoneInputCountryList'
-  | 'RadioButton'
-  | 'SearchInput'
-  | 'Select'
-  | 'SelectList'
-  | 'ScrollIntoViewIfNeeded'
-  | 'Switch'
-  | 'TextArea'
-  | 'TextWithInfo'
-  | 'TextWithTooltip'
-  | 'ThemedPreloader'
-  | 'Tooltip'
-  | 'Toaster';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type UiKitAnimations = Record<string, any>;
-export type UiKitHelpers = Record<string, Styles | (() => Styles)>;
-
-export interface UiKitTheme {
-  name: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
-  /**
-   * Для переопределения иконок, которые есть в UiKit
-   */
-  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-  complexIcons?: Partial<Record<IComplexIcon, string>>;
-  preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
-  animations?: UiKitAnimations;
-  colors?: Record<string, string>;
-  dimensions?: Record<string, number>;
-  boxShadows?: Record<string, string>;
-  helpers?: UiKitHelpers;
-}
+import { Styles } from 'react-jss';
+import { Modifier, Placement } from 'react-overlays/usePopper';
+import {
+  ICommonIcon,
+  IComplexIcon,
+  IPreloaderSvgType,
+  ISvgIcon,
+} from './components';
+
+export interface IDataAttributes {
+  [key: string]: unknown;
+}
+
+export interface ICommonProps {
+  data?: IDataAttributes;
+}
+
+export interface IDropdownWithPopperOptions {
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  scrollParent?: 'auto' | 'document' | Element;
+
+  shouldHideOnScroll?: boolean; // работает весьма условно без shouldUsePopper
+  canBeFlipped?: boolean; // только с shouldUsePopper
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modifiers?: Array<Partial<Modifier<any, any>>>; // только с shouldUsePopper
+  placement?: Placement; // only with shouldUsePopper
+  // https://popper.js.org/docs/v2/modifiers/flip/
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  flipOptions?: Record<string, any>; // только с shouldUsePopper
+}
+
+export type ComponentStyles<StyleSheet, Props = unknown> = Partial<
+  Styles<keyof StyleSheet, Props>
+>;
+
+// TODO: Скрипт
+export type ComponentName =
+  | 'AccountInfo'
+  | 'AddButton'
+  | 'Button'
+  | 'CloseButton'
+  | 'Checkbox'
+  | 'CssBaseline'
+  | 'Colors'
+  | 'DateInput'
+  | 'DatePicker'
+  | 'DatePickerInput'
+  | 'DatePickerHeader'
+  | 'Description'
+  | 'DotsPreloader'
+  | 'SvgPreloader'
+  | 'FiltersPane'
+  | 'FilterInterval'
+  | 'FilterSelect'
+  | 'FilterWithDates'
+  | 'FilterWithPeriod'
+  | 'FilterWrapper'
+  | 'FiltersPaneSearch'
+  | 'Flag'
+  | 'FlexibleTable'
+  | 'Icon'
+  | 'IncrementInput'
+  | 'Input'
+  | 'List'
+  | 'Modal'
+  | 'MoreMenu'
+  | 'MultiSelect'
+  | 'MultiSelectInput'
+  | 'MultiSelectList'
+  | 'Notification'
+  | 'PhoneInput'
+  | 'PhoneInputCountryList'
+  | 'RadioButton'
+  | 'SearchInput'
+  | 'Select'
+  | 'SelectList'
+  | 'ScrollIntoViewIfNeeded'
+  | 'Switch'
+  | 'TextArea'
+  | 'TextWithInfo'
+  | 'TextWithTooltip'
+  | 'ThemedPreloader'
+  | 'Tooltip'
+  | 'Toaster';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type UiKitAnimations = Record<string, any>;
+export type UiKitHelpers = Record<string, Styles | (() => Styles)>;
+
+export interface UiKitTheme {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
+  /**
+   * Для переопределения иконок, которые есть в UiKit
+   */
+  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
+  complexIcons?: Partial<Record<IComplexIcon, string>>;
+  preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
+  animations?: UiKitAnimations;
+  colors?: Record<string, string>;
+  dimensions?: Record<string, number>;
+  boxShadows?: Record<string, string>;
+  helpers?: UiKitHelpers;
+}