@true-engineering/true-react-common-ui-kit 4.0.0-alpha68 → 4.0.0-alpha69

package/dist/components/FiltersPane/components/FilterValueView/FilterValueView.d.ts

@@ -1,6 +1,8 @@
-import { ICommonProps } from '../../../../types';
+import { ReactNode } from 'react';
+import { ITweakStylesProps } from '../../../../types';
 import { IFilterWrapperProps } from '../FilterWrapper';
 import { IFilterValueViewStyles } from './FilterValueView.styles';
-export interface IFilterValueView<Values extends Record<string, unknown>, Key extends keyof Values> extends Omit<IFilterWrapperProps<Values, Key>, 'filtersPaneRef' | 'tweakStyles' | 'onChange'>, ICommonProps<IFilterValueViewStyles> {
+export interface IFilterValueView<Values extends Record<string, unknown>, Key extends keyof Values> extends Pick<IFilterWrapperProps<Values, Key>, 'value' | 'filter' | 'localeKey' | 'locale'>, ITweakStylesProps<IFilterValueViewStyles> {
+    value: Values[Key];
 }
-export declare function FilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>({ value, filter, locale, localeKey, tweakStyles, }: IFilterValueView<Values, Key>): JSX.Element;
+export declare function FilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>({ value, filter, locale, localeKey, tweakStyles, }: IFilterValueView<Values, Key>): ReactNode;

package/dist/components/FiltersPane/components/FilterWrapper/helpers.d.ts

@@ -1 +1 @@
-export declare const isContentNotEmpty: (value: unknown) => boolean;
+export declare const isContentNotEmpty: <T>(value: T) => value is NonNullable<T>;

package/dist/components/FiltersPane/types.d.ts

@@ -22,7 +22,6 @@ export interface IDatePeriod {
 }
 export interface IPeriod extends IDatePeriod {
     periodType: string;
-    label?: string;
 }
 export type IPeriodGetter = () => IDatePeriod;
 export type IFilterDateSingleValue = Date;

package/dist/true-react-common-ui-kit.js

@@ -7984,7 +7984,7 @@ const FilterWithPeriod = ({
       if (onClose !== void 0) {
         onClose();
       }
-      onChange({ ...p, label: getPeriodTranslate(periodType) });
+      onChange(p);
     }
     setIsPeriodPickerShown(false);
   };
@@ -8398,37 +8398,29 @@ function FilterValueView({
   localeKey,
   tweakStyles
 }) {
-  const classes = useStyles$p({ theme: tweakStyles });
+  const classes = useStyles$p({ tweakStyles });
   const translatesLocaleKey = filter2.localeKey ?? localeKey;
   const translates = useMemo(
     () => getLocale$1(translatesLocaleKey, locale, filter2.locale),
     [translatesLocaleKey, locale, filter2.locale]
   );
-  if (isEmpty(value)) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
   if (isNotEmpty(filter2.getSelectedValueView)) {
     return /* @__PURE__ */ jsx("span", { className: classes.text, children: filter2.getSelectedValueView(value) });
   }
-  const isMultiple = filter2.type === "custom" && filter2.valueViewType === "multiple";
-  const isRange = filter2.type === "custom" && filter2.valueViewType === "range";
-  const isDateRange = filter2.type === "dateRange" || filter2.type === "dateRangeWithoutPeriod";
   const displayValue = (v) => {
     if (!isNotEmpty(v)) {
       return "";
     }
     if (v instanceof Date) {
-      return format(
-        v,
-        filter2.dateFormat || DEFAULT_DATE_FORMAT$1
-      );
-    }
-    if (typeof v === "object" && "value" in v && isNotEmpty(v.value)) {
-      return String(v.value);
+      const { dateFormat = DEFAULT_DATE_FORMAT$1 } = filter2;
+      return format(v, dateFormat);
     }
-    if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+    if (!isObject(v)) {
       return String(v);
     }
+    if ("value" in v && isNotEmpty(v.value)) {
+      return String(v.value);
+    }
     console.warn(
       `%c Ошибка конфигурации фильтра ${filter2.name}. Невозможно отобразить значение фильтра. Задайте filterValueViewComponent или filterValueViewType.`,
       "background: orange; color: black"
@@ -8436,72 +8428,63 @@ function FilterValueView({
     return "";
   };
   if (filter2.type === "select") {
-    const getView = filter2.getValueView ?? defaultConvertFunction$1;
+    const getView = filter2.getValueView ?? displayValue;
     return /* @__PURE__ */ jsx("span", { className: classes.text, children: getView(value) });
   }
+  const getArrayView = (values, getView = displayValue) => {
+    if (!Array.isArray(values) || !isArrayNotEmpty(values)) {
+      return null;
+    }
+    const [first, ...rest] = values;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: classes.text, children: getView(first) }),
+      isArrayNotEmpty(rest) && /* @__PURE__ */ jsxs("span", { className: classes.count, children: [
+        " (+",
+        rest.length,
+        ")"
+      ] })
+    ] });
+  };
   if (filter2.type === "multiSelect") {
-    const multiSelectValue = value;
-    const getView = filter2.getValueView ?? defaultConvertFunction$1;
-    const { include } = multiSelectValue;
-    return /* @__PURE__ */ jsx(Fragment, { children: Array.isArray(include) && include.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: classes.text, children: getView(include[0]) }),
-      /* @__PURE__ */ jsx("span", { className: classes.count, children: include.length > 1 && ` (+${include.length - 1})` })
-    ] }) });
+    const { include } = value;
+    return getArrayView(include, filter2.getValueView);
   }
-  if (filter2.type === "interval") {
-    const intervalValue = value;
-    const intervalValueFrom = intervalValue[0];
-    const intervalValueTo = intervalValue[1];
-    const intervals = [];
-    if (intervalValueFrom !== void 0) {
-      intervals.push(`${translates.from.toLowerCase()} ${String(intervalValueFrom)}`);
-    }
-    if (intervalValueTo !== void 0) {
-      intervals.push(`${translates.to.toLowerCase()} ${String(intervalValueTo)}`);
-    }
-    return /* @__PURE__ */ jsx("span", { className: classes.text, children: intervals.join(" ") });
+  const isMultiple = filter2.type === "custom" && filter2.valueViewType === "multiple";
+  if (isMultiple) {
+    return getArrayView(value, filter2.getSelectedValue);
   }
+  const isDateRange = filter2.type === "dateRange" || filter2.type === "dateRangeWithoutPeriod";
   if (isDateRange) {
-    const { from, to, periodType, label } = value;
-    const hasFrom = from !== void 0 && from !== null;
-    const hasTo = to !== void 0 && to !== null;
+    const { from, to, periodType = "CUSTOM" } = value;
     if (periodType !== "CUSTOM") {
-      return /* @__PURE__ */ jsx("span", { className: classes.text, children: displayValue(label) });
+      return /* @__PURE__ */ jsx("span", { className: classes.text, children: translates.periods[periodType] ?? periodType });
     }
+    const hasFrom = isNotEmpty(from);
+    const hasTo = isNotEmpty(to);
     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));
+    if (hasFrom && hasTo) {
+      range.push(displayValue(from), "—", displayValue(to));
+    } else if (hasFrom) {
+      range.push(translates.from.toLowerCase(), displayValue(from));
+    } else if (hasTo) {
+      range.push(translates.to.toLowerCase(), displayValue(to));
+    } else {
+      return null;
     }
     return /* @__PURE__ */ jsx("span", { className: classes.text, children: range.join(" ") });
   }
-  if (isMultiple) {
-    const convertValue = filter2.getSelectedValue ?? displayValue;
-    return /* @__PURE__ */ jsx(Fragment, { children: Array.isArray(value) && value.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: classes.text, children: convertValue(value[0]) }),
-      /* @__PURE__ */ jsx("span", { className: classes.count, children: value.length > 1 && ` (+${value.length - 1})` })
-    ] }) });
-  }
-  if (isRange && Array.isArray(value)) {
-    const rangeValue = value;
-    const rangeValueFrom = rangeValue[0];
-    const rangeValueTo = rangeValue[1];
+  const isRange = filter2.type === "custom" && filter2.valueViewType === "range";
+  if (isRange || filter2.type === "interval") {
+    if (!Array.isArray(value)) {
+      return null;
+    }
+    const [valueFrom, valueTo] = value;
     const range = [];
-    if (rangeValueFrom !== void 0) {
-      range.push(`${translates.from.toLowerCase()} ${String(rangeValueFrom)}`);
+    if (isNotEmpty(valueFrom)) {
+      range.push(translates.from.toLowerCase(), displayValue(valueFrom));
     }
-    if (rangeValueTo !== void 0) {
-      range.push(`${translates.to.toLowerCase()} ${String(rangeValueTo)}`);
+    if (isNotEmpty(valueTo)) {
+      range.push(translates.to.toLowerCase(), displayValue(valueTo));
     }
     return /* @__PURE__ */ jsx("span", { className: classes.text, children: range.join(" ") });
   }
@@ -8666,14 +8649,13 @@ function FilterWrapper({
               className: clsx(classes.item, { [classes.booleanItem]: isBoolean }),
               children: [
                 /* @__PURE__ */ jsx("div", { className: classes.name, children: filter2.name }),
-                !isBoolean && isNotEmpty(value) && /* @__PURE__ */ jsx("div", { className: classes.value, children: /* @__PURE__ */ jsx(
+                !isBoolean && hasValue && /* @__PURE__ */ jsx("div", { className: classes.value, children: /* @__PURE__ */ jsx(
                   FilterValueView,
                   {
                     value,
                     filter: filter2,
                     locale,
                     localeKey,
-                    testId: getTestId(testId, "value"),
                     tweakStyles: tweakFilterValueViewStyles
                   }
                 ) }),