feat(Select): add onLoadMore prop (#901)

Co-authored-by: Yevhenii Chernovol <echernovol@yandex-team.ru>
gravity-ui · Aug 16, 2023 · e191c0b · e191c0b
1 parent a254e1b
commit e191c0b
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 3 deletions.
diff --git a/src/components/Select/README.md b/src/components/Select/README.md
@@ -35,6 +35,7 @@
 | onFocus                         | `function`                              | `-`             | Handler that is called when the element receives focus.                                                                                                                                                                                                                                                                            |
 | onBlur                          | `function`                              | `-`             | Handler that is called when the element loses focus.                                                                                                                                                                                                                                                                               |
 | loading                         | `boolean`                               | `-`             | Add the loading item to the end of the options list. Works like persistant loading indicator while the options list is empty.                                                                                                                                                                                                      |
+| onLoadMore                      | `function`                              | `-`             | Fires when loading indicator gets visible.                                                                                                                                                                                                                                                                                         |
 
 ---
 

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -280,6 +280,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                         getOptionHeight={getOptionHeight}
                         getOptionGroupHeight={getOptionGroupHeight}
                         loading={props.loading}
+                        onLoadMore={props.onLoadMore}
                     />
                 ) : (
                     <EmptyOptions filter={filter} renderEmptyOptions={renderEmptyOptions} />

diff --git a/src/components/Select/components/SelectList/SelectList.tsx b/src/components/Select/components/SelectList/SelectList.tsx
@@ -25,6 +25,7 @@ type SelectListProps = {
     multiple?: boolean;
     virtualized?: boolean;
     loading?: boolean;
+    onLoadMore?: () => void;
 };
 
 const loadingOption = {value: '__SELECT_LIST_ITEM_LOADING__', disabled: true};
@@ -43,6 +44,7 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
         virtualized,
         mobile,
         loading,
+        onLoadMore,
     } = props;
     const items = React.useMemo(
         () => (loading ? [...flattenOptions, loadingOption] : flattenOptions),
@@ -85,7 +87,11 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
                 return <GroupLabel option={option} renderOptionGroup={wrappedRenderOptionGroup} />;
             }
             if (option.value === loadingOption.value) {
-                return <SelectLoadingIndicator />;
+                return (
+                    <SelectLoadingIndicator
+                        onIntersect={itemIndex === 0 ? undefined : onLoadMore}
+                    />
+                );
             }
 
             const wrappedRenderOption = renderOption

diff --git a/src/components/Select/components/SelectList/SelectLoadingIndicator.tsx b/src/components/Select/components/SelectList/SelectLoadingIndicator.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 
 import {Loader} from '../../../Loader/Loader';
+import {useIntersection} from '../../../utils/useIntersection';
 import {selectListBlock} from '../../constants';
 
-export const SelectLoadingIndicator = () => {
+export const SelectLoadingIndicator = (props: {onIntersect?: () => void}) => {
+    const ref = React.useRef<HTMLDivElement | null>(null);
+
+    useIntersection({element: ref.current, onIntersect: props?.onIntersect});
+
     return (
-        <div className={selectListBlock('loading-indicator')}>
+        <div ref={ref} className={selectListBlock('loading-indicator')}>
             <Loader />
         </div>
     );

diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
@@ -84,6 +84,7 @@ export type SelectProps<T = any> = QAProps &
         onFocus?: (e: React.FocusEvent) => void;
         onBlur?: (e: React.FocusEvent) => void;
         loading?: boolean;
+        onLoadMore?: () => void;
         children?:
             | React.ReactElement<SelectOption<T>, typeof Option>
             | React.ReactElement<SelectOption<T>, typeof Option>[]

diff --git a/src/components/utils/useIntersection.ts b/src/components/utils/useIntersection.ts
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export type UseIntersection = {
+    element: Element | null;
+    options?: IntersectionObserverInit;
+    onIntersect?: () => void;
+};
+
+export const useIntersection = ({element, options, onIntersect}: UseIntersection) => {
+    React.useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                onIntersect?.();
+            }
+        }, options);
+
+        if (element) {
+            observer.observe(element);
+        }
+
+        return () => (element === null ? undefined : observer.unobserve(element));
+    }, [element, options, onIntersect]);
+};