@true-engineering/true-react-common-ui-kit 3.40.0 → 3.42.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.stories.tsx

@@ -78,6 +78,7 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
   withFieldNameInLabel: boolean;
   isGroupingEnabled: boolean;
   checkboxPosition: 'left' | 'right';
+  isClearableFields: boolean;
 }
 
 function FiltersPaneWithCustomProps<Values, Content>({
@@ -88,12 +89,14 @@ function FiltersPaneWithCustomProps<Values, Content>({
   withFieldNameInLabel,
   isGroupingEnabled,
   checkboxPosition,
+  isClearableFields,
   ...args
 }: IFiltersPaneWithCustomProps<Values, Content>) {
   const config: ConfigType<ConfigValues> = {
     name: {
       name: 'name',
       type: 'select',
+      isClearable: isClearableFields,
       options: selectOptions,
       getValueView: (v: unknown) => v + '123',
       getSelectedValueView: (v: unknown) => v + '1234',
@@ -104,6 +107,7 @@ function FiltersPaneWithCustomProps<Values, Content>({
       type: 'select',
       isSearchEnabled: true,
       isGroupingEnabled: true,
+      isClearable: isClearableFields,
       options: selectOptions,
     },
 
@@ -115,6 +119,7 @@ function FiltersPaneWithCustomProps<Values, Content>({
         searchPlaceholder: 'Фу',
       },
       isSearchEnabled: true,
+      isClearable: isClearableFields,
       options: selectOptions,
     },
 
@@ -134,6 +139,7 @@ function FiltersPaneWithCustomProps<Values, Content>({
         ['MINE', myPeriodGetter],
         'CUSTOM',
       ],
+      isClearable: isClearableFields,
     },
 
     multiSelect: {
@@ -142,6 +148,7 @@ function FiltersPaneWithCustomProps<Values, Content>({
       pageSize: 15,
       checkboxPosition,
       isGroupingEnabled,
+      isClearable: isClearableFields,
       fetchOptions: (_q = '', p = 0) => {
         if (p > 1) {
           return Promise.resolve([]);
@@ -158,6 +165,7 @@ function FiltersPaneWithCustomProps<Values, Content>({
       type: 'multiSelect',
       isSearchEnabled: true,
       isGroupingEnabled,
+      isClearable: isClearableFields,
       checkboxPosition,
       searchMaxLength: 12,
       fetchOptions: (q?: string): Promise<Array<{ v: string }>> => {
@@ -191,16 +199,19 @@ function FiltersPaneWithCustomProps<Values, Content>({
       type: 'interval',
       withFieldNameInLabel,
       canBeFloat: true,
+      isClearable: isClearableFields,
     },
 
     isActive: {
       name: 'isActive',
       type: 'boolean',
+      isClearable: isClearableFields,
     },
 
     custom: {
       type: 'custom',
       name: 'Custom',
+      isClearable: isClearableFields,
       options: [LONG_STRING, '2', '3'],
       component: ({ filter, ...props }) => <FilterSelect {...props} {...filter} />,
     },
@@ -279,6 +290,7 @@ Default.args = {
   isSearchAutosizeable: true,
   isSearchDisabled: false,
   hasClearButton: true,
+  isClearableFields: false,
   isDisabled: false,
   containerWidth: 400,
   withFieldNameInLabel: true,

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>;
+}