@true-engineering/true-react-common-ui-kit 3.20.1 → 3.21.0

package/src/components/Description/Description.stories.tsx

@@ -1,27 +1,27 @@
-import { ComponentStory } from '@storybook/react';
-import { Description } from './Description';
-
-export default {
-  title: 'Data Display/Description',
-  component: Description,
-  argTypes: {
-    truncateIndex: {
-      control: { type: 'range', min: 20, max: 600, step: 10 },
-    },
-  },
-};
-
-const lorem =
-  'Lorem ipsum dolor, sit amet consectetur adipisicing. Alias necessitatibus quidem nobis molestiae dolor sed at, voluptatum nulla qui enim maiores consectetur dolorum atque odit id ratione pariatur ut nihil. http://google.com';
-
-const Template: ComponentStory<typeof Description> = (args) => <Description {...args} />;
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: lorem,
-  moreTitle: 'подробнее',
-  lessTitle: 'скрыть',
-  truncateIndex: 150,
-  isAlwaysOpen: false,
-};
+import { ComponentStory } from '@storybook/react';
+import { Description } from './Description';
+
+export default {
+  title: 'Data Display/Description',
+  component: Description,
+  argTypes: {
+    truncateIndex: {
+      control: { type: 'range', min: 20, max: 600, step: 10 },
+    },
+  },
+};
+
+const lorem =
+  'Lorem ipsum dolor, sit amet consectetur adipisicing. Alias necessitatibus quidem nobis molestiae dolor sed at, voluptatum nulla qui enim maiores consectetur dolorum atque odit id ratione pariatur ut nihil. http://google.com';
+
+const Template: ComponentStory<typeof Description> = (args) => <Description {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: lorem,
+  moreTitle: 'подробнее',
+  lessTitle: 'скрыть',
+  truncateIndex: 150,
+  isAlwaysOpen: false,
+};

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/components/FilterValueView/FilterValueView.tsx

@@ -1,166 +1,166 @@
-import { useMemo } from 'react';
-import { format } from 'date-fns';
-import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ICommonProps } from '../../../../types';
-import { IMultiSelectListValues } from '../../../MultiSelectList';
-import { DEFAULT_DATE_FORMAT } from '../../constants';
-import { defaultConvertFunction, getLocale } from '../../helpers';
-import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../types';
-import type { IFilterWrapperProps } from '../FilterWrapper';
-import { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
-
-export function FilterValueView<Values, Key extends keyof Values>({
-  locale,
-  localeKey,
-  filter,
-  value,
-  tweakStyles,
-}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef' | 'tweakStyles'> &
-  ICommonProps<IFilterValueViewStyles>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const translatesLocaleKey = filter.localeKey ?? localeKey;
-  const translates = useMemo(
-    () => getLocale(translatesLocaleKey, locale, filter.locale),
-    [translatesLocaleKey, locale, filter.locale],
-  );
-
-  if (isEmpty(value)) {
-    return <></>;
-  }
-
-  if (filter.getSelectedValueView !== undefined) {
-    return <span className={classes.text}>{filter.getSelectedValueView(value)}</span>;
-  }
-
-  const isMultiple = filter.type === 'custom' && filter.valueViewType === 'multiple';
-  const isRange = filter.type === 'custom' && filter.valueViewType === 'range';
-  const isDate = filter.type === 'dateRange' || filter.type === 'dateRangeWithoutPeriod';
-
-  const displayValue = (v: unknown): string => {
-    if (!isNotEmpty(v)) {
-      return '';
-    }
-
-    if (v instanceof Date) {
-      return format(
-        v,
-        (filter as IDateRangeConfigItem<IFilterWithDatesValue>).dateFormat || DEFAULT_DATE_FORMAT,
-      );
-    }
-
-    if (typeof v === 'object' && 'value' in v && isNotEmpty(v.value)) {
-      return String(v.value);
-    }
-
-    if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') {
-      return String(v);
-    }
-
-    console.warn(
-      `%c Ошибка конфигурации фильтра ${filter.name}. Невозможно отобразить значение фильтра. Задайте filterValueViewComponent или filterValueViewType.`,
-      'background: orange; color: black',
-    );
-
-    return '';
-  };
-
-  if (filter.type === 'select') {
-    const getView = filter.getValueView ?? defaultConvertFunction;
-    return <span className={classes.text}>{getView(value)}</span>;
-  }
-
-  if (filter.type === 'multiSelect') {
-    const multiSelectValue = value as IMultiSelectListValues<any>;
-    const getView = filter.getValueView ?? defaultConvertFunction;
-    const { include } = multiSelectValue;
-
-    return (
-      <>
-        {Array.isArray(include) && include.length > 0 && (
-          <>
-            <span className={classes.text}>{getView(include[0])}</span>
-            <span className={classes.count}>
-              {include.length > 1 && ` (+${include.length - 1})`}
-            </span>
-          </>
-        )}
-      </>
-    );
-  }
-
-  if (filter.type === 'interval') {
-    const intervalValue = value as unknown as number[];
-    const intervalValueFrom = intervalValue[0];
-    const intervalValueTo = intervalValue[1];
-
-    const intervals = [];
-    if (intervalValueFrom !== undefined) {
-      intervals.push(`${translates.from.toLowerCase()} ${String(intervalValueFrom)}`);
-    }
-    if (intervalValueTo !== undefined) {
-      intervals.push(`${translates.to.toLowerCase()} ${String(intervalValueTo)}`);
-    }
-
-    return <span className={classes.text}>{intervals.join(' ')}</span>;
-  }
-
-  if (isMultiple) {
-    return (
-      <>
-        {Array.isArray(value) && value.length > 0 && (
-          <>
-            <span className={classes.text}>{displayValue(value[0])}</span>
-            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
-          </>
-        )}
-      </>
-    );
-  }
-
-  if (isDate) {
-    const { from, to, periodType, label } = value as unknown as IPeriod;
-    const hasFrom = from !== undefined && from !== null;
-    const hasTo = to !== undefined && to !== null;
-
-    if (periodType !== 'CUSTOM') {
-      return <span className={classes.text}>{displayValue(label)}</span>;
-    }
-
-    const range = [];
-    if (hasFrom) {
-      if (!hasTo) {
-        range.push(translates.from.toLowerCase());
-      }
-      range.push(displayValue(from));
-    }
-    if (hasTo) {
-      if (hasFrom) {
-        range.push('—');
-      } else {
-        range.push(translates.to.toLowerCase());
-      }
-      range.push(displayValue(to));
-    }
-
-    return <span className={classes.text}>{range.join(' ')}</span>;
-  }
-
-  if (isRange && Array.isArray(value)) {
-    const rangeValue = value as unknown as number[];
-    const rangeValueFrom = rangeValue[0];
-    const rangeValueTo = rangeValue[1];
-
-    const range = [];
-    if (rangeValueFrom !== undefined) {
-      range.push(`${translates.from.toLowerCase()} ${String(rangeValueFrom)}`);
-    }
-    if (rangeValueTo !== undefined) {
-      range.push(`${translates.to.toLowerCase()} ${String(rangeValueTo)}`);
-    }
-
-    return <span className={classes.text}>{range.join(' ')}</span>;
-  }
-
-  return <span className={classes.text}>{displayValue(value)}</span>;
-}
+import { useMemo } from 'react';
+import { format } from 'date-fns';
+import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { ICommonProps } from '../../../../types';
+import { IMultiSelectListValues } from '../../../MultiSelectList';
+import { DEFAULT_DATE_FORMAT } from '../../constants';
+import { defaultConvertFunction, getLocale } from '../../helpers';
+import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../types';
+import type { IFilterWrapperProps } from '../FilterWrapper';
+import { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
+
+export function FilterValueView<Values, Key extends keyof Values>({
+  locale,
+  localeKey,
+  filter,
+  value,
+  tweakStyles,
+}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef' | 'tweakStyles'> &
+  ICommonProps<IFilterValueViewStyles>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const translatesLocaleKey = filter.localeKey ?? localeKey;
+  const translates = useMemo(
+    () => getLocale(translatesLocaleKey, locale, filter.locale),
+    [translatesLocaleKey, locale, filter.locale],
+  );
+
+  if (isEmpty(value)) {
+    return <></>;
+  }
+
+  if (filter.getSelectedValueView !== undefined) {
+    return <span className={classes.text}>{filter.getSelectedValueView(value)}</span>;
+  }
+
+  const isMultiple = filter.type === 'custom' && filter.valueViewType === 'multiple';
+  const isRange = filter.type === 'custom' && filter.valueViewType === 'range';
+  const isDate = filter.type === 'dateRange' || filter.type === 'dateRangeWithoutPeriod';
+
+  const displayValue = (v: unknown): string => {
+    if (!isNotEmpty(v)) {
+      return '';
+    }
+
+    if (v instanceof Date) {
+      return format(
+        v,
+        (filter as IDateRangeConfigItem<IFilterWithDatesValue>).dateFormat || DEFAULT_DATE_FORMAT,
+      );
+    }
+
+    if (typeof v === 'object' && 'value' in v && isNotEmpty(v.value)) {
+      return String(v.value);
+    }
+
+    if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') {
+      return String(v);
+    }
+
+    console.warn(
+      `%c Ошибка конфигурации фильтра ${filter.name}. Невозможно отобразить значение фильтра. Задайте filterValueViewComponent или filterValueViewType.`,
+      'background: orange; color: black',
+    );
+
+    return '';
+  };
+
+  if (filter.type === 'select') {
+    const getView = filter.getValueView ?? defaultConvertFunction;
+    return <span className={classes.text}>{getView(value)}</span>;
+  }
+
+  if (filter.type === 'multiSelect') {
+    const multiSelectValue = value as IMultiSelectListValues<any>;
+    const getView = filter.getValueView ?? defaultConvertFunction;
+    const { include } = multiSelectValue;
+
+    return (
+      <>
+        {Array.isArray(include) && include.length > 0 && (
+          <>
+            <span className={classes.text}>{getView(include[0])}</span>
+            <span className={classes.count}>
+              {include.length > 1 && ` (+${include.length - 1})`}
+            </span>
+          </>
+        )}
+      </>
+    );
+  }
+
+  if (filter.type === 'interval') {
+    const intervalValue = value as unknown as number[];
+    const intervalValueFrom = intervalValue[0];
+    const intervalValueTo = intervalValue[1];
+
+    const intervals = [];
+    if (intervalValueFrom !== undefined) {
+      intervals.push(`${translates.from.toLowerCase()} ${String(intervalValueFrom)}`);
+    }
+    if (intervalValueTo !== undefined) {
+      intervals.push(`${translates.to.toLowerCase()} ${String(intervalValueTo)}`);
+    }
+
+    return <span className={classes.text}>{intervals.join(' ')}</span>;
+  }
+
+  if (isMultiple) {
+    return (
+      <>
+        {Array.isArray(value) && value.length > 0 && (
+          <>
+            <span className={classes.text}>{displayValue(value[0])}</span>
+            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
+          </>
+        )}
+      </>
+    );
+  }
+
+  if (isDate) {
+    const { from, to, periodType, label } = value as unknown as IPeriod;
+    const hasFrom = from !== undefined && from !== null;
+    const hasTo = to !== undefined && to !== null;
+
+    if (periodType !== 'CUSTOM') {
+      return <span className={classes.text}>{displayValue(label)}</span>;
+    }
+
+    const range = [];
+    if (hasFrom) {
+      if (!hasTo) {
+        range.push(translates.from.toLowerCase());
+      }
+      range.push(displayValue(from));
+    }
+    if (hasTo) {
+      if (hasFrom) {
+        range.push('—');
+      } else {
+        range.push(translates.to.toLowerCase());
+      }
+      range.push(displayValue(to));
+    }
+
+    return <span className={classes.text}>{range.join(' ')}</span>;
+  }
+
+  if (isRange && Array.isArray(value)) {
+    const rangeValue = value as unknown as number[];
+    const rangeValueFrom = rangeValue[0];
+    const rangeValueTo = rangeValue[1];
+
+    const range = [];
+    if (rangeValueFrom !== undefined) {
+      range.push(`${translates.from.toLowerCase()} ${String(rangeValueFrom)}`);
+    }
+    if (rangeValueTo !== undefined) {
+      range.push(`${translates.to.toLowerCase()} ${String(rangeValueTo)}`);
+    }
+
+    return <span className={classes.text}>{range.join(' ')}</span>;
+  }
+
+  return <span className={classes.text}>{displayValue(value)}</span>;
+}