@true-engineering/true-react-common-ui-kit 2.3.2 → 2.5.0

package/src/components/TextArea/TextArea.tsx

@@ -1,165 +1,174 @@
-import React, { useRef, useState, FC, useEffect } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes, trimStringToMaxLength } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { styles, TextAreaStyles } from './TextArea.styles';
-
-export interface ITextAreaProps extends ICommonProps {
-  tweakStyles?: TextAreaStyles;
-  value?: string;
-  onChange: (value: string, event?: React.FormEvent<HTMLTextAreaElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
-  label?: string;
-  placeholder?: string;
-  isDisabled?: boolean;
-  hasFloatingLabel?: boolean;
-  isInvalid?: boolean;
-  isActive?: boolean;
-  infoMessage?: string;
-  errorMessage?: string;
-  isRequired?: boolean;
-  name?: string;
-  hasRequiredLabel?: boolean;
-  shouldFocusOnMount?: boolean;
-  hasCounter?: boolean;
-  shouldTrimAfterMaxLength?: boolean;
-  maxLength?: number;
-  rows?: number;
-  testId?: string;
-}
-
-const DEFAULT_VALUE = '';
-
-export const TextArea: FC<ITextAreaProps> = ({
-  value = DEFAULT_VALUE,
-  onChange,
-  onPaste,
-  onFocus,
-  onBlur,
-  label,
-  placeholder,
-  isDisabled,
-  hasFloatingLabel = true,
-  isInvalid = false,
-  isActive = false,
-  infoMessage,
-  errorMessage,
-  isRequired,
-  name,
-  hasRequiredLabel,
-  shouldFocusOnMount,
-  hasCounter = true,
-  shouldTrimAfterMaxLength = false,
-  maxLength,
-  rows,
-  testId,
-  data,
-  tweakStyles,
-}) => {
-  const { classes } = useTheme('TextArea', styles, tweakStyles);
-  const [isFocused, setFocused] = useState(false);
-  const ref = useRef<HTMLTextAreaElement>(null);
-
-  const handleOnChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = event.currentTarget.value;
-    onChange(
-      shouldTrimAfterMaxLength && maxLength !== undefined
-        ? trimStringToMaxLength(newValue, maxLength)
-        : newValue,
-      event,
-    );
-  };
-
-  const handleOnFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {
-    setFocused(true);
-    if (onFocus !== undefined) {
-      onFocus(event);
-    }
-  };
-
-  const handleOnBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {
-    setFocused(false);
-    if (onBlur !== undefined) {
-      onBlur(event);
-    }
-  };
-
-  const hasFocus = isFocused || isActive;
-  const hasValue = value !== undefined && value !== '';
-  const hasLabel = label !== undefined && label !== '';
-  const hasPlaceholder = (!hasLabel || hasFocus) && placeholder !== undefined && placeholder !== '';
-
-  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,
-  };
-
-  useEffect(() => {
-    const { current: textarea } = ref;
-    if (textarea === null) {
-      return;
-    }
-    // Нужно для того, чтобы TextArea уменьшалась при стирании значения.
-    textarea.style.height = 'auto';
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  }, [value]);
-
-  const hasInfoMessage = infoMessage !== undefined && infoMessage !== '';
-  const hasErrorMessage = errorMessage !== undefined && errorMessage !== '';
-
-  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>
-
-      <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>
-        )}
-      </div>
-      {hasInfoMessage && hasErrorMessage && <div className={classes.error}>{errorMessage}</div>}
-    </div>
-  );
-};
+import {
+  useRef,
+  useState,
+  FC,
+  useEffect,
+  FormEvent,
+  FocusEvent,
+  ChangeEvent,
+  ClipboardEvent,
+} from 'react';
+import clsx from 'clsx';
+import { addDataAttributes, trimStringToMaxLength } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { styles, TextAreaStyles } from './TextArea.styles';
+
+export interface ITextAreaProps extends ICommonProps {
+  tweakStyles?: TextAreaStyles;
+  value?: string;
+  label?: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+  hasFloatingLabel?: boolean;
+  isInvalid?: boolean;
+  isActive?: boolean;
+  infoMessage?: string;
+  errorMessage?: string;
+  isRequired?: boolean;
+  name?: string;
+  hasRequiredLabel?: boolean;
+  shouldFocusOnMount?: boolean;
+  hasCounter?: boolean;
+  shouldTrimAfterMaxLength?: boolean;
+  maxLength?: number;
+  rows?: number;
+  testId?: string;
+  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,
+  name,
+  hasRequiredLabel,
+  shouldFocusOnMount,
+  hasCounter = true,
+  shouldTrimAfterMaxLength = false,
+  maxLength,
+  rows,
+  testId,
+  data,
+  tweakStyles,
+  onChange,
+  onPaste,
+  onFocus,
+  onBlur,
+}) => {
+  const { classes } = useTheme('TextArea', styles, tweakStyles);
+  const [isFocused, setFocused] = useState(false);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const handleOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = event.currentTarget.value;
+    onChange(
+      shouldTrimAfterMaxLength && maxLength !== undefined
+        ? trimStringToMaxLength(newValue, maxLength)
+        : newValue,
+      event,
+    );
+  };
+
+  const handleOnFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
+    setFocused(true);
+    if (onFocus !== undefined) {
+      onFocus(event);
+    }
+  };
+
+  const handleOnBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+    setFocused(false);
+    if (onBlur !== undefined) {
+      onBlur(event);
+    }
+  };
+
+  const hasFocus = isFocused || isActive;
+  const hasValue = value !== undefined && value !== '';
+  const hasLabel = label !== undefined && label !== '';
+  const hasPlaceholder = (!hasLabel || hasFocus) && placeholder !== undefined && placeholder !== '';
+
+  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,
+  };
+
+  useEffect(() => {
+    const { current: textarea } = ref;
+    if (textarea === null) {
+      return;
+    }
+    // Нужно для того, чтобы TextArea уменьшалась при стирании значения.
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [value]);
+
+  const hasInfoMessage = infoMessage !== undefined && infoMessage !== '';
+  const hasErrorMessage = errorMessage !== undefined && errorMessage !== '';
+
+  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>
+
+      <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>
+        )}
+      </div>
+      {hasInfoMessage && hasErrorMessage && <div className={classes.error}>{errorMessage}</div>}
+    </div>
+  );
+};

package/src/components/TextWithInfo/TextWithInfo.stories.tsx

@@ -1,53 +1,53 @@
-import { FC, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { ITextWithInfoProps, TextWithInfo } from './TextWithInfo';
-
-interface ITextWithInfoWithCustomProps extends ITextWithInfoProps {
-  infoTooltip: string;
-  link: string;
-}
-
-const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
-  infoTooltip,
-  link,
-  ...args
-}) => {
-  const [isSelected, setIsSelected] = useState(false);
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 600,
-        height: 400,
-      }}
-    >
-      <TextWithInfo
-        {...args}
-        info={{ infoTooltip, link }}
-        isSelected={isSelected}
-        onClick={() => setIsSelected(true)}
-      />
-    </div>
-  );
-};
-
-export default {
-  title: 'TextWithInfo',
-  component: TextWithInfoWithCustomProps,
-};
-
-const Template: ComponentStory<typeof TextWithInfoWithCustomProps> = (args) => (
-  <TextWithInfoWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Обычная перевозка',
-  textTooltip: 'Tултип для самой обычной перевозки',
-  infoTooltip: 'Читать подробную информацию',
-  link: 'https://ya.ru/',
-};
+import { FC, useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { ITextWithInfoProps, TextWithInfo } from './TextWithInfo';
+
+interface ITextWithInfoWithCustomProps extends ITextWithInfoProps {
+  infoTooltip: string;
+  link: string;
+}
+
+const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
+  infoTooltip,
+  link,
+  ...args
+}) => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 600,
+        height: 400,
+      }}
+    >
+      <TextWithInfo
+        {...args}
+        info={{ infoTooltip, link }}
+        isSelected={isSelected}
+        onClick={() => setIsSelected(true)}
+      />
+    </div>
+  );
+};
+
+export default {
+  title: 'TextWithInfo',
+  component: TextWithInfoWithCustomProps,
+};
+
+const Template: ComponentStory<typeof TextWithInfoWithCustomProps> = (args) => (
+  <TextWithInfoWithCustomProps {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Обычная перевозка',
+  textTooltip: 'Tултип для самой обычной перевозки',
+  infoTooltip: 'Читать подробную информацию',
+  link: 'https://ya.ru/',
+};

package/src/components/TextWithInfo/TextWithInfo.tsx

@@ -1,60 +1,60 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { TextWithTooltip } from '../TextWithTooltip';
-import { styles, TextWithInfoStyles } from './TextWithInfo.styles';
-
-export interface ITextWithInfoProps extends ICommonProps {
-  tweakStyles?: TextWithInfoStyles;
-  text: string;
-  isSelected?: boolean;
-  textTooltip?: string;
-  info?: {
-    infoTooltip?: string;
-    link?: string;
-  };
-  onClick(): void;
-}
-
-export const TextWithInfo: FC<ITextWithInfoProps> = ({
-  text,
-  isSelected = false,
-  info,
-  textTooltip,
-  onClick,
-  data,
-  tweakStyles,
-}) => {
-  const { classes } = useTheme('TextWithInfo', styles, tweakStyles);
-
-  return (
-    <div
-      className={clsx(classes.root, isSelected && classes.selected)}
-      {...addDataAttributes(data)}
-    >
-      <div className={classes.container}>
-        <div className={classes.text} onClick={onClick}>
-          {textTooltip !== undefined ? (
-            <TextWithTooltip tooltipText={textTooltip}>{text}</TextWithTooltip>
-          ) : (
-            text
-          )}
-        </div>
-        {info && (
-          <a className={classes.info} href={info.link} target="_blank" rel="noopener noreferrer">
-            {info.infoTooltip !== undefined ? (
-              <TextWithTooltip tooltipText={info.infoTooltip}>
-                <Icon type="information" />
-              </TextWithTooltip>
-            ) : (
-              <Icon type="information" />
-            )}
-          </a>
-        )}
-      </div>
-    </div>
-  );
-};
+import { FC } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { TextWithTooltip } from '../TextWithTooltip';
+import { styles, TextWithInfoStyles } from './TextWithInfo.styles';
+
+export interface ITextWithInfoProps extends ICommonProps {
+  tweakStyles?: TextWithInfoStyles;
+  text: string;
+  isSelected?: boolean;
+  textTooltip?: string;
+  info?: {
+    infoTooltip?: string;
+    link?: string;
+  };
+  onClick(): void;
+}
+
+export const TextWithInfo: FC<ITextWithInfoProps> = ({
+  text,
+  isSelected = false,
+  info,
+  textTooltip,
+  onClick,
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('TextWithInfo', styles, tweakStyles);
+
+  return (
+    <div
+      className={clsx(classes.root, isSelected && classes.selected)}
+      {...addDataAttributes(data)}
+    >
+      <div className={classes.container}>
+        <div className={classes.text} onClick={onClick}>
+          {textTooltip !== undefined ? (
+            <TextWithTooltip tooltipText={textTooltip}>{text}</TextWithTooltip>
+          ) : (
+            text
+          )}
+        </div>
+        {info && (
+          <a className={classes.info} href={info.link} target="_blank" rel="noopener noreferrer">
+            {info.infoTooltip !== undefined ? (
+              <TextWithTooltip tooltipText={info.infoTooltip}>
+                <Icon type="information" />
+              </TextWithTooltip>
+            ) : (
+              <Icon type="information" />
+            )}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};