add heightCacheDict remove

wextech · Aug 8, 2017 · 430acb9 · 430acb9
1 parent ea8eb7a
commit 430acb9
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 53 deletions.
diff --git a/example/InsertIcon.jsx b/example/InsertIcon.jsx
@@ -2,6 +2,10 @@ import React from "react";
 import PropTypes from "prop-types";
 
 export default class InsertIcon extends React.Component {
+  onClick = e => {
+    e.stopPropagation();
+    this.props.onClick(e, this.props.lastNode);
+  };
   render() {
     const props = this.props;
     return (
@@ -16,15 +20,16 @@ export default class InsertIcon extends React.Component {
           justifyContent: "flex-end",
           cursor: "pointer"
         }}
-        onClick={e => {
-          e.stopPropagation();
-          props.onClick(e, this.props.lastNode);
-        }}
+        onClick={this.onClick}
       >
-        <svg height={24} width={24} fill={props.lastNode ? 'green' : 'darkgray'}>
-          <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path>
+        <svg
+          height={24}
+          width={24}
+          fill={props.lastNode ? "green" : "darkgray"}
+        >
+          <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
         </svg>
       </div>
     );
   }
-}
+}
diff --git a/src/ImmutableTree/BaseImmutableTree.jsx b/src/ImmutableTree/BaseImmutableTree.jsx
@@ -4,6 +4,7 @@ import { TransitionMotion, spring, presets } from "react-motion";
 import TreeContainer from "../baseComponents/TreeContainer";
 import TreeNode from "../baseComponents/TreeNode";
 import SubImmutableTree from "./SubImmutableTree";
+import Immutable from "immutable";
 
 export default class BaseImmutableTree extends React.Component {
   willEnter() {
@@ -22,6 +23,28 @@ export default class BaseImmutableTree extends React.Component {
     };
   }
 
+  didLeave = ({ data }) => {
+    this.props.removeDict(data.nodeData);
+  };
+
+  componentWillReceiveProps(nexProps) {
+    if (nexProps.data !== this.props.data) {
+      let subtract = Immutable.Set.of(this.props.data).subtract(nexProps.data);
+      nexProps.removeDict(this.props.data);
+      subtract.forEach(nodeData => nexProps.removeDict(nodeData));
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.removeDict(this.props.data);
+    this.props.data.forEach(childData => this.props.removeDict(childData));
+  }
+
+  removeDictChildren = () => {
+    this.props.removeDict(this.props.data);
+    this.props.data.forEach(childData => this.props.removeDict(childData));
+  };
+
   render() {
     const props = this.props;
     return (
@@ -51,6 +74,7 @@ export default class BaseImmutableTree extends React.Component {
           )}
         willEnter={this.willEnter}
         willLeave={this.willLeave}
+        didLeave={this.didLeave}
       >
         {interpolatedStyles =>
           <TreeContainer
@@ -60,6 +84,7 @@ export default class BaseImmutableTree extends React.Component {
             }
             expanded={props.expanded}
             options={props.options}
+            removeDict={this.removeDictChildren}
           >
             {() =>
               interpolatedStyles.map((interpolatedStyle, index) => {
@@ -113,6 +138,7 @@ export default class BaseImmutableTree extends React.Component {
                   >
                     {nodeData.get("children")
                       ? <SubImmutableTree
+                          removeDict={props.removeDict}
                           keyField={props.keyField}
                           expanded={nodeData.get("expanded") || undefined}
                           data={nodeData.get("children")}
@@ -139,6 +165,7 @@ BaseImmutableTree.propTypes = {
   options: PropTypes.any.isRequired,
   data: PropTypes.any.isRequired,
   onClick: PropTypes.func,
+  removeDict: PropTypes.func.isRequired,
   onExpand: PropTypes.func,
   onCheck: PropTypes.func,
   levelPadding: PropTypes.string,

diff --git a/src/ImmutableTree/ImmutableTree.jsx b/src/ImmutableTree/ImmutableTree.jsx
@@ -90,9 +90,7 @@ export default class ImmutableTree extends React.Component {
   }
 
   buildHeightCacheDict(treeData, heightCacheDict) {
-    let cachedCnt = heightCacheDict[treeData];
-    if (cachedCnt == null)
-      cachedCnt = this.calcTreeDisplayNodeCnt(treeData, heightCacheDict);
+    let cachedCnt = this.calcTreeDisplayNodeCnt(treeData, heightCacheDict);
     heightCacheDict[treeData] = cachedCnt;
     return heightCacheDict;
   }
@@ -130,11 +128,16 @@ export default class ImmutableTree extends React.Component {
     }
   }
 
+  removeDict = obj => {
+    delete this.state.heightCacheDict[obj];
+  };
+
   render() {
     const props = this.props;
     let { options, keyField } = props;
     return (
       <BaseImmutableTree
+        removeDict={this.removeDict}
         data={this.state.data}
         expanded={true}
         options={this.state.options}

diff --git a/src/ImmutableTree/SubImmutableTree.jsx b/src/ImmutableTree/SubImmutableTree.jsx
@@ -31,10 +31,12 @@ export default class SubImmutableTree extends React.Component {
       location,
       levelPadding,
       expanded,
-      heightCacheDict
+      heightCacheDict,
+      removeDict
     } = this.props;
     return (
       <BaseImmutableTree
+        removeDict={removeDict}
         levelPadding={levelPadding}
         heightCacheDict={heightCacheDict}
         data={data}
@@ -54,7 +56,8 @@ SubImmutableTree.propTypes = {
   location: PropTypes.number,
   levelPadding: PropTypes.string,
   expanded: PropTypes.bool,
-  heightCacheDict: PropTypes.object.isRequired
+  heightCacheDict: PropTypes.object.isRequired,
+  removeDict: PropTypes.func.isRequired
 };
 
 SubImmutableTree.defaultProps = {};
diff --git a/src/baseComponents/TreeContainer.jsx b/src/baseComponents/TreeContainer.jsx
@@ -3,6 +3,10 @@ import { TransitionMotion, spring } from "react-motion";
 import PropTypes from "prop-types";
 
 export default class TreeContainer extends React.Component {
+  didLeave = ({ key }) => {
+    if (key === "expanded") this.props.removeDict();
+  };
+
   render() {
     const props = this.props;
     return (
@@ -63,6 +67,7 @@ export default class TreeContainer extends React.Component {
                 ];
           }
         }}
+        didLeave={this.didLeave}
       >
         {interpolatedStyles => {
           return (
@@ -92,6 +97,7 @@ export default class TreeContainer extends React.Component {
 TreeContainer.propTypes = {
   expanded: PropTypes.bool,
   children: PropTypes.any,
+  removeDict: PropTypes.func.isRequired,
   contanierHeight: PropTypes.number.isRequired,
   levelPadding: PropTypes.string,
   options: PropTypes.any.isRequired

diff --git a/yarn.lock b/yarn.lock
@@ -1178,10 +1178,6 @@ chai@^4.1.0:
     pathval "^1.0.0"
     type-detect "^4.0.0"
 
-chain-function@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
-
 chalk@^1.1.0:
   version "1.1.3"
   resolved "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1650,10 +1646,6 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
-dom-helpers@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
-
 dom-serialize@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
@@ -3147,7 +3139,7 @@ lodash.some@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
 
-lodash@^3.10.1, lodash@^3.8.0:
+lodash@^3.8.0:
   version "3.10.1"
   resolved "http://registry.npm.taobao.org/lodash/download/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
@@ -3810,7 +3802,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-"prop-types@<= 15.5.10", prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8:
+"prop-types@<= 15.5.10", prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
   version "15.5.10"
   resolved "http://registry.npm.taobao.org/prop-types/download/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -3918,12 +3910,6 @@ react-addons-test-utils@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.0.tgz#062d36117fe8d18f3ba5e06eb33383b0b85ea5b9"
 
-react-collapse@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.npmjs.org/react-collapse/-/react-collapse-4.0.3.tgz#b96de959ed0092a43534630b599a4753dd76d543"
-  dependencies:
-    prop-types "^15.5.8"
-
 react-dom@^15.6.1:
   version "15.6.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
@@ -3948,9 +3934,9 @@ react-hot-loader@^1.3.1:
   version "2.1.0"
   resolved "https://registry.npmjs.org/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz#023d6f39bb15c97c071e9e60d00d136eac5fa0b4"
 
-react-motion@^0.5.0:
+"react-motion@<= 0.5.0":
   version "0.5.0"
-  resolved "https://registry.npmjs.org/react-motion/-/react-motion-0.5.0.tgz#1708fc2aee552900d21c1e6bed28346863e017b6"
+  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.0.tgz#1708fc2aee552900d21c1e6bed28346863e017b6"
   dependencies:
     performance-now "^0.2.0"
     prop-types "^15.5.8"
@@ -3984,16 +3970,6 @@ react-test-renderer@^15.6.1:
     fbjs "^0.8.9"
     object-assign "^4.1.0"
 
-react-transition-group@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f"
-  dependencies:
-    chain-function "^1.0.0"
-    dom-helpers "^3.2.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.5.6"
-    warning "^3.0.0"
-
 react@^15.6.1:
   version "15.6.1"
   resolved "https://registry.npmjs.org/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
@@ -4782,19 +4758,6 @@ vary@~1.1.1:
   version "1.1.1"
   resolved "http://registry.npm.taobao.org/vary/download/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
 
-velocity-animate@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/velocity-animate/-/velocity-animate-1.5.0.tgz#fc8771d8dfe1136ff02a707e10fbb0957c4b030f"
-
-"velocity-react@<= 1.3.3":
-  version "1.3.3"
-  resolved "https://registry.npmjs.org/velocity-react/-/velocity-react-1.3.3.tgz#d6d47276cfc8be2a75623879b20140ac58c1b82b"
-  dependencies:
-    lodash "^3.10.1"
-    prop-types "^15.5.8"
-    react-transition-group "^1.1.2"
-    velocity-animate "^1.4.0"
-
 verror@1.3.6:
   version "1.3.6"
   resolved "http://registry.npm.taobao.org/verror/download/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"