@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

package/src/components/Input/InputBase.tsx

@@ -1,251 +1,254 @@
-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),
-    };
-
-    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>
-    );
-  },
-);
+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,
+  isArrayLikeNotEmpty,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { useMergedRefs, 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>,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'className'>,
+    Pick<
+      IControlWrapperProps,
+      | 'label'
+      | 'icon'
+      | 'size'
+      | 'groupPlacement'
+      | 'isInvalid'
+      | 'isRequired'
+      | 'isLoading'
+      | 'isDisabled'
+    >,
+    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, eventType: 'change' | 'clear') => 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,
+      shouldAlwaysShowPlaceholder,
+      onChange,
+      onPaste,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      // Пропсы react-input-mask
+      mask,
+      maskPlaceholder,
+      alwaysShowMask,
+      beforeMaskedStateChange,
+      // Пропсы ControlWrapper
+      data,
+      groupPlacement,
+      icon,
+      isLoading,
+      isRequired,
+      size,
+      children,
+      ...inputProps
+    },
+    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 = useMergedRefs([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 = isArrayLikeNotEmpty(value);
+    const hasUnits = isReactNodeNotEmpty(units);
+    const hasPlaceholder =
+      (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) &&
+      isStringNotEmpty(placeholder);
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      onChange(event.currentTarget.value, event, 'change');
+    };
+
+    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, 'clear');
+      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),
+      ...inputProps,
+    };
+
+    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}
+        isActive={hasPlaceholder}
+        isInvalid={isInvalid}
+        hasValue={hasValue}
+        isFullWidth={!isAutoSized}
+        tweakStyles={tweakControlWrapperStyles}
+        onClear={isClearable && hasValue ? handleInputClear : undefined}
+        data={data}
+        groupPlacement={groupPlacement}
+        icon={icon}
+        isLoading={isLoading}
+        isRequired={isRequired}
+        size={size}
+      >
+        {hasUnits || isAutoSized ? (
+          <div className={classes.autoSizeWrapper}>{inputContent}</div>
+        ) : (
+          inputContent
+        )}
+        {children}
+      </ControlWrapper>
+    );
+  },
+);

package/src/components/Input/index.ts

@@ -1,4 +1,4 @@
-export * from './Input';
-export * from './InputBase';
-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,4 +1,4 @@
-import { ChangeEvent } from 'react';
-import { IClickHandlerEvent } from '../../types';
-
-export type IChangeInputEvent = ChangeEvent<HTMLInputElement> | IClickHandlerEvent;
+import { ChangeEvent } from 'react';
+import { IClickHandlerEvent } from '../../types';
+
+export type IChangeInputEvent = ChangeEvent<HTMLInputElement> | IClickHandlerEvent;