react-infinity-menu - npm Package Compare versions

Comparing version 2.1.3 to 2.2.0

dist/infinity-menu.js

@@ -23,2 +23,6 @@ "use strict";
 
+var _searchInput = require("./search-input");
+
+var _searchInput2 = _interopRequireDefault(_searchInput);
+
 var _nestedObjects = require("nested-objects");
@@ -188,2 +192,3 @@
 			var currLevel = Math.floor(keyPath.length / 2);
+			var currCustomComponent = typeof curr.customComponent === 'string' ? this.props.customComponentMappings[curr.customComponent] : curr.customComponent;
 			/*the leaves*/
@@ -203,3 +208,3 @@ if (!curr.children) {
 					};
-					prevs.push(_react2["default"].createElement(curr.customComponent, componentProps));
+					prevs.push(_react2["default"].createElement(currCustomComponent, componentProps));
 				} else {
@@ -243,3 +248,3 @@ prevs.push(_react2["default"].createElement(
 							};
-							prevs.push(_react2["default"].createElement(curr.customComponent, nodeProps));
+							prevs.push(_react2["default"].createElement(currCustomComponent, nodeProps));
 						} else {
@@ -273,3 +278,3 @@ prevs.push(_react2["default"].createElement(
 							};
-							openedNode.push(_react2["default"].createElement(curr.customComponent, nodeProps));
+							openedNode.push(_react2["default"].createElement(currCustomComponent, nodeProps));
 						} else {
@@ -368,3 +373,4 @@ openedNode.push(_react2["default"].createElement(
 			var bodyContent = this.renderBody(displayTree);
-			var headerContent = this.props.headerContent ? _react2["default"].createElement(this.props.headerContent, headerProps) : null;
+			var defaultHeaderContent = this.props.disableDefaultHeaderContent ? null : _react2["default"].createElement(_searchInput2["default"], headerProps);
+			var headerContent = this.props.headerContent ? _react2["default"].createElement(this.props.headerContent, headerProps) : defaultHeaderContent;
 
@@ -392,3 +398,5 @@ return _react2["default"].createElement(
 	headerContent: _react2["default"].PropTypes.any,
+	disableDefaultHeaderContent: _react2["default"].PropTypes.boolean,
 	headerProps: _react2["default"].PropTypes.object,
+	customComponentMappings: _react2["default"].PropTypes.object,
 	emptyTreeComponent: _react2["default"].PropTypes.any,
@@ -406,2 +414,3 @@ emptyTreeComponentProps: _react2["default"].PropTypes.object,
 	headerContent: null,
+	disableDefaultHeaderContent: false,
 	headerProps: {},
@@ -408,0 +417,0 @@ emptyTreeComponent: null,

package.json

 {
   "name": "react-infinity-menu",
-  "version": "2.1.3",
+  "version": "2.2.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

@@ -118,2 +118,5 @@ # react-infinity-menu
 
+#### disableDefaultHeaderContent (boolean)
+A boolean to set if user want to display the default header search input. If user pass in headerContent, the default header will be disabled.
+
 #### headerContent(React Component)
@@ -141,2 +144,14 @@ Subcomponent rendered above the tree.
 
+	Example of `customComponent`
+	```js
+	class Node extends React.Component {
+	    render() {
+	        return (
+	            <div key={this.props.key} onClick={this.props.onClick}>
+	                <label>{this.props.name}</label>
+	            </div>
+	        );
+	    }
+	}
+	```
 
@@ -210,3 +225,3 @@ #### filter(function)[node, searchInput]
 
-Copyright (C) 2015 Social Tables, Inc. (https://www.socialtables.com) All rights reserved.
+Copyright (C) 2016 Social Tables, Inc. (https://www.socialtables.com) All rights reserved.
 
@@ -213,0 +228,0 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

src/infinity-menu.js

 import React from "react";
+import SearchInput from "./search-input";
 import NestedObjects from "nested-objects";
 import dcopy from "deep-copy";
+
 /*
@@ -136,2 +138,3 @@ *  @class InfinityMenu
 		const currLevel = Math.floor(keyPath.length / 2);
+		const currCustomComponent = typeof curr.customComponent === 'string' ? this.props.customComponentMappings[curr.customComponent] : curr.customComponent;
 		/*the leaves*/
@@ -151,3 +154,3 @@ if (!curr.children) {
 				};
-				prevs.push(React.createElement(curr.customComponent, componentProps));
+				prevs.push(React.createElement(currCustomComponent, componentProps));
 			}
@@ -182,3 +185,3 @@ else {
 					};
-					prevs.push(React.createElement(curr.customComponent, nodeProps));
+					prevs.push(React.createElement(currCustomComponent, nodeProps));
 				}
@@ -210,3 +213,3 @@ else {
 					};
-					openedNode.push(React.createElement(curr.customComponent, nodeProps));
+					openedNode.push(React.createElement(currCustomComponent, nodeProps));
 				}
@@ -300,3 +303,4 @@ else {
 		const bodyContent = this.renderBody(displayTree);
-		const headerContent = this.props.headerContent ? React.createElement(this.props.headerContent, headerProps) : null;
+		const defaultHeaderContent = this.props.disableDefaultHeaderContent ? null : React.createElement(SearchInput, headerProps);
+		const headerContent = this.props.headerContent ? React.createElement(this.props.headerContent, headerProps) : defaultHeaderContent;
 
@@ -317,3 +321,5 @@ return (
 	headerContent: React.PropTypes.any,
+	disableDefaultHeaderContent: React.PropTypes.boolean,
 	headerProps: React.PropTypes.object,
+	customComponentMappings: React.PropTypes.object,
 	emptyTreeComponent: React.PropTypes.any,
@@ -331,2 +337,3 @@ emptyTreeComponentProps: React.PropTypes.object,
 	headerContent: null,
+	disableDefaultHeaderContent: false,
 	headerProps: {},
@@ -333,0 +340,0 @@ emptyTreeComponent: null,

test/custom-component-prop.js

@@ -11,9 +11,13 @@ import React from "react";
 describe("Custom Component prop", function() {
+	const CustomComponent = () => {
+		return <div className="test-custom-component"></div>;
+	};
 	let component;
 	let dom;
 
-	before(function() {
-		const CustomComponent = () => {
-			return <div className="test-custom-component"></div>;
-		};
+	afterEach(function() {
+		ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(dom).parentNode);
+	});
+
+	it("should render the custom component when given as a constant", function () {
 		const tree = [
@@ -46,9 +50,2 @@ {
 		dom = TestUtils.renderIntoDocument(component);
-	});
-
-	after(function() {
-		ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(dom).parentNode);
-	});
-
-	it("should render the custom component", function () {
 		should.doesNotThrow(() => {
@@ -61,2 +58,38 @@ TestUtils.findRenderedDOMComponentWithClass(
 	});
-});
+
+	it("should render the custom component when given as a string with mappings", function () {
+			const tree = [
+				{
+					name: "menu1",
+					id: 1,
+					isOpen: true,
+					customComponent: 'CustomComponent',
+					children: [
+						{
+							name: "submenu1",
+							id: 1,
+							isOpen: true,
+							children: [
+								{
+									name: "item1-1",
+									id: 1
+								},
+								{
+									name: "item1-2",
+									id: 2
+								}
+							]
+						}
+					]
+				}
+			];
+			component = <InfinityMenu tree={tree} customComponentMappings={{ 'CustomComponent': CustomComponent }}/>;
+			dom = TestUtils.renderIntoDocument(component);
+			should.doesNotThrow(() => {
+				TestUtils.findRenderedDOMComponentWithClass(
+					dom,
+					"test-custom-component"
+				);
+			});
+		});
+});

test/header-props.js

@@ -6,3 +6,3 @@ import React from "react";
 import InfinityMenu from "../src/infinity-menu";
-import sinon from "sinon";
+import should from "should";
 import "should-sinon";
@@ -14,3 +14,3 @@
 		const Doge = ({ breed }) => {
-			<div>{breed}</div>
+			<div>{breed}</div>;
 		};
@@ -29,2 +29,29 @@ const component = <InfinityMenu
 	});
-});
+
+	it("it should only display default header content ", function() {
+		const component = <InfinityMenu/>;
+		const dom = TestUtils.renderIntoDocument(component);
+
+		should.doesNotThrow(() => {
+			TestUtils.findRenderedDOMComponentWithClass(
+				dom,
+				"react-infinity-menu-default-search-input"
+			);
+		});
+	});
+
+	it("it should not display default header content ", function() {
+		const component = <InfinityMenu
+			disableDefaultHeaderContent={true}
+		/>;
+		const dom = TestUtils.renderIntoDocument(component);
+
+		should.throws(() => {
+			TestUtils.findRenderedDOMComponentWithClass(
+				dom,
+				"react-infinity-menu-default-search-input"
+			);
+		});
+	});
+
+});

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

Number of package files

24

increased by9.09%

Lines of code

1247

increased by9.67%

Number of lines in readme file

230

increased by6.98%

Worsened metrics

Total package byte prevSize

258571

decreased by-31.07%

No dependency changes