@true-engineering/true-react-common-ui-kit 3.45.1 → 4.0.0-alpha0

package/src/components/Input/Input.styles.ts

@@ -1,308 +1,98 @@
-import { dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
-import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { createThemedStyles, ITweakStyles } from '../../theme';
+import { IControlGroupStyles } from '../ControlGroup';
+import { IControlWrapperStyles } from '../ControlWrapper';
 
-const PADDING_X = 12;
-export const AUTOSIZE_MAX_WIDTH = 480;
+const PADDING_WITH_UNITS = 8;
 
 export const useStyles = createThemedStyles('Input', {
-  root: {
-    width: '100%',
-    boxSizing: 'border-box',
-    position: 'relative',
-  },
-
-  inputWrapper: {
-    display: 'flex',
-    width: '100%',
-    height: dimensions.CONTROL_HEIGHT,
-    boxSizing: 'border-box',
-    transition: animations.defaultTransition,
-    transitionProperty: 'border-color',
-    backgroundColor: 'white',
-    position: 'relative',
-  },
-
   inputContent: {
+    height: 'var(--control-height)',
+    padding: [0, 'var(--control-padding)'],
     fontSize: 16,
     fontFamily: 'inherit',
-    padding: [0, PADDING_X],
   },
 
   input: {
     extend: 'inputContent',
     width: '100%',
-    height: '100%',
     outline: 'none',
-    boxSizing: 'border-box',
     outlineStyle: 'none',
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color',
+    boxSizing: 'border-box',
     border: 'none',
     background: 'none',
+    color: 'black',
 
-    '&::placeholder': {
-      opacity: 1,
+    '&[readonly]': {
+      cursor: 'default',
     },
 
-    MozAppearance: 'textfield',
-    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-      WebkitAppearance: 'none',
-      margin: 0,
+    '&::placeholder': {
+      opacity: 1,
     },
-  },
-
-  autosize: {
-    display: 'inline-grid',
-    verticalAlign: 'top',
-    alignItems: 'center',
-    justifyContent: 'start',
 
-    '&::after, input': {
-      width: 'auto',
-      minWidth: '1em',
-      gridArea: '1 / 2',
-      font: 'inherit',
-      justifySelf: 'stretch',
+    '&::-webkit-date-and-time-value': {
+      textAlign: 'left',
     },
 
-    '&::after': {
-      maxWidth: AUTOSIZE_MAX_WIDTH,
-      content: 'attr(data-value) " "',
-      visibility: 'hidden',
-      whiteSpace: 'pre-wrap',
-    },
+    MozAppearance: 'textfield',
+    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-calendar-picker-indicator':
+      {
+        display: 'none',
+        WebkitAppearance: 'none',
+        margin: 0,
+      },
   },
 
-  focused: {
+  autoSizeWrapper: {
     position: 'relative',
-    zIndex: 1,
-  },
-
-  unitsWrapper: {
-    extend: 'inputContent',
-    position: 'absolute',
-    left: 0,
-    height: '100%',
-    boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'center',
-    pointerEvents: 'none',
-  },
-
-  fakeValue: {
-    visibility: 'hidden',
-  },
-
-  units: {
-    paddingLeft: 4,
-  },
-
-  withFloatingLabel: {
-    paddingTop: 18,
-  },
-
-  floatingLabelWithoutPadding: {
-    paddingTop: 18,
-    paddingLeft: 0,
+    minWidth: 0,
+    zIndex: 0,
+    flexGrow: 1,
   },
 
-  floating: {},
-
-  activeLabel: {
-    display: 'none',
-
-    '&$floating': {
-      display: 'block',
-      transform: 'scale(0.75) translateY(-120%)',
-    },
-  },
-
-  required: {
-    '&:before': {
-      content: '""',
-      position: 'absolute',
-      left: -12,
-      top: '50%',
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-    },
-  },
-
-  label: {
+  autoSized: {
     position: 'absolute',
-    pointerEvents: 'none',
-    left: PADDING_X,
-    top: '50%',
-    transformOrigin: 'top left',
-    transform: 'translateY(-50%)',
-    transition: animations.defaultTransition,
-    transitionProperty: 'transform, color',
-    fontSize: 16,
-  },
-
-  floatingWithoutPadding: {
+    top: 0,
     left: 0,
+    height: '100%',
   },
 
-  requiredLabel: {
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      right: -8,
-      top: 4,
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-    },
-  },
-
-  activeIcon: {
-    cursor: 'pointer',
-  },
-
-  'border-top': {
-    borderRadius: 0,
-    borderWidth: [1, 0, 0, 0],
-  },
-
-  'border-bottom': {
-    borderRadius: 0,
-    borderWidth: [0, 0, 1, 0],
-  },
-
-  'border-left': {
-    borderRadius: 0,
-    borderWidth: [0, 0, 0, 1],
-  },
-
-  'border-right': {
-    borderRadius: 0,
-    borderWidth: [0, 1, 0, 0],
-  },
-
-  top: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  bottom: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-
-  'top-left': {
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'top-right': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'bottom-left': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'bottom-right': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-
-  left: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  right: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-
-  middle: {
-    borderRadius: 0,
-  },
-
-  controls: {
-    display: 'flex',
-    gridArea: '1 / 3',
-  },
-
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: [0, 4],
-    width: 20,
-    transition: animations.defaultTransition,
-    transitionProperty: 'color',
-    boxSizing: 'content-box',
+  withUnits: {
+    extend: 'autoSized',
+    paddingRight: `calc(${PADDING_WITH_UNITS}px + var(--units-width) - 1px)`,
 
-    '&:last-child': {
-      paddingRight: 8,
+    '& + $fakeValue': {
+      paddingRight: PADDING_WITH_UNITS,
     },
-
-    '& + $units': {
-      marginLeft: 4,
-    },
-  },
-
-  clearIcon: {
-    extend: 'icon',
-  },
-
-  inputIcon: {
-    extend: 'icon',
   },
 
-  withIcons: {
-    paddingRight: 4,
-  },
-
-  withControls: {},
-
-  invalid: {},
-
-  disabled: {},
-
-  invalidLabel: {},
-
-  error: {
-    fontSize: 12,
-  },
+  withLabel: {},
 
-  info: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
+  fakeValue: {
+    extend: 'inputContent',
+    visibility: 'hidden',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    minWidth: 8,
   },
 
-  'error-top': {
-    position: 'absolute',
-    top: -18,
-    left: -1,
-    padding: [4, 8],
-    zIndex: 1,
+  units: {
+    alignSelf: 'center',
+    paddingRight: 'var(--control-padding)',
   },
 
-  'error-bottom': {
-    paddingTop: 4,
-    paddingLeft: 13,
-  },
+  focusedInput: {},
 
-  loading: {},
+  disabledInput: {},
 
-  withUnits: {},
+  invalidInput: {},
 });
 
 export type IInputStyles = ITweakStyles<
   typeof useStyles,
-  { tweakPreloader: IThemedPreloaderStyles }
+  {
+    tweakControlWrapper: IControlWrapperStyles;
+    tweakControlGroup: IControlGroupStyles;
+  }
 >;

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 { forwardRef } from 'react';
 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';
+import { ControlGroup, IControlGroupProps } from '../ControlGroup';
+import { IInputBaseProps, InputBase } from './InputBase';
 
-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 type IInputProps = IInputBaseProps &
+  Pick<IControlGroupProps, 'infoMessage' | 'errorMessage'>;
 
 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,
+  ({ infoMessage, errorMessage, isInvalid, testId, tweakStyles, ...inputProps }, ref) => {
+    const tweakControlGroupStyles = useTweakStyles({
       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',
+      className: 'tweakControlGroup',
     });
 
-    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>
+      <ControlGroup
+        errorMessage={errorMessage}
+        infoMessage={infoMessage}
+        testId={testId}
+        tweakStyles={tweakControlGroupStyles}
+      >
+        <InputBase
+          {...inputProps}
+          ref={ref}
+          testId={testId}
+          tweakStyles={tweakStyles}
+          isInvalid={isInvalid}
+        />
+      </ControlGroup>
     );
   },
 );