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

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