From e2d9eea54d562df5a8c5cb8fb37b60d2fd166933 Mon Sep 17 00:00:00 2001 From: William Hilton Date: Fri, 5 Oct 2018 12:11:27 -0400 Subject: [PATCH 01/43] publish missing index.d.ts file (fix #236) --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 7fe2f710..c34222b5 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "files": [ "es6", "modules", - "dist" + "dist", + "src/index.d.ts" ], "scripts": { "lint": "eslint ./src ./examples", From 1c976d6c14470e7793167f974a3e3f443da4d5c1 Mon Sep 17 00:00:00 2001 From: Vivek Kumar Bansal Date: Wed, 10 Oct 2018 18:51:57 +0530 Subject: [PATCH 02/43] 2.9.4 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index e686e1fc..a9cea8f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-contextmenu", - "version": "2.9.3", + "version": "2.9.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index c34222b5..95ba4b20 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-contextmenu", - "version": "2.9.3", + "version": "2.9.4", "description": "Context Menu implemented in React", "main": "modules/index.js", "module": "es6/index.js", From e869e36299dbcfd1807d68b9af08d461eea0d38d Mon Sep 17 00:00:00 2001 From: Tryggvi Gylfason Date: Wed, 17 Oct 2018 12:10:02 +0200 Subject: [PATCH 03/43] Add rtl prop to the ContextMenu Component This allows the ContextMenu to render on the left side of the cursor. Useful to RTL directional pages --- examples/RTLSubMenu.js | 4 +- src/ContextMenu.js | 39 +++++++++++++++++++- tests/__snapshots__/ContextMenu.test.js.snap | 4 ++ 3 files changed, 44 insertions(+), 3 deletions(-) diff --git a/examples/RTLSubMenu.js b/examples/RTLSubMenu.js index 610c0eb0..65392d14 100644 --- a/examples/RTLSubMenu.js +++ b/examples/RTLSubMenu.js @@ -23,7 +23,7 @@ export default class RTLSubMenu extends Component { render() { return (
-

Right-to-Left Submenu Menu

+

Right-to-Left ContextMenu and Submenu Menu

This demos usage of Right-to-Left submenus.

right click to see the menu
@@ -31,7 +31,7 @@ export default class RTLSubMenu extends Component {
{this.state.logs.map((log, i) =>

{log}

)}
- + Menu Item 1 Menu Item 2 diff --git a/src/ContextMenu.js b/src/ContextMenu.js index fbccb904..0610c958 100644 --- a/src/ContextMenu.js +++ b/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; } diff --git a/tests/__snapshots__/ContextMenu.test.js.snap b/tests/__snapshots__/ContextMenu.test.js.snap index 6ecbd22d..ee944073 100644 --- a/tests/__snapshots__/ContextMenu.test.js.snap +++ b/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 {}} >