@true-engineering/true-react-common-ui-kit 1.12.1 → 2.0.0

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

@@ -1,360 +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;
-}
+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;
+}