@true-engineering/true-react-common-ui-kit 3.8.1 → 3.9.0

package/src/components/Description/Description.tsx

@@ -1,61 +1,61 @@
-import { FC, useState } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { LINK_REGEXP } from './constants';
-import { useStyles, IDescriptionStyles } from './Description.styles';
-
-export interface IDescriptionProps extends ICommonProps<IDescriptionStyles> {
-  text: string;
-  moreTitle?: string;
-  lessTitle?: string;
-  /** @default 150 */
-  truncateIndex?: number;
-  /** @default true */
-  isAlwaysOpen?: boolean;
-}
-
-export const Description: FC<IDescriptionProps> = ({
-  text,
-  moreTitle,
-  lessTitle,
-  truncateIndex = 150,
-  isAlwaysOpen = true,
-  testId,
-  data,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const isTooShort = text.length < truncateIndex;
-  const [isOpen, setIsOpen] = useState(isAlwaysOpen);
-  const link = text.match(LINK_REGEXP);
-  const linkText = link && link[0];
-  const textWithNoLink = text.replace(LINK_REGEXP, '');
-
-  const shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(' '));
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {isAlwaysOpen || isOpen || isTooShort ? (
-        <div>
-          <span>{textWithNoLink} </span>
-          {!!linkText && (
-            <a className={classes.link} href={linkText} target="_blank" rel="noopener noreferrer">
-              {linkText}
-            </a>
-          )}
-        </div>
-      ) : (
-        <div>
-          <span>{shortText}</span>
-        </div>
-      )}
-      {isAlwaysOpen || isTooShort ? undefined : (
-        <div className={classes.button} onClick={() => setIsOpen(!isOpen)}>
-          {isOpen ? lessTitle : moreTitle}
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, useState } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { LINK_REGEXP } from './constants';
+import { useStyles, IDescriptionStyles } from './Description.styles';
+
+export interface IDescriptionProps extends ICommonProps<IDescriptionStyles> {
+  text: string;
+  moreTitle?: string;
+  lessTitle?: string;
+  /** @default 150 */
+  truncateIndex?: number;
+  /** @default true */
+  isAlwaysOpen?: boolean;
+}
+
+export const Description: FC<IDescriptionProps> = ({
+  text,
+  moreTitle,
+  lessTitle,
+  truncateIndex = 150,
+  isAlwaysOpen = true,
+  testId,
+  data,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const isTooShort = text.length < truncateIndex;
+  const [isOpen, setIsOpen] = useState(isAlwaysOpen);
+  const link = text.match(LINK_REGEXP);
+  const linkText = link && link[0];
+  const textWithNoLink = text.replace(LINK_REGEXP, '');
+
+  const shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(' '));
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {isAlwaysOpen || isOpen || isTooShort ? (
+        <div>
+          <span>{textWithNoLink} </span>
+          {!!linkText && (
+            <a className={classes.link} href={linkText} target="_blank" rel="noopener noreferrer">
+              {linkText}
+            </a>
+          )}
+        </div>
+      ) : (
+        <div>
+          <span>{shortText}</span>
+        </div>
+      )}
+      {isAlwaysOpen || isTooShort ? undefined : (
+        <div className={classes.button} onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? lessTitle : moreTitle}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,158 +1,158 @@
-import { useMemo, useRef } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
-import { getLocale } from './helpers';
-import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
-import { useStyles, IFiltersPaneStyles, clearButtonStyles } from './FiltersPane.styles';
-
-export interface IFiltersPaneProps<Values, Content = Values>
-  extends ICommonProps<IFiltersPaneStyles> {
-  filtersConfig: ConfigType<Values>;
-  enabledFilters?: Array<keyof ConfigType<Values>>;
-  /** @default {} */
-  values?: Partial<Values>;
-  search?: IFiltersPaneSearchProps<keyof Content>;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default true */
-  hasClearButton?: boolean;
-  onChangeFilters: (values: Partial<Values>) => void;
-  onSettingsButtonClick?: () => void;
-  onClear?: () => void;
-}
-
-export function FiltersPane<Values extends Record<string, unknown>, Content = Values>({
-  data,
-  tweakStyles,
-  filtersConfig,
-  enabledFilters,
-  values = {} as Values,
-  localeKey,
-  locale,
-  search,
-  isDisabled = false,
-  hasClearButton = true,
-  testId,
-  onChangeFilters,
-  onSettingsButtonClick,
-  onClear,
-}: IFiltersPaneProps<Values, Content>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakClearButtonStyles = useTweakStyles({
-    innerStyles: clearButtonStyles,
-    tweakStyles,
-    className: 'tweakClearButton',
-    currentComponentName: 'FiltersPane',
-  });
-
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
-
-  const handleClear = () => {
-    if (onClear !== undefined) {
-      onClear();
-      return;
-    }
-    onChangeFilters({});
-    if (search !== undefined) {
-      search.onChange({});
-    }
-  };
-
-  const shouldShowClearButton =
-    hasClearButton &&
-    (search !== undefined ||
-      filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
-
-  const clearButton = (
-    <div className={classes.clear}>
-      <Button
-        onClick={handleClear}
-        size="s"
-        view="text"
-        isDisabled={isDisabled}
-        testId={getTestId(testId, 'clear-button')}
-        tweakStyles={tweakClearButtonStyles}
-      >
-        {translates.clear}
-      </Button>
-    </div>
-  );
-
-  return (
-    <div className={classes.root} ref={ref} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {/* Settings */}
-      {onSettingsButtonClick !== undefined && (
-        <div
-          className={classes.settings}
-          tabIndex={0}
-          {...addDataTestId(testId, 'settings-button')}
-          onClick={!isDisabled ? onSettingsButtonClick : undefined}
-        >
-          <div className={classes.settingsIcon}>
-            <Icon type="filter" />
-          </div>
-        </div>
-      )}
-      {/* Search */}
-      {search !== undefined && (
-        <FiltersPaneSearch
-          {...search}
-          locale={getLocale(search.localeKey ?? localeKey, search.locale, locale)}
-          localeKey={search.localeKey ?? localeKey}
-          isDisabled={search.isDisabled ?? isDisabled}
-          testId={getTestId(testId, 'search')}
-        />
-      )}
-      {/* Filters */}
-      {filtersKeys.map((key, index) => {
-        const isLast = index === filtersKeys.length - 1;
-        const currentValue = values[key];
-        const filter = filtersConfig[key];
-        if (filter === undefined) {
-          console.error(`enabledFilters содержит фильтр ${String(key)}, не описанный в конфиге`);
-          if (isLast) {
-            return clearButton;
-          }
-          return null;
-        }
-
-        const filterWrapper = (
-          <FilterWrapper
-            filter={filter}
-            locale={locale}
-            localeKey={localeKey}
-            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
-            value={currentValue}
-            key={key as string}
-            isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
-            filtersPaneRef={ref}
-            testId={getTestId(testId, `filter-${String(key)}`)}
-          />
-        );
-
-        if (isLast) {
-          return (
-            <div className={classes.filterWithClearButton} key={key as string}>
-              {filterWrapper}
-              {shouldShowClearButton && <>{clearButton}</>}
-            </div>
-          );
-        }
-
-        return filterWrapper;
-      })}
-    </div>
-  );
-}
+import { useMemo, useRef } from 'react';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
+import { getLocale } from './helpers';
+import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
+import { useStyles, IFiltersPaneStyles, clearButtonStyles } from './FiltersPane.styles';
+
+export interface IFiltersPaneProps<Values, Content = Values>
+  extends ICommonProps<IFiltersPaneStyles> {
+  filtersConfig: ConfigType<Values>;
+  enabledFilters?: Array<keyof ConfigType<Values>>;
+  /** @default {} */
+  values?: Partial<Values>;
+  search?: IFiltersPaneSearchProps<keyof Content>;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default true */
+  hasClearButton?: boolean;
+  onChangeFilters: (values: Partial<Values>) => void;
+  onSettingsButtonClick?: () => void;
+  onClear?: () => void;
+}
+
+export function FiltersPane<Values extends Record<string, unknown>, Content = Values>({
+  data,
+  tweakStyles,
+  filtersConfig,
+  enabledFilters,
+  values = {} as Values,
+  localeKey,
+  locale,
+  search,
+  isDisabled = false,
+  hasClearButton = true,
+  testId,
+  onChangeFilters,
+  onSettingsButtonClick,
+  onClear,
+}: IFiltersPaneProps<Values, Content>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FiltersPane',
+  });
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
+
+  const handleClear = () => {
+    if (onClear !== undefined) {
+      onClear();
+      return;
+    }
+    onChangeFilters({});
+    if (search !== undefined) {
+      search.onChange({});
+    }
+  };
+
+  const shouldShowClearButton =
+    hasClearButton &&
+    (search !== undefined ||
+      filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
+
+  const clearButton = (
+    <div className={classes.clear}>
+      <Button
+        onClick={handleClear}
+        size="s"
+        view="text"
+        isDisabled={isDisabled}
+        testId={getTestId(testId, 'clear-button')}
+        tweakStyles={tweakClearButtonStyles}
+      >
+        {translates.clear}
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className={classes.root} ref={ref} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {/* Settings */}
+      {onSettingsButtonClick !== undefined && (
+        <div
+          className={classes.settings}
+          tabIndex={0}
+          {...addDataTestId(testId, 'settings-button')}
+          onClick={!isDisabled ? onSettingsButtonClick : undefined}
+        >
+          <div className={classes.settingsIcon}>
+            <Icon type="filter" />
+          </div>
+        </div>
+      )}
+      {/* Search */}
+      {search !== undefined && (
+        <FiltersPaneSearch
+          {...search}
+          locale={getLocale(search.localeKey ?? localeKey, search.locale, locale)}
+          localeKey={search.localeKey ?? localeKey}
+          isDisabled={search.isDisabled ?? isDisabled}
+          testId={getTestId(testId, 'search')}
+        />
+      )}
+      {/* Filters */}
+      {filtersKeys.map((key, index) => {
+        const isLast = index === filtersKeys.length - 1;
+        const currentValue = values[key];
+        const filter = filtersConfig[key];
+        if (filter === undefined) {
+          console.error(`enabledFilters содержит фильтр ${String(key)}, не описанный в конфиге`);
+          if (isLast) {
+            return clearButton;
+          }
+          return null;
+        }
+
+        const filterWrapper = (
+          <FilterWrapper
+            filter={filter}
+            locale={locale}
+            localeKey={localeKey}
+            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
+            value={currentValue}
+            key={key as string}
+            isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
+            filtersPaneRef={ref}
+            testId={getTestId(testId, `filter-${String(key)}`)}
+          />
+        );
+
+        if (isLast) {
+          return (
+            <div className={classes.filterWithClearButton} key={key as string}>
+              {filterWrapper}
+              {shouldShowClearButton && <>{clearButton}</>}
+            </div>
+          );
+        }
+
+        return filterWrapper;
+      })}
+    </div>
+  );
+}