diff --git a/packages/xod-client-browser/package.json b/packages/xod-client-browser/package.json index 10886527..0088c8e6 100644 --- a/packages/xod-client-browser/package.json +++ b/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", diff --git a/packages/xod-client-electron/package.json b/packages/xod-client-electron/package.json index ce400c48..995fcd2b 100644 --- a/packages/xod-client-electron/package.json +++ b/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", diff --git a/packages/xod-client/package.json b/packages/xod-client/package.json index 60489d86..a082d8cb 100644 --- a/packages/xod-client/package.json +++ b/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", diff --git a/packages/xod-client/src/editor/containers/DragLayer.jsx b/packages/xod-client/src/editor/containers/DragLayer.jsx index 7ff90c4b..6e8478d6 100644 --- a/packages/xod-client/src/editor/containers/DragLayer.jsx +++ b/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 => ( - - ), - 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 => ( + + ), + patchToNodeProps + )), + XP.getPatchByPath(this.props.item.patchPath) + )(this.props.project); } - return ( -
-
- {renderPatchAsNode(item.patchPath, project).getOrElse(null)} + render() { + if (!this.props.isDragging) { + return null; + } + + return ( +
+
+ {this.renderPatchAsNode()} +
-
- ); -}; + ); + } +} const pointPropType = PropTypes.shape({ x: PropTypes.number.isRequired, diff --git a/packages/xod-client/src/project/components/PopupProjectPreferences.jsx b/packages/xod-client/src/project/components/PopupProjectPreferences.jsx index dded0e52..ab0e2524 100644 --- a/packages/xod-client/src/project/components/PopupProjectPreferences.jsx +++ b/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 = { diff --git a/packages/xod-client/src/project/components/PopupPublishProject.jsx b/packages/xod-client/src/project/components/PopupPublishProject.jsx index 3f47c5af..47773200 100644 --- a/packages/xod-client/src/project/components/PopupPublishProject.jsx +++ b/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 = {