@true-engineering/true-react-common-ui-kit 3.45.2 → 4.0.0-alpha1

package/src/components/Input/Input.tsx

@@ -1,296 +1,33 @@
-import {
-  forwardRef,
-  useRef,
-  useState,
-  MutableRefObject,
-  FormEvent,
-  FocusEvent,
-  MouseEvent,
-  InputHTMLAttributes,
-  ReactNode,
-} from 'react';
-import InputMask from 'react-input-mask';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  isReactNodeNotEmpty,
-  isStringNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { renderIcon, Icon, IIcon } from '../Icon';
-import { ThemedPreloader } from '../ThemedPreloader';
-import { DEFAULT_SIZE } from './constants';
-import { IInputHTMLBaseProps, IReactInputMaskProps } from './types';
-import { useStyles, IInputStyles } from './Input.styles';
-
-export interface IInputProps
-  extends ICommonProps<IInputStyles>,
-    IReactInputMaskProps,
-    IInputHTMLBaseProps {
-  value?: string;
-  label?: ReactNode;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default true */
-  hasFloatingLabel?: boolean;
-  /** @default false */
-  isReadonly?: boolean;
-  /** @default false */
-  isInvalid?: boolean;
-  /** @default false */
-  isActive?: boolean;
-  /** @default false */
-  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';
-  /** @default false */
-  isRequired?: boolean;
-  /** @default false */
-  isLoading?: boolean;
-  /**
-   * Должна ли ширина input'а подстраиваться под ширину контента
-   * @default false
-   */
-  isAutoSizeable?: boolean;
-  /**
-   * Ширина input'а по умолчанию. Используется только вместе с `isAutoSizeable` равному `true`
-   * @default 6
-   */
-  defaultSize?: number;
-  iconType?: IIcon;
-  units?: string;
-  /** @default false */
-  hasRequiredLabel?: boolean;
-  /** @default false */
-  shouldFocusOnMount?: boolean;
-  /** @default false */
-  shouldAlwaysShowPlaceholder?: boolean;
-  onChange: (value: string, event: FormEvent<HTMLInputElement>) => void;
-  onIconClick?: () => void;
-}
-
-export const Input = forwardRef<HTMLInputElement, IInputProps>(
-  (
-    {
-      value = '',
-      label,
-      placeholder,
-      type = 'text',
-      isDisabled,
-      isReadonly = false,
-      hasFloatingLabel = true,
-      isInvalid = false,
-      isActive = false,
-      isClearable = false,
-      infoMessage,
-      errorMessage,
-      errorPosition = 'bottom',
-      inlineStyle,
-      border,
-      isRequired = false,
-      isLoading = false,
-      isAutoSizeable = false,
-      defaultSize = DEFAULT_SIZE,
-      iconType,
-      hasRequiredLabel,
-      data,
-      tweakStyles,
-      shouldFocusOnMount = false,
-      units,
-      testId,
-      onChange,
-      onFocus,
-      onBlur,
-      onIconClick,
-      // Пропсы react-input-mask
-      mask,
-      maskPlaceholder,
-      alwaysShowMask,
-      shouldAlwaysShowPlaceholder = false,
-      beforeMaskedStateChange,
-      ...inputProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakPreloaderStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakPreloader',
-      currentComponentName: 'Input',
-    });
-
-    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 = isReactNodeNotEmpty(label);
-    const isLabelActive = (hasFocus && !isReadonly) || hasValue || shouldAlwaysShowPlaceholder;
-    const hasPlaceholder = (!hasLabel || isLabelActive) && isStringNotEmpty(placeholder);
-    const shouldShowUnits = (hasValue || (isFocused && !hasPlaceholder)) && hasUnits;
-
-    const props: InputHTMLAttributes<HTMLInputElement> = {
-      ...inputProps,
-      ...addDataTestId(testId),
-      className: clsx(classes.input, {
-        [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,
-        [classes.withIcons]: hasControls,
-        [classes.withControls]: hasControls,
-        [classes.withUnits]: shouldShowUnits,
-        [classes.floatingLabelWithoutPadding]: hasFloatingLabel && hasLabel && border === 'bottom',
-      }),
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      value,
-      type,
-      disabled: isDisabled,
-      placeholder: hasPlaceholder ? placeholder : undefined,
-      autoFocus: shouldFocusOnMount,
-      readOnly: isReadonly,
-      size: isAutoSizeable ? defaultSize : undefined,
-    };
-
-    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}
-              alwaysShowMask={alwaysShowMask}
-              beforeMaskedStateChange={beforeMaskedStateChange}
-              {...props}
-            />
-          )}
-          {hasLabel && (
-            <span
-              className={clsx(classes.label, {
-                [classes.invalidLabel]: isInvalid,
-                [classes.requiredLabel]: hasRequiredLabel && !isRequired,
-                [classes.activeLabel]: isLabelActive,
-                [classes.floating]: hasFloatingLabel,
-                // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
-                [classes.floatingWithoutPadding]: hasFloatingLabel && border === 'bottom',
-              })}
-            >
-              {label}
-            </span>
-          )}
-
-          {shouldShowUnits && (
-            <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>
-              )}
-              {isReactNodeNotEmpty(iconType) && (
-                <div
-                  // .inputIcon extend .icon
-                  className={clsx(classes.inputIcon, {
-                    [classes.activeIcon]: !isDisabled && onIconClick !== undefined,
-                  })}
-                  onClick={!isDisabled ? onIconClick : undefined}
-                >
-                  {renderIcon(iconType)}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        {isStringNotEmpty(infoMessage) && <div className={classes.info}>{infoMessage}</div>}
-        {isStringNotEmpty(errorMessage) && (
-          <div className={clsx(classes.error, classes[`error-${errorPosition}`])}>
-            {errorMessage}
-          </div>
-        )}
-      </div>
-    );
-  },
-);
+import { forwardRef } from 'react';
+import { useTweakStyles } from '../../hooks';
+import { IWithMessagesProps, WithMessages } from '../WithMessages';
+import { IInputBaseProps, InputBase } from './InputBase';
+
+export type IInputProps = IInputBaseProps &
+  Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>;
+
+export const Input = forwardRef<HTMLInputElement, IInputProps>(
+  ({ infoMessage, errorMessage, isInvalid, testId, tweakStyles, ...inputProps }, ref) => {
+    const tweakWithMessagesStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakWithMessages',
+    });
+
+    return (
+      <WithMessages
+        errorMessage={errorMessage}
+        infoMessage={infoMessage}
+        testId={testId}
+        tweakStyles={tweakWithMessagesStyles}
+      >
+        <InputBase
+          {...inputProps}
+          ref={ref}
+          testId={testId}
+          tweakStyles={tweakStyles}
+          isInvalid={isInvalid}
+        />
+      </WithMessages>
+    );
+  },
+);

package/src/components/Input/InputBase.tsx

@@ -0,0 +1,251 @@
+import {
+  ChangeEvent,
+  CSSProperties,
+  FocusEvent,
+  forwardRef,
+  InputHTMLAttributes,
+  MutableRefObject,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import InputMask, { Props as ReactInputMaskBaseProps } from 'react-input-mask';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+  mergeRefs,
+} from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../hooks';
+import { IClickHandlerEvent, ICommonProps } from '../../types';
+import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
+import { IChangeInputEvent } from './types';
+import { IInputStyles, useStyles } from './Input.styles';
+
+export interface IInputBaseProps
+  extends ICommonProps<IInputStyles>,
+    Pick<
+      IControlWrapperProps,
+      | 'label'
+      | 'icon'
+      | 'groupPlacement'
+      | 'isInvalid'
+      | 'isRequired'
+      | 'isLoading'
+      | 'isDisabled'
+      | 'onIconClick'
+    >,
+    Pick<
+      InputHTMLAttributes<HTMLInputElement>,
+      | 'type'
+      | 'inputMode'
+      | 'autoComplete'
+      | 'name'
+      | 'maxLength'
+      | 'tabIndex'
+      | 'placeholder'
+      | 'onFocus'
+      | 'onBlur'
+      | 'onPaste'
+      | 'onKeyDown'
+    >,
+    Pick<
+      Partial<ReactInputMaskBaseProps>,
+      'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'
+    > {
+  value?: string;
+  units?: ReactNode;
+  /** @default false */
+  isReadonly?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  /** @default false */
+  isClearable?: boolean;
+  /** @default false */
+  shouldFocusOnMount?: boolean;
+  /** @default false */
+  isAutoSized?: boolean;
+  /** @default false */
+  shouldAlwaysShowPlaceholder?: boolean;
+  onChange(value: string, event: IChangeInputEvent): void;
+}
+
+export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
+  (
+    {
+      value = '',
+      placeholder,
+      label,
+      type = 'text',
+      isDisabled,
+      autoComplete,
+      inputMode: initialInputMode,
+      isReadonly,
+      isInvalid,
+      isActive,
+      isClearable,
+      isAutoSized,
+      name,
+      tweakStyles,
+      maxLength,
+      shouldFocusOnMount,
+      units,
+      testId,
+      tabIndex,
+      onChange,
+      onPaste,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      // Пропсы react-input-mask
+      mask,
+      maskPlaceholder,
+      alwaysShowMask,
+      shouldAlwaysShowPlaceholder,
+      beforeMaskedStateChange,
+      ...controlProps
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const tweakControlWrapperStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakControlWrapper',
+      currentComponentName: 'Input',
+    });
+
+    const [isFocused, setFocused] = useState(false);
+    const [unitsWidth, setUnitsWidth] = useState<number>();
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const mergedRef = mergeRefs([ref, inputRef]);
+
+    // Try to guess input-mode if possible
+    const inputMode: IInputBaseProps['inputMode'] =
+      initialInputMode ??
+      (['email', 'tel', 'url'].includes(type) ? (type as 'email' | 'tel' | 'url') : undefined);
+
+    const hasFocus = isFocused || isActive;
+    const hasValue = isNotEmpty(value) && value !== '';
+    const hasUnits = isReactNodeNotEmpty(units);
+    const hasPlaceholder =
+      (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) &&
+      isStringNotEmpty(placeholder);
+
+    const handleChange = (event: ChangeEvent<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 handleInputClear = async (event: IClickHandlerEvent) => {
+      // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
+      await onChange('', event);
+      inputRef.current?.focus();
+    };
+
+    const unitsRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        setUnitsWidth(node?.clientWidth);
+      },
+      [units],
+    );
+
+    const props: InputHTMLAttributes<HTMLInputElement> = {
+      className: clsx(classes.input, {
+        [classes.withUnits]: hasUnits,
+        [classes.withValue]: hasValue,
+        [classes.withLabel]: isReactNodeNotEmpty(label),
+        [classes.autoSized]: isAutoSized,
+        [classes.focusedInput]: isFocused,
+        [classes.disabledInput]: isDisabled,
+        [classes.invalidInput]: isInvalid,
+      }),
+      style:
+        hasUnits && hasValue
+          ? ({ '--units-width': `${unitsWidth}px` } as CSSProperties)
+          : undefined,
+      value,
+      type,
+      autoComplete,
+      inputMode,
+      disabled: isDisabled,
+      placeholder: hasPlaceholder ? placeholder : undefined,
+      name,
+      maxLength,
+      readOnly: isReadonly,
+      tabIndex,
+      onKeyDown,
+      onPaste,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      ...addDataTestId(testId, 'input'),
+    };
+
+    useEffect(() => {
+      // It works much better than autoFocus for mobile devices
+      if (shouldFocusOnMount) {
+        inputRef.current?.focus();
+      }
+    }, []);
+
+    const inputContent = (
+      <>
+        {isNotEmpty(mask) ? (
+          <InputMask
+            ref={mergedRef as unknown as MutableRefObject<InputMask>}
+            mask={mask}
+            maskPlaceholder={maskPlaceholder}
+            alwaysShowMask={alwaysShowMask}
+            beforeMaskedStateChange={beforeMaskedStateChange}
+            {...props}
+          />
+        ) : (
+          <input ref={mergedRef} {...props} />
+        )}
+
+        {(hasUnits || isAutoSized) && <div className={classes.fakeValue}>{value}</div>}
+        {hasUnits && hasValue && (
+          <div className={classes.units} ref={unitsRef}>
+            {units}
+          </div>
+        )}
+      </>
+    );
+
+    return (
+      <ControlWrapper
+        label={label}
+        isDisabled={isDisabled}
+        isFocused={hasFocus}
+        isInvalid={isInvalid}
+        hasValue={hasValue || hasPlaceholder}
+        isFullWidth={!isAutoSized}
+        tweakStyles={tweakControlWrapperStyles}
+        onClear={isClearable && hasValue ? handleInputClear : undefined}
+        {...controlProps}
+      >
+        {hasUnits || isAutoSized ? (
+          <div className={classes.autoSizeWrapper}>{inputContent}</div>
+        ) : (
+          inputContent
+        )}
+      </ControlWrapper>
+    );
+  },
+);

package/src/components/Input/index.ts

@@ -1,3 +1,4 @@
-export * from './Input';
-export * from './types';
-export type { IInputStyles } from './Input.styles';
+export * from './Input';
+export * from './InputBase';
+export * from './types';
+export type { IInputStyles } from './Input.styles';

package/src/components/Input/types.ts

@@ -1,33 +1,4 @@
-import { InputHTMLAttributes } from 'react';
-import { Props as ReactInputMaskBaseProps } from 'react-input-mask';
-
-export type IReactInputMaskProps = Pick<
-  Partial<ReactInputMaskBaseProps>,
-  'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'
->;
-
-export type IInputHTMLBaseProps = Pick<
-  InputHTMLAttributes<HTMLInputElement>,
-  | 'maxLength'
-  | 'name'
-  | 'tabIndex'
-  | 'placeholder'
-  | 'type'
-  | 'inputMode'
-  | 'onBlur'
-  | 'onFocus'
-  | 'onInput'
-  | 'onKeyDown'
-  | 'onPaste'
->;
-// Возможно это лучше заменить на
-// Omit< InputHTMLAttributes<HTMLInputElement>,
-// | 'className'
-// | 'value'
-// | 'onChange'
-// | 'disabled'
-// | 'required'
-// | 'autoFocus'
-// | 'readOnly'
-// | 'size'
-// >
+import { ChangeEvent } from 'react';
+import { IClickHandlerEvent } from '../../types';
+
+export type IChangeInputEvent = ChangeEvent<HTMLInputElement> | IClickHandlerEvent;