@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/FiltersPane/FilterSelect/FilterSelect.tsx

@@ -0,0 +1,397 @@
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import clsx from 'clsx';
+import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
+import { debounce } from 'ts-debounce';
+
+import { addDataAttributes, isNotEmpty } from '../../../helpers';
+import { Icon } from '../../Icon';
+import { useIsMounted, useTheme, useTweakStyles } from '../../../hooks';
+import { ICommonProps } from '../../../types';
+import { ThemedPreloader } from '../../ThemedPreloader';
+import { Button } from '../../Button';
+import { SearchInput } from '../../SearchInput';
+import { IFilterLocaleKey } from '../locales';
+import { getLocale, ISelectLocale } from './locales';
+
+import { FilterSelectStyles, styles } from './FilterSelect.styles';
+
+export interface IFilterSelectProps<Value> extends ICommonProps {
+  tweakStyles?: FilterSelectStyles;
+  value?: Value;
+  onChange: (value?: Value) => void;
+  /**
+   * @default false
+   */
+  isSearchEnabled?: boolean;
+  /**
+   * @default false
+   */
+  isGroupingEnabled?: boolean;
+  /**
+   * @default `220px`
+   */
+  width?: string | number;
+  localeKey?: IFilterLocaleKey;
+  locale?: Partial<ISelectLocale>;
+  options?: Value[];
+  footer?: ReactNode;
+  fetchOptions?: (value?: string, page?: number) => Promise<Value[]>;
+  getValueString?: (value: Value) => string;
+  getValueView?: (value: Value) => ReactNode;
+  getValueId?: (value: Value) => string;
+  /**
+   * @default true
+   */
+  hasClearButton?: boolean;
+  testId?: string;
+}
+
+export const defaultConvertFunction = (val: unknown): string => String(val);
+
+export function FilterSelect<Value>({
+  data,
+  tweakStyles,
+  value,
+  isSearchEnabled = false,
+  isGroupingEnabled = false,
+  width,
+  localeKey,
+  locale,
+  onChange,
+  options,
+  fetchOptions,
+  footer,
+  getValueView = defaultConvertFunction,
+  getValueId = defaultConvertFunction,
+  getValueString = defaultConvertFunction,
+  hasClearButton = true,
+  testId,
+}: IFilterSelectProps<Value>): JSX.Element {
+  const isMounted = useIsMounted();
+
+  const { classes, componentStyles } = useTheme(
+    'FilterSelect',
+    styles,
+    tweakStyles,
+    { width },
+  );
+
+  const translates = useMemo(
+    () => getLocale(localeKey, locale),
+    [localeKey, locale],
+  );
+
+  const observer = useRef<IntersectionObserver>();
+
+  const [searchValue, setSearchValue] = useState('');
+  const [allOptions, setAllOptions] = useState<Value[]>([]);
+
+  const [activePage, setActivePage] = useState(0);
+  const [isMaxPage, setIsMaxPage] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingOptionsOnScroll, setLoadingOptionsOnScroll] = useState(false);
+
+  const shouldShowPreloader = isLoading || isLoadingOptionsOnScroll;
+  const hasFooter = isNotEmpty(footer);
+
+  const handleSearchInputChange = useCallback(
+    async (inputValue?: string) => {
+      if (fetchOptions === undefined) {
+        return;
+      }
+      setIsLoading(true);
+
+      try {
+        const response = await fetchOptions(inputValue?.trim() ?? '');
+        if (isMounted() && response !== undefined) {
+          setAllOptions(response);
+          setActivePage(0);
+          setIsMaxPage(false);
+        }
+      } finally {
+        if (isMounted()) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [fetchOptions],
+  );
+
+  const changeSearchValue = useMemo(
+    () => debounce(handleSearchInputChange),
+    [handleSearchInputChange],
+  );
+
+  const handleOnChange = (inputValue: string) => {
+    setSearchValue(inputValue);
+    if (fetchOptions === undefined) {
+      if (options !== undefined) {
+        const lowerSearchValue = inputValue.toLowerCase();
+        setAllOptions(
+          options.filter((o) =>
+            getValueString(o).toLowerCase().includes(lowerSearchValue),
+          ),
+        );
+      }
+    } else {
+      changeSearchValue(inputValue);
+    }
+  };
+
+  const handleClear = () => {
+    if (options !== undefined) {
+      setAllOptions(options);
+    }
+    onChange(undefined);
+    setSearchValue('');
+  };
+
+  const handleLoadItemsOnScroll = useCallback(
+    async (inputValue?: string, page?: number) => {
+      if (fetchOptions === undefined) {
+        return;
+      }
+
+      setLoadingOptionsOnScroll(true);
+
+      try {
+        const response = await fetchOptions(
+          inputValue?.trim() ?? '',
+          page ?? 0,
+        );
+
+        if (isMounted()) {
+          if (response.length > 0) {
+            setAllOptions((prevState) => [...prevState, ...response]);
+          } else {
+            setIsMaxPage(true);
+          }
+        }
+      } finally {
+        if (isMounted()) {
+          setLoadingOptionsOnScroll(false);
+        }
+      }
+    },
+    [fetchOptions],
+  );
+
+  const initIntersectionObserver = useCallback(
+    (node: HTMLDivElement) => {
+      if (isLoadingOptionsOnScroll || isMaxPage) {
+        return;
+      }
+
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+
+      observer.current = new IntersectionObserver(async (entries) => {
+        if (entries[0].isIntersecting) {
+          await handleLoadItemsOnScroll(searchValue, activePage + 1);
+          if (isMounted()) {
+            setActivePage((prevState) => prevState + 1);
+          }
+        }
+      });
+
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [
+      activePage,
+      handleLoadItemsOnScroll,
+      isLoadingOptionsOnScroll,
+      isMaxPage,
+      searchValue,
+    ],
+  );
+
+  useEffect(() => {
+    if (fetchOptions === undefined) {
+      setAllOptions(options ?? []);
+      return;
+    }
+
+    const doFetchOptions = async () => {
+      setIsLoading(true);
+
+      try {
+        const response = await fetchOptions('');
+        if (response !== undefined && isMounted()) {
+          setAllOptions(response);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    doFetchOptions();
+  }, []);
+
+  const tweakSearchInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakSearchInput',
+  );
+
+  const tweakClearButtonStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakClearButton',
+  );
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      {isSearchEnabled && (
+        <div className={classes.dropdownInput}>
+          <SearchInput
+            value={searchValue}
+            placeholder={translates.searchPlaceholder}
+            onChange={handleOnChange}
+            tweakStyles={tweakSearchInputStyles}
+            testId={testId !== undefined ? `${testId}-search` : undefined}
+            shouldFocusOnMount
+          />
+        </div>
+      )}
+
+      {!isLoading && (
+        <>
+          {allOptions.length !== 0 && (
+            <div
+              className={clsx(
+                classes.list,
+                hasClearButton && classes.withClearButton,
+              )}
+              data-testid={testId !== undefined ? `${testId}-list` : undefined}
+            >
+              {isGroupingEnabled && value !== undefined && (
+                <>
+                  <div
+                    className={clsx(
+                      classes.label,
+                      classes.labelChosen,
+                      !isSearchEnabled && classes.withoutTopGap,
+                    )}
+                  >
+                    {translates.chosen}
+                  </div>
+                  <div
+                    className={classes.item}
+                    onClick={() => onChange(undefined)}
+                  >
+                    <div className={classes.option}>{getValueView(value)}</div>
+                    <div className={classes.icon}>
+                      <Icon type="check" />
+                    </div>
+                  </div>
+                  <div className={classes.label}>{translates.all}</div>
+                </>
+              )}
+              {allOptions.map((item, index) => {
+                const isActive =
+                  value !== undefined && getValueId(value) === getValueId(item);
+                if (isGroupingEnabled && isActive) {
+                  return null;
+                }
+                const id = getValueId(item);
+                const view = getValueView(item);
+
+                const renderedItem = (
+                  <div
+                    key={id}
+                    className={classes.item}
+                    ref={
+                      allOptions.length - 1 === index &&
+                      fetchOptions !== undefined
+                        ? initIntersectionObserver
+                        : undefined
+                    }
+                    onClick={() => onChange(item)}
+                  >
+                    {/* data нужно ли? */}
+                    <div className={classes.option} data-option={id}>
+                      {view}
+                    </div>
+                    {isActive && (
+                      <div className={classes.icon}>
+                        <Icon type="check" />
+                      </div>
+                    )}
+                  </div>
+                );
+
+                if (options !== undefined && searchValue === '') {
+                  return (
+                    <ScrollIntoViewIfNeeded key={id} active={isActive}>
+                      {renderedItem}
+                    </ScrollIntoViewIfNeeded>
+                  );
+                } else {
+                  return renderedItem;
+                }
+              })}
+            </div>
+          )}
+
+          {/* Preloader */}
+          {shouldShowPreloader && (
+            <div className={classes.preloader}>
+              <ThemedPreloader type="dots" />
+            </div>
+          )}
+
+          {/* Nothing found */}
+          {allOptions.length === 0 && (
+            <div className={classes.nothingFound}>
+              {translates.nothingFound}
+            </div>
+          )}
+
+          {/* Controls and footer */}
+          {(hasClearButton || hasFooter) && (
+            <div
+              className={clsx(classes.panel, {
+                [classes.panelWithFooter]: hasFooter,
+              })}
+            >
+              {hasFooter && <div className={classes.footer}>{footer}</div>}
+
+              {hasClearButton && (
+                <div className={classes.clear}>
+                  <Button
+                    onClick={handleClear}
+                    size="s"
+                    view="text"
+                    testId={
+                      testId !== undefined
+                        ? `${testId}-clear-button`
+                        : undefined
+                    }
+                    tweakStyles={tweakClearButtonStyles}
+                  >
+                    {translates.clear}
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+
+      {isLoading && (
+        <div className={classes.preloader}>
+          <ThemedPreloader type="dots" />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export * from './FilterSelect';

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

@@ -0,0 +1,37 @@
+import { merge } from 'lodash';
+
+export interface ISelectLocale {
+  clear: string;
+  all: string;
+  chosen: string;
+  searchPlaceholder: string;
+  nothingFound: string;
+}
+
+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 type ISelectLocaleKey = keyof typeof SelectLocales;
+
+export const DEFAULT_LOCALE: ISelectLocaleKey = 'en';
+
+export const getLocale = (
+  key: ISelectLocaleKey = DEFAULT_LOCALE,
+  custom?: Partial<ISelectLocale>,
+  custom2?: Partial<ISelectLocale>,
+): ISelectLocale => merge({}, SelectLocales[key], custom, custom2);

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

@@ -0,0 +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>;

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

@@ -0,0 +1,186 @@
+import { useMemo } from 'react';
+import { format } from 'date-fns';
+
+import { useTheme } from '../../../hooks';
+import { IFilterWrapperProps } from '../FilterWrapper';
+import { IMultiSelectListValues } from '../../MultiSelectList';
+import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../types';
+import { getLocale } from '../locales';
+
+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>;
+}

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

@@ -0,0 +1 @@
+export * from './FilterValueView';

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

@@ -0,0 +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>;