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

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -1,155 +1,168 @@
-import { useRef, useState, useMemo, ReactNode } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../../../helpers';
-import { useTheme, useOnClickOutside, useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Icon } from '../../../Icon';
-import { SearchInput } from '../../../SearchInput';
-import { getLocale } from '../../helpers';
-import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
-import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
-import { FiltersPaneSearchStyles, styles } from './FiltersPaneSearch.styles';
-
-export interface IFiltersPaneSearchProps<Value> extends ICommonProps {
-  tweakStyles?: FiltersPaneSearchStyles;
-  field?: Value;
-  fields?: Value[];
-  value?: string;
-  onChange: (v: IFiltersPaneSearchPayload<Value>) => void;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  testId?: string;
-  maxLength?: number;
-  getValueView?: (value: Value) => ReactNode;
-  getValueId?: (value: Value) => string;
-  getValueString?: (value: Value) => string;
-  selectWidth?: IFilterSelectProps<Value>['width'];
-  hasClearSelectButton?: boolean;
-  isDisabled?: boolean;
-  isSelectSearchEnabled?: boolean;
-  isAutoSizeable?: boolean;
-}
-
-export function FiltersPaneSearch<Value>({
-  value,
-  fields = [],
-  field,
-  onChange,
-  localeKey,
-  locale,
-  getValueId,
-  getValueView,
-  getValueString,
-  selectWidth = '100%',
-  hasClearSelectButton,
-  isDisabled = false,
-  isSelectSearchEnabled = true,
-  isAutoSizeable = true,
-  maxLength,
-  data,
-  tweakStyles,
-  testId,
-}: IFiltersPaneSearchProps<Value>): JSX.Element {
-  const { classes, componentStyles } = useTheme('FiltersPaneSearch', styles, tweakStyles);
-
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const refRoot = useRef<HTMLDivElement | null>(null);
-
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
-
-  useOnClickOutside(refRoot, () => setIsOpen(false));
-
-  const handleSearchChange = (v?: string) => {
-    onChange({
-      value: v,
-      field,
-    });
-  };
-
-  const handleFieldsChange = (v?: Value) => {
-    onChange({
-      value,
-      field: v,
-    });
-    setIsOpen(false);
-  };
-
-  const selectedFieldLabel = useMemo(
-    () => (field !== undefined && getValueView !== undefined ? getValueView(field) : undefined),
-    [field],
-  );
-
-  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
-
-  const tweakSelectStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSelect');
-
-  return (
-    <div
-      className={clsx(classes.root, {
-        [classes.focused]: isInputFocused,
-        [classes.disabled]: isDisabled,
-      })}
-      ref={refRoot}
-      data-testid={testId}
-      {...addDataAttributes(data)}
-    >
-      <SearchInput
-        value={value}
-        onChange={handleSearchChange}
-        placeholder={translates.searchPlaceholder}
-        tweakStyles={tweakSearchInputStyles}
-        onFocus={() => setIsInputFocused(true)}
-        onBlur={() => setIsInputFocused(false)}
-        testId={testId !== undefined ? `${testId}-input` : undefined}
-        maxLength={maxLength}
-        isAutoSizeable={isAutoSizeable}
-        isDisabled={isDisabled}
-      />
-
-      <div className={classes.selectWrapper}>
-        {/* Select block */}
-        {fields.length > 0 && (
-          <div
-            className={classes.selectBlock}
-            onClick={!isDisabled ? () => setIsOpen(!isOpen) : undefined}
-            data-testid={testId !== undefined ? `${testId}-select` : undefined}
-          >
-            <div
-              className={clsx(
-                classes.selectLabel,
-                selectedFieldLabel !== undefined && classes.active,
-              )}
-            >
-              {selectedFieldLabel ?? translates.displayedFields}
-            </div>
-            <div className={clsx(classes.chevronIcon, isOpen && classes.open)}>
-              <Icon type="chevron-down" />
-            </div>
-          </div>
-        )}
-        {/* Selector */}
-        {isOpen && (
-          <div className={classes.dropdown}>
-            <FilterSelect
-              tweakStyles={tweakSelectStyles}
-              value={field}
-              options={fields}
-              getValueView={getValueView}
-              getValueId={getValueId}
-              getValueString={getValueString}
-              localeKey={localeKey}
-              locale={translates}
-              onChange={handleFieldsChange}
-              width={selectWidth}
-              isSearchEnabled={isSelectSearchEnabled}
-              hasClearButton={hasClearSelectButton}
-              testId={testId !== undefined ? `${testId}-dropdown` : undefined}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+import { useRef, useState, useMemo, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../../../helpers';
+import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Icon } from '../../../Icon';
+import { SearchInput } from '../../../SearchInput';
+import { getLocale } from '../../helpers';
+import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
+import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
+import {
+  useStyles,
+  IFiltersPaneSearchStyles,
+  searchInputStyles,
+  selectStyles,
+} from './FiltersPaneSearch.styles';
+
+export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPaneSearchStyles> {
+  field?: Value;
+  fields?: Value[];
+  value?: string;
+  onChange: (v: IFiltersPaneSearchPayload<Value>) => void;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  maxLength?: number;
+  getValueView?: (value: Value) => ReactNode;
+  getValueId?: (value: Value) => string;
+  getValueString?: (value: Value) => string;
+  selectWidth?: IFilterSelectProps<Value>['width'];
+  hasClearSelectButton?: boolean;
+  isDisabled?: boolean;
+  isSelectSearchEnabled?: boolean;
+  isAutoSizeable?: boolean;
+}
+
+export function FiltersPaneSearch<Value>({
+  value,
+  fields = [],
+  field,
+  onChange,
+  localeKey,
+  locale,
+  getValueId,
+  getValueView,
+  getValueString,
+  selectWidth = '100%',
+  hasClearSelectButton,
+  isDisabled = false,
+  isSelectSearchEnabled = true,
+  isAutoSizeable = true,
+  maxLength,
+  data,
+  tweakStyles,
+  testId,
+}: IFiltersPaneSearchProps<Value>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'FiltersPaneSearch',
+  });
+
+  const tweakSelectStyles = useTweakStyles({
+    innerStyles: selectStyles,
+    tweakStyles,
+    className: 'tweakSelect',
+    currentComponentName: 'FiltersPaneSearch',
+  });
+
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const refRoot = useRef<HTMLDivElement | null>(null);
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  useOnClickOutside(refRoot, () => setIsOpen(false));
+
+  const handleSearchChange = (v?: string) => {
+    onChange({
+      value: v,
+      field,
+    });
+  };
+
+  const handleFieldsChange = (v?: Value) => {
+    onChange({
+      value,
+      field: v,
+    });
+    setIsOpen(false);
+  };
+
+  const selectedFieldLabel = useMemo(
+    () => (field !== undefined && getValueView !== undefined ? getValueView(field) : undefined),
+    [field],
+  );
+
+  return (
+    <div
+      className={clsx(classes.root, {
+        [classes.focused]: isInputFocused,
+        [classes.disabled]: isDisabled,
+      })}
+      ref={refRoot}
+      data-testid={testId}
+      {...addDataAttributes(data)}
+    >
+      <SearchInput
+        value={value}
+        onChange={handleSearchChange}
+        placeholder={translates.searchPlaceholder}
+        tweakStyles={tweakSearchInputStyles}
+        onFocus={() => setIsInputFocused(true)}
+        onBlur={() => setIsInputFocused(false)}
+        testId={testId !== undefined ? `${testId}-input` : undefined}
+        maxLength={maxLength}
+        isAutoSizeable={isAutoSizeable}
+        isDisabled={isDisabled}
+      />
+
+      <div className={classes.selectWrapper}>
+        {/* Select block */}
+        {fields.length > 0 && (
+          <div
+            className={classes.selectBlock}
+            onClick={!isDisabled ? () => setIsOpen(!isOpen) : undefined}
+            data-testid={testId !== undefined ? `${testId}-select` : undefined}
+          >
+            <div
+              className={clsx(
+                classes.selectLabel,
+                selectedFieldLabel !== undefined && classes.active,
+              )}
+            >
+              {selectedFieldLabel ?? translates.displayedFields}
+            </div>
+            <div className={clsx(classes.chevronIcon, isOpen && classes.open)}>
+              <Icon type="chevron-down" />
+            </div>
+          </div>
+        )}
+        {/* Selector */}
+        {isOpen && (
+          <div className={classes.dropdown}>
+            <FilterSelect
+              tweakStyles={tweakSelectStyles}
+              value={field}
+              options={fields}
+              getValueView={getValueView}
+              getValueId={getValueId}
+              getValueString={getValueString}
+              localeKey={localeKey}
+              locale={translates}
+              onChange={handleFieldsChange}
+              width={selectWidth}
+              isSearchEnabled={isSelectSearchEnabled}
+              hasClearButton={hasClearSelectButton}
+              testId={testId !== undefined ? `${testId}-dropdown` : undefined}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/FiltersPane/components/FiltersPaneSearch/index.ts

@@ -1,2 +1,2 @@
-export * from './FiltersPaneSearch';
-export type { FiltersPaneSearchStyles } from './FiltersPaneSearch.styles';
+export * from './FiltersPaneSearch';
+export type { IFiltersPaneSearchStyles } from './FiltersPaneSearch.styles';

package/src/components/FiltersPane/components/index.ts

@@ -1,9 +1,9 @@
-export * from './Filter';
-export * from './FilterInterval';
-export * from './FilterMultiSelect';
-export * from './FilterSelect';
-export * from './FiltersPaneSearch';
-export * from './FilterValueView';
-export * from './FilterWithDates';
-export * from './FilterWithPeriod';
-export * from './FilterWrapper';
+export * from './Filter';
+export * from './FilterInterval';
+export * from './FilterMultiSelect';
+export * from './FilterSelect';
+export * from './FiltersPaneSearch';
+export * from './FilterValueView';
+export * from './FilterWithDates';
+export * from './FilterWithPeriod';
+export * from './FilterWrapper';

package/src/components/FiltersPane/constants.ts

@@ -1,137 +1,137 @@
-import { endOfMonth, endOfYear, startOfMonth, startOfYear, sub } from 'date-fns';
-import {
-  IFilterLocale,
-  IFilterLocaleKey,
-  IPeriodGetter,
-  ISelectLocale,
-  ISelectLocaleKey,
-} from './types';
-
-export const PERIODS = ['THIS_MONTH', 'LAST_MONTH', 'THIS_YEAR', 'LAST_YEAR', 'CUSTOM'] as const;
-
-export const SelectLocales: Record<string, ISelectLocale> = {
-  ru: {
-    clear: 'Очистить',
-    all: 'Все',
-    chosen: 'Выбранные',
-    nothingFound: 'Ничего не найдено',
-    searchPlaceholder: 'Поиск',
-  },
-
-  en: {
-    clear: 'Clear',
-    all: 'All',
-    chosen: 'Chosen',
-    nothingFound: 'Nothing found',
-    searchPlaceholder: 'Search',
-  },
-};
-
-export const FilterLocales: Record<string, IFilterLocale> = {
-  ru: {
-    clear: 'Очистить',
-    all: 'Все',
-    other: 'Остальные',
-    chosen: 'Выбранные',
-    nothingFound: 'Не найдено',
-    from: 'От',
-    to: 'До',
-    back: 'Назад',
-    searchPlaceholder: 'Поиск',
-    displayedFields: 'Поля для поиска',
-    months: [
-      'Январь',
-      'Февраль',
-      'Март',
-      'Апрель',
-      'Май',
-      'Июнь',
-      'Июль',
-      'Август',
-      'Сентябрь',
-      'Октябрь',
-      'Ноябрь',
-      'Декабрь',
-    ],
-    periods: {
-      THIS_MONTH: 'Этот месяц',
-      LAST_MONTH: 'Прошлый месяц',
-      THIS_YEAR: 'Этот год',
-      LAST_YEAR: 'Прошлый год',
-      CUSTOM: 'Другой период',
-    },
-  },
-
-  en: {
-    clear: 'Clear',
-    all: 'All',
-    other: 'Others',
-    chosen: 'Chosen',
-    nothingFound: 'Nothing found',
-    from: 'From',
-    to: 'To',
-    back: 'Back',
-    searchPlaceholder: 'Search',
-    displayedFields: 'Displayed fields',
-    months: [
-      'January',
-      'February',
-      'March',
-      'April',
-      'May',
-      'June',
-      'July',
-      'August',
-      'September',
-      'October',
-      'November',
-      'December',
-    ],
-    periods: {
-      THIS_MONTH: 'This month',
-      LAST_MONTH: 'Previous month',
-      THIS_YEAR: 'This year',
-      LAST_YEAR: 'Previous year',
-      CUSTOM: 'Custom',
-    },
-  },
-};
-
-export const DEFAULT_LOCALE: IFilterLocaleKey = 'en';
-
-export const DEFAULT_SELECT_LOCALE: ISelectLocaleKey = 'en';
-
-export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
-
-export const DEFAULT_PICKER_PROPS = {};
-
-export const PERIODS_GETTERS: Record<string, IPeriodGetter> = {
-  THIS_MONTH: () => {
-    const today = new Date();
-    return {
-      from: startOfMonth(today),
-      to: endOfMonth(today),
-    };
-  },
-  LAST_MONTH: () => {
-    const day = sub(new Date(), { months: 1 });
-    return {
-      from: startOfMonth(day),
-      to: endOfMonth(day),
-    };
-  },
-  THIS_YEAR: () => {
-    const today = new Date();
-    return {
-      from: startOfYear(today),
-      to: endOfYear(today),
-    };
-  },
-  LAST_YEAR: () => {
-    const day = sub(new Date(), { years: 1 });
-    return {
-      from: startOfYear(day),
-      to: endOfYear(day),
-    };
-  },
-};
+import { endOfMonth, endOfYear, startOfMonth, startOfYear, sub } from 'date-fns';
+import {
+  IFilterLocale,
+  IFilterLocaleKey,
+  IPeriodGetter,
+  ISelectLocale,
+  ISelectLocaleKey,
+} from './types';
+
+export const PERIODS = ['THIS_MONTH', 'LAST_MONTH', 'THIS_YEAR', 'LAST_YEAR', 'CUSTOM'] as const;
+
+export const SelectLocales: Record<string, ISelectLocale> = {
+  ru: {
+    clear: 'Очистить',
+    all: 'Все',
+    chosen: 'Выбранные',
+    nothingFound: 'Ничего не найдено',
+    searchPlaceholder: 'Поиск',
+  },
+
+  en: {
+    clear: 'Clear',
+    all: 'All',
+    chosen: 'Chosen',
+    nothingFound: 'Nothing found',
+    searchPlaceholder: 'Search',
+  },
+};
+
+export const FilterLocales: Record<string, IFilterLocale> = {
+  ru: {
+    clear: 'Очистить',
+    all: 'Все',
+    other: 'Остальные',
+    chosen: 'Выбранные',
+    nothingFound: 'Не найдено',
+    from: 'От',
+    to: 'До',
+    back: 'Назад',
+    searchPlaceholder: 'Поиск',
+    displayedFields: 'Поля для поиска',
+    months: [
+      'Январь',
+      'Февраль',
+      'Март',
+      'Апрель',
+      'Май',
+      'Июнь',
+      'Июль',
+      'Август',
+      'Сентябрь',
+      'Октябрь',
+      'Ноябрь',
+      'Декабрь',
+    ],
+    periods: {
+      THIS_MONTH: 'Этот месяц',
+      LAST_MONTH: 'Прошлый месяц',
+      THIS_YEAR: 'Этот год',
+      LAST_YEAR: 'Прошлый год',
+      CUSTOM: 'Другой период',
+    },
+  },
+
+  en: {
+    clear: 'Clear',
+    all: 'All',
+    other: 'Others',
+    chosen: 'Chosen',
+    nothingFound: 'Nothing found',
+    from: 'From',
+    to: 'To',
+    back: 'Back',
+    searchPlaceholder: 'Search',
+    displayedFields: 'Displayed fields',
+    months: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ],
+    periods: {
+      THIS_MONTH: 'This month',
+      LAST_MONTH: 'Previous month',
+      THIS_YEAR: 'This year',
+      LAST_YEAR: 'Previous year',
+      CUSTOM: 'Custom',
+    },
+  },
+};
+
+export const DEFAULT_LOCALE: IFilterLocaleKey = 'en';
+
+export const DEFAULT_SELECT_LOCALE: ISelectLocaleKey = 'en';
+
+export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+
+export const DEFAULT_PICKER_PROPS = {};
+
+export const PERIODS_GETTERS: Record<string, IPeriodGetter> = {
+  THIS_MONTH: () => {
+    const today = new Date();
+    return {
+      from: startOfMonth(today),
+      to: endOfMonth(today),
+    };
+  },
+  LAST_MONTH: () => {
+    const day = sub(new Date(), { months: 1 });
+    return {
+      from: startOfMonth(day),
+      to: endOfMonth(day),
+    };
+  },
+  THIS_YEAR: () => {
+    const today = new Date();
+    return {
+      from: startOfYear(today),
+      to: endOfYear(today),
+    };
+  },
+  LAST_YEAR: () => {
+    const day = sub(new Date(), { years: 1 });
+    return {
+      from: startOfYear(day),
+      to: endOfYear(day),
+    };
+  },
+};