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

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.tsx

@@ -1,346 +1,359 @@
-import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { debounce } from 'ts-debounce';
-import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { useIsMounted, useTheme, useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Button } from '../../../Button';
-import { Icon } from '../../../Icon';
-import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
-import { SearchInput } from '../../../SearchInput';
-import { ThemedPreloader } from '../../../ThemedPreloader';
-import { defaultConvertFunction, getSelectLocale } from '../../helpers';
-import { IFilterLocaleKey, ISelectLocale } from '../../types';
-import { FilterSelectStyles, styles } from './FilterSelect.styles';
-
-export interface IFilterSelectProps<Value> extends ICommonProps {
-  tweakStyles?: FilterSelectStyles;
-  value?: Value;
-  onChange: (value?: Value) => void;
-  /**
-   * @default false
-   */
-  isSearchEnabled?: boolean;
-  /**
-   * @default false
-   */
-  isGroupingEnabled?: boolean;
-  /**
-   * @default `220px`
-   */
-  width?: string | number;
-  localeKey?: IFilterLocaleKey;
-  locale?: Partial<ISelectLocale>;
-  options?: Value[];
-  footer?: ReactNode;
-  fetchOptions?: (value?: string, page?: number) => Promise<Value[]>;
-  getValueString?: (value: Value) => string;
-  getValueView?: (value: Value) => ReactNode;
-  getValueId?: (value: Value) => string;
-  /**
-   * @default true
-   */
-  hasClearButton?: boolean;
-  testId?: string;
-}
-
-export function FilterSelect<Value>({
-  data,
-  tweakStyles,
-  value,
-  isSearchEnabled = false,
-  isGroupingEnabled = false,
-  width,
-  localeKey,
-  locale,
-  onChange,
-  options,
-  fetchOptions,
-  footer,
-  getValueView = defaultConvertFunction,
-  getValueId = defaultConvertFunction,
-  getValueString = defaultConvertFunction,
-  hasClearButton = true,
-  testId,
-}: IFilterSelectProps<Value>): JSX.Element {
-  const isMounted = useIsMounted();
-
-  const { classes, componentStyles } = useTheme('FilterSelect', styles, tweakStyles, { width });
-
-  const translates = useMemo(() => getSelectLocale(localeKey, locale), [localeKey, locale]);
-
-  const observer = useRef<IntersectionObserver>();
-
-  const [searchValue, setSearchValue] = useState('');
-  const [allOptions, setAllOptions] = useState<Value[]>([]);
-
-  const [activePage, setActivePage] = useState(0);
-  const [isMaxPage, setIsMaxPage] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingOptionsOnScroll, setLoadingOptionsOnScroll] = useState(false);
-
-  const shouldShowPreloader = isLoading || isLoadingOptionsOnScroll;
-  const hasFooter = isReactNodeNotEmpty(footer);
-
-  const handleSearchInputChange = useCallback(
-    async (inputValue?: string) => {
-      if (fetchOptions === undefined) {
-        return;
-      }
-      setIsLoading(true);
-
-      try {
-        const response = await fetchOptions(inputValue?.trim() ?? '');
-        if (isMounted() && response !== undefined) {
-          setAllOptions(response);
-          setActivePage(0);
-          setIsMaxPage(false);
-        }
-      } finally {
-        if (isMounted()) {
-          setIsLoading(false);
-        }
-      }
-    },
-    [fetchOptions],
-  );
-
-  const changeSearchValue = useMemo(
-    () => debounce(handleSearchInputChange),
-    [handleSearchInputChange],
-  );
-
-  const handleOnChange = (inputValue: string) => {
-    setSearchValue(inputValue);
-    if (fetchOptions === undefined) {
-      if (options !== undefined) {
-        const lowerSearchValue = inputValue.toLowerCase();
-        setAllOptions(
-          options.filter((o) => getValueString(o).toLowerCase().includes(lowerSearchValue)),
-        );
-      }
-    } else {
-      changeSearchValue(inputValue);
-    }
-  };
-
-  const handleClear = () => {
-    if (options !== undefined) {
-      setAllOptions(options);
-    }
-    onChange(undefined);
-    setSearchValue('');
-  };
-
-  const handleLoadItemsOnScroll = useCallback(
-    async (inputValue?: string, page?: number) => {
-      if (fetchOptions === undefined) {
-        return;
-      }
-
-      setLoadingOptionsOnScroll(true);
-
-      try {
-        const response = await fetchOptions(inputValue?.trim() ?? '', page ?? 0);
-
-        if (isMounted()) {
-          if (response.length > 0) {
-            setAllOptions((prevState) => [...prevState, ...response]);
-          } else {
-            setIsMaxPage(true);
-          }
-        }
-      } finally {
-        if (isMounted()) {
-          setLoadingOptionsOnScroll(false);
-        }
-      }
-    },
-    [fetchOptions],
-  );
-
-  const initIntersectionObserver = useCallback(
-    (node: HTMLDivElement) => {
-      if (isLoadingOptionsOnScroll || isMaxPage) {
-        return;
-      }
-
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new IntersectionObserver(async (entries) => {
-        if (entries[0].isIntersecting) {
-          await handleLoadItemsOnScroll(searchValue, activePage + 1);
-          if (isMounted()) {
-            setActivePage((prevState) => prevState + 1);
-          }
-        }
-      });
-
-      if (node) {
-        observer.current.observe(node);
-      }
-    },
-    [activePage, handleLoadItemsOnScroll, isLoadingOptionsOnScroll, isMaxPage, searchValue],
-  );
-
-  useEffect(() => {
-    if (fetchOptions === undefined) {
-      setAllOptions(options ?? []);
-      return;
-    }
-
-    const doFetchOptions = async () => {
-      setIsLoading(true);
-
-      try {
-        const response = await fetchOptions('');
-        if (response !== undefined && isMounted()) {
-          setAllOptions(response);
-        }
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    doFetchOptions();
-  }, []);
-
-  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
-
-  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      {isSearchEnabled && (
-        <div className={classes.dropdownInput}>
-          <SearchInput
-            value={searchValue}
-            placeholder={translates.searchPlaceholder}
-            onChange={handleOnChange}
-            tweakStyles={tweakSearchInputStyles}
-            testId={testId !== undefined ? `${testId}-search` : undefined}
-            shouldFocusOnMount
-          />
-        </div>
-      )}
-
-      {!isLoading && (
-        <>
-          {allOptions.length !== 0 && (
-            <div
-              className={clsx(classes.list, hasClearButton && classes.withClearButton)}
-              data-testid={testId !== undefined ? `${testId}-list` : undefined}
-            >
-              {isGroupingEnabled && value !== undefined && (
-                <>
-                  <div
-                    className={clsx(
-                      classes.label,
-                      classes.labelChosen,
-                      !isSearchEnabled && classes.withoutTopGap,
-                    )}
-                  >
-                    {translates.chosen}
-                  </div>
-                  <div className={classes.item} onClick={() => onChange(undefined)}>
-                    <div className={classes.option}>{getValueView(value)}</div>
-                    <div className={classes.icon}>
-                      <Icon type="check" />
-                    </div>
-                  </div>
-                  <div className={classes.label}>{translates.all}</div>
-                </>
-              )}
-              {allOptions.map((item, index) => {
-                const isActive = value !== undefined && getValueId(value) === getValueId(item);
-                if (isGroupingEnabled && isActive) {
-                  return null;
-                }
-                const id = getValueId(item);
-                const view = getValueView(item);
-
-                const renderedItem = (
-                  <div
-                    key={id}
-                    className={classes.item}
-                    ref={
-                      allOptions.length - 1 === index && fetchOptions !== undefined
-                        ? initIntersectionObserver
-                        : undefined
-                    }
-                    onClick={() => onChange(item)}
-                  >
-                    {/* data нужно ли? */}
-                    <div className={classes.option} data-option={id}>
-                      {view}
-                    </div>
-                    {isActive && (
-                      <div className={classes.icon}>
-                        <Icon type="check" />
-                      </div>
-                    )}
-                  </div>
-                );
-
-                if (options !== undefined && searchValue === '') {
-                  return (
-                    <ScrollIntoViewIfNeeded key={id} active={isActive}>
-                      {renderedItem}
-                    </ScrollIntoViewIfNeeded>
-                  );
-                } else {
-                  return renderedItem;
-                }
-              })}
-            </div>
-          )}
-
-          {/* Preloader */}
-          {shouldShowPreloader && (
-            <div className={classes.preloader}>
-              <ThemedPreloader type="dots" />
-            </div>
-          )}
-
-          {/* Nothing found */}
-          {allOptions.length === 0 && (
-            <div className={classes.nothingFound}>{translates.nothingFound}</div>
-          )}
-
-          {/* Controls and footer */}
-          {(hasClearButton || hasFooter) && (
-            <div
-              className={clsx(classes.panel, {
-                [classes.panelWithFooter]: hasFooter,
-              })}
-            >
-              {hasFooter && <div className={classes.footer}>{footer}</div>}
-
-              {hasClearButton && (
-                <div className={classes.clear}>
-                  <Button
-                    onClick={handleClear}
-                    size="s"
-                    view="text"
-                    testId={testId !== undefined ? `${testId}-clear-button` : undefined}
-                    tweakStyles={tweakClearButtonStyles}
-                  >
-                    {translates.clear}
-                  </Button>
-                </div>
-              )}
-            </div>
-          )}
-        </>
-      )}
-
-      {isLoading && (
-        <div className={classes.preloader}>
-          <ThemedPreloader type="dots" />
-        </div>
-      )}
-    </div>
-  );
-}
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { debounce } from 'ts-debounce';
+import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { useIsMounted, useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Button } from '../../../Button';
+import { Icon } from '../../../Icon';
+import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
+import { SearchInput } from '../../../SearchInput';
+import { ThemedPreloader } from '../../../ThemedPreloader';
+import { defaultConvertFunction, getSelectLocale } from '../../helpers';
+import { IFilterLocaleKey, ISelectLocale } from '../../types';
+import {
+  useStyles,
+  IFilterSelectStyles,
+  searchInputStyles,
+  clearButtonStyles,
+} from './FilterSelect.styles';
+
+export interface IFilterSelectProps<Value> extends ICommonProps<IFilterSelectStyles> {
+  value?: Value;
+  onChange: (value?: Value) => void;
+  /**
+   * @default false
+   */
+  isSearchEnabled?: boolean;
+  /**
+   * @default false
+   */
+  isGroupingEnabled?: boolean;
+  /**
+   * @default `220px`
+   */
+  width?: string | number;
+  localeKey?: IFilterLocaleKey;
+  locale?: Partial<ISelectLocale>;
+  options?: Value[];
+  footer?: ReactNode;
+  fetchOptions?: (value?: string, page?: number) => Promise<Value[]>;
+  getValueString?: (value: Value) => string;
+  getValueView?: (value: Value) => ReactNode;
+  getValueId?: (value: Value) => string;
+  /**
+   * @default true
+   */
+  hasClearButton?: boolean;
+}
+
+export function FilterSelect<Value>({
+  data,
+  tweakStyles,
+  value,
+  isSearchEnabled = false,
+  isGroupingEnabled = false,
+  width = 220,
+  localeKey,
+  locale,
+  onChange,
+  options,
+  fetchOptions,
+  footer,
+  getValueView = defaultConvertFunction,
+  getValueId = defaultConvertFunction,
+  getValueString = defaultConvertFunction,
+  hasClearButton = true,
+  testId,
+}: IFilterSelectProps<Value>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'FilterSelect',
+  });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FilterSelect',
+  });
+
+  const isMounted = useIsMounted();
+
+  const translates = useMemo(() => getSelectLocale(localeKey, locale), [localeKey, locale]);
+
+  const observer = useRef<IntersectionObserver>();
+
+  const [searchValue, setSearchValue] = useState('');
+  const [allOptions, setAllOptions] = useState<Value[]>([]);
+
+  const [activePage, setActivePage] = useState(0);
+  const [isMaxPage, setIsMaxPage] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingOptionsOnScroll, setLoadingOptionsOnScroll] = useState(false);
+
+  const shouldShowPreloader = isLoading || isLoadingOptionsOnScroll;
+  const hasFooter = isReactNodeNotEmpty(footer);
+
+  const handleSearchInputChange = useCallback(
+    async (inputValue?: string) => {
+      if (fetchOptions === undefined) {
+        return;
+      }
+      setIsLoading(true);
+
+      try {
+        const response = await fetchOptions(inputValue?.trim() ?? '');
+        if (isMounted() && response !== undefined) {
+          setAllOptions(response);
+          setActivePage(0);
+          setIsMaxPage(false);
+        }
+      } finally {
+        if (isMounted()) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [fetchOptions],
+  );
+
+  const changeSearchValue = useMemo(
+    () => debounce(handleSearchInputChange),
+    [handleSearchInputChange],
+  );
+
+  const handleOnChange = (inputValue: string) => {
+    setSearchValue(inputValue);
+    if (fetchOptions === undefined) {
+      if (options !== undefined) {
+        const lowerSearchValue = inputValue.toLowerCase();
+        setAllOptions(
+          options.filter((o) => getValueString(o).toLowerCase().includes(lowerSearchValue)),
+        );
+      }
+    } else {
+      changeSearchValue(inputValue);
+    }
+  };
+
+  const handleClear = () => {
+    if (options !== undefined) {
+      setAllOptions(options);
+    }
+    onChange(undefined);
+    setSearchValue('');
+  };
+
+  const handleLoadItemsOnScroll = useCallback(
+    async (inputValue?: string, page?: number) => {
+      if (fetchOptions === undefined) {
+        return;
+      }
+
+      setLoadingOptionsOnScroll(true);
+
+      try {
+        const response = await fetchOptions(inputValue?.trim() ?? '', page ?? 0);
+
+        if (isMounted()) {
+          if (response.length > 0) {
+            setAllOptions((prevState) => [...prevState, ...response]);
+          } else {
+            setIsMaxPage(true);
+          }
+        }
+      } finally {
+        if (isMounted()) {
+          setLoadingOptionsOnScroll(false);
+        }
+      }
+    },
+    [fetchOptions],
+  );
+
+  const initIntersectionObserver = useCallback(
+    (node: HTMLDivElement) => {
+      if (isLoadingOptionsOnScroll || isMaxPage) {
+        return;
+      }
+
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+
+      observer.current = new IntersectionObserver(async (entries) => {
+        if (entries[0].isIntersecting) {
+          await handleLoadItemsOnScroll(searchValue, activePage + 1);
+          if (isMounted()) {
+            setActivePage((prevState) => prevState + 1);
+          }
+        }
+      });
+
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [activePage, handleLoadItemsOnScroll, isLoadingOptionsOnScroll, isMaxPage, searchValue],
+  );
+
+  useEffect(() => {
+    if (fetchOptions === undefined) {
+      setAllOptions(options ?? []);
+      return;
+    }
+
+    const doFetchOptions = async () => {
+      setIsLoading(true);
+
+      try {
+        const response = await fetchOptions('');
+        if (response !== undefined && isMounted()) {
+          setAllOptions(response);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    doFetchOptions();
+  }, []);
+
+  return (
+    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
+      {isSearchEnabled && (
+        <div className={classes.dropdownInput}>
+          <SearchInput
+            value={searchValue}
+            placeholder={translates.searchPlaceholder}
+            onChange={handleOnChange}
+            tweakStyles={tweakSearchInputStyles}
+            testId={testId !== undefined ? `${testId}-search` : undefined}
+            shouldFocusOnMount
+          />
+        </div>
+      )}
+
+      {!isLoading && (
+        <>
+          {allOptions.length !== 0 && (
+            <div
+              className={clsx(classes.list, hasClearButton && classes.withClearButton)}
+              data-testid={testId !== undefined ? `${testId}-list` : undefined}
+            >
+              {isGroupingEnabled && value !== undefined && (
+                <>
+                  <div
+                    className={clsx(
+                      classes.label,
+                      classes.labelChosen,
+                      !isSearchEnabled && classes.withoutTopGap,
+                    )}
+                  >
+                    {translates.chosen}
+                  </div>
+                  <div className={classes.item} onClick={() => onChange(undefined)}>
+                    <div className={classes.option}>{getValueView(value)}</div>
+                    <div className={classes.icon}>
+                      <Icon type="check" />
+                    </div>
+                  </div>
+                  <div className={classes.label}>{translates.all}</div>
+                </>
+              )}
+              {allOptions.map((item, index) => {
+                const isActive = value !== undefined && getValueId(value) === getValueId(item);
+                if (isGroupingEnabled && isActive) {
+                  return null;
+                }
+                const id = getValueId(item);
+                const view = getValueView(item);
+
+                const renderedItem = (
+                  <div
+                    key={id}
+                    className={classes.item}
+                    ref={
+                      allOptions.length - 1 === index && fetchOptions !== undefined
+                        ? initIntersectionObserver
+                        : undefined
+                    }
+                    onClick={() => onChange(item)}
+                  >
+                    {/* data нужно ли? */}
+                    <div className={classes.option} data-option={id}>
+                      {view}
+                    </div>
+                    {isActive && (
+                      <div className={classes.icon}>
+                        <Icon type="check" />
+                      </div>
+                    )}
+                  </div>
+                );
+
+                if (options !== undefined && searchValue === '') {
+                  return (
+                    <ScrollIntoViewIfNeeded key={id} active={isActive}>
+                      {renderedItem}
+                    </ScrollIntoViewIfNeeded>
+                  );
+                } else {
+                  return renderedItem;
+                }
+              })}
+            </div>
+          )}
+
+          {/* Preloader */}
+          {shouldShowPreloader && (
+            <div className={classes.preloader}>
+              <ThemedPreloader type="dots" />
+            </div>
+          )}
+
+          {/* Nothing found */}
+          {allOptions.length === 0 && (
+            <div className={classes.nothingFound}>{translates.nothingFound}</div>
+          )}
+
+          {/* Controls and footer */}
+          {(hasClearButton || hasFooter) && (
+            <div
+              className={clsx(classes.panel, {
+                [classes.panelWithFooter]: hasFooter,
+              })}
+            >
+              {hasFooter && <div className={classes.footer}>{footer}</div>}
+
+              {hasClearButton && (
+                <div className={classes.clear}>
+                  <Button
+                    onClick={handleClear}
+                    size="s"
+                    view="text"
+                    testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+                    tweakStyles={tweakClearButtonStyles}
+                  >
+                    {translates.clear}
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+
+      {isLoading && (
+        <div className={classes.preloader}>
+          <ThemedPreloader type="dots" />
+        </div>
+      )}
+    </div>
+  );
+}