@true-engineering/true-react-common-ui-kit 2.3.2 → 2.5.0

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

@@ -0,0 +1,149 @@
+import { useState, useRef, RefObject } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import { useTheme } from '../../../../hooks';
+import { Icon } from '../../../Icon';
+import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import { Filter } from '../Filter';
+import { FilterValueView } from '../FilterValueView';
+import { FilterWrapperStyles, styles } from './FilterWrapper.styles';
+
+export interface IFilterWrapperProps<Values, Key extends keyof Values> {
+  tweakStyles?: FilterWrapperStyles;
+  filter: ConfigItem<Values[Key]>;
+  value?: Values[Key];
+  onChange: <V>(value: V) => void;
+  isDisabled?: boolean;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  testId?: string;
+  filtersPaneRef: RefObject<HTMLDivElement> | null;
+}
+
+export function FilterWrapper<Values, Key extends keyof Values>({
+  filter,
+  value,
+  isDisabled,
+  onChange,
+  locale,
+  localeKey,
+  testId,
+  filtersPaneRef,
+  tweakStyles,
+}: IFilterWrapperProps<Values, Key>): JSX.Element {
+  const { classes } = useTheme('FilterWrapper', styles, tweakStyles);
+  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);
+  }
+
+  // Для того, чтобы фильтр закрывался, если мы работаем с простыми значениями, типа селекта
+  function handleChange<V>(v: V) {
+    if (type === 'select') {
+      setIsOpen(false);
+    }
+    onChange(v);
+  }
+
+  const handleLabelClick = () => {
+    if (!isBoolean && !isDisabled) {
+      setIsOpen(!isOpen);
+    }
+
+    if (isBoolean) {
+      onChange(!value);
+    }
+  };
+
+  const handleOnClose = () => {
+    setIsOpen(false);
+  };
+
+  const isBoolean = filter.type === 'boolean';
+
+  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,
+      })}
+      data-testid={testId}
+    >
+      <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} />
+          </div>
+        )}
+        {!isBoolean && (
+          <div className={clsx(classes.iconContainer, isOpen && classes.open)}>
+            <Icon type="chevron-down" />
+          </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}
+    />
+  );
+}

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

@@ -0,0 +1,2 @@
+export * from './FilterWrapper';
+export type { FilterWrapperStyles } from './FilterWrapper.styles';

package/src/components/FiltersPane/{FiltersPaneSearch → components/FiltersPaneSearch}/FiltersPaneSearch.styles.ts

@@ -1,109 +1,109 @@
-import { rgba } from '../../../helpers';
-import { colors, dimensions } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-import { FILTER_HEIGHT } from '../FiltersPane.styles';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    position: 'relative',
-    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-    border: [1, 'transparent', 'solid'],
-    borderRadius: 18,
-    paddingRight: 8,
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'background-color, border-color',
-  },
-
-  focused: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    borderColor: colors.BORDER_MAIN,
-  },
-
-  disabled: {
-    '& $selectBlock': {
-      cursor: 'default',
-    },
-  },
-
-  selectWrapper: {
-    position: 'relative',
-    display: 'flex',
-    flexShrink: 0,
-  },
-
-  selectBlock: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6,
-    cursor: 'pointer',
-    height: '100%',
-  },
-
-  selectLabel: {
-    flexShrink: 0,
-    fontSize: 14,
-    userSelect: 'none',
-  },
-
-  chevronIcon: {
-    flexShrink: 0,
-    width: 20,
-    height: 20,
-    marginRight: 4,
-    transition: 'transform .2s ease',
-    opacity: 0.5,
-  },
-
-  open: {
-    transform: 'rotate(180deg)',
-  },
-
-  dropdown: {
-    position: 'absolute',
-    top: FILTER_HEIGHT - 2,
-    right: 0,
-    zIndex: 20,
-    minWidth: 200,
-    marginTop: 6,
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.CLASSIC_WHITE,
-    overflow: 'hidden',
-  },
-
-  dropdownInput: {
-    borderBottom: [1, 'solid', colors.BORDER_MAIN],
-  },
-
-  active: {
-    fontWeight: 'bold',
-  },
-
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        height: FILTER_HEIGHT - 2,
-        fontSize: 14,
-        minWidth: 140,
-      },
-
-      focused: {
-        backgroundColor: 'transparent',
-        border: 'none',
-      },
-    },
-  },
-
-  tweakSelect: {
-    root: {
-      borderRadius: 0,
-      borderBottomLeftRadius: 6,
-      borderBottomRightRadius: 6,
-      boxShadow: 'none',
-    },
-  },
-};
-
-export type FiltersPaneSearchStyles = ComponentStyles<typeof styles>;
+import { rgba } from '../../../../helpers';
+import { colors, dimensions } from '../../../../theme';
+import { ComponentStyles } from '../../../../types';
+import { FILTER_HEIGHT } from '../../FiltersPane.styles';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    position: 'relative',
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+    border: [1, 'transparent', 'solid'],
+    borderRadius: 18,
+    paddingRight: 8,
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color, border-color',
+  },
+
+  focused: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  disabled: {
+    '& $selectBlock': {
+      cursor: 'default',
+    },
+  },
+
+  selectWrapper: {
+    position: 'relative',
+    display: 'flex',
+    flexShrink: 0,
+  },
+
+  selectBlock: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    cursor: 'pointer',
+    height: '100%',
+  },
+
+  selectLabel: {
+    flexShrink: 0,
+    fontSize: 14,
+    userSelect: 'none',
+  },
+
+  chevronIcon: {
+    flexShrink: 0,
+    width: 20,
+    height: 20,
+    marginRight: 4,
+    transition: 'transform .2s ease',
+    opacity: 0.5,
+  },
+
+  open: {
+    transform: 'rotate(180deg)',
+  },
+
+  dropdown: {
+    position: 'absolute',
+    top: FILTER_HEIGHT - 2,
+    right: 0,
+    zIndex: 20,
+    minWidth: 200,
+    marginTop: 6,
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.CLASSIC_WHITE,
+    overflow: 'hidden',
+  },
+
+  dropdownInput: {
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  active: {
+    fontWeight: 'bold',
+  },
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        height: FILTER_HEIGHT - 2,
+        fontSize: 14,
+        minWidth: 140,
+      },
+
+      focused: {
+        backgroundColor: 'transparent',
+        border: 'none',
+      },
+    },
+  },
+
+  tweakSelect: {
+    root: {
+      borderRadius: 0,
+      borderBottomLeftRadius: 6,
+      borderBottomRightRadius: 6,
+      boxShadow: 'none',
+    },
+  },
+};
+
+export type FiltersPaneSearchStyles = ComponentStyles<typeof styles>;

package/src/components/FiltersPane/{FiltersPaneSearch → components/FiltersPaneSearch}/FiltersPaneSearch.tsx

@@ -1,155 +1,155 @@
-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 { FilterSelect, IFilterSelectProps } from '../FilterSelect';
-import { IFilterLocaleKey, getLocale, IPartialFilterLocale } from '../locales';
-import { IFiltersPaneSearchPayload } from '../types';
-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 { 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>
+  );
+}

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

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