@true-engineering/true-react-common-ui-kit 1.3.0 → 1.4.0

package/src/components/Input/Input.tsx

@@ -1,308 +1,310 @@
-import {
-  forwardRef,
-  useRef,
-  useState,
-  MutableRefObject,
-  FormEvent,
-  FocusEvent,
-  MouseEvent,
-  KeyboardEvent,
-  ClipboardEvent,
-  InputHTMLAttributes,
-} from 'react';
-import clsx from 'clsx';
-import InputMask, { Props as ReactInputMaskProps } from 'react-input-mask';
-
-import { Icon, IIconProps } from '../Icon';
-import { ThemedPreloader } from '../ThemedPreloader';
-import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { useTheme, useTweakStyles } from '../../hooks';
-
-import { InputStyles, styles } from './Input.styles';
-
-export const DEFAULT_SIZE = 6;
-
-export interface IInputProps extends ICommonProps {
-  tweakStyles?: InputStyles;
-  value?: string;
-  label?: string;
-  placeholder?: string;
-  /**
-   * @default `text`
-   */
-  type?: 'text' | 'password' | 'email' | 'number';
-  isDisabled?: boolean;
-  /**
-   * @default true
-   */
-  hasFloatingLabel?: boolean;
-  isReadonly?: boolean;
-  isInvalid?: boolean;
-  isActive?: boolean;
-  isClearable?: boolean;
-  infoMessage?: string;
-  errorMessage?: string;
-  /**
-   * @default `bottom`
-   */
-  errorPosition?: 'top' | 'bottom';
-  inlineStyle?:
-    | 'top'
-    | 'bottom'
-    | 'top-left'
-    | 'top-right'
-    | 'bottom-left'
-    | 'bottom-right'
-    | 'left'
-    | 'right'
-    | 'middle';
-  border?: 'top' | 'bottom' | 'left' | 'right';
-  isRequired?: boolean;
-  isLoading?: boolean;
-  /**
-   * Должна ли ширина input'а подстраиваться под ширину контента
-   * @default false
-   */
-  isAutoSizeable?: boolean;
-  /**
-   * Ширина input'а по умолчанию. Используется только вместе с `isAutoSizeable` равному `true`
-   * @default 6
-   */
-  defaultSize?: number;
-  iconType?: IIconProps['type'];
-  units?: string;
-  name?: string;
-  mask?: ReactInputMaskProps['mask'];
-  maskPlaceholder?: ReactInputMaskProps['maskPlaceholder'];
-  hasRequiredLabel?: boolean;
-  shouldFocusOnMount?: boolean;
-  maxLength?: number;
-  testId?: string;
-  tabIndex?: number;
-
-  onChange(value: string, event: FormEvent<HTMLInputElement>): void;
-  onFocus?(event: FocusEvent<HTMLInputElement>): void;
-  onBlur?(event: FocusEvent<HTMLInputElement>): void;
-  onPaste?(event: ClipboardEvent<HTMLInputElement>): void;
-  onIconClick?(): void;
-  onKeyDown?(event: KeyboardEvent<HTMLInputElement>): void;
-}
-
-export const Input = forwardRef<HTMLInputElement, IInputProps>(
-  (
-    {
-      value = '',
-      label,
-      placeholder,
-      type = 'text',
-      isDisabled,
-      isReadonly,
-      hasFloatingLabel = true,
-      isInvalid = false,
-      isActive = false,
-      isClearable = false,
-      infoMessage,
-      errorMessage,
-      errorPosition = 'bottom',
-      inlineStyle,
-      border,
-      isRequired,
-      isLoading,
-      isAutoSizeable,
-      defaultSize = DEFAULT_SIZE,
-      iconType,
-      name,
-      mask,
-      maskPlaceholder,
-      hasRequiredLabel,
-      data,
-      tweakStyles,
-      maxLength,
-      shouldFocusOnMount,
-      units,
-      testId,
-      tabIndex,
-      onChange,
-      onPaste,
-      onFocus,
-      onBlur,
-      onIconClick,
-      onKeyDown,
-    },
-    ref,
-  ) => {
-    const { classes, componentStyles } = useTheme('Input', styles, tweakStyles);
-
-    const [isFocused, setFocused] = useState(false);
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    const handleChange = (event: FormEvent<HTMLInputElement>) => {
-      onChange(event.currentTarget.value, event);
-    };
-
-    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-      setFocused(true);
-      onFocus?.(event);
-    };
-
-    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-      setFocused(false);
-      onBlur?.(event);
-    };
-
-    // для SmartInput нужен event, иначе onChange не вызовется
-    const handleOnInputClear = async (event: MouseEvent<HTMLDivElement>) => {
-      // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
-      await onChange('', event as any);
-      const input = (ref as MutableRefObject<HTMLInputElement>) ?? inputRef;
-      input.current?.focus();
-    };
-
-    const hasFocus = isFocused || isActive;
-    const hasClearIcon = isClearable && value.length > 0;
-    const hasControls = hasClearIcon || iconType !== undefined || isLoading;
-    const hasValue = value !== undefined && value !== '';
-    const hasUnits = units !== undefined && units !== '';
-    const hasLabel = isNotEmpty(label);
-    const hasPlaceholder =
-      (!hasLabel || (hasFocus && !isReadonly)) && isNotEmpty(placeholder);
-
-    const props: InputHTMLAttributes<HTMLInputElement> = {
-      className: clsx(classes.input, {
-        [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,
-        [classes.withIcons]: hasControls,
-        [classes.withControls]: hasControls,
-        [classes.floatingLabelWithoutPadding]:
-          hasFloatingLabel && hasLabel && border === 'bottom',
-      }),
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      onKeyDown,
-      onPaste,
-      value,
-      type,
-      disabled: isDisabled,
-      placeholder: hasPlaceholder ? placeholder : undefined,
-      name,
-      maxLength,
-      autoFocus: shouldFocusOnMount,
-      readOnly: isReadonly,
-      size: isAutoSizeable ? defaultSize : undefined,
-      tabIndex,
-      ...addDataTestId(testId),
-    };
-
-    const tweakPreloaderStyles = useTweakStyles(
-      componentStyles,
-      tweakStyles,
-      'tweakPreloader',
-    );
-
-    return (
-      <div className={classes.root}>
-        <div
-          className={clsx(
-            classes.inputWrapper,
-            {
-              [classes.required]: isRequired && !hasRequiredLabel,
-              [classes.invalid]: isInvalid,
-              [classes.focused]: hasFocus,
-              [classes.disabled]: isDisabled,
-              [classes.autosize]: isAutoSizeable,
-            },
-            inlineStyle !== undefined && classes[inlineStyle],
-            border !== undefined && classes[`border-${border}`],
-          )}
-          data-value={isAutoSizeable ? value : undefined}
-          {...addDataAttributes(data)}
-        >
-          {mask === undefined ? (
-            <input ref={ref ?? inputRef} {...props} />
-          ) : (
-            <InputMask
-              // Баг в типизации react-input-mask
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore: No overload matches this call
-              ref={ref ?? inputRef}
-              mask={mask}
-              maskPlaceholder={maskPlaceholder}
-              {...props}
-            />
-          )}
-          {hasLabel && (
-            <span
-              className={clsx(classes.label, {
-                [classes.invalidLabel]: isInvalid,
-                [classes.requiredLabel]: hasRequiredLabel && !isRequired,
-                [classes.activeLabel]: (hasFocus && !isReadonly) || hasValue,
-                [classes.floating]: hasFloatingLabel,
-                // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
-                [classes.floatingWithoutPadding]:
-                  hasFloatingLabel && border === 'bottom',
-              })}
-            >
-              {label}
-            </span>
-          )}
-
-          {(hasValue || (isFocused && !hasPlaceholder)) && hasUnits && (
-            <div
-              className={clsx(classes.unitsWrapper, {
-                [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,
-              })}
-            >
-              <span className={classes.fakeValue}>{value}</span>
-              <span className={classes.units}>{units}</span>
-            </div>
-          )}
-
-          {hasControls && (
-            <div className={classes.controls}>
-              {isLoading && (
-                <div className={clsx(classes.inputIcon, classes.loading)}>
-                  <ThemedPreloader tweakStyles={tweakPreloaderStyles} />
-                </div>
-              )}
-
-              {!isDisabled && hasClearIcon && (
-                <div
-                  // .clearIcon extend .icon
-                  className={clsx(classes.clearIcon, classes.activeIcon)}
-                  // превентим блур с инпута (важно)
-                  onMouseDown={(event) => event.preventDefault()}
-                  onClick={handleOnInputClear}
-                >
-                  <Icon type="close" />
-                </div>
-              )}
-              {iconType !== undefined && (
-                <div
-                  // .inputIcon extend .icon
-                  className={clsx(classes.inputIcon, {
-                    [classes.activeIcon]:
-                      !isDisabled && onIconClick !== undefined,
-                  })}
-                  onClick={!isDisabled ? onIconClick : undefined}
-                >
-                  <Icon type={iconType} />
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        {isNotEmpty(infoMessage) && (
-          <div className={classes.info}>{infoMessage}</div>
-        )}
-        {isNotEmpty(errorMessage) && (
-          <div
-            className={clsx(classes.error, classes[`error-${errorPosition}`])}
-          >
-            {errorMessage}
-          </div>
-        )}
-      </div>
-    );
-  },
-);
+import {
+  forwardRef,
+  useRef,
+  useState,
+  MutableRefObject,
+  FormEvent,
+  FocusEvent,
+  MouseEvent,
+  KeyboardEvent,
+  ClipboardEvent,
+  InputHTMLAttributes,
+  ReactElement,
+} from 'react';
+import clsx from 'clsx';
+import InputMask, { Props as ReactInputMaskProps } from 'react-input-mask';
+
+import { Icon, IIconType } from '../Icon';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { useTheme, useTweakStyles } from '../../hooks';
+
+import { InputStyles, styles } from './Input.styles';
+import { renderIcon } from '../../helpers/snippets';
+
+export const DEFAULT_SIZE = 6;
+
+export interface IInputProps extends ICommonProps {
+  tweakStyles?: InputStyles;
+  value?: string;
+  label?: string;
+  placeholder?: string;
+  /**
+   * @default `text`
+   */
+  type?: 'text' | 'password' | 'email' | 'number';
+  isDisabled?: boolean;
+  /**
+   * @default true
+   */
+  hasFloatingLabel?: boolean;
+  isReadonly?: boolean;
+  isInvalid?: boolean;
+  isActive?: boolean;
+  isClearable?: boolean;
+  infoMessage?: string;
+  errorMessage?: string;
+  /**
+   * @default `bottom`
+   */
+  errorPosition?: 'top' | 'bottom';
+  inlineStyle?:
+    | 'top'
+    | 'bottom'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'left'
+    | 'right'
+    | 'middle';
+  border?: 'top' | 'bottom' | 'left' | 'right';
+  isRequired?: boolean;
+  isLoading?: boolean;
+  /**
+   * Должна ли ширина input'а подстраиваться под ширину контента
+   * @default false
+   */
+  isAutoSizeable?: boolean;
+  /**
+   * Ширина input'а по умолчанию. Используется только вместе с `isAutoSizeable` равному `true`
+   * @default 6
+   */
+  defaultSize?: number;
+  iconType?: IIconType | ReactElement;
+  units?: string;
+  name?: string;
+  mask?: ReactInputMaskProps['mask'];
+  maskPlaceholder?: ReactInputMaskProps['maskPlaceholder'];
+  hasRequiredLabel?: boolean;
+  shouldFocusOnMount?: boolean;
+  maxLength?: number;
+  testId?: string;
+  tabIndex?: number;
+
+  onChange(value: string, event: FormEvent<HTMLInputElement>): void;
+  onFocus?(event: FocusEvent<HTMLInputElement>): void;
+  onBlur?(event: FocusEvent<HTMLInputElement>): void;
+  onPaste?(event: ClipboardEvent<HTMLInputElement>): void;
+  onIconClick?(): void;
+  onKeyDown?(event: KeyboardEvent<HTMLInputElement>): void;
+}
+
+export const Input = forwardRef<HTMLInputElement, IInputProps>(
+  (
+    {
+      value = '',
+      label,
+      placeholder,
+      type = 'text',
+      isDisabled,
+      isReadonly,
+      hasFloatingLabel = true,
+      isInvalid = false,
+      isActive = false,
+      isClearable = false,
+      infoMessage,
+      errorMessage,
+      errorPosition = 'bottom',
+      inlineStyle,
+      border,
+      isRequired,
+      isLoading,
+      isAutoSizeable,
+      defaultSize = DEFAULT_SIZE,
+      iconType,
+      name,
+      mask,
+      maskPlaceholder,
+      hasRequiredLabel,
+      data,
+      tweakStyles,
+      maxLength,
+      shouldFocusOnMount,
+      units,
+      testId,
+      tabIndex,
+      onChange,
+      onPaste,
+      onFocus,
+      onBlur,
+      onIconClick,
+      onKeyDown,
+    },
+    ref,
+  ) => {
+    const { classes, componentStyles } = useTheme('Input', styles, tweakStyles);
+
+    const [isFocused, setFocused] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleChange = (event: FormEvent<HTMLInputElement>) => {
+      onChange(event.currentTarget.value, event);
+    };
+
+    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+      setFocused(true);
+      onFocus?.(event);
+    };
+
+    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+      setFocused(false);
+      onBlur?.(event);
+    };
+
+    // для SmartInput нужен event, иначе onChange не вызовется
+    const handleOnInputClear = async (event: MouseEvent<HTMLDivElement>) => {
+      // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
+      await onChange('', event as any);
+      const input = (ref as MutableRefObject<HTMLInputElement>) ?? inputRef;
+      input.current?.focus();
+    };
+
+    const hasFocus = isFocused || isActive;
+    const hasClearIcon = isClearable && value.length > 0;
+    const hasControls = hasClearIcon || iconType !== undefined || isLoading;
+    const hasValue = value !== undefined && value !== '';
+    const hasUnits = units !== undefined && units !== '';
+    const hasLabel = isNotEmpty(label);
+    const hasPlaceholder =
+      (!hasLabel || (hasFocus && !isReadonly)) && isNotEmpty(placeholder);
+
+    const props: InputHTMLAttributes<HTMLInputElement> = {
+      className: clsx(classes.input, {
+        [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,
+        [classes.withIcons]: hasControls,
+        [classes.withControls]: hasControls,
+        [classes.floatingLabelWithoutPadding]:
+          hasFloatingLabel && hasLabel && border === 'bottom',
+      }),
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onKeyDown,
+      onPaste,
+      value,
+      type,
+      disabled: isDisabled,
+      placeholder: hasPlaceholder ? placeholder : undefined,
+      name,
+      maxLength,
+      autoFocus: shouldFocusOnMount,
+      readOnly: isReadonly,
+      size: isAutoSizeable ? defaultSize : undefined,
+      tabIndex,
+      ...addDataTestId(testId),
+    };
+
+    const tweakPreloaderStyles = useTweakStyles(
+      componentStyles,
+      tweakStyles,
+      'tweakPreloader',
+    );
+
+    return (
+      <div className={classes.root}>
+        <div
+          className={clsx(
+            classes.inputWrapper,
+            {
+              [classes.required]: isRequired && !hasRequiredLabel,
+              [classes.invalid]: isInvalid,
+              [classes.focused]: hasFocus,
+              [classes.disabled]: isDisabled,
+              [classes.autosize]: isAutoSizeable,
+            },
+            inlineStyle !== undefined && classes[inlineStyle],
+            border !== undefined && classes[`border-${border}`],
+          )}
+          data-value={isAutoSizeable ? value : undefined}
+          {...addDataAttributes(data)}
+        >
+          {mask === undefined ? (
+            <input ref={ref ?? inputRef} {...props} />
+          ) : (
+            <InputMask
+              // Баг в типизации react-input-mask
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore: No overload matches this call
+              ref={ref ?? inputRef}
+              mask={mask}
+              maskPlaceholder={maskPlaceholder}
+              {...props}
+            />
+          )}
+          {hasLabel && (
+            <span
+              className={clsx(classes.label, {
+                [classes.invalidLabel]: isInvalid,
+                [classes.requiredLabel]: hasRequiredLabel && !isRequired,
+                [classes.activeLabel]: (hasFocus && !isReadonly) || hasValue,
+                [classes.floating]: hasFloatingLabel,
+                // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
+                [classes.floatingWithoutPadding]:
+                  hasFloatingLabel && border === 'bottom',
+              })}
+            >
+              {label}
+            </span>
+          )}
+
+          {(hasValue || (isFocused && !hasPlaceholder)) && hasUnits && (
+            <div
+              className={clsx(classes.unitsWrapper, {
+                [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,
+              })}
+            >
+              <span className={classes.fakeValue}>{value}</span>
+              <span className={classes.units}>{units}</span>
+            </div>
+          )}
+
+          {hasControls && (
+            <div className={classes.controls}>
+              {isLoading && (
+                <div className={clsx(classes.inputIcon, classes.loading)}>
+                  <ThemedPreloader tweakStyles={tweakPreloaderStyles} />
+                </div>
+              )}
+
+              {!isDisabled && hasClearIcon && (
+                <div
+                  // .clearIcon extend .icon
+                  className={clsx(classes.clearIcon, classes.activeIcon)}
+                  // превентим блур с инпута (важно)
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={handleOnInputClear}
+                >
+                  <Icon type="close" />
+                </div>
+              )}
+              {iconType !== undefined && (
+                <div
+                  // .inputIcon extend .icon
+                  className={clsx(classes.inputIcon, {
+                    [classes.activeIcon]:
+                      !isDisabled && onIconClick !== undefined,
+                  })}
+                  onClick={!isDisabled ? onIconClick : undefined}
+                >
+                  {renderIcon(iconType)}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        {isNotEmpty(infoMessage) && (
+          <div className={classes.info}>{infoMessage}</div>
+        )}
+        {isNotEmpty(errorMessage) && (
+          <div
+            className={clsx(classes.error, classes[`error-${errorPosition}`])}
+          >
+            {errorMessage}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/Input/index.ts

@@ -1,2 +1,2 @@
-export * from './Input';
-export type { InputStyles } from './Input.styles';
+export * from './Input';
+export type { InputStyles } from './Input.styles';