feat: Support placement (#661)

Author: zombieJ

package.json

@@ -53,8 +53,8 @@
     "rc-virtual-list": "^3.2.0"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.10.5",
-    "@types/jest": "^26.0.0",
+    "@types/enzyme": "^3.10.9",
+    "@types/jest": "^26.0.24",
     "@types/react": "^17.0.15",
     "@types/react-dom": "^17.0.3",
     "cross-env": "^7.0.0",

src/SelectTrigger.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Trigger from 'rc-trigger';
 import classNames from 'classnames';
 import type { RenderDOMFunc } from './interface';
+import type { Placement } from './generate';
 
 const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
   // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
@@ -57,6 +58,7 @@ export interface SelectTriggerProps {
   animation?: string;
   transitionName?: string;
   containerWidth: number;
+  placement?: Placement;
   dropdownStyle: React.CSSProperties;
   dropdownClassName: string;
   direction: string;
@@ -86,6 +88,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     dropdownStyle,
     dropdownClassName,
     direction = 'ltr',
+    placement,
     dropdownMatchSelectWidth = true,
     dropdownRender,
     dropdownAlign,
@@ -103,9 +106,10 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     popupNode = dropdownRender(popupElement);
   }
 
-  const builtInPlacements = React.useMemo(() => getBuiltInPlacements(dropdownMatchSelectWidth), [
-    dropdownMatchSelectWidth,
-  ]);
+  const builtInPlacements = React.useMemo(
+    () => getBuiltInPlacements(dropdownMatchSelectWidth),
+    [dropdownMatchSelectWidth],
+  );
 
   // ===================== Motion ======================
   const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName;
@@ -133,7 +137,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
       {...restProps}
       showAction={onPopupVisibleChange ? ['click'] : []}
       hideAction={onPopupVisibleChange ? ['click'] : []}
-      popupPlacement={direction === 'rtl' ? 'bottomRight' : 'bottomLeft'}
+      popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
       builtinPlacements={builtInPlacements}
       prefixCls={dropdownPrefixCls}
       popupTransitionName={mergedTransitionName}

src/generate.tsx

@@ -66,6 +66,8 @@ export interface RefSelectProps {
   scrollTo?: ScrollTo;
 }
 
+export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+
 export interface SelectProps<OptionsType extends object[], ValueType> extends React.AriaAttributes {
   prefixCls?: string;
   id?: string;
@@ -119,6 +121,7 @@ export interface SelectProps<OptionsType extends object[], ValueType> extends Re
   dropdownStyle?: React.CSSProperties;
   dropdownClassName?: string;
   dropdownMatchSelectWidth?: boolean | number;
+  placement?: Placement;
   virtual?: boolean;
   dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
   dropdownAlign?: any;
@@ -301,6 +304,7 @@ export default function generateSelector<
       getPopupContainer,
 
       // Dropdown
+      placement,
       listHeight = 200,
       listItemHeight = 20,
       animation,
@@ -1075,6 +1079,7 @@ export default function generateSelector<
         dropdownMatchSelectWidth={dropdownMatchSelectWidth}
         dropdownRender={dropdownRender}
         dropdownAlign={dropdownAlign}
+        placement={placement}
         getPopupContainer={getPopupContainer}
         empty={!mergedOptions.length}
         getTriggerDOMNode={() => selectorDomRef.current}

tests/Select.test.tsx

@@ -1680,4 +1680,21 @@ describe('Select.Basic', () => {
       wrapper.find('input.rc-select-selection-search-input').getDOMNode().getAttribute('tabindex'),
     ).toBe('0');
   });
+
+  describe('placement', () => {
+    it('default', () => {
+      const wrapper = mount(<Select open />);
+      expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('bottomLeft');
+    });
+
+    it('rtl', () => {
+      const wrapper = mount(<Select direction="rtl" open />);
+      expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('bottomRight');
+    });
+
+    it('customize', () => {
+      const wrapper = mount(<Select placement="topRight" open />);
+      expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
+    });
+  });
 });

tests/SelectTrigger.spec.tsx

@@ -12,6 +12,6 @@ describe('Select.Trigger', () => {
       </SimpleSelectTrigger>,
     );
 
-    expect(wrapper.find('Trigger').props().popupTransitionName).toBe('rc-select-dropdown-slide-up');
+    expect(wrapper.find('Trigger').prop('popupTransitionName')).toBe('rc-select-dropdown-slide-up');
   });
 });