@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

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

@@ -1,71 +1,87 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const FILTER_HEIGHT = 36;
-
-export const styles = {
-  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: 'background-color 0.25s ease-in-out',
-  },
-
-  settingsIcon: {
-    width: 16,
-    height: 16,
-  },
-
-  clear: {
-    display: 'flex',
-    alignItems: 'center',
-    height: FILTER_HEIGHT,
-  },
-
-  filterWithClearButton: {
-    display: 'flex',
-    gap: 16,
-    minWidth: 0,
-  },
-
-  // TODO: удалить когда появятся текстовые кнопки
-  tweakClearButton: {
-    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 type FiltersPaneStyles = ComponentStyles<typeof styles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IButtonStyles } from '../Button';
+
+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: 'background-color 0.25s ease-in-out',
+  },
+
+  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 }
+>;

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,150 +1,155 @@
-import { useMemo, useRef } from 'react';
-import { addDataAttributes } from '../../helpers';
-import { useTheme, 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 { FiltersPaneStyles, styles } from './FiltersPane.styles';
-
-export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProps {
-  tweakStyles?: FiltersPaneStyles;
-  filtersConfig: ConfigType<Values>;
-  enabledFilters?: Array<keyof ConfigType<Values>>;
-  values?: Partial<Values>;
-  search?: IFiltersPaneSearchProps<keyof Content>;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  isDisabled?: boolean;
-  hasClearButton?: boolean;
-  onClear?: () => void;
-  onChangeFilters: (values: Partial<Values>) => void;
-  onSettingsButtonClick?: () => void;
-  testId?: string;
-}
-
-export function FiltersPane<Values extends Record<string, unknown>, Content = Values>({
-  data,
-  tweakStyles,
-  filtersConfig,
-  enabledFilters,
-  values = {} as Values,
-  localeKey,
-  locale,
-  search,
-  isDisabled = false,
-  hasClearButton = true,
-  onChangeFilters,
-  onSettingsButtonClick,
-  onClear,
-  testId,
-}: IFiltersPaneProps<Values, Content>): JSX.Element {
-  const { classes, componentStyles } = useTheme('FiltersPane', styles, tweakStyles);
-
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  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 tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
-
-  const clearButton = (
-    <div className={classes.clear}>
-      <Button
-        onClick={handleClear}
-        size="s"
-        view="text"
-        isDisabled={isDisabled}
-        testId={testId !== undefined ? `${testId}-clear-button` : undefined}
-        tweakStyles={tweakClearButtonStyles}
-      >
-        {translates.clear}
-      </Button>
-    </div>
-  );
-
-  return (
-    <div className={classes.root} ref={ref} {...addDataAttributes(data)} data-testid={testId}>
-      {/* Settings */}
-      {onSettingsButtonClick !== undefined && (
-        <div
-          className={classes.settings}
-          onClick={!isDisabled ? onSettingsButtonClick : undefined}
-          tabIndex={0}
-          data-testid={testId !== undefined ? `${testId}-settings-button` : 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={testId !== undefined ? `${testId}-search` : undefined}
-        />
-      )}
-      {/* 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])}
-            filtersPaneRef={ref}
-            testId={testId !== undefined ? `${testId}-filter-${String(key)}` : undefined}
-          />
-        );
-
-        if (isLast) {
-          return (
-            <div className={classes.filterWithClearButton} key={key as string}>
-              {filterWrapper}
-              {shouldShowClearButton && <>{clearButton}</>}
-            </div>
-          );
-        }
-
-        return filterWrapper;
-      })}
-    </div>
-  );
-}
+import { useMemo, useRef } 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>>;
+  values?: Partial<Values>;
+  search?: IFiltersPaneSearchProps<keyof Content>;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  isDisabled?: boolean;
+  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 translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  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} ref={ref} {...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])}
+            filtersPaneRef={ref}
+            testId={getTestId(testId, `filter-${String(key)}`)}
+          />
+        );
+
+        if (isLast) {
+          return (
+            <div className={classes.filterWithClearButton} key={key as string}>
+              {filterWrapper}
+              {shouldShowClearButton && <>{clearButton}</>}
+            </div>
+          );
+        }
+
+        return filterWrapper;
+      })}
+    </div>
+  );
+}