react-infinity-menu - npm Package Compare versions

Comparing version 2.2.5 to 2.3.0

dist/infinity-menu.js

@@ -31,6 +31,2 @@ "use strict";
 
-var _deepCopy = require("deep-copy");
-
-var _deepCopy2 = _interopRequireDefault(_deepCopy);
-
 /*
@@ -95,7 +91,3 @@ *  @class InfinityMenu
 		value: function shouldComponentUpdate(nextProps, nextState) {
-			if (this.props.tree !== nextProps.tree) {
-				return true;
-			}
-
-			if (this.state.search.isSearching && this.state.search.isSearching === nextState.search.isSearching && this.state.search.searchInput === nextState.search.searchInput) {
+			if (this.state.search.isSearching && nextState.search.searchInput && this.state.search.searchInput === nextState.search.searchInput) {
 				return false;
@@ -151,4 +143,4 @@ }
 	}, {
-		key: "findFilted",
-		value: function findFilted(trees, node, key) {
+		key: "findFiltered",
+		value: function findFiltered(trees, node, key) {
 			var _this = this;
@@ -159,5 +151,8 @@
 				if (nodeMatchesSearchFilter) {
+					node.isSearchDisplay = true;
 					trees[key] = node;
 					return trees;
 				} else {
+					node.isSearchDisplay = false;
+					trees[key] = node;
 					return trees;
@@ -167,10 +162,18 @@ }
 				var filteredSubFolder = node.children.length ? node.children.reduce(function (p, c, k) {
-					return _this.findFilted(p, c, k);
+					return _this.findFiltered(p, c, k);
 				}, []) : [];
-				if (filteredSubFolder.length !== 0) {
-					node.isOpen = true;
+				var shouldDisplay = filteredSubFolder.some(function (child) {
+					return child.isSearchDisplay;
+				});
+
+				if (shouldDisplay) {
+					node.isSearchOpen = true;
 					node.children = filteredSubFolder;
+					node.isSearchDisplay = true;
 					trees[key] = node;
 					return trees;
 				} else {
+					node.isSearchOpen = false;
+					node.isSearchDisplay = false;
+					trees[key] = node;
 					return trees;
@@ -197,2 +200,4 @@ }
 			var currCustomComponent = typeof curr.customComponent === 'string' ? this.props.customComponentMappings[curr.customComponent] : curr.customComponent;
+			var isSearching = this.state.search.isSearching && this.state.search.searchInput;
+			var shouldDisplay = isSearching && curr.isSearchDisplay || !isSearching;
 			/*the leaves*/
@@ -202,34 +207,36 @@ if (!curr.children) {
 				curr.keyPath = keyPath;
-				if (curr.customComponent) {
-					var componentProps = {
-						key: itemKey,
-						onMouseDown: this.props.onLeafMouseDown,
-						onMouseUp: this.props.onLeafMouseUp,
-						onClick: this.props.onLeafMouseClick,
-						name: curr.name,
-						icon: curr.icon,
-						data: curr
-					};
-					prevs.push(_react2["default"].createElement(currCustomComponent, componentProps));
-				} else {
-					prevs.push(_react2["default"].createElement(
-						"li",
-						{ key: itemKey,
-							className: "infinity-menu-leaf-container",
-							onMouseDown: function (e) {
-								return _this2.props.onLeafMouseDown ? _this2.props.onLeafMouseDown(e, curr) : null;
+				if (shouldDisplay) {
+					if (curr.customComponent) {
+						var componentProps = {
+							key: itemKey,
+							onMouseDown: this.props.onLeafMouseDown,
+							onMouseUp: this.props.onLeafMouseUp,
+							onClick: this.props.onLeafMouseClick,
+							name: curr.name,
+							icon: curr.icon,
+							data: curr
+						};
+						prevs.push(_react2["default"].createElement(currCustomComponent, componentProps));
+					} else {
+						prevs.push(_react2["default"].createElement(
+							"li",
+							{ key: itemKey,
+								className: "infinity-menu-leaf-container",
+								onMouseDown: function (e) {
+									return _this2.props.onLeafMouseDown ? _this2.props.onLeafMouseDown(e, curr) : null;
+								},
+								onMouseUp: function (e) {
+									return _this2.props.onLeafMouseUp ? _this2.props.onLeafMouseUp(e, curr) : null;
+								},
+								onClick: function (e) {
+									return _this2.props.onLeafMouseClick ? _this2.props.onLeafMouseClick(e, curr) : null;
+								}
 							},
-							onMouseUp: function (e) {
-								return _this2.props.onLeafMouseUp ? _this2.props.onLeafMouseUp(e, curr) : null;
-							},
-							onClick: function (e) {
-								return _this2.props.onLeafMouseClick ? _this2.props.onLeafMouseClick(e, curr) : null;
-							}
-						},
-						_react2["default"].createElement(
-							"span",
-							null,
-							curr.name
-						)
-					));
+							_react2["default"].createElement(
+								"span",
+								null,
+								curr.name
+							)
+						));
+					}
 				}
@@ -242,26 +249,28 @@ return prevs;
 					var nodeName = curr.name;
-					if (!curr.isOpen) {
-						if (curr.customComponent) {
-							var nodeProps = {
-								onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
-								name: nodeName,
-								isOpen: curr.isOpen,
-								isSearching: false,
-								data: curr,
-								key: key
-							};
-							prevs.push(_react2["default"].createElement(currCustomComponent, nodeProps));
-						} else {
-							prevs.push(_react2["default"].createElement(
-								"div",
-								{ key: key,
+					if (!curr.isOpen && !isSearching || !curr.isSearchOpen && isSearching) {
+						if (shouldDisplay) {
+							if (curr.customComponent) {
+								var nodeProps = {
 									onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
-									className: "infinity-menu-node-container"
-								},
-								_react2["default"].createElement(
-									"label",
-									null,
-									nodeName
-								)
-							));
+									name: nodeName,
+									isOpen: curr.isOpen,
+									isSearching: false,
+									data: curr,
+									key: key
+								};
+								prevs.push(_react2["default"].createElement(currCustomComponent, nodeProps));
+							} else {
+								prevs.push(_react2["default"].createElement(
+									"div",
+									{ key: key,
+										onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
+										className: "infinity-menu-node-container"
+									},
+									_react2["default"].createElement(
+										"label",
+										null,
+										nodeName
+									)
+								));
+							}
 						}
@@ -271,44 +280,44 @@ return prevs;
 						var openedNode = [];
-						var isSearching = this.state.search.isSearching && this.state.search.searchInput;
-
-						if (curr.customComponent) {
-							var nodeProps = {
-								onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
-								name: nodeName,
-								isOpen: curr.isOpen,
-								data: curr,
-								key: key,
-								isSearching: isSearching
-							};
-							openedNode.push(_react2["default"].createElement(currCustomComponent, nodeProps));
-						} else {
-							openedNode.push(_react2["default"].createElement(
-								"div",
-								{ key: key,
+						if (shouldDisplay) {
+							if (curr.customComponent) {
+								var nodeProps = {
 									onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
-									className: "infinity-menu-node-container"
-								},
-								_react2["default"].createElement(
-									"label",
-									null,
-									nodeName
-								)
-							));
-						}
+									name: nodeName,
+									isOpen: curr.isOpen,
+									data: curr,
+									key: key,
+									isSearching: isSearching
+								};
+								openedNode.push(_react2["default"].createElement(currCustomComponent, nodeProps));
+							} else {
+								openedNode.push(_react2["default"].createElement(
+									"div",
+									{ key: key,
+										onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
+										className: "infinity-menu-node-container"
+									},
+									_react2["default"].createElement(
+										"label",
+										null,
+										nodeName
+									)
+								));
+							}
 
-						var childrenList = curr.children.length ? curr.children.reduce(function (p, c, k) {
-							if (c === undefined || k === undefined) {
-								return p;
+							var childrenList = curr.children.length ? curr.children.reduce(function (p, c, k) {
+								if (c === undefined || k === undefined) {
+									return p;
+								}
+								return _this2.setDisplayTree(tree, p, c, keyPath + ".children." + k);
+							}, []) : [];
+
+							if (childrenList.length > 0) {
+								openedNode.push(_react2["default"].createElement(
+									"ul",
+									{ key: "infinity-menu-children-list" + currLevel },
+									childrenList
+								));
 							}
-							return _this2.setDisplayTree(tree, p, c, keyPath + ".children." + k);
-						}, []) : [];
-
-						if (childrenList.length > 0) {
-							openedNode.push(_react2["default"].createElement(
-								"ul",
-								{ key: "infinity-menu-children-list" + currLevel },
-								childrenList
-							));
+							prevs.push(openedNode);
 						}
-						prevs.push(openedNode);
 						return prevs;
@@ -349,3 +358,3 @@ }
 
-			var tree = (0, _deepCopy2["default"])(this.props.tree);
+			var tree = this.props.tree;
 
@@ -357,3 +366,3 @@ /*find filtered folders base on search, if there no search, return all*/
 				}
-				return _this3.findFilted(prev, curr, key);
+				return _this3.findFiltered(prev, curr, key);
 			}, []) : tree;
@@ -360,0 +369,0 @@

package.json

 {
   "name": "react-infinity-menu",
-  "version": "2.2.5",
+  "version": "2.3.0",
   "description": "An unlimited deep side menu",
@@ -23,3 +23,2 @@ "main": "./dist/infinity-menu.js",
   "dependencies": {
-    "deep-copy": "^1.1.0",
     "nested-objects": "0.0.2"
@@ -26,0 +25,0 @@ },

src/infinity-menu.js

 import React from "react";
 import SearchInput from "./search-input";
 import NestedObjects from "nested-objects";
-import dcopy from "deep-copy";
 
@@ -52,9 +51,5 @@ /*
 	shouldComponentUpdate(nextProps, nextState) {
-		if (this.props.tree !== nextProps.tree) {
-			return true;
-		}
-
-		if (this.state.search.isSearching &&
-			this.state.search.isSearching === nextState.search.isSearching &&
-			this.state.search.searchInput === nextState.search.searchInput) {
+		if (this.state.search.isSearching
+			 && nextState.search.searchInput
+			 && this.state.search.searchInput === nextState.search.searchInput) {
 			return false;
@@ -101,6 +96,7 @@ }
 
-	findFilted(trees, node, key) {
+	findFiltered(trees, node, key) {
 		if (!node.children) {
 			const nodeMatchesSearchFilter = this.props.filter(node, this.state.search.searchInput);
 			if (nodeMatchesSearchFilter) {
+				node.isSearchDisplay = true;
 				trees[key] = node;
@@ -110,2 +106,4 @@ return trees;
 			else {
+				node.isSearchDisplay = false;
+				trees[key] = node;
 				return trees;
@@ -116,7 +114,10 @@ }
 			const filteredSubFolder = node.children.length ? node.children.reduce((p, c, k) => {
-				return this.findFilted(p, c, k);
+				return this.findFiltered(p, c, k);
 			}, []) : [];
-			if (filteredSubFolder.length !== 0) {
-				node.isOpen = true;
+			const shouldDisplay = filteredSubFolder.some(child => child.isSearchDisplay);
+
+			if (shouldDisplay) {
+				node.isSearchOpen = true;
 				node.children = filteredSubFolder;
+				node.isSearchDisplay = true;
 				trees[key] = node;
@@ -126,2 +127,5 @@ return trees;
 			else {
+				node.isSearchOpen = false;
+				node.isSearchDisplay = false;
+				trees[key] = node;
 				return trees;
@@ -144,2 +148,4 @@ }
 		const currCustomComponent = typeof curr.customComponent === 'string' ? this.props.customComponentMappings[curr.customComponent] : curr.customComponent;
+		const isSearching = this.state.search.isSearching && this.state.search.searchInput;
+		const shouldDisplay = (isSearching && curr.isSearchDisplay) || !isSearching;
 		/*the leaves*/
@@ -149,26 +155,28 @@ if (!curr.children) {
 			curr.keyPath = keyPath;
-			if (curr.customComponent) {
-				const componentProps = {
-					key: itemKey,
-					onMouseDown: this.props.onLeafMouseDown,
-					onMouseUp: this.props.onLeafMouseUp,
-					onClick: this.props.onLeafMouseClick,
-					name: curr.name,
-					icon: curr.icon,
-					data: curr
-				};
-				prevs.push(React.createElement(currCustomComponent, componentProps));
+			if (shouldDisplay) {
+				if (curr.customComponent) {
+					const componentProps = {
+						key: itemKey,
+						onMouseDown: this.props.onLeafMouseDown,
+						onMouseUp: this.props.onLeafMouseUp,
+						onClick: this.props.onLeafMouseClick,
+						name: curr.name,
+						icon: curr.icon,
+						data: curr
+					};
+					prevs.push(React.createElement(currCustomComponent, componentProps));
+				}
+				else {
+					prevs.push(
+						<li key={itemKey}
+							className="infinity-menu-leaf-container"
+							onMouseDown={(e) => this.props.onLeafMouseDown ? this.props.onLeafMouseDown(e, curr) : null}
+							onMouseUp={(e) => this.props.onLeafMouseUp ? this.props.onLeafMouseUp(e, curr) : null}
+							onClick={(e) => this.props.onLeafMouseClick ? this.props.onLeafMouseClick(e, curr) : null}
+							>
+							<span>{curr.name}</span>
+						</li>
+					);
+				}
 			}
-			else {
-				prevs.push(
-					<li key={itemKey}
-						className="infinity-menu-leaf-container"
-						onMouseDown={(e) => this.props.onLeafMouseDown ? this.props.onLeafMouseDown(e, curr) : null}
-						onMouseUp={(e) => this.props.onLeafMouseUp ? this.props.onLeafMouseUp(e, curr) : null}
-						onClick={(e) => this.props.onLeafMouseClick ? this.props.onLeafMouseClick(e, curr) : null}
-						>
-						<span>{curr.name}</span>
-					</li>
-				);
-			}
 			return prevs;
@@ -180,24 +188,26 @@ }
 			const nodeName = curr.name;
-			if (!curr.isOpen) {
-				if (curr.customComponent) {
-					const nodeProps = {
-						onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
-						name: nodeName,
-						isOpen: curr.isOpen,
-						isSearching: false,
-						data: curr,
-						key
-					};
-					prevs.push(React.createElement(currCustomComponent, nodeProps));
+			if ((!curr.isOpen && !isSearching) || (!curr.isSearchOpen && isSearching)) {
+				if (shouldDisplay) {
+					if (curr.customComponent) {
+						const nodeProps = {
+							onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
+							name: nodeName,
+							isOpen: curr.isOpen,
+							isSearching: false,
+							data: curr,
+							key
+						};
+						prevs.push(React.createElement(currCustomComponent, nodeProps));
+					}
+					else {
+						prevs.push(
+							<div key={key}
+								onClick={this.onNodeClick.bind(this, tree, curr, keyPath)}
+								className="infinity-menu-node-container"
+							>
+								<label>{nodeName}</label>
+							</div>
+						);
+					}
 				}
-				else {
-					prevs.push(
-						<div key={key}
-							onClick={this.onNodeClick.bind(this, tree, curr, keyPath)}
-							className="infinity-menu-node-container"
-						>
-							<label>{nodeName}</label>
-						</div>
-					);
-				}
 				return prevs;
@@ -207,42 +217,42 @@ }
 				let openedNode = [];
-				const isSearching = this.state.search.isSearching && this.state.search.searchInput;
+				if (shouldDisplay) {
+					if (curr.customComponent) {
+						const nodeProps = {
+							onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
+							name: nodeName,
+							isOpen: curr.isOpen,
+							data: curr,
+							key,
+							isSearching
+						};
+						openedNode.push(React.createElement(currCustomComponent, nodeProps));
+					}
+					else {
+						openedNode.push(
+							<div key={key}
+								onClick={this.onNodeClick.bind(this, tree, curr, keyPath)}
+								className="infinity-menu-node-container"
+							>
+								<label>{nodeName}</label>
+							</div>
+						);
+					}
 
-				if (curr.customComponent) {
-					const nodeProps = {
-						onClick: this.onNodeClick.bind(this, tree, curr, keyPath),
-						name: nodeName,
-						isOpen: curr.isOpen,
-						data: curr,
-						key,
-						isSearching
-					};
-					openedNode.push(React.createElement(currCustomComponent, nodeProps));
-				}
-				else {
-					openedNode.push(
-						<div key={key}
-							onClick={this.onNodeClick.bind(this, tree, curr, keyPath)}
-							className="infinity-menu-node-container"
-						>
-							<label>{nodeName}</label>
-						</div>
-					);
-				}
+					const childrenList = curr.children.length ? curr.children.reduce((p, c, k) => {
+						if (c === undefined || k === undefined) {
+							return p;
+						}
+						return this.setDisplayTree(tree, p, c, keyPath + ".children." + k);
+					}, []) : [];
 
-				const childrenList = curr.children.length ? curr.children.reduce((p, c, k) => {
-					if (c === undefined || k === undefined) {
-						return p;
+
+					if (childrenList.length > 0) {
+						openedNode.push(
+							<ul key={"infinity-menu-children-list" + currLevel}>
+								{childrenList}
+							</ul>
+						);
 					}
-					return this.setDisplayTree(tree, p, c, keyPath + ".children." + k);
-				}, []) : [];
-
-
-				if (childrenList.length > 0) {
-					openedNode.push(
-						<ul key={"infinity-menu-children-list" + currLevel}>
-							{childrenList}
-						</ul>
-					);
+					prevs.push(openedNode);
 				}
-				prevs.push(openedNode);
 				return prevs;
@@ -278,3 +288,3 @@ }
 	render() {
-		const tree = dcopy(this.props.tree);
+		const tree = this.props.tree;
 
@@ -286,3 +296,3 @@ /*find filtered folders base on search, if there no search, return all*/
 			}
-			return this.findFilted(prev, curr, key);
+			return this.findFiltered(prev, curr, key);
 		}, []) : tree;
@@ -289,0 +299,0 @@

src/search-input.js

@@ -7,4 +7,4 @@ import React from "react";
 		className="react-infinity-menu-default-search-input"
-		 onClick={this.props.startSearching} value={this.props.searchInput} onChange={this.props.setSearchInput}/>;
+		onClick={this.props.startSearching} value={this.props.searchInput} onChange={this.props.setSearchInput}/>;
 	}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

259456

increased by0.33%

Dependency count

2

decreased by-33.33%

Lines of code

1270

increased by1.84%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removeddeep-copy@^1.1.0

• - Removeddeep-copy@1.4.2(transitive)