@true-engineering/true-react-common-ui-kit 2.1.0 → 2.1.1

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

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

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,193 +1,151 @@
-import { useMemo, useRef } from 'react';
-
-import { useTheme, useTweakStyles } from '../../hooks';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { ConfigType } from './types';
-import { Icon } from '../Icon';
-import { Button } from '../Button';
-import {
-  IFiltersPaneSearchProps,
-  FiltersPaneSearch,
-} from './FiltersPaneSearch';
-import { FilterWrapper } from './FilterWrapper';
-import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from './locales';
-
-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 { addDataAttributes } from '../../helpers';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { FilterWrapper } from './FilterWrapper';
+import { FiltersPaneStyles, styles } from './FiltersPane.styles';
+import { IFiltersPaneSearchProps, FiltersPaneSearch } from './FiltersPaneSearch';
+import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from './locales';
+import { ConfigType } from './types';
+
+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>
+  );
+}