react-infinity-menu - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

dist/infinity-menu.js

@@ -150,3 +150,4 @@ "use strict";
 			if (!node.children) {
-				if (node.name.toLowerCase().includes(this.state.search.searchInput.toLowerCase())) {
+				var nodeMatchesSearchFilter = this.props.filter(node, this.state.search.searchInput);
+				if (nodeMatchesSearchFilter) {
 					trees[key] = node;
@@ -305,2 +306,23 @@ return trees;
 		/*
+   *  @function _renderBody
+   *  @description Renders the body content
+   */
+	}, {
+		key: "renderBody",
+		value: function renderBody(displayTree) {
+			var _props = this.props;
+			var emptyTreeComponent = _props.emptyTreeComponent;
+			var emptyTreeComponentProps = _props.emptyTreeComponentProps;
+
+			if (displayTree.length) {
+				return displayTree;
+			} else if (emptyTreeComponent) {
+				var emptyTreeElement = _react2["default"].createElement(emptyTreeComponent, emptyTreeComponentProps);
+				return emptyTreeElement;
+			} else {
+				return null;
+			}
+		}
+
+		/*
    *  @function render
@@ -340,2 +362,4 @@ *  @description React render method for creating infinity menu
 			}, this.props.headerProps);
+
+			var bodyContent = this.renderBody(displayTree);
 			var headerContent = this.props.headerContent ? _react2["default"].createElement(this.props.headerContent, headerProps) : null;
@@ -350,3 +374,3 @@
 					{ className: "infinity-menu-display-tree-container" },
-					displayTree
+					bodyContent
 				)
@@ -364,3 +388,7 @@ );
 	tree: _react2["default"].PropTypes.array,
+	headerContent: _react2["default"].PropTypes.any,
 	headerProps: _react2["default"].PropTypes.object,
+	emptyTreeComponent: _react2["default"].PropTypes.any,
+	emptyTreeComponentProps: _react2["default"].PropTypes.object,
+	filter: _react2["default"].PropTypes.func,
 	onNodeMouseClick: _react2["default"].PropTypes.func,
@@ -374,3 +402,9 @@ onLeafMouseClick: _react2["default"].PropTypes.func,
 	tree: [],
+	headerContent: null,
 	headerProps: {},
+	emptyTreeComponent: null,
+	emptyTreeComponentProps: {},
+	filter: function filter(node, searchInput) {
+		node.name.toLowerCase().includes(searchInput.toLowerCase());
+	},
 	onNodeMouseClick: function onNodeMouseClick() {},
@@ -377,0 +411,0 @@ onLeafMouseClick: function onLeafMouseClick() {},

package.json

 {
   "name": "react-infinity-menu",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "[![Circle CI](https://circleci.com/gh/socialtables/react-infinity-menu.svg?style=svg&circle-token=230aaa396d006f1dc8d875b340834234c4937bbc)](https://circleci.com/gh/socialtables/react-infinity-menu)",
@@ -5,0 +5,0 @@ "main": "./dist/infinity-menu.js",

README.md

@@ -65,3 +65,3 @@ # react-infinity-menu
 Here is the example data you could pass into the tree props.
-```
+```js
 [
@@ -119,12 +119,14 @@ {
 
-#### headerContent(component) subcomponent rendered above the tree
+#### headerContent(React Component)
+Subcomponent rendered above the tree.
 
 `headerContent` is passed in to `InfinityMenu`. It is rendered above the tree subcomponent.
 
-#### headerProps(object) additional props for headerContent
+#### headerProps(object)
+Additional props for headerContent.
 
-`headerProps` is an optional prop of InfinityMenu. The props in this object are passed as props to a `headerContent` component. This is useful when extending InfinityMenu.
+* `headerProps` is an optional prop of InfinityMenu. The props in this object are passed as props to a `headerContent` component. This is useful when extending InfinityMenu.
 
 Passing the following into InfinityMenu as the `headerProps` prop sets the `title` prop on the headerContent component.
-```
+```js
 {
@@ -135,3 +137,4 @@ title: "my great title"
 
-#### customComponent is a React component the user can pass in.
+#### customComponent(React Component)
+A custom React component the user can pass in.
   * As the `customComponent` at the node level, you will receive props `key`,  `onClick`, `name`, `isOpen`, `data` and `isSearching`.
@@ -141,10 +144,35 @@ * As the `customComponent` at the leaf level, you will receive props `key`, `onMouseDown`, `onMouseUp`, `onClick`, `name`, `icon` and `data`.
 
+#### filter(function)[node, searchInput]
+By default, when the menu is in searching mode, it will filter all nodes by whether their `name` is equal to the current `searchInput`. If the node `name` is equal to the `searchInput`, then the node will pass the filter and be displayed in tree (if it fails the filter, it will not be displayed in the tree).
 
+This allows the user to specify their own filtering criteria. When the menu is in search mode, every node will be run against the `filter()` function:
+* If the function returns `true`, the node will pass the filter, and be displayed in the tree.
+* If the function returns `false`, the node will fail the filter, and __will not__ be displayed in the tree.
+
+The function takes the following arguments:
+* ```node (object)``` is the folder(node) the user clicked on. Includes the following properties: `id`, `name`, `isOpen` and `children`.
+* ```searchInput (string)``` The current search term
+
+#### emptyTreeComponent (React Component)
+If the `tree` prop is an empty array or if the menu is in searching mode and no nodes match the filter, then the tree is considered "empty".
+
+By default, nothing will be displayed in an empty tree.
+
+However, if this prop is passed in, the specified component will be rendered when the tree is empty.
+
+This allows you have a very customized "empty tree" message/image.
+
+#### emptyTreeComponentProps (object)
+Allows you to specify props to pass to the `emptyTreeComponent`.
+
+By default, this is an empty object.
+
+
 #### onNodeMouseClick(function)[event, tree, node, level]
 This function will get call when user click on the folder(node).
 The function arguments include ```event```, ```tree```, ```node``` and ```level```.
-```event``` is the mouse click event.
-```tree``` is the updated tree, you should update your own tree accordingly.
-```node``` is the folder(node) the user clicked on. Including the id, name, isOpen and children.
-```level``` is the distance from the root.
+* ```event``` is the mouse click event.
+* ```tree``` is the updated tree, you should update your own tree accordingly.
+* ```node``` is the folder(node) the user clicked on. Including the id, name, isOpen and children.
+* ```level``` is the distance from the root.
 
@@ -156,4 +184,4 @@
 The function arguments include ```event```, ```leaf```.
-```event``` is the click event.
-```leaf``` is the item user clicked on. Includes name, id and all data the user inputs when they pass in the tree.
+* ```event``` is the click event.
+* ```leaf``` is the item user clicked on. Includes name, id and all data the user inputs when they pass in the tree.
 
@@ -165,4 +193,4 @@
 The function arguments include ```event```, ```leaf```.
-```event``` is the click event.
-```leaf``` is the item user clicked on. Includes name, id and all data the user inputs when they pass in the tree.
+* ```event``` is the click event.
+* ```leaf``` is the item user clicked on. Includes name, id and all data the user inputs when they pass in the tree.
 
@@ -174,5 +202,7 @@
 The function arguments include ```event```, ```leaf```.
-```event``` is the click event.
-```leaf``` is the item user clicked on. Includes name, id and all data the user inputs when they pass in the tree.
+* ```event``` is the click event.
+* ```leaf``` is the item user clicked on. Includes name, id and all data the user inputs when they pass in the tree.
 
+
+
 # Styles
@@ -179,0 +209,0 @@ There is a default style sheet you can use if you so desire.

src/infinity-menu.js

@@ -100,3 +100,4 @@ import React from "react";
 		if (!node.children) {
-			if (node.name.toLowerCase().includes(this.state.search.searchInput.toLowerCase())) {
+			const nodeMatchesSearchFilter = this.props.filter(node, this.state.search.searchInput);
+			if (nodeMatchesSearchFilter) {
 				trees[key] = node;
@@ -240,2 +241,23 @@ return trees;
 	/*
+	 *  @function _renderBody
+	 *  @description Renders the body content
+	 */
+	renderBody(displayTree) {
+		const {
+			emptyTreeComponent,
+			emptyTreeComponentProps
+		} = this.props;
+
+		if (displayTree.length) {
+			return displayTree;
+		}
+		else if (emptyTreeComponent) {
+			const emptyTreeElement = React.createElement(emptyTreeComponent, emptyTreeComponentProps);
+			return emptyTreeElement;
+		}
+		else {
+			return null;
+		}
+	}
+	/*
 	 *  @function render
@@ -271,4 +293,6 @@ *  @description React render method for creating infinity menu
 			startSearching: this.startSearching,
-				...this.props.headerProps
+			...this.props.headerProps
 		};
+
+		const bodyContent = this.renderBody(displayTree);
 		const headerContent = this.props.headerContent ? React.createElement(this.props.headerContent, headerProps) : null;
@@ -280,3 +304,3 @@
 				<div className="infinity-menu-display-tree-container">
-					{displayTree}
+					{bodyContent}
 				</div>
@@ -290,3 +314,7 @@ </div>
 	tree: React.PropTypes.array,
+	headerContent: React.PropTypes.any,
 	headerProps: React.PropTypes.object,
+	emptyTreeComponent: React.PropTypes.any,
+	emptyTreeComponentProps: React.PropTypes.object,
+	filter: React.PropTypes.func,
 	onNodeMouseClick: React.PropTypes.func,
@@ -300,3 +328,7 @@ onLeafMouseClick: React.PropTypes.func,
 	tree: [],
+	headerContent: null,
 	headerProps: {},
+	emptyTreeComponent: null,
+	emptyTreeComponentProps: {},
+	filter: (node, searchInput) => { node.name.toLowerCase().includes(searchInput.toLowerCase()) },
 	onNodeMouseClick: ()=>{},
@@ -303,0 +335,0 @@ onLeafMouseClick: ()=>{},

No alert changes

Improved metrics

Total package byte prevSize

374954

increased by2.02%

Number of package files

22

increased by22.22%

Lines of code

1135

increased by23.37%

Number of lines in readme file

214

increased by16.3%

No dependency changes