refactor: Use @rc-component/trigger (#928)

* chore: init

* test: update snapshot

* test: update snapshot

* test: update snapshot

* chore: bump trigger support window scroll

Author: zombieJ

package.json

@@ -45,10 +45,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
+    "@rc-component/trigger": "^1.4.0",
     "classnames": "2.x",
     "rc-motion": "^2.0.1",
     "rc-overflow": "^1.0.0",
-    "rc-trigger": "^5.0.4",
     "rc-util": "^5.16.1",
     "rc-virtual-list": "^3.4.13"
   },

src/BaseSelect.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import type { AlignType } from 'rc-trigger/lib/interface';
+import type { AlignType } from '@rc-component/trigger/lib/interface';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import isMobile from 'rc-util/lib/isMobile';

src/SelectTrigger.tsx

@@ -1,10 +1,12 @@
-import * as React from 'react';
-import Trigger from 'rc-trigger';
-import type { AlignType } from 'rc-trigger/lib/interface';
+import Trigger from '@rc-component/trigger';
+import type { AlignType } from '@rc-component/trigger/lib/interface';
 import classNames from 'classnames';
+import * as React from 'react';
 import type { Placement, RenderDOMFunc } from './BaseSelect';
 
-const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
+const getBuiltInPlacements = (
+  dropdownMatchSelectWidth: number | boolean,
+): Record<string, AlignType> => {
   // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
   const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
   return {
@@ -15,6 +17,7 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
         adjustX,
         adjustY: 1,
       },
+      htmlRegion: 'scroll',
     },
     bottomRight: {
       points: ['tr', 'br'],
@@ -23,6 +26,7 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
         adjustX,
         adjustY: 1,
       },
+      htmlRegion: 'scroll',
     },
     topLeft: {
       points: ['bl', 'tl'],
@@ -31,6 +35,7 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
         adjustX,
         adjustY: 1,
       },
+      htmlRegion: 'scroll',
     },
     topRight: {
       points: ['br', 'tr'],
@@ -39,6 +44,7 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
         adjustX,
         adjustY: 1,
       },
+      htmlRegion: 'scroll',
     },
   };
 };

tests/Select.test.tsx

@@ -1,5 +1,5 @@
+import { fireEvent, render as testingRender } from '@testing-library/react';
 import { mount, render } from 'enzyme';
-import { render as testingRender, fireEvent } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import { resetWarned } from 'rc-util/lib/warning';
@@ -66,8 +66,8 @@ describe('Select.Basic', () => {
     });
 
     it('renders dropdown correctly', () => {
-      const wrapper = render(genSelect({ open: true }));
-      expect(wrapper).toMatchSnapshot();
+      const { container } = testingRender(genSelect({ open: true }));
+      expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot();
     });
 
     it('renders disabled select correctly', () => {
@@ -353,7 +353,7 @@ describe('Select.Basic', () => {
   });
 
   it('should contain falsy children', () => {
-    const wrapper = render(
+    const { container } = testingRender(
       <Select value="1" open>
         <Option value="1">1</Option>
         {null}
@@ -362,7 +362,7 @@ describe('Select.Basic', () => {
       </Select>,
     );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot();
   });
 
   it('open dropdown on down key press', () => {
@@ -1038,25 +1038,25 @@ describe('Select.Basic', () => {
   });
 
   it('filterOption could be true as described in default value', () => {
-    const wrapper = mount(
+    const { container } = testingRender(
       <Select searchValue="3" showSearch filterOption open>
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
     );
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot();
   });
 
   it('does not filter when filterOption value is false', () => {
-    const wrapper = render(
+    const { container } = testingRender(
       <Select inputValue="1" filterOption={false} open>
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
     );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot();
   });
 
   it('backfill', () => {
@@ -1130,7 +1130,7 @@ describe('Select.Basic', () => {
   });
 
   it('should render custom dropdown correctly', () => {
-    const wrapper = mount(
+    const { container } = testingRender(
       <Select
         open
         dropdownRender={(menu) => (
@@ -1144,7 +1144,7 @@ describe('Select.Basic', () => {
         <Option value="2">2</Option>
       </Select>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot();
   });
 
   it('should trigger click event in custom node', () => {

tests/Tags.test.tsx

@@ -1,4 +1,5 @@
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import classNames from 'classnames';
 import * as React from 'react';
@@ -406,9 +407,8 @@ describe('Select.Tags', () => {
     );
 
     it('renders correctly', () => {
-      const wrapper = mount(createSelect({ value: ['jack', 'foo'] }));
-      toggleOpen(wrapper);
-      expect(wrapper.render()).toMatchSnapshot();
+      const { container } = render(createSelect({ value: ['jack', 'foo'], open: true }));
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     it('renders inputValue correctly', () => {

tests/__mocks__/@rc-component/trigger.tsx

@@ -0,0 +1,3 @@
+import Trigger from '@rc-component/trigger/lib/mock';
+
+export default Trigger;