@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

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

@@ -1,92 +1,92 @@
-import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
-import { IButtonStyles } from '../Button';
-import type { IFilterWrapperStyles } from './components';
-
-export const FILTER_HEIGHT = 36;
-
-export const useStyles = createThemedStyles('FiltersPane', {
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: 8,
-    width: '100%',
-  },
-
-  settings: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 18,
-    boxSizing: 'border-box',
-    width: 40,
-    height: FILTER_HEIGHT,
-    cursor: 'pointer',
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color',
-  },
-
-  settingsIcon: {
-    width: 16,
-    height: 16,
-  },
-
-  clear: {
-    display: 'flex',
-    alignItems: 'center',
-    height: FILTER_HEIGHT,
-  },
-
-  filterWithClearButton: {
-    display: 'flex',
-    gap: 16,
-    minWidth: 0,
-  },
-});
-
-export const clearButtonStyles: IButtonStyles = {
-  s: {
-    paddingLeft: 0,
-    paddingRight: 0,
-    minWidth: 'unset',
-  },
-
-  text: {
-    background: 'none',
-    color: colors.GREY_ACTIVE,
-
-    '&:hover, &:focus': {
-      color: colors.FONT_MEDIUM,
-    },
-
-    '&:active': {
-      color: colors.FONT_MAIN,
-    },
-
-    '&:hover, &:focus, &:active': {
-      background: 'none',
-      borderColor: 'transparent',
-    },
-  },
-};
-
-export const innerTextButtonStyles: IButtonStyles = {
-  text: {
-    color: colors.GREY_ACTIVE,
-
-    '&:hover, &:focus': {
-      color: colors.FONT_MEDIUM,
-    },
-
-    '&:active': {
-      color: colors.FONT_MEDIUM,
-    },
-  },
-};
-
-export type IFiltersPaneStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakClearButton: IButtonStyles;
-    tweakFilterWrapper: IFilterWrapperStyles;
-  }
->;
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
+import { IButtonStyles } from '../Button';
+import type { IFilterWrapperStyles } from './components';
+
+export const FILTER_HEIGHT = 36;
+
+export const useStyles = createThemedStyles('FiltersPane', {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 8,
+    width: '100%',
+  },
+
+  settings: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 18,
+    boxSizing: 'border-box',
+    width: 40,
+    height: FILTER_HEIGHT,
+    cursor: 'pointer',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
+  },
+
+  settingsIcon: {
+    width: 16,
+    height: 16,
+  },
+
+  clear: {
+    display: 'flex',
+    alignItems: 'center',
+    height: FILTER_HEIGHT,
+  },
+
+  filterWithClearButton: {
+    display: 'flex',
+    gap: 16,
+    minWidth: 0,
+  },
+});
+
+export const clearButtonStyles: IButtonStyles = {
+  s: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    minWidth: 'unset',
+  },
+
+  text: {
+    background: 'none',
+    color: colors.GREY_ACTIVE,
+
+    '&:hover, &:focus': {
+      color: colors.FONT_MEDIUM,
+    },
+
+    '&:active': {
+      color: colors.FONT_MAIN,
+    },
+
+    '&:hover, &:focus, &:active': {
+      background: 'none',
+      borderColor: 'transparent',
+    },
+  },
+};
+
+export const innerTextButtonStyles: IButtonStyles = {
+  text: {
+    color: colors.GREY_ACTIVE,
+
+    '&:hover, &:focus': {
+      color: colors.FONT_MEDIUM,
+    },
+
+    '&:active': {
+      color: colors.FONT_MEDIUM,
+    },
+  },
+};
+
+export type IFiltersPaneStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakClearButton: IButtonStyles;
+    tweakFilterWrapper: IFilterWrapperStyles;
+  }
+>;

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,162 +1,171 @@
-import { useMemo } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
-import { getLocale } from './helpers';
-import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
-import { useStyles, IFiltersPaneStyles, clearButtonStyles } from './FiltersPane.styles';
-
-export interface IFiltersPaneProps<Values, Content = Values>
-  extends ICommonProps<IFiltersPaneStyles> {
-  filtersConfig: ConfigType<Values>;
-  enabledFilters?: Array<keyof ConfigType<Values>>;
-  /** @default {} */
-  values?: Partial<Values>;
-  search?: IFiltersPaneSearchProps<keyof Content>;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default true */
-  hasClearButton?: boolean;
-  onChangeFilters: (values: Partial<Values>) => void;
-  onSettingsButtonClick?: () => void;
-  onClear?: () => void;
-}
-
-export function FiltersPane<Values extends Record<string, unknown>, Content = Values>({
-  data,
-  tweakStyles,
-  filtersConfig,
-  enabledFilters,
-  values = {} as Values,
-  localeKey,
-  locale,
-  search,
-  isDisabled = false,
-  hasClearButton = true,
-  testId,
-  onChangeFilters,
-  onSettingsButtonClick,
-  onClear,
-}: IFiltersPaneProps<Values, Content>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakClearButtonStyles = useTweakStyles({
-    innerStyles: clearButtonStyles,
-    tweakStyles,
-    className: 'tweakClearButton',
-    currentComponentName: 'FiltersPane',
-  });
-
-  const tweakFilterWrapperStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakFilterWrapper',
-    currentComponentName: 'FiltersPane',
-  });
-
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
-
-  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
-
-  const handleClear = () => {
-    if (onClear !== undefined) {
-      onClear();
-      return;
-    }
-    onChangeFilters({});
-    if (search !== undefined) {
-      search.onChange({});
-    }
-  };
-
-  const shouldShowClearButton =
-    hasClearButton &&
-    (search !== undefined ||
-      filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
-
-  const clearButton = (
-    <div className={classes.clear}>
-      <Button
-        onClick={handleClear}
-        size="s"
-        view="text"
-        isDisabled={isDisabled}
-        testId={getTestId(testId, 'clear-button')}
-        tweakStyles={tweakClearButtonStyles}
-      >
-        {translates.clear}
-      </Button>
-    </div>
-  );
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {/* Settings */}
-      {onSettingsButtonClick !== undefined && (
-        <div
-          className={classes.settings}
-          tabIndex={0}
-          {...addDataTestId(testId, 'settings-button')}
-          onClick={!isDisabled ? onSettingsButtonClick : undefined}
-        >
-          <div className={classes.settingsIcon}>
-            <Icon type="filter" />
-          </div>
-        </div>
-      )}
-      {/* Search */}
-      {search !== undefined && (
-        <FiltersPaneSearch
-          {...search}
-          locale={getLocale(search.localeKey ?? localeKey, search.locale, locale)}
-          localeKey={search.localeKey ?? localeKey}
-          isDisabled={search.isDisabled ?? isDisabled}
-          testId={getTestId(testId, 'search')}
-        />
-      )}
-      {/* Filters */}
-      {filtersKeys.map((key, index) => {
-        const isLast = index === filtersKeys.length - 1;
-        const currentValue = values[key];
-        const filter = filtersConfig[key];
-        if (filter === undefined) {
-          console.error(`enabledFilters содержит фильтр ${String(key)}, не описанный в конфиге`);
-          if (isLast) {
-            return clearButton;
-          }
-          return null;
-        }
-
-        const filterWrapper = (
-          <FilterWrapper
-            filter={filter}
-            locale={locale}
-            localeKey={localeKey}
-            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
-            value={currentValue}
-            key={key as string}
-            isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
-            tweakStyles={tweakFilterWrapperStyles}
-            testId={getTestId(testId, `filter-${String(key)}`)}
-          />
-        );
-
-        if (isLast) {
-          return (
-            <div className={classes.filterWithClearButton} key={key as string}>
-              {filterWrapper}
-              {shouldShowClearButton && <>{clearButton}</>}
-            </div>
-          );
-        }
-
-        return filterWrapper;
-      })}
-    </div>
-  );
-}
+import { useMemo } from 'react';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Button } from '../Button';
+import { IIcon, renderIcon } from '../Icon';
+import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
+import { getLocale } from './helpers';
+import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
+import { useStyles, IFiltersPaneStyles, clearButtonStyles } from './FiltersPane.styles';
+
+export interface IFiltersPaneProps<Values extends Record<string, unknown>, Content = Values>
+  extends ICommonProps<IFiltersPaneStyles> {
+  filtersConfig: ConfigType<Values>;
+  enabledFilters?: Array<keyof ConfigType<Values>>;
+  /** @default {} */
+  values?: Partial<Values>;
+  search?: IFiltersPaneSearchProps<keyof Content>;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default true */
+  hasClearButton?: boolean;
+  /** @default false */
+  shouldRenderDataId?: boolean;
+  /** @default 'filter' */
+  settingsIcon?: IIcon;
+  onChangeFilters: (values: Partial<Values>) => void;
+  onSettingsButtonClick?: () => void;
+  onClear?: () => void;
+}
+
+export function FiltersPane<Values extends Record<string, unknown>, Content = Values>({
+  data,
+  tweakStyles,
+  filtersConfig,
+  enabledFilters,
+  values = {} as Values,
+  localeKey,
+  locale,
+  search,
+  isDisabled = false,
+  hasClearButton = true,
+  shouldRenderDataId = false,
+  settingsIcon = 'filter',
+  testId,
+  onChangeFilters,
+  onSettingsButtonClick,
+  onClear,
+}: IFiltersPaneProps<Values, Content>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FiltersPane',
+  });
+
+  const tweakFilterWrapperStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakFilterWrapper',
+    currentComponentName: 'FiltersPane',
+  });
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const filtersKeys = enabledFilters ?? Object.keys(filtersConfig);
+
+  const handleClear = () => {
+    if (isNotEmpty(onClear)) {
+      onClear();
+      return;
+    }
+    onChangeFilters({});
+    if (search !== undefined) {
+      search.onChange({});
+    }
+  };
+
+  const shouldShowClearButton =
+    hasClearButton &&
+    (isNotEmpty(search) || filtersKeys.some((key) => isNotEmpty(filtersConfig[key])));
+
+  const clearButton = (
+    <div className={classes.clear}>
+      <Button
+        onClick={handleClear}
+        size="s"
+        view="text"
+        isDisabled={isDisabled}
+        testId={getTestId(testId, 'clear-button')}
+        tweakStyles={tweakClearButtonStyles}
+      >
+        {translates.clear}
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
+      {/* Settings */}
+      {onSettingsButtonClick !== undefined && (
+        <div
+          className={classes.settings}
+          tabIndex={0}
+          {...addDataTestId(testId, 'settings-button')}
+          onClick={!isDisabled ? onSettingsButtonClick : undefined}
+        >
+          <div className={classes.settingsIcon}>{renderIcon(settingsIcon)}</div>
+        </div>
+      )}
+      {/* Search */}
+      {search !== undefined && (
+        <FiltersPaneSearch
+          {...search}
+          locale={getLocale(search.localeKey ?? localeKey, search.locale, locale)}
+          localeKey={search.localeKey ?? localeKey}
+          isDisabled={search.isDisabled ?? isDisabled}
+          testId={getTestId(testId, 'search')}
+        />
+      )}
+      {/* Filters */}
+      {filtersKeys.map((key, index) => {
+        const isLast = index === filtersKeys.length - 1;
+        const filterKey = String(key);
+        const currentValue = values[filterKey];
+        const filter = filtersConfig[filterKey];
+        if (filter === undefined) {
+          console.error(`enabledFilters содержит фильтр ${filterKey}, не описанный в конфиге`);
+          if (isLast) {
+            return clearButton;
+          }
+          return null;
+        }
+
+        const filterWrapper = (
+          <FilterWrapper
+            filter={filter}
+            locale={locale}
+            localeKey={localeKey}
+            onChange={(value) => onChangeFilters({ ...values, [filterKey]: value })}
+            value={currentValue}
+            key={filterKey}
+            isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
+            tweakStyles={tweakFilterWrapperStyles}
+            data={shouldRenderDataId ? { id: filterKey } : undefined}
+            testId={getTestId(testId, `filter-${filterKey}`)}
+          />
+        );
+
+        if (isLast) {
+          return (
+            <div className={classes.filterWithClearButton} key={filterKey}>
+              {filterWrapper}
+              {shouldShowClearButton && <>{clearButton}</>}
+            </div>
+          );
+        }
+
+        return filterWrapper;
+      })}
+    </div>
+  );
+}