@true-engineering/true-react-common-ui-kit 3.14.2 → 3.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.14.2",
+  "version": "3.15.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/TextArea/TextArea.stories.tsx

@@ -32,4 +32,5 @@ Default.args = {
   isActive: false,
   isDisabled: false,
   isRequired: false,
+  isAutoSizeable: true,
 };

package/src/components/TextArea/TextArea.styles.ts

@@ -1,4 +1,4 @@
-import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+import { ITweakStyles, animations, createThemedStyles, helpers } from '../../theme';
 
 const PADDING_X = 12;
 
@@ -23,10 +23,11 @@ export const useStyles = createThemedStyles('TextArea', {
   },
 
   textarea: {
+    ...helpers.withScrollBar,
+
     width: '100%',
     height: '100%',
     outline: 'none',
-    boxSizing: 'border-box',
     outlineStyle: 'none',
     fontFamily: 'inherit',
     fontSize: 16,
@@ -35,7 +36,6 @@ export const useStyles = createThemedStyles('TextArea', {
     transitionProperty: 'background-color',
     border: 'none',
     resize: 'none',
-    overflow: 'auto',
 
     '&:disabled': {
       extend: 'disabled',
@@ -52,13 +52,33 @@ export const useStyles = createThemedStyles('TextArea', {
     },
   },
 
+  autosize: {
+    display: 'inline-grid',
+    gridTemplateRows: 'minmax(0, 100%)',
+
+    '& > $textarea, &::after': {
+      gridArea: '1 / 1 / 2 / 2',
+    },
+
+    '&::after': {
+      extend: 'textarea',
+      content: 'attr(data-value) " "',
+      overflowWrap: 'break-word',
+      whiteSpace: 'pre-wrap',
+      visibility: 'hidden',
+      scrollbarGutter: 'stable',
+    },
+  },
+
   focused: {
     position: 'relative',
     zIndex: 1,
   },
 
   withFloatingLabel: {
-    paddingTop: 24,
+    '& $textArea, &::after': {
+      paddingTop: 24,
+    },
   },
 
   floating: {},

package/src/components/TextArea/TextArea.tsx

@@ -1,21 +1,19 @@
-import {
-  useRef,
-  useState,
-  FC,
-  useEffect,
-  FormEvent,
-  FocusEvent,
-  ChangeEvent,
-  ClipboardEvent,
-} from 'react';
+import { forwardRef, useState, FormEvent, FocusEvent, ChangeEvent, ReactNode } from 'react';
 import clsx from 'clsx';
+import {
+  addDataTestId,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes, trimStringToMaxLength } from '../../helpers';
 import { ICommonProps } from '../../types';
+import { ITextAreaHTMLBaseProps } from './types';
 import { useStyles, ITextAreaStyles } from './TextArea.styles';
 
-export interface ITextAreaProps extends ICommonProps<ITextAreaStyles> {
+export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, ITextAreaHTMLBaseProps {
   value?: string;
-  label?: string;
+  label?: ReactNode;
   placeholder?: string;
   /** @default false */
   isDisabled?: boolean;
@@ -25,11 +23,15 @@ export interface ITextAreaProps extends ICommonProps<ITextAreaStyles> {
   isInvalid?: boolean;
   /** @default false */
   isActive?: boolean;
+  /**
+   * Должна ли высота и ширина textarea подстраиваться под содержимое
+   * @default true
+   */
+  isAutoSizeable?: boolean;
   infoMessage?: string;
   errorMessage?: string;
   /** @default false */
   isRequired?: boolean;
-  name?: string;
   /** @default false */
   hasRequiredLabel?: boolean;
   /** @default false */
@@ -38,143 +40,140 @@ export interface ITextAreaProps extends ICommonProps<ITextAreaStyles> {
   hasCounter?: boolean;
   /** @default false */
   shouldTrimAfterMaxLength?: boolean;
-  maxLength?: number;
-  rows?: number;
   onChange: (value: string, event?: FormEvent<HTMLTextAreaElement>) => void;
-  onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
-  onPaste?: (event: ClipboardEvent<HTMLTextAreaElement>) => void;
 }
 
 const DEFAULT_VALUE = '';
 
-export const TextArea: FC<ITextAreaProps> = ({
-  value = DEFAULT_VALUE,
-  label,
-  placeholder,
-  isDisabled,
-  hasFloatingLabel = true,
-  isInvalid = false,
-  isActive = false,
-  infoMessage,
-  errorMessage,
-  isRequired = false,
-  name,
-  hasRequiredLabel = false,
-  shouldFocusOnMount = false,
-  hasCounter = true,
-  shouldTrimAfterMaxLength = false,
-  maxLength,
-  rows,
-  testId,
-  data,
-  tweakStyles,
-  onChange,
-  onPaste,
-  onFocus,
-  onBlur,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-  const [isFocused, setFocused] = useState(false);
-  const ref = useRef<HTMLTextAreaElement>(null);
+export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
+  (
+    {
+      value = DEFAULT_VALUE,
+      label,
+      placeholder,
+      isDisabled,
+      hasFloatingLabel = true,
+      isInvalid = false,
+      isActive = false,
+      infoMessage,
+      errorMessage,
+      isRequired = false,
+      name,
+      hasRequiredLabel = false,
+      shouldFocusOnMount = false,
+      hasCounter = true,
+      shouldTrimAfterMaxLength = false,
+      isAutoSizeable = true,
+      maxLength,
+      rows,
+      testId,
+      data,
+      tweakStyles,
+      onChange,
+      onPaste,
+      onFocus,
+      onBlur,
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
 
-  const handleOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = event.currentTarget.value;
-    onChange(
-      shouldTrimAfterMaxLength && maxLength !== undefined
-        ? trimStringToMaxLength(newValue, maxLength)
-        : newValue,
-      event,
-    );
-  };
+    const [isFocused, setFocused] = useState(false);
 
-  const handleOnFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
-    setFocused(true);
-    if (onFocus !== undefined) {
-      onFocus(event);
-    }
-  };
+    const handleOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+      const rawValue = event.currentTarget.value;
+      const newValue =
+        shouldTrimAfterMaxLength && maxLength !== undefined
+          ? trimStringToMaxLength(rawValue, maxLength)
+          : rawValue;
 
-  const handleOnBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
-    setFocused(false);
-    if (onBlur !== undefined) {
-      onBlur(event);
-    }
-  };
+      onChange(newValue, event);
+    };
 
-  const hasFocus = isFocused || isActive;
-  const hasValue = value !== undefined && value !== '';
-  const hasLabel = label !== undefined && label !== '';
-  const hasPlaceholder = (!hasLabel || hasFocus) && placeholder !== undefined && placeholder !== '';
+    const handleOnFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(true);
+      if (onFocus !== undefined) {
+        onFocus(event);
+      }
+    };
 
-  const props = {
-    className: clsx(classes.textarea, hasFloatingLabel && hasLabel && classes.withFloatingLabel),
-    onFocus: handleOnFocus,
-    onBlur: handleOnBlur,
-    onChange: handleOnChange,
-    value,
-    onPaste,
-    disabled: isDisabled,
-    placeholder: hasPlaceholder ? placeholder : undefined,
-    name,
-    autoFocus: shouldFocusOnMount,
-    'data-testid': testId,
-    rows,
-  };
+    const handleOnBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(false);
+      if (onBlur !== undefined) {
+        onBlur(event);
+      }
+    };
 
-  useEffect(() => {
-    const { current: textarea } = ref;
-    if (textarea === null) {
-      return;
-    }
-    // Нужно для того, чтобы TextArea уменьшалась при стирании значения.
-    textarea.style.height = 'auto';
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  }, [value]);
+    const hasFocus = isFocused || isActive;
+    // в hasValue нельзя использовать isStringNotEmpty из-за того что isStringNotEmpty делает trim
+    const hasValue = value !== undefined && value !== '';
+    const hasLabel = isReactNodeNotEmpty(label);
+    const hasPlaceholder = (!hasLabel || hasFocus) && isStringNotEmpty(placeholder);
 
-  const hasInfoMessage = infoMessage !== undefined && infoMessage !== '';
-  const hasErrorMessage = errorMessage !== undefined && errorMessage !== '';
+    const props = {
+      className: classes.textarea,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur,
+      onChange: handleOnChange,
+      value,
+      onPaste,
+      disabled: isDisabled,
+      placeholder: hasPlaceholder ? placeholder : undefined,
+      name,
+      autoFocus: shouldFocusOnMount,
+      rows,
+      ...addDataTestId(testId),
+    };
 
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      <div
-        className={clsx(classes.wrapper, {
-          [classes.required]: isRequired && !hasRequiredLabel,
-          [classes.invalid]: isInvalid,
-          [classes.focused]: hasFocus,
-          [classes.disabled]: isDisabled,
-        })}
-      >
-        {label && (
-          <span
-            className={clsx(classes.label, {
-              [classes.invalidLabel]: isInvalid,
-              [classes.requiredLabel]: hasRequiredLabel && !isRequired,
-              [classes.activeLabel]: hasFocus || hasValue,
-              [classes.floating]: hasFloatingLabel,
-            })}
-          >
-            {label}
-          </span>
-        )}
-        <textarea ref={ref} {...props} />
-      </div>
+    const hasInfoMessage = isStringNotEmpty(infoMessage);
+    const hasErrorMessage = isStringNotEmpty(errorMessage);
 
-      <div className={classes.footer}>
-        {hasInfoMessage && <div className={classes.info}>{infoMessage}</div>}
-        {!hasInfoMessage && hasErrorMessage && <div className={classes.error}>{errorMessage}</div>}
-        {hasCounter && maxLength !== undefined && (
-          <span
-            className={clsx(
-              classes.symbolsCount,
-              value.length > maxLength && classes.symbolsCountError,
-            )}
-          >
-            {value.length} / {maxLength}
-          </span>
-        )}
+    return (
+      <div className={classes.root} {...addDataAttributes(data)}>
+        <div
+          className={clsx(classes.wrapper, {
+            [classes.required]: isRequired && !hasRequiredLabel,
+            [classes.invalid]: isInvalid,
+            [classes.focused]: hasFocus,
+            [classes.disabled]: isDisabled,
+            [classes.autosize]: isAutoSizeable,
+            [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,
+          })}
+          data-value={isAutoSizeable ? value : undefined}
+        >
+          {hasLabel && (
+            <span
+              className={clsx(classes.label, {
+                [classes.invalidLabel]: isInvalid,
+                [classes.requiredLabel]: hasRequiredLabel && !isRequired,
+                [classes.activeLabel]: hasFocus || hasValue,
+                [classes.floating]: hasFloatingLabel,
+              })}
+            >
+              {label}
+            </span>
+          )}
+
+          <textarea ref={ref} {...props} />
+        </div>
+
+        <div className={classes.footer}>
+          {hasInfoMessage && <div className={classes.info}>{infoMessage}</div>}
+          {!hasInfoMessage && hasErrorMessage && (
+            <div className={classes.error}>{errorMessage}</div>
+          )}
+          {hasCounter && isNotEmpty(maxLength) && (
+            <span
+              className={clsx(classes.symbolsCount, {
+                [classes.symbolsCountError]: value.length > maxLength,
+              })}
+            >
+              {value.length} / {maxLength}
+            </span>
+          )}
+        </div>
+        {hasInfoMessage && hasErrorMessage && <div className={classes.error}>{errorMessage}</div>}
       </div>
-      {hasInfoMessage && hasErrorMessage && <div className={classes.error}>{errorMessage}</div>}
-    </div>
-  );
-};
+    );
+  },
+);

package/src/components/TextArea/index.ts

@@ -1,2 +1,3 @@
 export * from './TextArea';
+export * from './types';
 export type { ITextAreaStyles } from './TextArea.styles';

package/src/components/TextArea/types.ts

@@ -0,0 +1,6 @@
+import { TextareaHTMLAttributes } from 'react';
+
+export type ITextAreaHTMLBaseProps = Pick<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'placeholder' | 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'
+>;