@true-engineering/true-react-common-ui-kit 3.15.4 → 3.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.15.4",
+  "version": "3.16.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

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

@@ -1,5 +1,6 @@
 import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IButtonStyles } from '../Button';
+import type { IFilterWrapperStyles } from './components';
 
 export const FILTER_HEIGHT = 36;
 
@@ -84,5 +85,8 @@ export const innerTextButtonStyles: IButtonStyles = {
 
 export type IFiltersPaneStyles = ITweakStyles<
   typeof useStyles,
-  { tweakClearButton: IButtonStyles }
+  {
+    tweakClearButton: IButtonStyles;
+    tweakFilterWrapper: IFilterWrapperStyles;
+  }
 >;

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { useMemo } from 'react';
 import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
@@ -53,9 +53,13 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
     currentComponentName: 'FiltersPane',
   });
 
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+  const tweakFilterWrapperStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakFilterWrapper',
+    currentComponentName: 'FiltersPane',
+  });
 
-  const ref = useRef<HTMLDivElement>(null);
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
   const filtersKeys = enabledFilters || Object.keys(filtersConfig);
 
@@ -91,7 +95,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   );
 
   return (
-    <div className={classes.root} ref={ref} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       {/* Settings */}
       {onSettingsButtonClick !== undefined && (
         <div
@@ -137,7 +141,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
             value={currentValue}
             key={key as string}
             isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
-            filtersPaneRef={ref}
+            tweakStyles={tweakFilterWrapperStyles}
             testId={getTestId(testId, `filter-${String(key)}`)}
           />
         );

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -1,7 +1,4 @@
-import { useState, useRef, useMemo, useLayoutEffect, RefObject } from 'react';
-import clsx from 'clsx';
-import { Classes } from 'jss';
-import { useOnClickOutsideWithRef } from '../../../../hooks';
+import { useMemo } from 'react';
 import { getLocale } from '../../helpers';
 import { IFilterMultiSelectValues, IFilterWithDatesValue, IPeriod } from '../../types';
 import { FilterInterval } from '../FilterInterval';
@@ -13,146 +10,55 @@ import type { IFilterWrapperProps } from '../FilterWrapper';
 
 export interface IFilterProps<Values, Key extends keyof Values>
   extends IFilterWrapperProps<Values, Key> {
-  parentRef?: RefObject<HTMLElement>;
-  isInline?: boolean;
-  filtersPaneRef: RefObject<HTMLDivElement> | null;
-  classes: Classes<'left' | 'right' | 'dropdown'>;
   onChange: <V>(v: V) => void;
   onClose?: () => void;
 }
 
-export function Filter<Values, Key extends keyof Values>({
-  filter,
-  value,
-  parentRef,
-  isInline,
-  onChange,
-  onClose,
-  localeKey,
-  locale,
-  filtersPaneRef,
-  testId,
-  classes,
-}: IFilterProps<Values, Key>): JSX.Element | null {
-  const ref = useRef<HTMLDivElement>(null);
-  const [dropdownPosition, setDropdownPosition] = useState<'left' | 'right'>('left');
+export function Filter<Values, Key extends keyof Values>(
+  props: IFilterProps<Values, Key>,
+): JSX.Element | null {
+  const { filter, value, onChange, onClose, localeKey, locale, testId } = props;
   const translatesLocaleKey = filter.localeKey ?? localeKey;
   const translates = useMemo(
     () => getLocale(translatesLocaleKey, locale, filter.locale),
     [translatesLocaleKey, 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>
+      <FilterSelect
+        value={value}
+        onChange={onChange}
+        onClose={onClose}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={testId !== undefined ? `${testId}-select` : undefined}
+        {...filter}
+      />
     );
   }
 
   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>
+      <FilterWithPeriod
+        value={{ ...value } as IPeriod}
+        onChange={onChange}
+        onClose={onClose}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={testId !== undefined ? `${testId}-period` : undefined}
+        {...filter}
+      />
     );
   }
 
   if (filter.type === 'dateRangeWithoutPeriod') {
-    const dateRangeValue = value as unknown as IFilterWithDatesValue;
-
     return (
-      <div {...props} style={{ width: 320 }}>
+      <div style={{ width: 320 }}>
         <FilterWithDates
-          value={dateRangeValue}
-          onEndBtnSubmit={() => onChange(undefined)}
+          value={value as unknown as IFilterWithDatesValue}
           onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
+          onEndBtnSubmit={() => onChange(undefined)}
           localeKey={translatesLocaleKey}
           locale={translates}
           testId={testId !== undefined ? `${testId}-dates` : undefined}
@@ -164,36 +70,41 @@ export function Filter<Values, Key extends keyof Values>({
 
   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>
+      <FilterMultiSelect
+        value={value as unknown as IFilterMultiSelectValues<any>}
+        onChange={onChange}
+        onClose={onClose}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={testId !== undefined ? `${testId}-multiSelect` : undefined}
+        {...filter}
+      />
     );
   }
 
   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>
+      <FilterInterval
+        value={value as unknown as number[]}
+        onChange={onChange}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        labelName={filter.name}
+        testId={testId !== undefined ? `${testId}-interval` : undefined}
+        {...filter}
+      />
     );
   }
 
+  if (filter.type === 'boolean') {
+    return null;
+  }
+
+  if (filter.type === 'custom' && filter.component) {
+    const Component = filter.component;
+    return <Component {...props} filter={filter} />;
+  }
+
   console.warn(
     `%cДля фильтра ${filter.name} не задан тип или component`,
     'background: red; color: black',

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

@@ -22,6 +22,7 @@ import {
 export interface IFilterSelectProps<Value> extends ICommonProps<IFilterSelectStyles> {
   value?: Value;
   onChange: (value?: Value) => void;
+  onClose?: () => void;
   /**
    * @default false
    */
@@ -53,6 +54,7 @@ export function FilterSelect<Value>({
   localeKey,
   locale,
   onChange,
+  onClose,
   options,
   fetchOptions,
   footer,
@@ -137,11 +139,16 @@ export function FilterSelect<Value>({
     }
   };
 
+  const handleChange = (val?: Value) => {
+    onChange(val);
+    onClose?.();
+  };
+
   const handleClear = () => {
     if (options !== undefined) {
       setAllOptions(options);
     }
-    onChange(undefined);
+    handleChange(undefined);
     setSearchValue('');
   };
 
@@ -252,7 +259,7 @@ export function FilterSelect<Value>({
                   >
                     {translates.chosen}
                   </div>
-                  <div className={classes.item} onClick={() => onChange(undefined)}>
+                  <div className={classes.item} onClick={() => handleChange(undefined)}>
                     <div className={classes.option}>{getValueView(value)}</div>
                     <div className={classes.icon}>
                       <Icon type="check" />
@@ -278,7 +285,7 @@ export function FilterSelect<Value>({
                         ? initIntersectionObserver
                         : undefined
                     }
-                    onClick={() => onChange(item)}
+                    onClick={() => handleChange(item)}
                   >
                     {/* data нужно ли? */}
                     <div className={classes.option} data-option={id}>

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

@@ -87,24 +87,14 @@ export const useStyles = createThemedStyles('FilterWrapper', {
     minWidth: 0,
   },
 
-  animationEnd: {
-    opacity: 0,
-    transform: 'translateY(15px)',
-    transition: '0.15s ease-in-out',
-    transitionProperty: 'opacity, transform',
-  },
+  animationEnd: animations.slideUp['slide-up-exit'],
 
-  animationStart: {
-    opacity: 1,
-    transform: 'translateY(0)',
-    transition: '0.15s ease-in-out',
-    transitionProperty: 'opacity, transform',
-  },
+  animationStart: animations.slideUp['slide-up-enter-active'],
 
-  'dropdown-enter': { extend: 'animationEnd' },
-  'dropdown-enter-active': { extend: 'animationStart' },
-  'dropdown-exit-active': { extend: 'animationStart' },
-  'dropdown-exit': { extend: 'animationEnd' },
+  'dropdown-initial': { extend: 'animationEnd' },
+  'dropdown-open': { extend: 'animationStart' },
+  'dropdown-close': { extend: 'animationEnd' },
+  'dropdown-unmounted': { extend: 'animationEnd' },
 });
 
 export type IFilterWrapperStyles = ITweakStyles<

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

@@ -1,14 +1,14 @@
-import { useState, useRef, RefObject } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
+import { WithPopup } from '../../../WithPopup';
 import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
 import { Filter } from '../Filter';
 import { FilterValueView } from '../FilterValueView';
+import { isContentNotEmpty } from './helpers';
 import { useStyles, IFilterWrapperStyles } from './FilterWrapper.styles';
 
 export interface IFilterWrapperProps<Values, Key extends keyof Values>
@@ -18,7 +18,6 @@ export interface IFilterWrapperProps<Values, Key extends keyof Values>
   isDisabled?: boolean;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-  filtersPaneRef: RefObject<HTMLDivElement> | null;
   onChange: <V>(value: V) => void;
 }
 
@@ -30,7 +29,6 @@ export function FilterWrapper<Values, Key extends keyof Values>({
   localeKey,
   data,
   testId,
-  filtersPaneRef,
   tweakStyles,
   onChange,
 }: IFilterWrapperProps<Values, Key>): JSX.Element {
@@ -42,126 +40,86 @@ export function FilterWrapper<Values, Key extends keyof Values>({
     currentComponentName: 'FilterWrapper',
   });
 
-  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);
+  if (filter.isInline) {
+    return (
+      <Filter
+        value={value}
+        filter={filter}
+        localeKey={localeKey}
+        locale={locale}
+        onChange={onChange}
+        testId={testId}
+      />
+    );
   }
 
-  // Для того, чтобы фильтр закрывался, если мы работаем с простыми значениями, типа селекта
-  function handleChange<V>(v: V) {
-    if (type === 'select') {
-      setIsOpen(false);
-    }
-    onChange(v);
-  }
+  const isBoolean = filter.type === 'boolean';
 
   const handleLabelClick = () => {
-    if (!isBoolean && !isDisabled) {
-      setIsOpen(!isOpen);
-    }
-
     if (isBoolean) {
       onChange(!value);
     }
   };
 
-  const handleOnClose = () => {
-    setIsOpen(false);
-  };
-
-  const isBoolean = filter.type === 'boolean';
+  const hasValue = isContentNotEmpty(value);
 
-  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,
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <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}
-              testId={getTestId(testId, 'value')}
-              tweakStyles={tweakFilterValueViewStyles}
-            />
-          </div>
-        )}
-        {!isBoolean && (
-          <div className={clsx(classes.iconContainer, isOpen && classes.open)}>
-            <Icon type="chevron-down" />
+  return (
+    <WithPopup
+      placement="bottom-start"
+      canBeFlipped
+      isDisabled={isBoolean || isDisabled}
+      trigger={({ isActive }) => (
+        <div
+          className={clsx(classes.root, {
+            [classes.noValue]: !hasValue,
+            [classes.openNoValue]: isActive && !hasValue,
+            [classes.withValue]: !isActive && hasValue,
+            [classes.openWithValue]: isActive && hasValue,
+            [classes.boolean]: isBoolean,
+            [classes.disabled]: isDisabled,
+          })}
+          {...addDataTestId(testId)}
+          {...addDataAttributes(data)}
+        >
+          <div
+            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}
+                  testId={getTestId(testId, 'value')}
+                  tweakStyles={tweakFilterValueViewStyles}
+                />
+              </div>
+            )}
+            {!isBoolean && (
+              <div className={clsx(classes.iconContainer, { [classes.open]: isActive })}>
+                <Icon type="chevron-down" />
+              </div>
+            )}
           </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}
-    />
+        </div>
+      )}
+    >
+      {({ onClose, status }) => (
+        <div className={classes[`dropdown-${status}`]}>
+          <Filter
+            value={value}
+            filter={filter}
+            localeKey={localeKey}
+            locale={locale}
+            onClose={onClose}
+            onChange={onChange}
+            testId={testId}
+          />
+        </div>
+      )}
+    </WithPopup>
   );
 }

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

@@ -0,0 +1,14 @@
+import { isNotEmpty, isObject } from '@true-engineering/true-react-platform-helpers';
+
+export const isContentNotEmpty = (value: unknown): boolean => {
+  if (Array.isArray(value)) {
+    return value.some(isContentNotEmpty);
+  }
+  if (isObject(value)) {
+    return Object.values(value).some(isContentNotEmpty);
+  }
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  return isNotEmpty(value);
+};