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

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

@@ -1,5 +1,5 @@
-import { colors } from '../../../theme';
-import { ComponentStyles } from '../../../types';
+import { colors } from '../../../../theme';
+import { ComponentStyles } from '../../../../types';
 
 export const styles = {
   root: {

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

@@ -3,22 +3,21 @@ import { isAfter, isBefore } from 'date-fns';
 import enUS from 'date-fns/locale/en-US';
 import ru from 'date-fns/locale/ru';
 import { getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../helpers';
-import { useTheme, useTweakStyles } from '../../../hooks';
-import { ICommonProps } from '../../../types';
-import { Button } from '../../Button';
-import { DatePicker, IDatePickerProps } from '../../DatePicker';
-import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from '../locales';
-import { IFilterWithDatesValue } from '../types';
+import { addDataAttributes } from '../../../../helpers';
+import { useTheme, useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Button } from '../../../Button';
+import { DatePicker } from '../../../DatePicker';
+import { DEFAULT_PICKER_PROPS } from '../../constants';
+import { getLocale } from '../../helpers';
+import {
+  IFilterWithDateDatePickerProps,
+  IFilterLocaleKey,
+  IFilterWithDatesValue,
+  IPartialFilterLocale,
+} from '../../types';
 import { FilterWithDatesStyles, styles } from './FilterWithDates.styles';
 
-type PickerProps = Omit<
-  IDatePickerProps,
-  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate'
->;
-
-const emptyPickerProps = {};
-
 export interface IFilterWithDatesProps extends ICommonProps {
   tweakStyles?: FilterWithDatesStyles;
   value?: IFilterWithDatesValue;
@@ -29,12 +28,10 @@ export interface IFilterWithDatesProps extends ICommonProps {
   onEndBtnSubmit: () => void;
   testId?: string;
   isClearable?: boolean;
-  startPickerProps?: PickerProps;
-  endPickerProps?: PickerProps;
+  startPickerProps?: IFilterWithDateDatePickerProps;
+  endPickerProps?: IFilterWithDateDatePickerProps;
 }
 
-export const DATE_FORMAT = 'dd.MM.yyyy';
-
 export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   value,
   onChange,
@@ -45,8 +42,8 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   data,
   tweakStyles,
   testId,
-  startPickerProps = emptyPickerProps,
-  endPickerProps = emptyPickerProps,
+  startPickerProps = DEFAULT_PICKER_PROPS,
+  endPickerProps = DEFAULT_PICKER_PROPS,
   isClearable = true,
 }) => {
   const { classes, componentStyles } = useTheme('FilterWithDates', styles, tweakStyles);

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

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

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

@@ -1,4 +1,4 @@
-import { ComponentStyles } from '../../../types';
+import { ComponentStyles } from '../../../../types';
 
 export const styles = {
   root: {},

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

@@ -1,11 +1,18 @@
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { endOfMonth, endOfYear, startOfMonth, startOfYear, sub } from 'date-fns';
-import { useTheme, useOnClickOutside, useTweakStyles } from '../../../hooks';
-import { ICommonProps } from '../../../types';
+import { useTheme, useOnClickOutside, useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { PERIODS, PERIODS_GETTERS } from '../../constants';
+import { getLocale } from '../../helpers';
+import {
+  IDatePeriod,
+  IFilterLocaleKey,
+  IPartialFilterLocale,
+  IPeriod,
+  IPeriodGetter,
+  IPeriodsList,
+} from '../../types';
 import { FilterSelect } from '../FilterSelect';
 import { FilterWithDates } from '../FilterWithDates';
-import { IFilterLocaleKey, getLocale, IPartialFilterLocale } from '../locales';
-import { IDatePeriod, IPeriod, IPeriodGetter, IPeriodsList, PERIODS } from '../types';
 import { FilterWithPeriodStyles, styles } from './FilterWithPeriod.styles';
 
 export interface IFilterWithPeriodProps extends ICommonProps {
@@ -19,37 +26,6 @@ export interface IFilterWithPeriodProps extends ICommonProps {
   testId?: string;
 }
 
-const PERIODS_GETTERS: Record<string, IPeriodGetter> = {
-  THIS_MONTH: () => {
-    const today = new Date();
-    return {
-      from: startOfMonth(today),
-      to: endOfMonth(today),
-    };
-  },
-  LAST_MONTH: () => {
-    const day = sub(new Date(), { months: 1 });
-    return {
-      from: startOfMonth(day),
-      to: endOfMonth(day),
-    };
-  },
-  THIS_YEAR: () => {
-    const today = new Date();
-    return {
-      from: startOfYear(today),
-      to: endOfYear(today),
-    };
-  },
-  LAST_YEAR: () => {
-    const day = sub(new Date(), { years: 1 });
-    return {
-      from: startOfYear(day),
-      to: endOfYear(day),
-    };
-  },
-};
-
 export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
   value,
   localeKey,

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

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

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

@@ -1,6 +1,6 @@
-import { colors } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-import { FILTER_HEIGHT } from '../FiltersPane.styles';
+import { colors } from '../../../../theme';
+import { ComponentStyles } from '../../../../types';
+import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
 export const styles = {
   root: {

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -0,0 +1,149 @@
+import { useState, useRef, RefObject } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import { useTheme } from '../../../../hooks';
+import { Icon } from '../../../Icon';
+import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import { Filter } from '../Filter';
+import { FilterValueView } from '../FilterValueView';
+import { FilterWrapperStyles, styles } from './FilterWrapper.styles';
+
+export interface IFilterWrapperProps<Values, Key extends keyof Values> {
+  tweakStyles?: FilterWrapperStyles;
+  filter: ConfigItem<Values[Key]>;
+  value?: Values[Key];
+  onChange: <V>(value: V) => void;
+  isDisabled?: boolean;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  testId?: string;
+  filtersPaneRef: RefObject<HTMLDivElement> | null;
+}
+
+export function FilterWrapper<Values, Key extends keyof Values>({
+  filter,
+  value,
+  isDisabled,
+  onChange,
+  locale,
+  localeKey,
+  testId,
+  filtersPaneRef,
+  tweakStyles,
+}: IFilterWrapperProps<Values, Key>): JSX.Element {
+  const { classes } = useTheme('FilterWrapper', styles, tweakStyles);
+  const [isOpen, setIsOpen] = useState(false);
+  const refItem = useRef<HTMLDivElement>(null);
+
+  const { type } = filter;
+
+  let hasValue = false;
+
+  if (Array.isArray(value) && value.length > 0) {
+    hasValue = true;
+  } else if (
+    typeof value === 'object' &&
+    Object.values(value as unknown as Record<any, any>).some((v) =>
+      Array.isArray(v) ? v.length > 0 : Boolean(v),
+    )
+  ) {
+    hasValue = true;
+  } else if (!Array.isArray(value) && typeof value !== 'object') {
+    hasValue = Boolean(value);
+  }
+
+  // Для того, чтобы фильтр закрывался, если мы работаем с простыми значениями, типа селекта
+  function handleChange<V>(v: V) {
+    if (type === 'select') {
+      setIsOpen(false);
+    }
+    onChange(v);
+  }
+
+  const handleLabelClick = () => {
+    if (!isBoolean && !isDisabled) {
+      setIsOpen(!isOpen);
+    }
+
+    if (isBoolean) {
+      onChange(!value);
+    }
+  };
+
+  const handleOnClose = () => {
+    setIsOpen(false);
+  };
+
+  const isBoolean = filter.type === 'boolean';
+
+  return !filter.isInline ? (
+    <div
+      className={clsx(classes.root, {
+        [classes.noValue]: !hasValue,
+        [classes.openNoValue]: isOpen && !hasValue,
+        [classes.withValue]: !isOpen && hasValue,
+        [classes.openWithValue]: isOpen && hasValue,
+        [classes.boolean]: isBoolean,
+        [classes.disabled]: isDisabled,
+      })}
+      data-testid={testId}
+    >
+      <div
+        ref={refItem}
+        onClick={handleLabelClick}
+        className={clsx(classes.item, {
+          [classes.booleanItem]: isBoolean,
+        })}
+      >
+        <div className={classes.name}>{filter.name}</div>
+        {!isBoolean && value !== undefined && value !== null && (
+          <div className={classes.value}>
+            <FilterValueView value={value} filter={filter} localeKey={localeKey} locale={locale} />
+          </div>
+        )}
+        {!isBoolean && (
+          <div className={clsx(classes.iconContainer, isOpen && classes.open)}>
+            <Icon type="chevron-down" />
+          </div>
+        )}
+      </div>
+      <CSSTransition
+        in={isOpen}
+        timeout={150}
+        unmountOnExit
+        classNames={{
+          enter: classes['dropdown-enter'],
+          enterActive: classes['dropdown-enter-active'],
+          exit: classes['dropdown-exit'],
+          exitActive: classes['dropdown-exit-active'],
+        }}
+      >
+        <Filter
+          value={value}
+          filter={filter}
+          localeKey={localeKey}
+          locale={locale}
+          onClose={handleOnClose}
+          onChange={handleChange}
+          parentRef={refItem}
+          filtersPaneRef={filtersPaneRef}
+          testId={testId}
+          classes={classes}
+        />
+      </CSSTransition>
+    </div>
+  ) : (
+    <Filter
+      value={value}
+      filter={filter}
+      localeKey={localeKey}
+      locale={locale}
+      onClose={handleOnClose}
+      onChange={onChange}
+      isInline
+      filtersPaneRef={filtersPaneRef}
+      testId={testId}
+      classes={classes}
+    />
+  );
+}

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

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

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

@@ -1,7 +1,7 @@
-import { rgba } from '../../../helpers';
-import { colors, dimensions } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-import { FILTER_HEIGHT } from '../FiltersPane.styles';
+import { rgba } from '../../../../helpers';
+import { colors, dimensions } from '../../../../theme';
+import { ComponentStyles } from '../../../../types';
+import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
 export const styles = {
   root: {

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

@@ -1,13 +1,13 @@
 import { useRef, useState, useMemo, ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes } from '../../../helpers';
-import { useTheme, useOnClickOutside, useTweakStyles } from '../../../hooks';
-import { ICommonProps } from '../../../types';
-import { Icon } from '../../Icon';
-import { SearchInput } from '../../SearchInput';
+import { addDataAttributes } from '../../../../helpers';
+import { useTheme, useOnClickOutside, useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Icon } from '../../../Icon';
+import { SearchInput } from '../../../SearchInput';
+import { getLocale } from '../../helpers';
+import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
 import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
-import { IFilterLocaleKey, getLocale, IPartialFilterLocale } from '../locales';
-import { IFiltersPaneSearchPayload } from '../types';
 import { FiltersPaneSearchStyles, styles } from './FiltersPaneSearch.styles';
 
 export interface IFiltersPaneSearchProps<Value> extends ICommonProps {

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

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

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

@@ -0,0 +1,9 @@
+export * from './Filter';
+export * from './FilterInterval';
+export * from './FilterMultiSelect';
+export * from './FilterSelect';
+export * from './FiltersPaneSearch';
+export * from './FilterValueView';
+export * from './FilterWithDates';
+export * from './FilterWithPeriod';
+export * from './FilterWrapper';

package/src/components/FiltersPane/constants.ts

@@ -0,0 +1,137 @@
+import { endOfMonth, endOfYear, startOfMonth, startOfYear, sub } from 'date-fns';
+import {
+  IFilterLocale,
+  IFilterLocaleKey,
+  IPeriodGetter,
+  ISelectLocale,
+  ISelectLocaleKey,
+} from './types';
+
+export const PERIODS = ['THIS_MONTH', 'LAST_MONTH', 'THIS_YEAR', 'LAST_YEAR', 'CUSTOM'] as const;
+
+export const SelectLocales: Record<string, ISelectLocale> = {
+  ru: {
+    clear: 'Очистить',
+    all: 'Все',
+    chosen: 'Выбранные',
+    nothingFound: 'Ничего не найдено',
+    searchPlaceholder: 'Поиск',
+  },
+
+  en: {
+    clear: 'Clear',
+    all: 'All',
+    chosen: 'Chosen',
+    nothingFound: 'Nothing found',
+    searchPlaceholder: 'Search',
+  },
+};
+
+export const FilterLocales: Record<string, IFilterLocale> = {
+  ru: {
+    clear: 'Очистить',
+    all: 'Все',
+    other: 'Остальные',
+    chosen: 'Выбранные',
+    nothingFound: 'Не найдено',
+    from: 'От',
+    to: 'До',
+    back: 'Назад',
+    searchPlaceholder: 'Поиск',
+    displayedFields: 'Поля для поиска',
+    months: [
+      'Январь',
+      'Февраль',
+      'Март',
+      'Апрель',
+      'Май',
+      'Июнь',
+      'Июль',
+      'Август',
+      'Сентябрь',
+      'Октябрь',
+      'Ноябрь',
+      'Декабрь',
+    ],
+    periods: {
+      THIS_MONTH: 'Этот месяц',
+      LAST_MONTH: 'Прошлый месяц',
+      THIS_YEAR: 'Этот год',
+      LAST_YEAR: 'Прошлый год',
+      CUSTOM: 'Другой период',
+    },
+  },
+
+  en: {
+    clear: 'Clear',
+    all: 'All',
+    other: 'Others',
+    chosen: 'Chosen',
+    nothingFound: 'Nothing found',
+    from: 'From',
+    to: 'To',
+    back: 'Back',
+    searchPlaceholder: 'Search',
+    displayedFields: 'Displayed fields',
+    months: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ],
+    periods: {
+      THIS_MONTH: 'This month',
+      LAST_MONTH: 'Previous month',
+      THIS_YEAR: 'This year',
+      LAST_YEAR: 'Previous year',
+      CUSTOM: 'Custom',
+    },
+  },
+};
+
+export const DEFAULT_LOCALE: IFilterLocaleKey = 'en';
+
+export const DEFAULT_SELECT_LOCALE: ISelectLocaleKey = 'en';
+
+export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+
+export const DEFAULT_PICKER_PROPS = {};
+
+export const PERIODS_GETTERS: Record<string, IPeriodGetter> = {
+  THIS_MONTH: () => {
+    const today = new Date();
+    return {
+      from: startOfMonth(today),
+      to: endOfMonth(today),
+    };
+  },
+  LAST_MONTH: () => {
+    const day = sub(new Date(), { months: 1 });
+    return {
+      from: startOfMonth(day),
+      to: endOfMonth(day),
+    };
+  },
+  THIS_YEAR: () => {
+    const today = new Date();
+    return {
+      from: startOfYear(today),
+      to: endOfYear(today),
+    };
+  },
+  LAST_YEAR: () => {
+    const day = sub(new Date(), { years: 1 });
+    return {
+      from: startOfYear(day),
+      to: endOfYear(day),
+    };
+  },
+};

package/src/components/FiltersPane/helpers.ts

@@ -0,0 +1,26 @@
+import merge from 'lodash-es/merge';
+import { DEFAULT_LOCALE, DEFAULT_SELECT_LOCALE, FilterLocales, SelectLocales } from './constants';
+import {
+  type IFilterLocale,
+  type IFilterLocaleKey,
+  type IPartialFilterLocale,
+  ISelectLocale,
+  ISelectLocaleKey,
+} from './types';
+
+export const getLocale = (
+  key: IFilterLocaleKey = DEFAULT_LOCALE,
+  custom?: IPartialFilterLocale,
+  custom2?: IPartialFilterLocale,
+): IFilterLocale => merge({}, FilterLocales[key], custom, custom2);
+
+export const getSelectLocale = (
+  key: ISelectLocaleKey = DEFAULT_SELECT_LOCALE,
+  custom?: Partial<ISelectLocale>,
+  custom2?: Partial<ISelectLocale>,
+): ISelectLocale => merge({}, SelectLocales[key], custom, custom2);
+
+export const sortValues = (arr: Array<number | undefined>) =>
+  arr.includes(undefined) ? arr : (arr as number[]).sort((a, b) => (a < b ? -1 : 1));
+
+export const defaultConvertFunction = (val: unknown): string => String(val);

package/src/components/FiltersPane/index.ts

@@ -1,20 +1,4 @@
 export * from './FiltersPane';
 export * from './types';
-export * from './locales';
-
 // TODO : подумать над тем чтобы вынести это все наружу
-
-export * from './FilterInterval';
-export * from './FilterMultiSelect';
-export * from './FilterSelect';
-export * from './FiltersPaneSearch';
-export * from './FilterWithDates';
-export * from './FilterWithPeriod';
-
-export type { FiltersPaneStyles } from './FiltersPane.styles';
-export type { FilterIntervalStyles } from './FilterInterval/FilterInterval.styles';
-export type { FilterSelectStyles } from './FilterSelect/FilterSelect.styles';
-export type { FiltersPaneSearchStyles } from './FiltersPaneSearch/FiltersPaneSearch.styles';
-export type { FilterWithDatesStyles } from './FilterWithDates/FilterWithDates.styles';
-export type { FilterWithPeriodStyles } from './FilterWithPeriod/FilterWithPeriod.styles';
-export type { FilterWrapperStyles } from './FilterWrapper/FilterWrapper.styles';
+export * from './components';

package/src/components/FiltersPane/types.ts

@@ -1,13 +1,14 @@
 import { FC, ReactNode } from 'react';
+import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
-import { IFilterIntervalProps } from './FilterInterval';
-import { IFilterMultiSelectProps } from './FilterMultiSelect';
-import { IFilterSelectProps } from './FilterSelect';
-import { IFilterWithDatesProps } from './FilterWithDates';
-import { IFilterWithPeriodProps } from './FilterWithPeriod';
-import { IFilterLocaleKey, IPartialFilterLocale } from './locales';
-
-export const PERIODS = ['THIS_MONTH', 'LAST_MONTH', 'THIS_YEAR', 'LAST_YEAR', 'CUSTOM'] as const;
+import {
+  IFilterIntervalProps,
+  IFilterMultiSelectProps,
+  IFilterSelectProps,
+  IFilterWithDatesProps,
+  IFilterWithPeriodProps,
+} from './components';
+import { FilterLocales, PERIODS, SelectLocales } from './constants';
 
 export type IPeriodType = (typeof PERIODS)[number];
 
@@ -110,3 +111,46 @@ export type ConfigItem<Value> =
 export type ConfigType<Values> = {
   [K in keyof Values]: ConfigItem<Values[K]>;
 };
+
+export interface IFilterLocale {
+  clear: string;
+  all: string;
+  other: string;
+  chosen: string;
+  searchPlaceholder: string;
+  displayedFields: string;
+  nothingFound: string;
+  from: string;
+  to: string;
+  back: string;
+  months: string[];
+  periods: {
+    [key: string]: string;
+    THIS_MONTH: string;
+    LAST_MONTH: string;
+    THIS_YEAR: string;
+    LAST_YEAR: string;
+    CUSTOM: string;
+  };
+}
+
+export type IPartialFilterLocale = Partial<Omit<IFilterLocale, 'periods'>> & {
+  periods?: Partial<IFilterLocale['periods']>;
+};
+
+export type IFilterLocaleKey = keyof typeof FilterLocales;
+
+export interface ISelectLocale {
+  clear: string;
+  all: string;
+  chosen: string;
+  searchPlaceholder: string;
+  nothingFound: string;
+}
+
+export type ISelectLocaleKey = keyof typeof SelectLocales;
+
+export type IFilterWithDateDatePickerProps = Omit<
+  IDatePickerProps,
+  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate'
+>;