feat(dropdown): support the overlay display by different placement

Author: wewoor

src/components/dropdown/index.tsx

@@ -2,12 +2,12 @@ import './style.scss';
 import * as React from 'react';
 import { classNames, prefixClaName } from 'mo/common/className';
 import { useContextView } from '../contextview';
-import { triggerEvent, TriggerEvent } from 'mo/common/dom';
+import { triggerEvent, TriggerEvent, PlacementType, getPositionByPlacement } from 'mo/common/dom';
 
 export interface IDropDown extends HTMLElementProps {
     overlay: ReactNode;
     trigger?: TriggerEvent;
-    placement?: 'top' | 'right' | 'bottom' | 'left';
+    placement?: PlacementType;
 }
 
 export const defaultDropDownClassName = 'drop-down';
@@ -17,7 +17,7 @@ export function DropDown(props: React.PropsWithChildren<IDropDown>) {
         className,
         overlay,
         children,
-        placement = 'bottom',
+        placement = 'right',
         trigger = 'click',
         ...others
     } = props;
@@ -34,10 +34,17 @@ export function DropDown(props: React.PropsWithChildren<IDropDown>) {
         [triggerEvent(trigger)]: function (e: React.MouseEvent) {
             const target = e.currentTarget;
             const rect = target.getBoundingClientRect();
-            contextView.show({
-                x: rect.x + rect.width,
-                y: rect.y,
-            });
+            let position = getPositionByPlacement(placement, rect);
+            contextView.show(position);
+            // If placement is left or top,
+            // need re calculate the position by menu size  
+            if (placement === 'left' || placement === 'top') {
+                const overlay = contextView.view!.getBoundingClientRect();
+                overlay.x = rect.x;
+                overlay.y = rect.y;
+                position = getPositionByPlacement(placement, overlay);
+                contextView.show(position);
+            }
         },
     };
 

stories/components/11-DownDown.stories.tsx

@@ -6,6 +6,8 @@ import { propsTable } from '../common/propsTable';
 import { Menu } from 'mo/components/menu';
 import { Icon } from 'mo/components/icon';
 import { DropDown } from 'mo/components/dropdown';
+import { useState } from 'react';
+import { PlacementType } from 'mo/common/dom';
 
 const stories = storiesOf('DropDown', module);
 stories.addDecorator(withKnobs);
@@ -128,6 +130,14 @@ stories.add(
             },
         ];
 
+        const [ placement, setPlacement ] = useState<PlacementType>('right');
+
+        const onSelectPlacement = (e) => {
+            const value = e.target.value;
+            console.log('onSelectPlacement:', value);
+            setPlacement(value);
+        }
+
         return (
             <div>
                 <h2>简述</h2>
@@ -154,7 +164,7 @@ stories.add(
                     </DropDown>
                 </div>
                 <div>
-                    <h3>使用示例 1 - Click me!</h3>
+                    <h3>使用示例 2 - Click me!</h3>
                     <DropDown
                         style={{
                             width: 45,
@@ -171,6 +181,33 @@ stories.add(
                         <Icon type="menu" />
                     </DropDown>
                 </div>
+                <div>
+                    <h3>
+                        使用示例 3 - Custom Placement
+
+                        <select onChange={onSelectPlacement} defaultValue="right">
+                            <option value="top">Top</option>
+                            <option value="right">Right</option>
+                            <option value="bottom">Bottom</option>
+                            <option value="left">Left</option>
+                        </select>
+                    </h3>
+                    <DropDown
+                        style={{
+                            width: 45,
+                            height: 45,
+                            color: 'rgba(255, 255, 255, 0.4)',
+                            background: '#252526',
+                        }}
+                        trigger="click"
+                        placement={placement}
+                        overlay={
+                            <Menu style={{ width: 200 }} data={menuData} />
+                        }
+                    >
+                        <Icon type="menu" />
+                    </DropDown>
+                </div>
             </div>
         );
     },