Context menu upgrade from v1.6.2 to v2.9.2 #1081

qili26 · 2018-01-15T21:21:01Z

Description

A few sentences describing the overall goals of the pull request's commits.

Please check if the PR fulfills these requirements

The commit message follows our guidelines: https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x")

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Other... Please describe:

What is the current behavior? (You can also link to an open issue here)
react data grid + react v16 + current react context menu v1.6.2 doesn't display context menu.

What is the new behavior?
the context menu will be displayed.

Does this PR introduce a breaking change? (check one with "x")

[x] Yes
[ ] No

If this PR contains a breaking change, please describe the impact and migration path for existing applications:

Some css has to be changed due to react context menu upgrade (breaking changes were introduced from react-contextmenu)

Original ContextMenuLayer HoC is converted to ContextMenuTrigger as a component. Hence the export (wrapper of context menu in RDG) has to be updated as well.

Other information:

amanmahajan7 · 2018-01-17T20:14:58Z

packages/react-data-grid/src/Canvas.js

@@ -48,6 +48,7 @@ const Canvas = createReactClass({
    rowScrollTimeout: PropTypes.number,
    scrollToRowIndex: PropTypes.number,
    contextMenu: PropTypes.element,
+    contextMenuId: PropTypes.string,


Does grid need to specify contextMenuId prop. id can be specified while creating contextMenu element so the context menu example can be written as

<ReactDataGrid contextMenu={<MyContextMenu id="myContextMenu" // ContextMenu ID onRowDelete={this.deleteRow} onRowInsertAbove={this.insertRowAbove} onRowInsertBelow={this.insertRowBelow} />} ....

This way contextMenuId prop does not need to pass down from ReactDataGrid to RowsContainer

Thoughts?

amanmahajan7 · 2018-01-17T20:55:10Z

packages/react-data-grid/src/RowsContainer.js

 class RowsContainer extends React.Component {
  constructor(props) {
    super(props);
    this.plugins = props.window ? props.window.ReactDataGridPlugins : window.ReactDataGridPlugins;
    this.hasContextMenu = this.hasContextMenu.bind(this);
    this.renderRowsWithContextMenu = this.renderRowsWithContextMenu.bind(this);
-    this.getContextMenuContainer = this.getContextMenuContainer.bind(this);
-    this.state = {ContextMenuContainer: this.getContextMenuContainer(props)};
+    this.validateContextMenu = this.validateContextMenu.bind(this);


These methods are not used as event handlers and do not need to be bound. They are used in the constructor and in the render method where this value would be correct

amanmahajan7 · 2018-01-17T21:46:16Z

packages/react-data-grid/src/Canvas.js

@@ -333,6 +334,7 @@ const Canvas = createReactClass({
          width={this.props.width}
          rows={rows}
          contextMenu={this.props.contextMenu}
+          contextMenuId={this.props.contextMenuId}


Based on the above comment contextMenuId prop can be removed from all the components

amanmahajan7 · 2018-01-17T22:05:16Z

packages/react-data-grid/src/RowsContainer.js

-    this.state = {ContextMenuContainer: this.getContextMenuContainer(props)};
+    this.validateContextMenu = this.validateContextMenu.bind(this);
+
+    this.validateContextMenu();


I wonder if constructor is the right place for validation. Did not find any recommendation on where to throw the errors but I think render method would probably be a better place. It is recommended to avoid any side effects in constructor
https://reactjs.org/docs/react-component.html#constructor

render() { if (this.hasContextMenu()) { if (!this.plugins) { throw new Error('...') } return this.renderRowsWithContextMenu(); } return <SimpleRowsContainer {...this.props} />; }

@malonecj @diogofcunha thoughts?

@amanmahajan7 we shouldn't add any side effects in the constructor even when not using react, creating a new object should never affect other parts of an application, you are correct, in react the constructor is used only to set the initial state

amanmahajan7 · 2018-01-17T22:10:13Z

packages/react-data-grid/src/RowsContainer.js

+export const getNewContextMenuProps = ({ contextMenuId, rowIdx, idx }) => ({
+  rowIdx, idx, id: contextMenuId || DEFAULT_CONTEXT_MENU_ID
+});
+
 class RowsContainer extends React.Component {
  constructor(props) {
    super(props);
    this.plugins = props.window ? props.window.ReactDataGridPlugins : window.ReactDataGridPlugins;


This is an old code but is there a use case of props.window? I wonder if anyone is actually using it, I do not think it can even be populated. This can be cleaned up (probably in a separate PR)

https://github.com/adazzle/react-data-grid/blob/master/packages/react-data-grid/src/Canvas.js#L284

@amanmahajan7 can it be server side rendering?
I think this was added back in the days due to IE8 support problems, having the context menu added directly would break IE8 apart

I am not sure but that does seem like a workaround for SSR. We can revisit this code once RDG officially supports server side rendering.

amanmahajan7 · 2018-01-17T22:15:57Z

packages/react-data-grid/src/__tests__/RowsContainer.spec.js

+
+    it('should throw exception for no context menu plugin', () => {
+      const newProp = Object.assign({}, props, { window: {}});
+      try {


toThrow/toThrowError can be used instead

expect(shallow(<RowsContainer {...newProp} />)).toThrow()

qili26 · 2018-01-19T21:39:10Z

@amanmahajan7
Updated, could you take another look?

amanmahajan7 · 2018-01-20T00:40:36Z

packages/react-data-grid/src/RowsContainer.js

  }

  render() {
-    return this.hasContextMenu() ? this.renderRowsWithContextMenu() : <SimpleRowsContainer {...this.props} />;
+    return this.getRowsContainer();


getRowsContainer method is probably not required and the render method can just return the container

render () { if (this.hasContextMenu()) { this.validatePlugin(); return this.renderRowsWithContextMenu(); } return <SimpleRowsContainer {...this.props} />; }

amanmahajan7

Just a small change, rest looks good

amanmahajan7

Looks good to me

amanmahajan7 · 2018-01-29T18:37:52Z

This upgrade is also required to support React 16 as react-contextmenu 1.6.x is using the deprecated APIs
https://github.com/vkbansal/react-contextmenu/releases/tag/v2.5.0

hutber · 2018-01-31T12:08:24Z

Should we fix the conflicts on this and get it merged? Makes sense to merge it

amanmahajan7 · 2018-01-31T21:47:10Z

@hutber ContextMenu 2.0 has a breaking change which is preventing us from merging this PR.

sontek · 2018-02-05T13:40:48Z

What is the breaking change? Can this PR address it?

qili26 · 2018-02-05T14:49:07Z

@sontek
see PR description.
or you can reference this link https://github.com/adazzle/react-data-grid/pull/1081/files#diff-84ed4e0dd4f5ae1391f59e46c9c02175R11

sontek · 2018-02-13T15:45:04Z

@qili26 Ahh, is that all there is? I understand that upgrade is backwards incompatible but I think a version bump would suffice. Or are you taking extra steps to make it compatible?

qili26 · 2018-02-14T18:53:32Z

@sontek
I think it would be great to update this with the react v16 update together, and that's what's this PR for.
#1116

Qi_Li and others added 4 commits December 28, 2017 14:24

upgrade react context menu to v2.9

bbce3f9

Merge branch 'master' into ql-context-menu-upgrade

6ff153f

add unit tests

874819f

update unit test

c9f0e55

qili26 requested review from malonecj, amanmahajan7 and diogofcunha January 16, 2018 16:51

amanmahajan7 reviewed Jan 17, 2018

View reviewed changes

remove unecessary id set

c792018

amanmahajan7 reviewed Jan 20, 2018

View reviewed changes

qili added 2 commits January 22, 2018 09:50

remove unnecessary function

5045270

update migration doc

19c825d

amanmahajan7 approved these changes Jan 22, 2018

View reviewed changes

catchup master

c82e21a

utajum mentioned this pull request Feb 2, 2018

add PropTypes as a separate package #954

Merged

3 tasks

amanmahajan7 mentioned this pull request Feb 7, 2018

React 16 upgrade #1116

Merged

16 tasks

malonecj changed the base branch from master to next February 8, 2018 12:52

malonecj merged commit 31c9b1a into next Feb 8, 2018

This was referenced Jun 11, 2018

Issue 814 #910

Closed

Context Menus for multiple grids on same page conflict #814

Closed

qili26 deleted the ql-context-menu-upgrade branch December 4, 2018 02:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Context menu upgrade from v1.6.2 to v2.9.2 #1081

Context menu upgrade from v1.6.2 to v2.9.2 #1081

qili26 commented Jan 15, 2018 •

edited

Loading

amanmahajan7 Jan 17, 2018

amanmahajan7 Jan 17, 2018

amanmahajan7 Jan 17, 2018

amanmahajan7 Jan 17, 2018

diogofcunha Jan 18, 2018

amanmahajan7 Jan 17, 2018

diogofcunha Jan 18, 2018

amanmahajan7 Jan 22, 2018

amanmahajan7 Jan 17, 2018

qili26 commented Jan 19, 2018

amanmahajan7 Jan 20, 2018

amanmahajan7 left a comment

amanmahajan7 left a comment

amanmahajan7 commented Jan 29, 2018

hutber commented Jan 31, 2018

amanmahajan7 commented Jan 31, 2018

sontek commented Feb 5, 2018

qili26 commented Feb 5, 2018

sontek commented Feb 13, 2018

qili26 commented Feb 14, 2018

Context menu upgrade from v1.6.2 to v2.9.2 #1081

Context menu upgrade from v1.6.2 to v2.9.2 #1081

Conversation

qili26 commented Jan 15, 2018 • edited Loading

Description

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qili26 commented Jan 19, 2018

Choose a reason for hiding this comment

amanmahajan7 left a comment

Choose a reason for hiding this comment

amanmahajan7 left a comment

Choose a reason for hiding this comment

amanmahajan7 commented Jan 29, 2018

hutber commented Jan 31, 2018

amanmahajan7 commented Jan 31, 2018

sontek commented Feb 5, 2018

qili26 commented Feb 5, 2018

sontek commented Feb 13, 2018

qili26 commented Feb 14, 2018

qili26 commented Jan 15, 2018 •

edited

Loading