@true-engineering/true-react-common-ui-kit 2.5.0 → 3.0.0-alpha.0

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

@@ -1,307 +1,307 @@
-import { dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-const PADDING_X = 12;
-export const AUTOSIZE_MAX_WIDTH = 480;
-
-export const styles = {
-  root: {
-    width: '100%',
-    boxSizing: 'border-box',
-    position: 'relative',
-  },
-
-  inputWrapper: {
-    display: 'flex',
-    width: '100%',
-    height: dimensions.CONTROL_HEIGHT,
-    boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'border-color',
-    backgroundColor: 'white',
-    position: 'relative',
-  },
-
-  inputContent: {
-    fontSize: 16,
-    fontFamily: 'inherit',
-    padding: [0, PADDING_X],
-  },
-
-  input: {
-    extend: 'inputContent',
-    width: '100%',
-    height: '100%',
-    outline: 'none',
-    boxSizing: 'border-box',
-    outlineStyle: 'none',
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'background-color',
-    border: 'none',
-    background: 'none',
-
-    '&::placeholder': {
-      opacity: 1,
-    },
-
-    MozAppearance: 'textfield',
-    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-      WebkitAppearance: 'none',
-      margin: 0,
-    },
-  },
-
-  autosize: {
-    display: 'inline-grid',
-    verticalAlign: 'top',
-    alignItems: 'center',
-    justifyContent: 'start',
-
-    '&::after, input': {
-      width: 'auto',
-      minWidth: '1em',
-      gridArea: '1 / 2',
-      font: 'inherit',
-      justifySelf: 'stretch',
-    },
-
-    '&::after': {
-      maxWidth: AUTOSIZE_MAX_WIDTH,
-      content: 'attr(data-value) " "',
-      visibility: 'hidden',
-      whiteSpace: 'pre-wrap',
-    },
-  },
-
-  focused: {
-    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,
-  },
-
-  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: {
-    position: 'absolute',
-    pointerEvents: 'none',
-    left: PADDING_X,
-    top: '50%',
-    transformOrigin: 'top left',
-    transform: 'translateY(-50%)',
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'transform, color',
-    fontSize: 16,
-  },
-
-  floatingWithoutPadding: {
-    left: 0,
-  },
-
-  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: 'color 0.25s ease-in-out',
-    boxSizing: 'content-box',
-
-    '&:last-child': {
-      paddingRight: 8,
-    },
-
-    '& + $units': {
-      marginLeft: 4,
-    },
-  },
-
-  clearIcon: {
-    extend: 'icon',
-  },
-
-  inputIcon: {
-    extend: 'icon',
-  },
-
-  withIcons: {
-    paddingRight: 4,
-  },
-
-  withControls: {},
-
-  invalid: {},
-
-  disabled: {},
-
-  invalidLabel: {},
-
-  error: {
-    fontSize: 12,
-  },
-
-  info: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
-  },
-
-  'error-top': {
-    position: 'absolute',
-    top: -18,
-    left: -1,
-    padding: [4, 8],
-    zIndex: 1,
-  },
-
-  'error-bottom': {
-    paddingTop: 4,
-    paddingLeft: 13,
-  },
-
-  loading: {},
-
-  withUnits: {},
-
-  tweakPreloader: {},
-};
-
-export type InputStyles = ComponentStyles<typeof styles>;
+import { dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+
+const PADDING_X = 12;
+export const AUTOSIZE_MAX_WIDTH = 480;
+
+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: '0.25s ease-in-out',
+    transitionProperty: 'border-color',
+    backgroundColor: 'white',
+    position: 'relative',
+  },
+
+  inputContent: {
+    fontSize: 16,
+    fontFamily: 'inherit',
+    padding: [0, PADDING_X],
+  },
+
+  input: {
+    extend: 'inputContent',
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    boxSizing: 'border-box',
+    outlineStyle: 'none',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color',
+    border: 'none',
+    background: 'none',
+
+    '&::placeholder': {
+      opacity: 1,
+    },
+
+    MozAppearance: 'textfield',
+    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+      WebkitAppearance: 'none',
+      margin: 0,
+    },
+  },
+
+  autosize: {
+    display: 'inline-grid',
+    verticalAlign: 'top',
+    alignItems: 'center',
+    justifyContent: 'start',
+
+    '&::after, input': {
+      width: 'auto',
+      minWidth: '1em',
+      gridArea: '1 / 2',
+      font: 'inherit',
+      justifySelf: 'stretch',
+    },
+
+    '&::after': {
+      maxWidth: AUTOSIZE_MAX_WIDTH,
+      content: 'attr(data-value) " "',
+      visibility: 'hidden',
+      whiteSpace: 'pre-wrap',
+    },
+  },
+
+  focused: {
+    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,
+  },
+
+  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: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    left: PADDING_X,
+    top: '50%',
+    transformOrigin: 'top left',
+    transform: 'translateY(-50%)',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'transform, color',
+    fontSize: 16,
+  },
+
+  floatingWithoutPadding: {
+    left: 0,
+  },
+
+  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: 'color 0.25s ease-in-out',
+    boxSizing: 'content-box',
+
+    '&:last-child': {
+      paddingRight: 8,
+    },
+
+    '& + $units': {
+      marginLeft: 4,
+    },
+  },
+
+  clearIcon: {
+    extend: 'icon',
+  },
+
+  inputIcon: {
+    extend: 'icon',
+  },
+
+  withIcons: {
+    paddingRight: 4,
+  },
+
+  withControls: {},
+
+  invalid: {},
+
+  disabled: {},
+
+  invalidLabel: {},
+
+  error: {
+    fontSize: 12,
+  },
+
+  info: {
+    fontSize: 12,
+    paddingTop: 4,
+    paddingLeft: 13,
+  },
+
+  'error-top': {
+    position: 'absolute',
+    top: -18,
+    left: -1,
+    padding: [4, 8],
+    zIndex: 1,
+  },
+
+  'error-bottom': {
+    paddingTop: 4,
+    paddingLeft: 13,
+  },
+
+  loading: {},
+
+  withUnits: {},
+});
+
+export type IInputStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakPreloader: IThemedPreloaderStyles }
+>;

package/src/components/Input/Input.tsx

@@ -9,6 +9,7 @@ import {
   KeyboardEvent,
   ClipboardEvent,
   InputHTMLAttributes,
+  ReactNode,
 } from 'react';
 import InputMask from 'react-input-mask';
 import clsx from 'clsx';
@@ -19,18 +20,17 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps, IIcon } from '../../types';
 import { Icon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { DEFAULT_SIZE } from './constants';
 import { IReactInputMaskProps } from './types';
-import { InputStyles, styles } from './Input.styles';
+import { useStyles, IInputStyles } from './Input.styles';
 
-export interface IInputProps extends ICommonProps, IReactInputMaskProps {
-  tweakStyles?: InputStyles;
+export interface IInputProps extends ICommonProps<IInputStyles>, IReactInputMaskProps {
   value?: string;
-  label?: string;
+  label?: ReactNode;
   placeholder?: string;
   /**
    * @default `text`
@@ -80,7 +80,6 @@ export interface IInputProps extends ICommonProps, IReactInputMaskProps {
   hasRequiredLabel?: boolean;
   shouldFocusOnMount?: boolean;
   maxLength?: number;
-  testId?: string;
   tabIndex?: number;
   shouldAlwaysShowPlaceholder?: boolean;
   onChange(value: string, event: FormEvent<HTMLInputElement>): void;
@@ -138,7 +137,13 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     },
     ref,
   ) => {
-    const { classes, componentStyles } = useTheme('Input', styles, tweakStyles);
+    const classes = useStyles({ theme: tweakStyles });
+
+    const tweakPreloaderStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakPreloader',
+      currentComponentName: 'Input',
+    });
 
     const [isFocused, setFocused] = useState(false);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -170,7 +175,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     const hasControls = hasClearIcon || iconType !== undefined || isLoading;
     const hasValue = value !== undefined && value !== '';
     const hasUnits = units !== undefined && units !== '';
-    const hasLabel = isStringNotEmpty(label);
+    const hasLabel = isReactNodeNotEmpty(label);
     const hasPlaceholder =
       (!hasLabel || (hasFocus && !isReadonly) || shouldAlwaysShowPlaceholder) &&
       isStringNotEmpty(placeholder);
@@ -202,8 +207,6 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
       ...addDataTestId(testId),
     };
 
-    const tweakPreloaderStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakPreloader');
-
     return (
       <div className={classes.root}>
         <div