@true-engineering/true-react-common-ui-kit 2.3.2 → 2.4.0

package/src/components/FiltersPane/components/FilterSelect/index.ts

@@ -0,0 +1,2 @@
+export * from './FilterSelect';
+export type { FilterSelectStyles } from './FilterSelect.styles';

package/src/components/FiltersPane/{FilterValueView → components/FilterValueView}/FilterValueView.styles.tsx

@@ -1,15 +1,15 @@
-import { ComponentStyles } from '../../../types';
-
-export const styles = {
-  text: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-
-  count: {
-    whiteSpace: 'pre',
-  },
-};
-
-export type FilterValueViewStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../../../types';
+
+export const styles = {
+  text: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+
+  count: {
+    whiteSpace: 'pre',
+  },
+};
+
+export type FilterValueViewStyles = ComponentStyles<typeof styles>;

package/src/components/FiltersPane/{FilterValueView → components/FilterValueView}/FilterValueView.tsx

@@ -1,166 +1,163 @@
-import { useMemo } from 'react';
-import { format } from 'date-fns';
-import { useTheme } from '../../../hooks';
-import { IMultiSelectListValues } from '../../MultiSelectList';
-import { IFilterWrapperProps } from '../FilterWrapper';
-import { getLocale } from '../locales';
-import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../types';
-import { styles } from './FilterValueView.styles';
-
-const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
-
-const defaultGetValueView = <T,>(v: T): string => String(v);
-
-export function FilterValueView<Values, Key extends keyof Values>({
-  locale,
-  localeKey,
-  filter,
-  value,
-}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef'>): JSX.Element {
-  const { classes } = useTheme('FilterWrapper', styles);
-
-  if (value === undefined || value === null) {
-    return <></>;
-  }
-
-  const translatesLocaleKey = filter.localeKey ?? localeKey;
-  const translates = useMemo(
-    () => getLocale(translatesLocaleKey, locale, filter.locale),
-    [localeKey, locale, filter.locale],
-  );
-
-  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: any): string => {
-    if (v === undefined || v === null) {
-      return '';
-    }
-
-    if (v instanceof Date) {
-      return format(
-        v,
-        (filter as IDateRangeConfigItem<IFilterWithDatesValue>).dateFormat || DEFAULT_DATE_FORMAT,
-      );
-    }
-
-    if (typeof v === 'object' && v.value !== undefined) {
-      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 ?? defaultGetValueView;
-    return <span className={classes.text}>{getView(value)}</span>;
-  }
-
-  if (filter.type === 'multiSelect') {
-    const multiSelectValue = value as unknown as IMultiSelectListValues<any>;
-    const getView = filter.getValueView ?? defaultGetValueView;
-    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 { useTheme } from '../../../../hooks';
+import { IMultiSelectListValues } from '../../../MultiSelectList';
+import { DEFAULT_DATE_FORMAT } from '../../constants';
+import { defaultConvertFunction, getLocale } from '../../helpers';
+import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../types';
+import { IFilterWrapperProps } from '../FilterWrapper';
+import { styles } from './FilterValueView.styles';
+
+export function FilterValueView<Values, Key extends keyof Values>({
+  locale,
+  localeKey,
+  filter,
+  value,
+}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef'>): JSX.Element {
+  const { classes } = useTheme('FilterValueView', styles);
+
+  if (value === undefined || value === null) {
+    return <></>;
+  }
+
+  const translatesLocaleKey = filter.localeKey ?? localeKey;
+  const translates = useMemo(
+    () => getLocale(translatesLocaleKey, locale, filter.locale),
+    [localeKey, locale, filter.locale],
+  );
+
+  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: any): string => {
+    if (v === undefined || v === null) {
+      return '';
+    }
+
+    if (v instanceof Date) {
+      return format(
+        v,
+        (filter as IDateRangeConfigItem<IFilterWithDatesValue>).dateFormat || DEFAULT_DATE_FORMAT,
+      );
+    }
+
+    if (typeof v === 'object' && v.value !== undefined) {
+      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 unknown 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>;
+}

package/src/components/FiltersPane/components/FilterValueView/index.tsx

@@ -0,0 +1,2 @@
+export * from './FilterValueView';
+export type { FilterValueViewStyles } from './FilterValueView.styles';

package/src/components/FiltersPane/{FilterWithDates → components/FilterWithDates}/FilterWithDates.styles.ts

@@ -1,60 +1,60 @@
-import { colors } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-
-export const styles = {
-  root: {
-    background: colors.CLASSIC_WHITE,
-    position: 'relative',
-    zIndex: 20,
-  },
-
-  container: {
-    display: 'flex',
-    gap: 20,
-    padding: [8, 20],
-  },
-
-  containerItem: {
-    width: '50%',
-    height: 44,
-  },
-
-  btnRow: {
-    display: 'flex',
-    flexDirection: 'row-reverse',
-    justifyContent: 'space-between',
-    padding: 8,
-  },
-
-  datepicker: {},
-
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
-    },
-  },
-
-  tweakBackButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
-    },
-  },
-};
-
-export type FilterWithDatesStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../../../theme';
+import { ComponentStyles } from '../../../../types';
+
+export const styles = {
+  root: {
+    background: colors.CLASSIC_WHITE,
+    position: 'relative',
+    zIndex: 20,
+  },
+
+  container: {
+    display: 'flex',
+    gap: 20,
+    padding: [8, 20],
+  },
+
+  containerItem: {
+    width: '50%',
+    height: 44,
+  },
+
+  btnRow: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between',
+    padding: 8,
+  },
+
+  datepicker: {},
+
+  tweakClearButton: {
+    text: {
+      color: colors.GREY_ACTIVE,
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MEDIUM,
+      },
+
+      '&:active': {
+        color: colors.FONT_MEDIUM,
+      },
+    },
+  },
+
+  tweakBackButton: {
+    text: {
+      color: colors.GREY_ACTIVE,
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MEDIUM,
+      },
+
+      '&:active': {
+        color: colors.FONT_MEDIUM,
+      },
+    },
+  },
+};
+
+export type FilterWithDatesStyles = ComponentStyles<typeof styles>;