chore(xod-client): upgrade to React v16.2

update incopmatible deps;
ditch our forks of `react-hotkeys` and `react-collapsible` in favor of upstream versions

packages/xod-client-browser/package.json

@@ -11,11 +11,11 @@
     "babel-polyfill": "^6.16.0",
     "prop-types": "^15.5.10",
     "ramda": "^0.24.1",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
+    "react": "^16.2",
+    "react-dom": "^16.2",
     "react-event-listener": "^0.4.5",
     "react-fa": "^5.0.0",
-    "react-hotkeys": "git+https://github.com/xodio/react-hotkeys.git#npm",
+    "react-hotkeys": "^0.10.0",
     "react-redux": "^4.4.5",
     "react-skylight": "git+https://github.com/xodio/react-skylight.git",
     "redux": "^3.0.5",

packages/xod-client-electron/package.json

@@ -27,11 +27,11 @@
     "prop-types": "^15.5.10",
     "ramda": "^0.24.1",
     "rc-progress": "^2.1.2",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
+    "react": "^16.2",
+    "react-dom": "^16.2",
     "react-event-listener": "^0.4.5",
     "react-fa": "^5.0.0",
-    "react-hotkeys": "git+https://github.com/xodio/react-hotkeys.git#npm",
+    "react-hotkeys": "^0.10.0",
     "react-redux": "^4.4.5",
     "react-skylight": "git+https://github.com/xodio/react-skylight.git",
     "redux": "^3.0.5",

packages/xod-client/package.json

@@ -34,24 +34,24 @@
     "rc-menu": "^5.0.10",
     "rc-progress": "^2.1.2",
     "rc-switch": "^1.4.2",
-    "react": "^15.4.2",
+    "react": "^16.2",
     "react-autolink-text2": "git+https://github.com/xodio/react-autolink-text.git#npm",
     "react-autosuggest": "git+https://github.com/xodio/react-autosuggest.git#bc6ab71a2ec47ad5fbce5d13ff6a572942ea765e",
     "react-click-outside": "^2.2.0",
     "react-codemirror": "^1.0.0",
-    "react-collapsible": "git+https://github.com/xodio/react-collapsible.git#npm",
+    "react-collapsible": "^2.0.3",
     "react-custom-scroll": "^2.0.0",
     "react-dnd": "^2.5.1",
     "react-dnd-html5-backend": "^2.5.1",
-    "react-dom": "^15.4.2",
+    "react-dom": "^16.2",
     "react-event-listener": "^0.4.5",
     "react-fa": "^5.0.0",
     "react-highlight-words": "^0.8.1",
-    "react-hotkeys": "git+https://github.com/xodio/react-hotkeys.git#npm",
+    "react-hotkeys": "^0.10.0",
     "react-infinite": "^0.12.1",
     "react-redux": "^4.0.6",
     "react-skylight": "git+https://github.com/xodio/react-skylight.git",
-    "react-sortable-hoc": "0.0.7",
+    "react-sortable-hoc": "0.6.7",
     "react-split-pane": "^0.1.68",
     "recompose": "^0.25.0",
     "redux": "^3.0.5",

packages/xod-client/src/editor/containers/DragLayer.jsx

@@ -21,51 +21,51 @@ const layerStyles = {
   height: '100%',
 };
 
-function getItemStyles({ initialClientOffset, initialSourceClientOffset, currentOffset }) {
-  if (!initialClientOffset || !initialSourceClientOffset || !currentOffset) {
+class CustomDragLayer extends React.PureComponent {
+  getItemStyles() {
+    const { initialClientOffset, initialSourceClientOffset, currentOffset } = this.props;
+
+    if (!initialClientOffset || !initialSourceClientOffset || !currentOffset) {
+      return {
+        display: 'none',
+      };
+    }
+
+    const offsetFromSourceRoot = subtractPoints(initialClientOffset, initialSourceClientOffset);
+    const { x, y } = addPoints(offsetFromSourceRoot, currentOffset);
+
     return {
-      display: 'none',
+      transform: `translate(${x}px, ${y}px)`,
     };
   }
 
-  const offsetFromSourceRoot = subtractPoints(initialClientOffset, initialSourceClientOffset);
-  const { x, y } = addPoints(offsetFromSourceRoot, currentOffset);
-
-  return {
-    transform: `translate(${x}px, ${y}px)`,
-  };
-}
-
-const renderPatchAsNode = (patchPath, project) => R.compose(
-  R.map(R.compose(
-    props => (
-      <Node {...props} isDragged noEvents />
-    ),
-    patchToNodeProps
-  )),
-  XP.getPatchByPath(patchPath)
-)(project);
-
-const CustomDragLayer = ({
-  item,
-  initialClientOffset,
-  initialSourceClientOffset,
-  currentOffset,
-  isDragging,
-  project,
-}) => {
-  if (!isDragging) {
-    return null;
+  renderPatchAsNode() {
+    return R.compose(
+      maybeRenderedPatch => maybeRenderedPatch.getOrElse(null),
+      R.map(R.compose(
+        props => (
+          <Node {...props} isDragged noEvents />
+        ),
+        patchToNodeProps
+      )),
+      XP.getPatchByPath(this.props.item.patchPath)
+    )(this.props.project);
   }
 
-  return (
-    <div style={layerStyles}>
-      <div style={getItemStyles({ initialClientOffset, initialSourceClientOffset, currentOffset })}>
-        {renderPatchAsNode(item.patchPath, project).getOrElse(null)}
+  render() {
+    if (!this.props.isDragging) {
+      return null;
+    }
+
+    return (
+      <div style={layerStyles}>
+        <div style={this.getItemStyles()}>
+          {this.renderPatchAsNode()}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 const pointPropType = PropTypes.shape({
   x: PropTypes.number.isRequired,

packages/xod-client/src/project/components/PopupProjectPreferences.jsx

@@ -1,14 +1,25 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as XP from 'xod-project';
 import sanctuaryPropType from '../../utils/sanctuaryPropType';
 import PopupForm from '../../utils/components/PopupForm';
 
+const getInitialState = (project) => {
+  const version = XP.getProjectVersion(project);
+
+  return {
+    license: XP.getProjectLicense(project),
+    version,
+    dirtyVersion: version,
+    description: XP.getProjectDescription(project),
+  };
+};
+
 class PopupProjectPreferences extends React.Component {
   constructor(props) {
     super(props);
-    this.updateState(props);
+    this.state = getInitialState(props.project);
 
-    this.updateState = this.updateState.bind(this);
     this.onUpdateClicked = this.onUpdateClicked.bind(this);
     this.onLicenseChange = this.onLicenseChange.bind(this);
     this.onVersionChange = this.onVersionChange.bind(this);
@@ -17,7 +28,7 @@ class PopupProjectPreferences extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.updateState(nextProps);
+    this.setState(getInitialState(nextProps.project));
   }
 
   onUpdateClicked() {
@@ -34,17 +45,6 @@ class PopupProjectPreferences extends React.Component {
     this.setState({ description: event.target.value });
   }
 
-  updateState(props) {
-    const version = XP.getProjectVersion(props.project);
-
-    this.state = {
-      license: XP.getProjectLicense(props.project),
-      version,
-      dirtyVersion: version,
-      description: XP.getProjectDescription(props.project),
-    };
-  }
-
   commitVersionChange() {
     if (XP.isValidVersion(this.state.dirtyVersion)) {
       this.setState({ version: this.state.dirtyVersion });
@@ -101,10 +101,10 @@ class PopupProjectPreferences extends React.Component {
 }
 
 PopupProjectPreferences.propTypes = {
-  isVisible: React.PropTypes.bool,
+  isVisible: PropTypes.bool,
   project: sanctuaryPropType(XP.Project), // eslint-disable-line react/no-unused-prop-types
-  onChange: React.PropTypes.func,
-  onClose: React.PropTypes.func,
+  onChange: PropTypes.func,
+  onClose: PropTypes.func,
 };
 
 PopupProjectPreferences.defaultProps = {

packages/xod-client/src/project/components/PopupPublishProject.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Icon from 'react-fa';
 import * as XP from 'xod-project';
 
@@ -64,13 +65,13 @@ const PopupPublishProject = ({
 };
 
 PopupPublishProject.propTypes = {
-  isVisible: React.PropTypes.bool,
-  isPublishing: React.PropTypes.bool,
-  user: React.PropTypes.object,
+  isVisible: PropTypes.bool,
+  isPublishing: PropTypes.bool,
+  user: PropTypes.object,
   project: sanctuaryPropType(XP.Project),
-  onPublish: React.PropTypes.func,
-  onRequestToEditPreferences: React.PropTypes.func,
-  onClose: React.PropTypes.func,
+  onPublish: PropTypes.func,
+  onRequestToEditPreferences: PropTypes.func,
+  onClose: PropTypes.func,
 };
 
 PopupPublishProject.defaultProps = {