feat: Supports onPopupScroll props (#507)

* feat: Supports onPopupScroll props

* fix: eslint fix

* feat: add test case

* fix: update test

* test: update case

* test: fix test case

* test: fix onPopupScroll evt is null

* test: fix outdated cases

* test: fix test case

* docs: clean up

---------

Co-authored-by: 二货机器人 <[email protected]>

Author: wanpan11

README.md

@@ -57,7 +57,6 @@ online example: https://tree-select-react-component.vercel.app/
 |dropdownMatchSelectWidth | whether dropdown's with is same with select. Default set `min-width` same as input | bool | true |
 |dropdownClassName | additional className applied to dropdown | String | - |
 |dropdownStyle | additional style applied to dropdown | Object | {} |
-|dropdownPopupAlign | specify alignment for dropdown (alignConfig of [dom-align](https://github.com/yiminghe/dom-align)) | Object | - |
 |onDropdownVisibleChange | control dropdown visible | function | `() => { return true; }` |
 |notFoundContent | specify content to show when no result matches. | String | 'Not Found' |
 |showSearch | whether show search input in single mode | bool | true |
@@ -75,6 +74,7 @@ online example: https://tree-select-react-component.vercel.app/
 |onSelect | called when select treeNode | function(value, node, extra) | - |
 |onSearch | called when input changed | function | - |
 |onTreeExpand | called when tree node expand | function(expandedKeys) | - |
+|onPopupScroll | called when popup scroll | function(event) | - |
 |showCheckedStrategy | `TreeSelect.SHOW_ALL`: show all checked treeNodes (Include parent treeNode). `TreeSelect.SHOW_PARENT`: show checked treeNodes (Just show parent treeNode). Default just show child. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
 |treeIcon | show tree icon | bool | false |
 |treeLine | show tree line | bool | false |

examples/basic.tsx

@@ -212,6 +212,9 @@ class Demo extends React.Component {
             });
           }}
           onSelect={this.onSelect}
+          onPopupScroll={evt => {
+            console.log('onPopupScroll:', evt.target);
+          }}
         />
 
         <h2>single select (just select children)</h2>
@@ -256,7 +259,7 @@ class Demo extends React.Component {
           choiceTransitionName="rc-tree-select-selection__choice-zoom"
           style={{ width: 300 }}
           // dropdownStyle={{ height: 200, overflow: 'auto' }}
-          dropdownPopupAlign={{
+          dropdownAlign={{
             overflow: { adjustY: 0, adjustX: 0 },
             offset: [0, 2],
           }}

examples/filter.tsx

@@ -64,10 +64,10 @@ class Demo extends React.Component {
           transitionName="rc-tree-select-dropdown-slide-up"
           choiceTransitionName="rc-tree-select-selection__choice-zoom"
           // dropdownStyle={{ height: 200, overflow: 'auto' }}
-          dropdownPopupAlign={{
-            overflow: { adjustY: 0, adjustX: 0 },
-            offset: [0, 2],
-          }}
+          // dropdownPopupAlign={{
+          //   overflow: { adjustY: 0, adjustX: 0 },
+          //   offset: [0, 2],
+          // }}
           placeholder={<i>请下拉选择</i>}
           treeLine
           maxTagTextLength={10}

package.json

@@ -72,7 +72,7 @@
     "rc-dialog": "^7.5.7",
     "rc-field-form": "^2.0.0",
     "rc-test": "^7.0.4",
-    "rc-virtual-list": "^1.1.0",
+    "rc-virtual-list": "^3.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "typescript": "^5.0.0"

src/OptionList.tsx

@@ -44,6 +44,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     dropdownMatchSelectWidth,
     treeExpandAction,
     treeTitleRender,
+    onPopupScroll,
   } = React.useContext(TreeSelectContext);
 
   const {
@@ -70,6 +71,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
 
   const memoTreeData = useMemo(
     () => treeData,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [open, treeData],
     (prev, next) => next[0] && prev[1] !== next[1],
   );
@@ -97,6 +99,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
       treeRef.current?.scrollTo({ key: checkedKeys[0] });
       setActiveKey(checkedKeys[0]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
   // ========================== Search ==========================
@@ -123,6 +126,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     if (searchValue) {
       setSearchExpandedKeys(getAllKeys(treeData, fieldNames));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchValue]);
 
   const onInternalExpand = (keys: Key[]) => {
@@ -252,6 +256,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
         onLoad={onTreeLoad}
         filterTreeNode={filterTreeNode}
         expandAction={treeExpandAction}
+        onScroll={onPopupScroll}
       />
     </div>
   );

src/TreeSelect.tsx

@@ -240,6 +240,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     treeMotion,
     treeTitleRender,
 
+    onPopupScroll,
     ...restProps
   } = props;
 
@@ -465,6 +466,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       ...item,
       label: item.label ?? item.value,
     }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     mergedFieldNames,
     mergedMultiple,
@@ -681,6 +683,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       onSelect: onOptionSelect,
       treeExpandAction,
       treeTitleRender,
+      onPopupScroll,
     }),
     [
       virtual,
@@ -693,6 +696,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       onOptionSelect,
       treeExpandAction,
       treeTitleRender,
+      onPopupScroll,
     ],
   );
 

src/TreeSelectContext.ts

@@ -13,6 +13,7 @@ export interface TreeSelectContextProps {
   onSelect: OnInternalSelect;
   treeExpandAction?: ExpandAction;
   treeTitleRender?: (node: any) => React.ReactNode;
+  onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
 }
 
 const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);

tests/Select.multiple.spec.js

@@ -7,7 +7,7 @@ import TreeSelect, { TreeNode } from '../src';
 import focusTest from './shared/focusTest';
 
 describe('TreeSelect.multiple', () => {
-  focusTest('multiple');
+  focusTest(true);
 
   const treeData = [
     { key: '0', value: '0', title: 'label0' },

tests/Select.props.spec.js

@@ -2,6 +2,8 @@
 import { mount } from 'enzyme';
 import Tree, { TreeNode } from 'rc-tree';
 import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
 import TreeSelect, { SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode as SelectNode } from '../src';
 
 // Promisify timeout to let jest catch works
@@ -241,6 +243,33 @@ describe('TreeSelect.props', () => {
     expect(handleSearch).toHaveBeenCalledWith('Search changed');
   });
 
+  it('onPopupScroll', async () => {
+    const onPopupScroll = jest.fn(e => {
+      // Prevents React from resetting its properties:
+      e.persist();
+    });
+    render(
+      <TreeSelect
+        open
+        treeDefaultExpandAll
+        onPopupScroll={onPopupScroll}
+        treeData={new Array(10).fill(0).map((_, index) => ({
+          title: `Title ${index}`,
+          value: index,
+        }))}
+      />,
+    );
+
+    fireEvent.scroll(document.querySelector('.rc-tree-select-tree-list-holder'), {
+      scrollY: 100,
+    });
+
+    expect(onPopupScroll).toHaveBeenCalled();
+    expect(onPopupScroll.mock.calls[0][0].target).toBe(
+      document.querySelector('.rc-tree-select-tree-list-holder'),
+    );
+  });
+
   it('showArrow', () => {
     const wrapper = mount(createOpenSelect({ suffixIcon: null }));
     expect(wrapper.find('.rc-tree-select-arrow').length).toBeFalsy();

tests/Select.spec.tsx

@@ -6,9 +6,17 @@ import TreeSelect, { TreeNode } from '../src';
 import focusTest from './shared/focusTest';
 import { selectNode } from './util';
 
+const mockScrollTo = jest.fn();
+
+// Mock `useScrollTo` from `rc-virtual-list/lib/hooks/useScrollTo`
+jest.mock('rc-virtual-list/lib/hooks/useScrollTo', () => {
+  return () => mockScrollTo;
+});
+
 describe('TreeSelect.basic', () => {
   beforeEach(() => {
     jest.useFakeTimers();
+    mockScrollTo.mockReset();
   });
 
   beforeAll(() => {
@@ -19,7 +27,7 @@ describe('TreeSelect.basic', () => {
     jest.useRealTimers();
   });
 
-  focusTest('single');
+  focusTest();
 
   describe('render', () => {
     const treeData = [
@@ -391,11 +399,8 @@ describe('TreeSelect.basic', () => {
       wrapper.openSelect();
       expect(wrapper.isOpen()).toBeFalsy();
 
-      const scrollTo = jest.fn();
-      wrapper.find('List').instance().scrollTo = scrollTo;
-
       wrapper.openSelect();
-      expect(scrollTo).toHaveBeenCalled();
+      expect(mockScrollTo).toHaveBeenCalled();
     });
   });
 
@@ -525,7 +530,7 @@ describe('TreeSelect.basic', () => {
 
       keyDown(KeyCode.DOWN);
       expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('0 label');
-      
+
       keyDown(KeyCode.UP);
       expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('11 label');
     });