Merge pull request #241 from tryggvigy/contextmenu-rtl

Add rtl prop to the ContextMenu Component

Author: vkbansal

examples/RTLSubMenu.js

@@ -23,15 +23,15 @@ export default class RTLSubMenu extends Component {
     render() {
         return (
             <div>
-                <h3>Right-to-Left Submenu Menu</h3>
+                <h3>Right-to-Left ContextMenu and Submenu Menu</h3>
                 <p>This demos usage of Right-to-Left submenus.</p>
                 <ContextMenuTrigger id={MENU_TYPE} holdToDisplay={1000}>
                     <div className='well'>right click to see the menu</div>
                 </ContextMenuTrigger>
                 <div>
                     {this.state.logs.map((log, i) => <p key={i}>{log}</p>)}
                 </div>
-                <ContextMenu id={MENU_TYPE}>
+                <ContextMenu id={MENU_TYPE} rtl>
                     <MenuItem onClick={this.handleClick} data={{ item: 'item 1' }}>Menu Item 1</MenuItem>
                     <MenuItem onClick={this.handleClick} data={{ item: 'item 2' }}>Menu Item 2</MenuItem>
                     <SubMenu title='A SubMenu' rtl>

src/ContextMenu.js

@@ -16,6 +16,7 @@ export default class ContextMenu extends AbstractMenu {
         data: PropTypes.object,
         className: PropTypes.string,
         hideOnLeave: PropTypes.bool,
+        rtl: PropTypes.bool,
         onHide: PropTypes.func,
         onMouseLeave: PropTypes.func,
         onShow: PropTypes.func,
@@ -26,6 +27,7 @@ export default class ContextMenu extends AbstractMenu {
         className: '',
         data: {},
         hideOnLeave: false,
+        rtl: false,
         onHide() { return null; },
         onMouseLeave() { return null; },
         onShow() { return null; },
@@ -57,7 +59,9 @@ export default class ContextMenu extends AbstractMenu {
             wrapper(() => {
                 const { x, y } = this.state;
 
-                const { top, left } = this.getMenuPosition(x, y);
+                const { top, left } = this.props.rtl
+                                    ? this.getRTLMenuPosition(x, y)
+                                    : this.getMenuPosition(x, y);
 
                 wrapper(() => {
                     if (!this.menu) return;
@@ -178,6 +182,39 @@ export default class ContextMenu extends AbstractMenu {
         return menuStyles;
     }
 
+    getRTLMenuPosition = (x = 0, y = 0) => {
+        let menuStyles = {
+            top: y,
+            left: x
+        };
+
+        if (!this.menu) return menuStyles;
+
+        const { innerWidth, innerHeight } = window;
+        const rect = this.menu.getBoundingClientRect();
+
+        // Try to position the menu on the left side of the cursor
+        menuStyles.left = x - rect.width;
+
+        if (y + rect.height > innerHeight) {
+            menuStyles.top -= rect.height;
+        }
+
+        if (menuStyles.left < 0) {
+            menuStyles.left += rect.width;
+        }
+
+        if (menuStyles.top < 0) {
+            menuStyles.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
+        }
+
+        if (menuStyles.left + rect.width > innerWidth) {
+            menuStyles.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
+        }
+
+        return menuStyles;
+    }
+
     menuRef = (c) => {
         this.menu = c;
     }

tests/__snapshots__/ContextMenu.test.js.snap

@@ -9,6 +9,7 @@ exports[`ContextMenu tests does not shows when event with incorrect "id" is trig
   onHide={[Function]}
   onMouseLeave={[Function]}
   onShow={[Function]}
+  rtl={false}
   style={Object {}}
 >
   <nav
@@ -37,6 +38,7 @@ exports[`ContextMenu tests does not shows when event with incorrect "id" is trig
   onHide={[Function]}
   onMouseLeave={[Function]}
   onShow={[Function]}
+  rtl={false}
   style={Object {}}
 >
   <nav
@@ -65,6 +67,7 @@ exports[`ContextMenu tests shows when event with correct "id" is triggered 1`] =
   onHide={[Function]}
   onMouseLeave={[Function]}
   onShow={[Function]}
+  rtl={false}
   style={Object {}}
 >
   <nav
@@ -93,6 +96,7 @@ exports[`ContextMenu tests shows when event with correct "id" is triggered 2`] =
   onHide={[Function]}
   onMouseLeave={[Function]}
   onShow={[Function]}
+  rtl={false}
   style={Object {}}
 >
   <nav