react-infinity-menu - npm Package Compare versions

Comparing version 2.4.1 to 3.0.0

dist/infinity-menu.js

@@ -31,2 +31,6 @@ "use strict";
 
+var _lodash = require('lodash');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
 /*
@@ -71,2 +75,3 @@ *  @class InfinityMenu
 				node.isOpen = !node.isOpen;
+				node.maxLeaves = this.props.maxLeaves;
 				_nestedObjects2["default"].set(tree, keyPath, node);
@@ -79,2 +84,17 @@ if (this.props.onNodeMouseClick) {
 		}
+	}, {
+		key: "onLoadMoreClick",
+		value: function onLoadMoreClick(tree, node, keyPath, event) {
+			event.preventDefault();
+			// get parent node so we can increment it's unique max leaves property
+			var keyPathArray = keyPath.split('.');
+			var parentPath = Object.assign([], keyPathArray).splice(0, keyPathArray.length - 2);
+			var parentNode = _lodash2["default"].get(this.props.tree, parentPath);
+			// set new max leaves - if none exist use component default property
+			parentNode.maxLeaves = !parentNode.maxLeaves ? this.props.maxLeaves : parentNode.maxLeaves + this.props.maxLeaves;
+			if (this.props.onNodeMouseClick) {
+				var currLevel = Math.floor(keyPath.split(".").length / 2);
+				this.props.onNodeMouseClick(event, tree, node, currLevel, keyPath);
+			}
+		}
 
@@ -167,2 +187,3 @@ /*
 					node.isSearchDisplay = true;
+					node.maxLeaves = node.maxLeaves ? node.maxLeaves : this.props.maxLeaves;
 					trees[key] = node;
@@ -195,9 +216,25 @@ return trees;
 			var currCustomComponent = typeof curr.customComponent === 'string' ? this.props.customComponentMappings[curr.customComponent] : curr.customComponent;
+			var currCustomloadMoreComponent = this.props.loadMoreComponent ? this.props.loadMoreComponent : null;
 			var isSearching = this.state.search.isSearching && this.state.search.searchInput;
 			var shouldDisplay = isSearching && curr.isSearchDisplay || !isSearching;
 			/*the leaves*/
+
 			if (!curr.children) {
+				var keyPathArray = keyPath.split('.');
+				var parentPath = Object.assign([], keyPathArray).splice(0, keyPathArray.length - 2);
+				var parentNode = _lodash2["default"].get(this.props.tree, parentPath);
+				var filteredChildren = _lodash2["default"].some(parentNode.children, { isSearchDisplay: true }) ? _lodash2["default"].filter(parentNode.children, { isSearchDisplay: true }) : parentNode.children;
+
 				var itemKey = "infinity-menu-leaf-" + curr.id;
+
+				var visIds = filteredChildren.map(function (e) {
+					return e.id;
+				});
 				curr.keyPath = keyPath;
-				if (shouldDisplay) {
+
+				var relativeIndex = visIds.indexOf(curr.id);
+				relativeIndex = relativeIndex === -1 ? Infinity : relativeIndex;
+
+				var parentMaxLeaves = parentNode.maxLeaves || this.props.maxLeaves;
+				if (shouldDisplay && parentMaxLeaves > relativeIndex) {
 					if (curr.customComponent) {
@@ -236,2 +273,25 @@ var componentProps = {
 					}
+				} else {
+					if (relativeIndex === filteredChildren.length - 1) {
+						if (currCustomloadMoreComponent) {
+							var loadMoreProps = {
+								key: itemKey,
+								onClick: this.onLoadMoreClick.bind(this, tree, curr, keyPath)
+							};
+							prevs.push(_react2["default"].createElement(currCustomloadMoreComponent, loadMoreProps));
+						} else {
+							prevs.push(_react2["default"].createElement(
+								"li",
+								{ key: itemKey,
+									className: "infinity-menu-load-more-container",
+									onClick: this.onLoadMoreClick.bind(this, tree, curr, keyPath)
+								},
+								_react2["default"].createElement(
+									"span",
+									null,
+									"Load more"
+								)
+							));
+						}
+					}
 				}
@@ -352,3 +412,2 @@ return prevs;
 			var tree = this.props.tree;
-
 			/*find filtered folders base on search, if there no search, return all*/
@@ -414,3 +473,4 @@ var filteredTree = this.state.search.isSearching && this.state.search.searchInput ? tree.reduce(function (prev, curr, key) {
 	onLeafMouseUp: _react2["default"].PropTypes.func,
-	shouldComponentUpdate: _react2["default"].PropTypes.func
+	shouldComponentUpdate: _react2["default"].PropTypes.func,
+	maxLeaves: _react2["default"].PropTypes.number
 };
@@ -431,4 +491,5 @@
 	onLeafMouseDown: function onLeafMouseDown() {},
-	onLeafMouseUp: function onLeafMouseUp() {}
+	onLeafMouseUp: function onLeafMouseUp() {},
+	maxLeaves: Infinity
 };
 module.exports = exports["default"];

example/src/index.js

@@ -31,2 +31,34 @@ import React from "react";
 								id: 2
+							},
+							{
+								name: "Sub-SubMenu1-4",
+								id: 3
+							},
+							{
+								name: "Sub-SubMenu1-5",
+								id: 4
+							},
+							{
+								name: "Sub-SubMenu1-6",
+								id: 5
+							},
+							{
+								name: "Sub-SubMenu1-7",
+								id: 6
+							},
+							{
+								name: "Sub-SubMenu1-8",
+								id: 7
+							},
+							{
+								name: "Sub-SubMenu1-9",
+								id: 8
+							},
+							{
+								name: "Sub-SubMenu1-99",
+								id: 9
+							},
+							{
+								name: "Sub-SubMenu1-999",
+								id: 10
 							}
@@ -98,2 +130,3 @@ ]
 				onNodeMouseClick={this.onNodeMouseClick.bind(this)}
+				maxLeaves={2}
 			/>
@@ -100,0 +133,0 @@ );

package.json

 {
   "name": "react-infinity-menu",
-  "version": "2.4.1",
+  "version": "3.0.0",
   "description": "An unlimited deep side menu",
   "main": "./dist/infinity-menu.js",
   "scripts": {
-    "test": "mocha --compilers js:babel/register --recursive",
+    "test": "mocha --compilers js:babel-core/register --recursive",
     "build": "babel src -d dist",
@@ -23,2 +23,3 @@ "watch": "babel src --watch -d dist",
   "dependencies": {
+    "lodash": "^4.16.6",
     "nested-objects": "0.0.2"
@@ -25,0 +26,0 @@ },

README.md

@@ -51,2 +51,3 @@ # react-infinity-menu
 				onLeafMouseUp={this.onLeafMouseUp}/*optional*/
+				maxLeaves={5}/*optional*/
 			/>
@@ -226,2 +227,8 @@ );
 
+
+
+#### maxLeaves(integer)
+Sets the maximum number of leaf to show initially.  Also used as an increment when then load more is pressed.
+
+
 #### shouldComponentUpdate(function) [currProps, currState, nextProps, nextState]
@@ -228,0 +235,0 @@ A function that will be called inside shouldComponentUpdate. It's a good place to optimize update.

src/infinity-menu.js

 import React from "react";
 import SearchInput from "./search-input";
 import NestedObjects from "nested-objects";
+import _ from 'lodash'
 
@@ -34,2 +35,3 @@ /*
 			node.isOpen = !node.isOpen;
+			node.maxLeaves = this.props.maxLeaves;
 			NestedObjects.set(tree, keyPath, node);
@@ -42,2 +44,16 @@ if (this.props.onNodeMouseClick) {
 	}
+
+	onLoadMoreClick(tree, node, keyPath, event) {
+		event.preventDefault();
+		// get parent node so we can increment it's unique max leaves property
+		const keyPathArray = keyPath.split('.')
+		const parentPath = Object.assign([],keyPathArray).splice(0, keyPathArray.length - 2)
+		const parentNode = _.get(this.props.tree, parentPath)
+		// set new max leaves - if none exist use component default property
+		parentNode.maxLeaves = (!parentNode.maxLeaves) ? this.props.maxLeaves : parentNode.maxLeaves + this.props.maxLeaves;
+		if (this.props.onNodeMouseClick) {
+			const currLevel = Math.floor(keyPath.split(".").length / 2);
+			this.props.onNodeMouseClick(event, tree, node, currLevel, keyPath);
+		}
+	}
 	/*
@@ -116,2 +132,3 @@ * @function shouldComponentUpdate
 				node.isSearchDisplay = true;
+				node.maxLeaves = (node.maxLeaves) ? node.maxLeaves : this.props.maxLeaves;
 				trees[key] = node;
@@ -141,9 +158,23 @@ return trees;
 		const currCustomComponent = typeof curr.customComponent === 'string' ? this.props.customComponentMappings[curr.customComponent] : curr.customComponent;
+		const currCustomloadMoreComponent = (this.props.loadMoreComponent) ? this.props.loadMoreComponent : null
 		const isSearching = this.state.search.isSearching && this.state.search.searchInput;
 		const shouldDisplay = (isSearching && curr.isSearchDisplay) || !isSearching;
 		/*the leaves*/
+
 		if (!curr.children) {
+			const keyPathArray = keyPath.split('.')
+			const parentPath = Object.assign([],keyPathArray).splice(0, keyPathArray.length - 2)
+			const parentNode = _.get(this.props.tree, parentPath)
+			const filteredChildren = (_.some(parentNode.children,{isSearchDisplay: true})) ? _.filter(parentNode.children,{isSearchDisplay: true}) : parentNode.children
+
 			const itemKey = "infinity-menu-leaf-" + curr.id;
+
+			const visIds = filteredChildren.map((e) => e.id)
 			curr.keyPath = keyPath;
-			if (shouldDisplay) {
+
+			let relativeIndex = visIds.indexOf(curr.id)
+			relativeIndex = (relativeIndex === -1) ? Infinity : relativeIndex
+
+			let parentMaxLeaves = parentNode.maxLeaves || this.props.maxLeaves
+			if (shouldDisplay && parentMaxLeaves > relativeIndex ) {
 				if (curr.customComponent) {
@@ -173,2 +204,22 @@ const componentProps = {
 				}
+			} else {
+				if (relativeIndex === filteredChildren.length - 1) {
+					if (currCustomloadMoreComponent) {
+							const loadMoreProps = {
+								key: itemKey,
+								onClick: this.onLoadMoreClick.bind(this, tree, curr, keyPath)
+							};
+							prevs.push(React.createElement(currCustomloadMoreComponent, loadMoreProps));
+
+					} else {
+						prevs.push(
+							<li key={itemKey}
+								className="infinity-menu-load-more-container"
+								onClick={this.onLoadMoreClick.bind(this, tree, curr, keyPath)}
+							>
+								<span>Load more</span>
+							</li>
+						);
+					}
+				}
 			}
@@ -280,3 +331,2 @@ return prevs;
 		const tree = this.props.tree;
-
 		/*find filtered folders base on search, if there no search, return all*/
@@ -337,3 +387,4 @@ const filteredTree = this.state.search.isSearching && this.state.search.searchInput ? tree.reduce((prev, curr, key) => {
 	onLeafMouseUp: React.PropTypes.func,
-	shouldComponentUpdate: React.PropTypes.func
+	shouldComponentUpdate: React.PropTypes.func,
+	maxLeaves: React.PropTypes.number
 };
@@ -352,3 +403,4 @@
 	onLeafMouseDown: ()=>{},
-	onLeafMouseUp: ()=>{}
+	onLeafMouseUp: ()=>{},
+	maxLeaves: Infinity
 };

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

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

266462

increased by2.24%

Lines of code

1466

increased by11.14%

Number of lines in readme file

250

increased by2.88%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedlodash@^4.16.6

• + Addedlodash@4.17.21(transitive)