react-infinity-menu
Advanced tools
Comparing version 2.1.3 to 2.2.0
@@ -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, |
{ | ||
"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", |
@@ -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 |
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, |
@@ -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" | ||
); | ||
}); | ||
}); | ||
}); |
@@ -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" | ||
); | ||
}); | ||
}); | ||
}); |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
24
1247
230
258571