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

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

@@ -0,0 +1,360 @@
+import { useState, useRef, useMemo, useLayoutEffect, RefObject } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { Classes } from 'jss';
+import clsx from 'clsx';
+
+import { useTheme, useOnClickOutsideWithRef } from '../../../hooks';
+import { Icon } from '../../Icon';
+import { FilterValueView } from '../FilterValueView';
+import { FilterInterval } from '../FilterInterval';
+import { FilterMultiSelect } from '../FilterMultiSelect';
+import { FilterWithPeriod } from '../FilterWithPeriod';
+import { FilterWithDates } from '../FilterWithDates';
+import { FilterSelect } from '../FilterSelect';
+import {
+  ConfigItem,
+  IFilterMultiSelectValues,
+  IFilterWithDatesValue,
+  IPeriod,
+} from '../types';
+import { IFilterLocaleKey, getLocale, IPartialFilterLocale } from '../locales';
+
+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;
+}
+
+interface IFilterOtherProps<Values, Key extends keyof Values>
+  extends IFilterWrapperProps<Values, Key> {
+  parentRef?: RefObject<HTMLElement>;
+  isInline?: boolean;
+  onChange: <V>(v: V) => void;
+  onClose?: () => void;
+  filtersPaneRef: RefObject<HTMLDivElement> | null;
+  classes: Classes<'left' | 'right' | 'dropdown'>;
+}
+
+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={true}
+      filtersPaneRef={filtersPaneRef}
+      testId={testId}
+      classes={classes}
+    />
+  );
+}
+
+export function Filter<Values, Key extends keyof Values>({
+  filter,
+  value,
+  parentRef,
+  isInline,
+  onChange,
+  onClose,
+  localeKey,
+  locale,
+  filtersPaneRef,
+  testId,
+  classes,
+}: IFilterOtherProps<Values, Key>): JSX.Element | null {
+  const ref = useRef<HTMLDivElement>(null);
+  const [dropdownPosition, setDropdownPosition] = useState<'left' | 'right'>(
+    'left',
+  );
+  const translatesLocaleKey = filter.localeKey ?? localeKey;
+  const translates = useMemo(
+    () => getLocale(translatesLocaleKey, locale, filter.locale),
+    [localeKey, locale, filter.locale],
+  );
+
+  useOnClickOutsideWithRef(
+    ref,
+    () => {
+      if (!isInline && onClose !== undefined) {
+        onClose();
+      }
+    },
+    parentRef,
+  );
+
+  useLayoutEffect(() => {
+    if (
+      ref.current === null ||
+      filtersPaneRef === undefined ||
+      filtersPaneRef === null ||
+      filtersPaneRef?.current === null
+    ) {
+      return;
+    }
+
+    const { width, left } = ref.current.getBoundingClientRect();
+    const filtersPaneWidth = filtersPaneRef.current.offsetWidth;
+
+    const filterValueWidth = ref.current.parentElement
+      ? ref.current.parentElement.getBoundingClientRect().width
+      : 0;
+
+    if (filtersPaneWidth - left < width - filterValueWidth) {
+      setDropdownPosition('right');
+    } else if (left < 0) {
+      setDropdownPosition('left');
+    }
+  }, [value, filtersPaneRef]);
+
+  const props = {
+    ref,
+    className: clsx(classes[dropdownPosition], {
+      [classes.dropdown]: !isInline,
+    }),
+  };
+
+  const handleOnClose = () => {
+    if (onClose !== undefined) {
+      onClose();
+    }
+  };
+
+  if (filter.type === 'custom' && filter.component) {
+    const Component = filter.component;
+    return (
+      <div {...props}>
+        <Component
+          {...{
+            value,
+            onChange,
+            onClose,
+            filter,
+            locale,
+            localeKey,
+            testId,
+          }}
+        />
+      </div>
+    );
+  } else if (filter.type === 'custom' && filter.component === undefined) {
+    console.warn(
+      `%cДля фильтра типа custom (${filter.name}) в конфиге обязательно нужно задать component`,
+      'background: red; color: black',
+    );
+  }
+
+  if (filter.type === 'select') {
+    return (
+      <div {...props}>
+        <FilterSelect
+          onChange={onChange}
+          value={value}
+          localeKey={translatesLocaleKey}
+          locale={translates}
+          testId={testId !== undefined ? `${testId}-select` : undefined}
+          {...filter}
+        />
+      </div>
+    );
+  }
+
+  if (filter.type === 'dateRange') {
+    return (
+      <div {...props}>
+        <FilterWithPeriod
+          localeKey={translatesLocaleKey}
+          locale={translates}
+          onChange={onChange}
+          value={{ ...value } as IPeriod}
+          onClose={handleOnClose}
+          testId={testId !== undefined ? `${testId}-period` : undefined}
+          {...filter}
+        />
+      </div>
+    );
+  }
+
+  if (filter.type === 'dateRangeWithoutPeriod') {
+    const dateRangeValue = value as unknown as IFilterWithDatesValue;
+
+    return (
+      <div {...props} style={{ width: 320 }}>
+        <FilterWithDates
+          value={dateRangeValue}
+          onEndBtnSubmit={() => onChange(undefined)}
+          onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
+          localeKey={translatesLocaleKey}
+          locale={translates}
+          testId={testId !== undefined ? `${testId}-dates` : undefined}
+          {...filter}
+        />
+      </div>
+    );
+  }
+
+  if (filter.type === 'multiSelect') {
+    return (
+      <div {...props}>
+        <FilterMultiSelect
+          onChange={onChange}
+          onClose={handleOnClose}
+          value={value as unknown as IFilterMultiSelectValues<any>}
+          localeKey={translatesLocaleKey}
+          locale={translates}
+          testId={testId !== undefined ? `${testId}-multiSelect` : undefined}
+          {...filter}
+        />
+      </div>
+    );
+  }
+
+  if (filter.type === 'interval') {
+    return (
+      <div {...props}>
+        <FilterInterval
+          value={value as unknown as number[]}
+          labelName={filter.name}
+          localeKey={translatesLocaleKey}
+          locale={translates}
+          onChange={onChange}
+          testId={testId !== undefined ? `${testId}-interval` : undefined}
+          {...filter}
+        />
+      </div>
+    );
+  }
+
+  console.warn(
+    `%cДля фильтра ${filter.name} не задан тип или component`,
+    'background: red; color: black',
+  );
+
+  return null;
+}

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

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

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -0,0 +1,307 @@
+import { ReactNode, useState } from 'react';
+import {
+  ConfigType,
+  IDatePeriod,
+  IFiltersPaneSearchPayload,
+  IPeriod,
+} from './types';
+import { FiltersPane, IFiltersPaneProps } from './FiltersPane';
+import { IMultiSelectListValues } from '../MultiSelectList';
+import { FilterSelect } from './FilterSelect';
+import { ComponentStory } from '@storybook/react';
+
+const LONG_STRING =
+  'or veeeeeeeeery looooooooooooooooooooooooooooooooooooooooong';
+
+const convertVToString = (val: { v: string }): string => val.v;
+const convertVToNode = (val: { v: string }): ReactNode => (
+  <b>
+    <i>{val.v}</i>
+  </b>
+);
+const fieldTranslates = {
+  interval: 'Interval',
+  name: 'Name',
+};
+
+const myPeriodGetter = (): IDatePeriod => ({
+  from: null,
+  to: null,
+});
+
+function convertFieldToString<T>(v: keyof T) {
+  return fieldTranslates[v as keyof typeof fieldTranslates];
+}
+
+const selectOptions = [
+  LONG_STRING,
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '22',
+  '222',
+  '2222',
+  '22222',
+  '222222',
+  '22222222',
+  '234',
+];
+
+const fetchOptionsMock = [
+  'select',
+  'option',
+  'can be',
+  'short',
+  LONG_STRING,
+  'opti433on',
+  'can44 be',
+  'sho44rt',
+  'or vee444ee',
+];
+
+type ConfigValues = {
+  name: string;
+  date: IPeriod;
+  select: string;
+  multiSelect: string;
+  multiSelectWithSearch: IMultiSelectListValues<{ v: string }>;
+  interval: number[];
+  isActive: boolean;
+  selectSearch: string;
+  custom: string;
+};
+
+interface IFiltersPaneWithCustomProps<Values, Content>
+  extends IFiltersPaneProps<Values, Content> {
+  containerWidth: number;
+  multiselectWidth: number;
+  isSearchDisabled: boolean;
+  isSearchAutosizeable: boolean;
+  shouldShowSettingsButton: boolean;
+  withFieldNameInLabel: boolean;
+  isGroupingEnabled: boolean;
+  checkboxPosition: 'left' | 'right';
+}
+
+function FiltersPaneWithCustomProps<Values, Content>({
+  containerWidth,
+  multiselectWidth,
+  isSearchDisabled,
+  isSearchAutosizeable,
+  shouldShowSettingsButton,
+  withFieldNameInLabel,
+  isGroupingEnabled,
+  checkboxPosition,
+  ...args
+}: IFiltersPaneWithCustomProps<Values, Content>) {
+  const config: ConfigType<ConfigValues> = {
+    name: {
+      name: 'name',
+      type: 'select',
+      options: selectOptions,
+      getValueView: (v: unknown) => v + '123',
+      getSelectedValueView: (v: unknown) => v + '1234',
+    },
+
+    select: {
+      name: 'selectWithGrouping',
+      type: 'select',
+      isSearchEnabled: true,
+      isGroupingEnabled: true,
+      options: selectOptions,
+    },
+
+    selectSearch: {
+      name: 'selectSearch',
+      type: 'select',
+      requiredFilledFilters: ['name'],
+      locale: {
+        searchPlaceholder: 'Фу',
+      },
+      isSearchEnabled: true,
+      options: selectOptions,
+    },
+
+    date: {
+      name: 'date',
+      type: 'dateRange',
+      locale: {
+        periods: {
+          MINE: 'Вот такой',
+        },
+      },
+      periods: [
+        'THIS_MONTH',
+        'LAST_MONTH',
+        'THIS_YEAR',
+        'LAST_YEAR',
+        ['MINE', myPeriodGetter],
+        'CUSTOM',
+      ],
+    },
+
+    multiSelect: {
+      name: 'multiSelect',
+      type: 'multiSelect',
+      width: multiselectWidth,
+      pageSize: 15,
+      checkboxPosition,
+      isGroupingEnabled,
+      fetchOptions: (_q = '', p = 0) => {
+        if (p > 1) {
+          return Promise.resolve([]);
+        }
+        if (p === 1) {
+          return Promise.resolve(fetchOptionsMock);
+        }
+        return Promise.resolve(fetchOptionsMock);
+      },
+    },
+
+    multiSelectWithSearch: {
+      name: 'multiSelectWithSearch',
+      type: 'multiSelect',
+      isSearchEnabled: true,
+      isGroupingEnabled,
+      checkboxPosition,
+      searchMaxLength: 12,
+      width: multiselectWidth,
+      fetchOptions: (q?: string): Promise<Array<{ v: string }>> => {
+        if (q === '' || q === 'undefined' || q === '123') {
+          return new Promise((resolve) => setTimeout(() => resolve([])));
+        }
+        return new Promise((resolve) =>
+          setTimeout(
+            () =>
+              resolve([
+                {
+                  v: LONG_STRING,
+                },
+                { v: '2' },
+                { v: '3' },
+                { v: '4' },
+                { v: '5' },
+                { v: '6' },
+                { v: '7' },
+              ]),
+            1000,
+          ),
+        );
+      },
+      getValueId: convertVToString,
+      getValueView: convertVToNode,
+    },
+
+    interval: {
+      name: 'Сумма',
+      type: 'interval',
+      withFieldNameInLabel,
+      canBeFloat: true,
+    },
+
+    isActive: {
+      name: 'isActive',
+      type: 'boolean',
+    },
+
+    custom: {
+      type: 'custom',
+      name: 'Custom',
+      options: [LONG_STRING, '2', '3'],
+      component: ({ filter, ...props }) => (
+        <FilterSelect {...props} {...filter} />
+      ),
+    },
+  };
+
+  const [values, setValues] = useState<Partial<ConfigValues>>(
+    {} as ConfigValues,
+  );
+  const [searchValue, setSearchValue] = useState<
+    IFiltersPaneSearchPayload<keyof ConfigValues> | undefined
+  >();
+
+  return (
+    <div
+      style={{
+        backgroundColor: 'white',
+        padding: 20,
+        border: '1px dotted rgba(0,0,0,.2)',
+        width: containerWidth,
+      }}
+    >
+      <FiltersPane<ConfigValues>
+        {...args}
+        search={{
+          field: searchValue?.field as keyof ConfigValues,
+          value: searchValue?.value,
+          fields: ['interval', 'name'] as Array<keyof ConfigValues>,
+          getValueView: convertFieldToString,
+          onChange: setSearchValue,
+          isAutoSizeable: isSearchAutosizeable,
+          isDisabled: isSearchDisabled,
+        }}
+        enabledFilters={[
+          'name',
+          'date',
+          'select',
+          'multiSelect',
+          'multiSelectWithSearch',
+          'interval',
+          'isActive',
+          'selectSearch',
+          'custom',
+        ]}
+        filtersConfig={config}
+        values={values}
+        localeKey="ru"
+        locale={{ searchPlaceholder: 'Поиск' }}
+        onChangeFilters={setValues}
+        onSettingsButtonClick={
+          shouldShowSettingsButton ? () => null : undefined
+        }
+        testId="filters-pane"
+      />
+    </div>
+  );
+}
+
+export default {
+  title: 'Table/FiltersPane',
+  component: FiltersPaneWithCustomProps,
+  argTypes: {
+    containerWidth: {
+      control: { type: 'range', min: 100, max: 1000, step: 100 },
+    },
+    multiselectWidth: {
+      control: { type: 'range', min: 100, max: 400, step: 50 },
+    },
+    checkboxPosition: {
+      control: 'inline-radio',
+      options: ['left', 'right'],
+    },
+  },
+};
+
+const Template: ComponentStory<typeof FiltersPaneWithCustomProps> = (args) => (
+  <FiltersPaneWithCustomProps {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  shouldShowSettingsButton: false,
+  isSearchAutosizeable: true,
+  isSearchDisabled: false,
+  hasClearButton: true,
+  isDisabled: false,
+  containerWidth: 400,
+  multiselectWidth: 200,
+  withFieldNameInLabel: true,
+  isGroupingEnabled: true,
+  checkboxPosition: 'left',
+};