feat: add direction (#471)

* feat: add dropdown placement

* add: api

* feat: use direction

* feat: add rtl demo

* fix: id

* feat: add test

* fix: test case

Author: xrkffgg

README.md

@@ -115,6 +115,7 @@ React.render(c, container);
 | dropdownRender | render custom dropdown menu | (menu: React.Node, props: MenuProps) => ReactNode | - |
 | loading | show loading icon in arrow | Boolean | false |
 | virtual | Disable virtual scroll | Boolean | true |
+| direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |
 
 ### Methods
 

examples/single.tsx

@@ -125,6 +125,22 @@ class Test extends React.Component {
           ))}
         </select>
 
+        <h2>RTL Select</h2>
+
+        <div style={{ width: 300 }}>
+          <Select
+            id="my-select-rtl"
+            placeholder="rtl"
+            direction="rtl"
+            dropdownMatchSelectWidth={300}
+            dropdownStyle={{ minWidth: 300 }}
+            style={{ width: 500 }}
+          >
+            <Option value="1">1</Option>
+            <Option value="2">2</Option>
+          </Select>
+        </div>
+
         <p>
           <button type="button" onClick={this.onDestroy}>
             destroy

src/SelectTrigger.tsx

@@ -16,6 +16,14 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
         adjustY: 1,
       },
     },
+    bottomRight: {
+      points: ['tr', 'br'],
+      offset: [0, 4],
+      overflow: {
+        adjustX,
+        adjustY: 1,
+      },
+    },
     topLeft: {
       points: ['bl', 'tl'],
       offset: [0, -4],
@@ -24,6 +32,14 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
         adjustY: 1,
       },
     },
+    topRight: {
+      points: ['br', 'tr'],
+      offset: [0, -4],
+      overflow: {
+        adjustX,
+        adjustY: 1,
+      },
+    },
   };
 };
 
@@ -43,6 +59,7 @@ export interface SelectTriggerProps {
   containerWidth: number;
   dropdownStyle: React.CSSProperties;
   dropdownClassName: string;
+  direction: string;
   dropdownMatchSelectWidth?: boolean | number;
   dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
   getPopupContainer?: RenderDOMFunc;
@@ -67,6 +84,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     transitionName,
     dropdownStyle,
     dropdownClassName,
+    direction = 'ltr',
     dropdownMatchSelectWidth = true,
     dropdownRender,
     dropdownAlign,
@@ -113,7 +131,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
       {...restProps}
       showAction={[]}
       hideAction={[]}
-      popupPlacement="bottomLeft"
+      popupPlacement={direction === 'rtl' ? 'bottomRight' : 'bottomLeft'}
       builtinPlacements={builtInPlacements}
       prefixCls={dropdownPrefixCls}
       popupTransitionName={mergedTransitionName}

src/generate.tsx

@@ -108,6 +108,7 @@ export interface SelectProps<OptionsType extends object[], ValueType> extends Re
   animation?: string;
   transitionName?: string;
   getPopupContainer?: RenderDOMFunc;
+  direction?: string;
 
   // Others
   disabled?: boolean;
@@ -282,6 +283,7 @@ export default function generateSelector<
       dropdownRender,
       dropdownAlign,
       showAction = [],
+      direction,
 
       // Tags
       tokenSeparators,
@@ -951,6 +953,7 @@ export default function generateSelector<
           transitionName={transitionName}
           dropdownStyle={dropdownStyle}
           dropdownClassName={dropdownClassName}
+          direction={direction}
           dropdownMatchSelectWidth={dropdownMatchSelectWidth}
           dropdownRender={dropdownRender}
           dropdownAlign={dropdownAlign}

tests/Select.test.tsx

@@ -209,6 +209,16 @@ describe('Select.Basic', () => {
     expect(wrapper2.find('.rc-select-clear-icon').length).toBeFalsy();
   });
 
+  it('should direction rtl', () => {
+    const wrapper = mount(
+      <Select direction="rtl">
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+    );
+    expect(wrapper.find('Trigger').props().popupPlacement).toBe('bottomRight');
+  });
+
   it('should not response click event when select is disabled', () => {
     const wrapper = mount(
       <Select disabled defaultValue="2">