@true-engineering/true-react-common-ui-kit 3.1.1 → 3.2.0

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

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

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

@@ -1,15 +1,15 @@
-import { createThemedStyles, ITweakStyles } from '../../../../theme';
-
-export const useStyles = createThemedStyles('FilterValueView', {
-  text: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-
-  count: {
-    whiteSpace: 'pre',
-  },
-});
-
-export type IFilterValueViewStyles = ITweakStyles<typeof useStyles>;
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+
+export const useStyles = createThemedStyles('FilterValueView', {
+  text: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+
+  count: {
+    whiteSpace: 'pre',
+  },
+});
+
+export type IFilterValueViewStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,165 +1,165 @@
-import { useMemo } from 'react';
-import { format } from 'date-fns';
-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 });
-
-  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>;
-}
+import { useMemo } from 'react';
+import { format } from 'date-fns';
+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 });
+
+  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

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

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -1,68 +1,68 @@
-import cloneDeep from 'lodash-es/cloneDeep';
-import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
-import { IButtonStyles } from '../../../Button';
-import { IDatePickerStyles } from '../../../DatePicker';
-import { innerTextButtonStyles } from '../../FiltersPane.styles';
-
-export const useStyles = createThemedStyles('FilterWithDates', {
-  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: {},
-});
-
-export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
-
-export const backButtonStyles = innerTextButtonStyles;
-
-const PICKER_TOP_MARGIN = 28;
-const PICKER_WITH_BUTTONS_TOP_MARGIN = 60;
-const START_PICKER_LEFT_MARGIN = -20;
-const END_PICKER_LEFT_MARGIN = -170;
-
-export const startDatePickerStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN },
-};
-
-export const startDatePickerWithButtonStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN },
-};
-
-export const endDatePickerStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
-};
-
-export const endDatePickerWithButtonStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
-};
-
-export type IFilterWithDatesStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakClearButton: IButtonStyles;
-    tweakBackButton: IButtonStyles;
-    tweakStartDatePicker: IDatePickerStyles;
-    tweakEndDatePicker: IDatePickerStyles;
-  }
->;
+import cloneDeep from 'lodash-es/cloneDeep';
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { IDatePickerStyles } from '../../../DatePicker';
+import { innerTextButtonStyles } from '../../FiltersPane.styles';
+
+export const useStyles = createThemedStyles('FilterWithDates', {
+  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: {},
+});
+
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
+
+export const backButtonStyles = innerTextButtonStyles;
+
+const PICKER_TOP_MARGIN = 28;
+const PICKER_WITH_BUTTONS_TOP_MARGIN = 60;
+const START_PICKER_LEFT_MARGIN = -20;
+const END_PICKER_LEFT_MARGIN = -170;
+
+export const startDatePickerStyles: IDatePickerStyles = {
+  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN },
+};
+
+export const startDatePickerWithButtonStyles: IDatePickerStyles = {
+  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN },
+};
+
+export const endDatePickerStyles: IDatePickerStyles = {
+  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
+};
+
+export const endDatePickerWithButtonStyles: IDatePickerStyles = {
+  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
+};
+
+export type IFilterWithDatesStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakClearButton: IButtonStyles;
+    tweakBackButton: IButtonStyles;
+    tweakStartDatePicker: IDatePickerStyles;
+    tweakEndDatePicker: IDatePickerStyles;
+  }
+>;