diff --git a/packages/builder/package.json b/packages/builder/package.json index c9fd894df..e39464d6f 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -47,6 +47,7 @@ "react-transition-group": "^4.3.0", "reactstrap": "^8.4.1", "redux": "^4.0.5", + "reselect": "^4.0.0", "serialize-javascript": "^3.0.0", "slugify": "^1.3.6", "uuid4": "^1.1.4" diff --git a/packages/builder/src/components/Tree/components/DropTarget/index.js b/packages/builder/src/components/Tree/components/DropTarget/index.js index 49ac606ad..6f99eb015 100644 --- a/packages/builder/src/components/Tree/components/DropTarget/index.js +++ b/packages/builder/src/components/Tree/components/DropTarget/index.js @@ -1,8 +1,10 @@ import React from 'react' import { connect } from 'react-redux' +import { createSelectorCreator, defaultMemoize } from 'reselect' + import { DropTarget } from 'react-dnd' import classnames from 'classnames' -import { flow } from 'lodash' +import { isEqual, flow } from 'lodash' import { parents } from '../../../../logic/tree' @@ -62,13 +64,28 @@ const collect = (connect, monitor) => ({ validTarget: monitor.canDrop() && monitor.isOver({ shallow: true }), }) +// Redux integration ----------------------------------------------------------- + +const getParents = (state, props) => + parents(props.id, state.components) + +const createDeepEqualSelector = createSelectorCreator( + defaultMemoize, + isEqual +) + +const makeMapStateToProps = () => { + const parentSelector = createDeepEqualSelector( + [getParents], parents => parents, + ) + const mapStateToProps = (state, props) => ({ + parentIds: parentSelector(state, props) + }) + return mapStateToProps +} + // Make the component a DropTarget export default flow( DropTarget('node', targetSpec, collect), - connect((state, props) => ({ - parentIds: parents( - props.id, - state.components - ) - })), + connect(makeMapStateToProps), )(TreeDropTarget) diff --git a/yarn.lock b/yarn.lock index 248383566..5d2d02164 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14884,6 +14884,11 @@ requires-port@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" +reselect@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7" + integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA== + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"