From ccc8f27c5a6b5057cb37195c3c2973d6fcc9d663 Mon Sep 17 00:00:00 2001 From: Hrusikesh Panda Date: Sat, 17 Mar 2018 23:23:43 -0400 Subject: [PATCH] fix: Issues with documentation site :books: --- README.md | 10 +++++----- docs/bundle.js | 10 +++++----- docs/src/App.js | 22 +++------------------- 3 files changed, 13 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index fec021ee..0fcd16ae 100644 --- a/README.md +++ b/README.md @@ -59,25 +59,25 @@ A lightweight and fast control to render a select component that can display hie ## Screenshot -![demo](/docs/demo.gif) +![animated demo screenshot](https://user-images.githubusercontent.com/781818/37562235-0ae9e9ec-2a3a-11e8-8266-b0e6b716d0d1.gif) ## Demo ##### Vanilla, no framework -Online demo: http://dowjones.github.io/react-dropdown-tree-select/ +Online demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-vanilla-styles ##### With Bootstrap -Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/bootstrap +Online demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-bootstrap-styles ##### With Material Design -Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/material +Online demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-material-design-styles ##### As Single Select -Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/simple +Online demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/simple-select ## Install diff --git a/docs/bundle.js b/docs/bundle.js index 563c6920..a1d94e48 100644 --- a/docs/bundle.js +++ b/docs/bundle.js @@ -493,7 +493,7 @@ eval("\n\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react_story__ = __webpack_require__(63);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react_story___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react_story__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__ = __webpack_require__(129);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__stories_HOCReadme_js__ = __webpack_require__(130);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__stories_Readme_js__ = __webpack_require__(134);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__stories_utils_prism_css__ = __webpack_require__(136);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__stories_utils_prism_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5__stories_utils_prism_css__);\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n\n\n\n\n\n\n\n\n\nvar stories = [{ name: 'Readme', component: __WEBPACK_IMPORTED_MODULE_4__stories_Readme_js__[\"a\" /* default */] }, { name: 'HOC Readme', component: __WEBPACK_IMPORTED_MODULE_3__stories_HOCReadme_js__[\"a\" /* default */] }, { name: 'With Vanilla Styles', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('X6npLXPRW') }, { name: 'With Bootstrap Styles', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('382pjronm') }, { name: 'With Material Design Styles', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('2o1pv6925p') }, { name: 'With Country flags', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('6w41wlvj8z') }, {\n name: 'Custom Select/Unselect All Buttons (HOC)',\n component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('n348v2qox0')\n}, {\n name: 'Internal Select All Checkbox (HOC)',\n component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('rjwqq86p1n')\n}, {\n name: 'Prevent re-render on parent render (HOC)',\n component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('v05klkn56l')\n}, { name: 'Tree Node Paths (HOC)', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('l765q6lmrq') }];\n\nvar App = function (_React$Component) {\n _inherits(App, _React$Component);\n\n function App() {\n _classCallCheck(this, App);\n\n return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));\n }\n\n _createClass(App, [{\n key: 'render',\n value: function render() {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1_react_story___default.a, {\n style: {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n pathPrefix: 'story/',\n Story: function Story(props) {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(\n __WEBPACK_IMPORTED_MODULE_1_react_story__[\"defaultProps\"].StoryWrapper,\n {\n css: {\n padding: 0,\n display: 'flex',\n flexDirection: 'column'\n }\n },\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(\n 'a',\n {\n href: '//github.com/react-tools/react-table',\n style: {\n display: 'block',\n textAlign: 'center',\n borderBottom: 'solid 3px #cccccc'\n }\n },\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('img', {\n src: 'https://github.com/react-tools/media/raw/master/logo-react-table.png',\n alt: 'React Table Logo',\n style: {\n width: '150px',\n padding: '10px'\n }\n })\n ),\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', _extends({}, props, {\n style: {\n flex: '1 0 auto',\n position: 'relative'\n }\n }))\n );\n },\n stories: stories\n });\n }\n }]);\n\n return App;\n}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (App);\n\n//////////////////\n// WEBPACK FOOTER\n// ./docs/src/App.js\n// module id = 62\n// module chunks = 0\n\n//# sourceURL=webpack:///./docs/src/App.js?"); +eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react_story__ = __webpack_require__(63);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react_story___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react_story__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__ = __webpack_require__(129);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__stories_HOCReadme_js__ = __webpack_require__(130);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__stories_Readme_js__ = __webpack_require__(134);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__stories_utils_prism_css__ = __webpack_require__(136);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__stories_utils_prism_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5__stories_utils_prism_css__);\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n\n\n\n\n\n\n\n\n\nvar stories = [{ name: 'Readme', component: __WEBPACK_IMPORTED_MODULE_4__stories_Readme_js__[\"a\" /* default */] }, { name: 'HOC Readme', component: __WEBPACK_IMPORTED_MODULE_3__stories_HOCReadme_js__[\"a\" /* default */] }, { name: 'With Vanilla Styles', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('v0nmw5ykk5') }, { name: 'With Bootstrap Styles', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('382pjronm') }, { name: 'With Material Design Styles', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('2o1pv6925p') }, { name: 'With Country flags', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('6w41wlvj8z') }, { name: 'Simple Select', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('5xzn337wjn') }, {\n name: 'Custom Select/Unselect All Buttons (HOC)',\n component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('n348v2qox0')\n}, {\n name: 'Internal Select All Checkbox (HOC)',\n component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('rjwqq86p1n')\n}, {\n name: 'Prevent re-render on parent render (HOC)',\n component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('v05klkn56l')\n}, { name: 'Tree Node Paths (HOC)', component: Object(__WEBPACK_IMPORTED_MODULE_2__CodeSandbox_js__[\"a\" /* default */])('l765q6lmrq') }];\n\nvar App = function (_React$Component) {\n _inherits(App, _React$Component);\n\n function App() {\n _classCallCheck(this, App);\n\n return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));\n }\n\n _createClass(App, [{\n key: 'render',\n value: function render() {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_1_react_story___default.a, {\n style: {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n pathPrefix: 'story/',\n Story: function Story(props) {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(\n __WEBPACK_IMPORTED_MODULE_1_react_story__[\"defaultProps\"].StoryWrapper,\n {\n css: {\n padding: 0,\n display: 'flex',\n flexDirection: 'column'\n }\n },\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', _extends({}, props, {\n style: {\n flex: '1 0 auto',\n position: 'relative'\n }\n }))\n );\n },\n stories: stories\n });\n }\n }]);\n\n return App;\n}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (App);\n\n//////////////////\n// WEBPACK FOOTER\n// ./docs/src/App.js\n// module id = 62\n// module chunks = 0\n\n//# sourceURL=webpack:///./docs/src/App.js?"); /***/ }), /* 63 */ @@ -962,13 +962,13 @@ eval("/* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var __W /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("/* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_marked__ = __webpack_require__(49);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_marked___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_marked__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__raw_loader_HOC_md__ = __webpack_require__(131);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__raw_loader_HOC_md___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__raw_loader_HOC_md__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css__ = __webpack_require__(50);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_prism_js__ = __webpack_require__(51);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_prism_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4__utils_prism_js__);\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n\n\n\n\n\n\n\nvar HOCStory = function (_React$Component) {\n _inherits(HOCStory, _React$Component);\n\n function HOCStory() {\n _classCallCheck(this, HOCStory);\n\n return _possibleConstructorReturn(this, (HOCStory.__proto__ || Object.getPrototypeOf(HOCStory)).apply(this, arguments));\n }\n\n _createClass(HOCStory, [{\n key: 'render',\n value: function render() {\n return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(\n 'div',\n { style: { padding: '10px' } },\n __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('span', {\n className: 'markdown-body',\n dangerouslySetInnerHTML: { __html: __WEBPACK_IMPORTED_MODULE_0_marked___default()(__WEBPACK_IMPORTED_MODULE_2__raw_loader_HOC_md___default.a) }\n })\n );\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n global.Prism && global.Prism.highlightAll();\n }\n }]);\n\n return HOCStory;\n}(__WEBPACK_IMPORTED_MODULE_1_react___default.a.Component);\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (HOCStory);\n/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(9)))\n\n//////////////////\n// WEBPACK FOOTER\n// ./docs/src/stories/HOCReadme.js\n// module id = 130\n// module chunks = 0\n\n//# sourceURL=webpack:///./docs/src/stories/HOCReadme.js?"); +eval("/* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_marked__ = __webpack_require__(49);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_marked___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_marked__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__HOC_md__ = __webpack_require__(131);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__HOC_md___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__HOC_md__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css__ = __webpack_require__(50);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_prism_js__ = __webpack_require__(51);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_prism_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4__utils_prism_js__);\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n\n\n\n\n\n\n\nvar HOCStory = function (_React$Component) {\n _inherits(HOCStory, _React$Component);\n\n function HOCStory() {\n _classCallCheck(this, HOCStory);\n\n return _possibleConstructorReturn(this, (HOCStory.__proto__ || Object.getPrototypeOf(HOCStory)).apply(this, arguments));\n }\n\n _createClass(HOCStory, [{\n key: 'render',\n value: function render() {\n return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(\n 'div',\n { style: { padding: '10px' } },\n __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('span', {\n className: 'markdown-body',\n dangerouslySetInnerHTML: { __html: __WEBPACK_IMPORTED_MODULE_0_marked___default()(__WEBPACK_IMPORTED_MODULE_2__HOC_md___default.a) }\n })\n );\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n global.Prism && global.Prism.highlightAll();\n }\n }]);\n\n return HOCStory;\n}(__WEBPACK_IMPORTED_MODULE_1_react___default.a.Component);\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (HOCStory);\n/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(9)))\n\n//////////////////\n// WEBPACK FOOTER\n// ./docs/src/stories/HOCReadme.js\n// module id = 130\n// module chunks = 0\n\n//# sourceURL=webpack:///./docs/src/stories/HOCReadme.js?"); /***/ }), /* 131 */ /***/ (function(module, exports) { -eval("module.exports = \"# Doing more with HOCs\\r\\n\\r\\nThis documentation is about expanding react-dropdown-tree-select using Higher Order Components/Functions.\\r\\n\\r\\n## Table of Contents\\r\\n\\r\\n* [What are HOCs](#what-are-hocs)\\r\\n* [Why use a HOC](#why-use-a-hoc)\\r\\n* [Examples](#examples)\\r\\n * [External Select All, Unselect All buttons](#external-select-all--unselect-all-buttons)\\r\\n * [Internal Select All Checkbox](#internal-select-all-checkbox)\\r\\n * [Prevent re-render on parent prop/state changes](#prevent-re-render-on-parent-prop-state-changes)\\r\\n\\r\\n## What are HOCs\\r\\n\\r\\nHOCs (or Higher Order Components/Functions) are either a React Component (or a function that returns a React Component) that are used to enhance the functionality of an existing component.\\r\\n\\r\\nYou can use HOCs to manipulate the props and state, abstract rendering logic or enable code reuse.\\r\\n\\r\\n## Why use a HOC\\r\\n\\r\\nOr in other words, why is this functionality not baked in to the component? It's a fair question. There are many reasons but probably the biggest reason is - to _Keep It Simple_!\\r\\n\\r\\nThe control tries to provide a minimal, core set of features while making it easy to expand upon the core features using composition, or HOCs. This lets the component to have a very small footprint and allows you to customize/tweak or build upon as per your requirements.\\r\\n\\r\\n## Examples\\r\\n\\r\\nThese are some of the examples of expanding the core component with HOCs. They are all provided as Code Sandboxes so feel free to play with them.\\r\\n\\r\\nIf you'd like to add to these examples, create an issue with a brief description (of what the HOC does) along with a CodeSandbox link.\\r\\n\\r\\n### External Select All, Unselect All buttons\\r\\n\\r\\nThis is an example of selecting/unselecting all nodes programmatically, outside of the control.\\r\\n\\r\\n![External Select/Unselect All buttons screenshot](https://user-images.githubusercontent.com/781818/37561174-6120362a-2a1e-11e8-914d-48636ed6e7d3.png)\\r\\n\\r\\n[![Edit n348v2qox0](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/n348v2qox0)\\r\\n\\r\\n### Internal Select All Checkbox\\r\\n\\r\\nThis example shows how to add a special Select All checkbox within the dropdown itself.\\r\\n\\r\\n![Internal Select All Checkbox screenshot](https://user-images.githubusercontent.com/781818/37561139-7066396e-2a1d-11e8-99d0-02c24acbef3a.png)\\r\\n\\r\\n[![Edit rjwqq86p1n](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rjwqq86p1n)\\r\\n\\r\\n### Prevent re-render on parent prop/state changes\\r\\n\\r\\nOnce initialized, the component (react-dropdown-tree-select) manages its own internal state. However, if this component is part of another component, then due to React's nature, anytime the parent is re-rendered, this component will re-render. While React's Virtual DOM diffing will cancel out any ultimate DOM modifications, it'll still go through all of its initialization process. This can be a waste of computation if the tree data hasn't changed.\\r\\n\\r\\nTo prevent that, this HOC simply adds a deep equality check in its `shouldComponentUpdate`.\\r\\n\\r\\nThis is not baked in the component since:\\r\\n\\r\\n* Deep equality check can be expensive if the tree is large\\r\\n* Not everyone may need this check\\r\\n\\r\\n[![Edit Prevent re-render on parent render with React Dropdown Tree Select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/v05klkn56l)\\r\\n\\r\\n### Tree Node Paths\\r\\n\\r\\nThe `onChange`/`onNodeToggle` events bubbles up few useful properties such as `_depth`, `_id`, `_parent` (and `_children` for non-leaf nodes). Using these, you can recurse up/down to grab a node in the tree.\\r\\n\\r\\nIn addition, you can use the object path notation to grab the node without recursion. This HOC demonstrates a technique to do that.\\r\\n\\r\\n![Tree Node Paths screenshot](https://user-images.githubusercontent.com/781818/37561835-7729112e-2a2f-11e8-8f5b-c04f227e49b2.png)\\r\\n\\r\\n[![Edit Tree node paths with React Dropdown Tree Select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l765q6lmrq)\\r\\n\"\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/raw-loader!./docs/HOC.md\n// module id = 131\n// module chunks = 0\n\n//# sourceURL=webpack:///./docs/HOC.md?./node_modules/raw-loader"); +eval("module.exports = \"# Doing more with HOCs\\r\\n\\r\\nThis documentation is about expanding react-dropdown-tree-select using Higher Order Components/Functions.\\r\\n\\r\\n## Table of Contents\\r\\n\\r\\n* [What are HOCs](#what-are-hocs)\\r\\n* [Why use a HOC](#why-use-a-hoc)\\r\\n* [Examples](#examples)\\r\\n * [External Select All, Unselect All buttons](#external-select-all--unselect-all-buttons)\\r\\n * [Internal Select All Checkbox](#internal-select-all-checkbox)\\r\\n * [Prevent re-render on parent prop/state changes](#prevent-re-render-on-parent-prop-state-changes)\\r\\n * [Tree Node Paths](#tree-node-paths)\\r\\n\\r\\n## What are HOCs\\r\\n\\r\\nHOCs (or Higher Order Components/Functions) are either a React Component (or a function that returns a React Component) that are used to enhance the functionality of an existing component.\\r\\n\\r\\nYou can use HOCs to manipulate the props and state, abstract rendering logic or enable code reuse.\\r\\n\\r\\n## Why use a HOC\\r\\n\\r\\nOr in other words, why is this functionality not baked in to the component? It's a fair question. There are many reasons but probably the biggest reason is - to _Keep It Simple_!\\r\\n\\r\\nThe control tries to provide a minimal, core set of features while making it easy to expand upon the core features using composition, or HOCs. This lets the component to have a very small footprint and allows you to customize/tweak or build upon as per your requirements.\\r\\n\\r\\n## Examples\\r\\n\\r\\nThese are some of the examples of expanding the core component with HOCs. They are all provided as Code Sandboxes so feel free to play with them.\\r\\n\\r\\nIf you'd like to add to these examples, create an issue with a brief description (of what the HOC does) along with a CodeSandbox link.\\r\\n\\r\\n### External Select All, Unselect All buttons\\r\\n\\r\\nThis is an example of selecting/unselecting all nodes programmatically, outside of the control.\\r\\n\\r\\n![External Select/Unselect All buttons screenshot](https://user-images.githubusercontent.com/781818/37561174-6120362a-2a1e-11e8-914d-48636ed6e7d3.png)\\r\\n\\r\\n[![Edit n348v2qox0](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/n348v2qox0)\\r\\n\\r\\n### Internal Select All Checkbox\\r\\n\\r\\nThis example shows how to add a special Select All checkbox within the dropdown itself.\\r\\n\\r\\n![Internal Select All Checkbox screenshot](https://user-images.githubusercontent.com/781818/37561139-7066396e-2a1d-11e8-99d0-02c24acbef3a.png)\\r\\n\\r\\n[![Edit rjwqq86p1n](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rjwqq86p1n)\\r\\n\\r\\n### Prevent re-render on parent prop/state changes\\r\\n\\r\\nOnce initialized, the component (react-dropdown-tree-select) manages its own internal state. However, if this component is part of another component, then due to React's nature, anytime the parent is re-rendered, this component will re-render. While React's Virtual DOM diffing will cancel out any ultimate DOM modifications, it'll still go through all of its initialization process. This can be a waste of computation if the tree data hasn't changed.\\r\\n\\r\\nTo prevent that, this HOC simply adds a deep equality check in its `shouldComponentUpdate`.\\r\\n\\r\\nThis is not baked in the component since:\\r\\n\\r\\n* Deep equality check can be expensive if the tree is large\\r\\n* Not everyone may need this check\\r\\n\\r\\n[![Edit Prevent re-render on parent render with React Dropdown Tree Select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/v05klkn56l)\\r\\n\\r\\n### Tree Node Paths\\r\\n\\r\\nThe `onChange`/`onNodeToggle` events bubbles up few useful properties such as `_depth`, `_id`, `_parent` (and `_children` for non-leaf nodes). Using these, you can recurse up/down to grab a node in the tree.\\r\\n\\r\\nIn addition, you can use the object path notation to grab the node without recursion. This HOC demonstrates a technique to do that.\\r\\n\\r\\n![Tree Node Paths screenshot](https://user-images.githubusercontent.com/781818/37561835-7729112e-2a2f-11e8-8f5b-c04f227e49b2.png)\\r\\n\\r\\n[![Edit Tree node paths with React Dropdown Tree Select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l765q6lmrq)\\r\\n\"\n\n//////////////////\n// WEBPACK FOOTER\n// ./docs/HOC.md\n// module id = 131\n// module chunks = 0\n\n//# sourceURL=webpack:///./docs/HOC.md?"); /***/ }), /* 132 */ @@ -987,13 +987,13 @@ eval("\n/**\n * When source maps are enabled, `style-loader` uses a link element /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("/* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_marked__ = __webpack_require__(49);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_marked___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_marked__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__raw_loader_README_md__ = __webpack_require__(135);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__raw_loader_README_md___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__raw_loader_README_md__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css__ = __webpack_require__(50);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_prism_js__ = __webpack_require__(51);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_prism_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4__utils_prism_js__);\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n\n\n\n\n\n\n\nvar Story = function (_React$Component) {\n _inherits(Story, _React$Component);\n\n function Story() {\n _classCallCheck(this, Story);\n\n return _possibleConstructorReturn(this, (Story.__proto__ || Object.getPrototypeOf(Story)).apply(this, arguments));\n }\n\n _createClass(Story, [{\n key: 'render',\n value: function render() {\n return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(\n 'div',\n { style: { padding: '10px' } },\n __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('span', {\n className: 'markdown-body',\n dangerouslySetInnerHTML: { __html: __WEBPACK_IMPORTED_MODULE_0_marked___default()(__WEBPACK_IMPORTED_MODULE_2__raw_loader_README_md___default.a) }\n })\n );\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n global.Prism && global.Prism.highlightAll();\n }\n }]);\n\n return Story;\n}(__WEBPACK_IMPORTED_MODULE_1_react___default.a.Component);\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Story);\n/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(9)))\n\n//////////////////\n// WEBPACK FOOTER\n// ./docs/src/stories/Readme.js\n// module id = 134\n// module chunks = 0\n\n//# sourceURL=webpack:///./docs/src/stories/Readme.js?"); +eval("/* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_marked__ = __webpack_require__(49);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_marked___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_marked__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__README_md__ = __webpack_require__(135);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__README_md___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__README_md__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css__ = __webpack_require__(50);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_github_markdown_css_github_markdown_css__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_prism_js__ = __webpack_require__(51);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_prism_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4__utils_prism_js__);\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n\n\n\n\n\n\n\nvar Story = function (_React$Component) {\n _inherits(Story, _React$Component);\n\n function Story() {\n _classCallCheck(this, Story);\n\n return _possibleConstructorReturn(this, (Story.__proto__ || Object.getPrototypeOf(Story)).apply(this, arguments));\n }\n\n _createClass(Story, [{\n key: 'render',\n value: function render() {\n return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(\n 'div',\n { style: { padding: '10px' } },\n __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement('span', {\n className: 'markdown-body',\n dangerouslySetInnerHTML: { __html: __WEBPACK_IMPORTED_MODULE_0_marked___default()(__WEBPACK_IMPORTED_MODULE_2__README_md___default.a) }\n })\n );\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n global.Prism && global.Prism.highlightAll();\n }\n }]);\n\n return Story;\n}(__WEBPACK_IMPORTED_MODULE_1_react___default.a.Component);\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Story);\n/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(9)))\n\n//////////////////\n// WEBPACK FOOTER\n// ./docs/src/stories/Readme.js\n// module id = 134\n// module chunks = 0\n\n//# sourceURL=webpack:///./docs/src/stories/Readme.js?"); /***/ }), /* 135 */ /***/ (function(module, exports) { -eval("module.exports = \"# react-dropdown-tree-select\\r\\n\\r\\n---\\r\\n\\r\\n[![NPM version][npm-image]][npm-url] [![gzip][gzip-image]][gzip-url] [![npm download][download-image]][npm-url]\\r\\n\\r\\n[![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![semantic-release][semantic-release]][semantic-release-url] [![Commitizen friendly][commitizen]][commitizen-url] [![Greenkeeper badge][greenkeeper]][greenkeeper-url]\\r\\n\\r\\n[npm-image]: http://img.shields.io/npm/v/react-dropdown-tree-select.svg?style=flat-square\\r\\n[npm-url]: http://npmjs.org/package/react-dropdown-tree-select\\r\\n[travis-image]: https://img.shields.io/travis/dowjones/react-dropdown-tree-select.svg?style=flat-square\\r\\n[travis-url]: https://travis-ci.org/dowjones/react-dropdown-tree-select\\r\\n[coveralls-image]: https://img.shields.io/coveralls/dowjones/react-dropdown-tree-select.svg?style=flat-square\\r\\n[coveralls-url]: https://coveralls.io/r/dowjones/react-dropdown-tree-select?branch=master\\r\\n[download-image]: https://img.shields.io/npm/dm/react-dropdown-tree-select.svg?style=flat-square\\r\\n[semantic-release]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square\\r\\n[semantic-release-url]: https://github.com/semantic-release/semantic-release\\r\\n[commitizen]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\\r\\n[commitizen-url]: http://commitizen.github.io/cz-cli/\\r\\n[greenkeeper]: https://badges.greenkeeper.io/dowjones/react-dropdown-tree-select.svg?style=flat-square\\r\\n[greenkeeper-url]: https://greenkeeper.io/\\r\\n[gzip-image]: http://img.badgesize.io/https://unpkg.com/react-dropdown-tree-select/dist/react-dropdown-tree-select.js?compression=gzip&style=flat-square\\r\\n[gzip-url]: https://unpkg.com/react-dropdown-tree-select/dist/react-dropdown-tree-select.js\\r\\n\\r\\n## React Dropdown Tree Select\\r\\n\\r\\nA lightweight and fast control to render a select component that can display hierarchical tree data. In addition, the control shows the selection in pills and allows user to search the options for quick filtering and selection.\\r\\n\\r\\n## Table of Contents\\r\\n\\r\\n* [Screenshot](#screenshot)\\r\\n* [Demo](#example)\\r\\n * [Vanilla (no framework)](#vanilla-no-framework)\\r\\n * [With Bootstrap](#with-bootstrap)\\r\\n * [With Material Design](#with-material-design)\\r\\n * [As Single Select](#as-single-select)\\r\\n* [Install](#install)\\r\\n * [Peer Dependencies](#peer-dependencies)\\r\\n* [Usage](#usage)\\r\\n* [Props](#props)\\r\\n * [className](#classname)\\r\\n * [onChange](#onchange)\\r\\n * [onNodeToggle](#onnodetoggle)\\r\\n * [data](#data)\\r\\n * [placeholderText](#placeholdertext)\\r\\n * [keepTreeOnSearch](#keeptreeonsearch)\\r\\n* [Styling and Customization](#styling-and-customization)\\r\\n * [Using default styles](#default-styles)\\r\\n * [Customizing with Bootstrap, Material Design styles](#customizing-styles)\\r\\n* [Performance](#performance)\\r\\n * [Search optimizations](#search-optimizations)\\r\\n * [Search debouncing](#search-debouncing)\\r\\n * [Virtualized rendering](#virtualized-rendering)\\r\\n * [Reducing costly DOM manipulations](#reducing-costly-dom-manipulations)\\r\\n* [FAQ](#faq)\\r\\n* [Doing more with HOCs](/docs/HOC.md)\\r\\n* [Development](#development)\\r\\n* [License](#license)\\r\\n\\r\\n## Screenshot\\r\\n\\r\\n![demo](/docs/demo.gif)\\r\\n\\r\\n## Demo\\r\\n\\r\\n##### Vanilla, no framework\\r\\n\\r\\nOnline demo: http://dowjones.github.io/react-dropdown-tree-select/\\r\\n\\r\\n##### With Bootstrap\\r\\n\\r\\nOnline demo: http://dowjones.github.io/react-dropdown-tree-select/examples/bootstrap\\r\\n\\r\\n##### With Material Design\\r\\n\\r\\nOnline demo: http://dowjones.github.io/react-dropdown-tree-select/examples/material\\r\\n\\r\\n##### As Single Select\\r\\n\\r\\nOnline demo: http://dowjones.github.io/react-dropdown-tree-select/examples/simple\\r\\n\\r\\n## Install\\r\\n\\r\\n```\\r\\n> npm i react-dropdown-tree-select\\r\\n\\r\\n// or if using yarn\\r\\n\\r\\n> yarn add react-dropdown-tree-select\\r\\n```\\r\\n\\r\\n### Peer Dependencies\\r\\n\\r\\nIn order to avoid version conflicts in your project, you must specify and install [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom) as [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/). Note that NPM doesn't install peer dependencies automatically. Instead it will show you a warning message with instructions on how to install them.\\r\\n\\r\\n## Usage\\r\\n\\r\\n```jsx\\r\\nimport React from 'react'\\r\\nimport ReactDOM from 'react-dom'\\r\\nimport DropdownTreeSelect from 'react-dropdown-tree-select'\\r\\n\\r\\nconst tree = {\\r\\n label: 'search me',\\r\\n value: 'searchme',\\r\\n children: [\\r\\n {\\r\\n label: 'search me too',\\r\\n value: 'searchmetoo',\\r\\n children: [\\r\\n {\\r\\n label: 'No one can get me',\\r\\n value: 'anonymous'\\r\\n }\\r\\n ]\\r\\n }\\r\\n ]\\r\\n}\\r\\n\\r\\nconst onChange = (currentNode, selectedNodes) => {\\r\\n console.log('onChange::', currentNode, selectedNodes)\\r\\n}\\r\\nconst onAction = ({ action, node }) => {\\r\\n console.log(`onAction:: [${action}]`, node)\\r\\n}\\r\\nconst onNodeToggle = currentNode => {\\r\\n console.log('onNodeToggle::', currentNode)\\r\\n}\\r\\n\\r\\nReactDOM.render(\\r\\n ,\\r\\n document.body\\r\\n) // in real world, you'd want to render to an element, instead of body.\\r\\n```\\r\\n\\r\\n## Props\\r\\n\\r\\n### className\\r\\n\\r\\nType: `string`\\r\\n\\r\\nAdditional classname for container. The container renders with a default classname of `react-dropdown-tree-select`.\\r\\n\\r\\n### onChange\\r\\n\\r\\nType: `function`\\r\\n\\r\\nFires when a node change event occurs. Currently the following actions trigger a node change:\\r\\n\\r\\n* Checkbox click which checks/unchecks the item\\r\\n* Closing of pill (which unchecks the corresponding checkbox item)\\r\\n\\r\\nCalls the handler with the current node object and all selected nodes (if any). Example:\\r\\n\\r\\n```jsx\\r\\nfunction onChange(currentNode, selectedNodes) {\\r\\n // currentNode: { label, value, children, expanded, checked, className, ...extraProps }\\r\\n // selectedNodes: [{ label, value, children, expanded, checked, className, ...extraProps }]\\r\\n}\\r\\n\\r\\nreturn \\r\\n```\\r\\n\\r\\n### onNodeToggle\\r\\n\\r\\nType: `function`\\r\\n\\r\\nFires when a node is expanded or collapsed.\\r\\n\\r\\nCalls the handler with the current node object. Example:\\r\\n\\r\\n```jsx\\r\\nfunction onNodeToggle(currentNode) {\\r\\n // currentNode: { label, value, children, expanded, checked, className, ...extraProps }\\r\\n}\\r\\n\\r\\nreturn \\r\\n```\\r\\n\\r\\n### data\\r\\n\\r\\nType: `Object` or `Array`\\r\\n\\r\\nData for rendering the tree select items. The object requires the following structure:\\r\\n\\r\\n```js\\r\\n{\\r\\n label, // required: Checkbox label\\r\\n value, // required: Checkbox value\\r\\n children, // optional: Array of child objects\\r\\n checked, // optional: Initial state of checkbox. if true, checkbox is selected and corresponding pill is rendered.\\r\\n disabled, // optional: Selectable state of checkbox. if true, the checkbox is disabled and the node is not selectable.\\r\\n expanded, // optional: If true, the node is expanded (children of children nodes are not expanded by default unless children nodes also have expanded: true).\\r\\n className, // optional: Additional css class for the node. This is helpful to style the nodes your way\\r\\n tagClassName, // optional: Css class for the corresponding tag. Use this to add custom style the pill corresponding to the node.\\r\\n actions, // optional: An array of extra action on the node (such as displaying an info icon or any custom icons/elements)\\r\\n dataset, // optional: Allows data-* attributes to be set on the node and tag elements\\r\\n ... // optional: Any extra properties that you'd like to receive during `onChange` event\\r\\n}\\r\\n```\\r\\n\\r\\nThe `action` object requires the following structure:\\r\\n\\r\\n```js\\r\\n{\\r\\n className, // required: CSS class for the node. e.g. `fa fa-info`\\r\\n onAction, // required: Fired on click of the action. The event handler receives `action` object as well as the `node` object.\\r\\n title, // optional: HTML tooltip text\\r\\n text, // optional: Any text to be displayed. This is helpful to pass ligatures if you're using ligature fonts\\r\\n ... // optional: Any extra properties that you'd like to receive during `onChange` event\\r\\n}\\r\\n```\\r\\n\\r\\nAn array renders a tree with multiple root level items whereas an object renders a tree with a single root element (e.g. a `Select All` root node).\\r\\n\\r\\n### placeholderText\\r\\n\\r\\nType: `string`\\r\\n\\r\\nThe text to display as placeholder on the search box. Defaults to `Choose...`\\r\\n\\r\\n### keepTreeOnSearch\\r\\n\\r\\nType: `bool`\\r\\n\\r\\nDisplays search results as a tree instead of flattened results\\r\\n\\r\\n### simpleSelect\\r\\n\\r\\nType: `bool` (default: `false`)\\r\\n\\r\\nTurns the dropdown into a simple, single select dropdown. If you pass tree data, only immediate children are picked, grandchildren nodes are ignored. Defaults to `false`.\\r\\n\\r\\n## Styling and Customization\\r\\n\\r\\n### Default styles\\r\\n\\r\\nThe component brings minimal styles for bare-bones functional rendering. It is kept purposefully minimal so that user can style/customize it completely to suit their needs.\\r\\n\\r\\n#### Using WebPack\\r\\n\\r\\nIf you're using a bundler like webpack, make sure you configure webpack to import the default styles. To do so, simply add this rule to your webpack config:\\r\\n\\r\\n```js\\r\\n// allow webpack to import/bundle styles from node_modules for this component\\r\\nmodule: {\\r\\n rules: [\\r\\n {\\r\\n test: /\\\\.css$/,\\r\\n use: ExtractTextPlugin.extract({\\r\\n fallback: 'style-loader',\\r\\n use: [\\r\\n {\\r\\n loader: 'css-loader'\\r\\n }\\r\\n ]\\r\\n }),\\r\\n include: /node_modules[/\\\\\\\\]react-dropdown-tree-select/\\r\\n }\\r\\n ]\\r\\n}\\r\\n```\\r\\n\\r\\n#### Using a CDN\\r\\n\\r\\nYou can import and place a style link directly by referencing it from a CDN.\\r\\n\\r\\n```html\\r\\n\\r\\n```\\r\\n\\r\\nNote: Above example will always fetch the latest version. To fetch a specific version, use `https://unpkg.com/react-dropdown-tree-select@/dist/styles.css`. Visit [unpkg.com](https://unpkg.com/#/) to see other options.\\r\\n\\r\\n#### Using with other bundlers\\r\\n\\r\\nYou can reference the files from `node_modules/react-dropdown-tree-select/dist/styles.css` to include in your own bundle via gulp or any other bundlers you have.\\r\\n\\r\\n### Customizing styles\\r\\n\\r\\nOnce you import default styles, it is easy to add/override the provided styles to match popular frameworks. Checkout `/docs` folder for some examples.\\r\\n\\r\\n* [With Bootstrap](/docs/examples/bootstrap)\\r\\n* [With Material Design ](/docs/examples/material)\\r\\n\\r\\n## Performance\\r\\n\\r\\n### Search optimizations\\r\\n\\r\\n* The tree creates a flat list of nodes from hierarchical tree data to perform searches that are linear in time irrespective of the tree depth or size.\\r\\n* It also memoizes each search term, so subsequent searches are instantaneous (almost).\\r\\n* Last but not the least, the search employs progressive filtering technique where subsequent searches are performed on the previous search set. E.g., say the tree has 4000 nodes altogether and the user wants to filter nodes that contain the text: \\\"2002\\\". As the user enters each key press the search goes like this:\\r\\n\\r\\n```\\r\\nkey press : 2-----20-----200-----2002\\r\\n | | | |\\r\\nsearch set: 967 834 49 7\\r\\n```\\r\\n\\r\\nThe search for \\\"20\\\" happens against the previously matched set of 967 as opposed to all 4000 nodes; \\\"200\\\" happens against 834 nodes and so on.\\r\\n\\r\\n### Search debouncing\\r\\n\\r\\nThe tree debounces key presses to avoid costly search calculations. The default duration is 100ms.\\r\\n\\r\\n### Virtualized rendering\\r\\n\\r\\nThe dropdown renders only visible content and skips any nodes that are going to hidden from the user. E.g., if a parent node is not expanded, there is no point in rendering children since they will not be visible anyway.\\r\\n\\r\\nPlanned feature: Use [react-virtualized](https://github.com/bvaughn/react-virtualized) to take this to the next level.\\r\\n\\r\\n### Reducing costly DOM manipulations\\r\\n\\r\\nThe tree tries to minimize the DOM manipulations as much as possible. E.g., during searching, the non-matching nodes are simply `hidden` and css adjusted on remaining to create the perception of a new filtered list.\\r\\nNode toggling also achieves the expand/collapse effect by manipulating css classes instead of creating new tree with filtered out nodes.\\r\\n\\r\\n## FAQ\\r\\n\\r\\n### How do I change the placeholder text?\\r\\n\\r\\nThe default [placeholder](#placeholdertext) is `Choose...`. If you want to change this to something else, you can use `placeholderText` property to set it.\\r\\n\\r\\n```jsx\\r\\n\\r\\n```\\r\\n\\r\\n### How do I tweak styles?\\r\\n\\r\\nEasy style customization is one of the design goals of this component. Every visual aspect of this dropdown can be tweaked without going through extensive hacks. E.g., to change how disabled nodes appear:\\r\\n\\r\\n```css\\r\\n.node .fa-ban {\\r\\n color: #ccc;\\r\\n}\\r\\n```\\r\\n\\r\\nThe css classes needed to overide can be found by inspecting the component via developer tools (chrome/safari/ie) or firebug (firefox). You can also inspect the [source code](/src) or look in [examples](/docs/index.css).\\r\\n\\r\\n### I do not want the default styles, do I need to fork the project?\\r\\n\\r\\nAbsolutely not! Simply do not import the styles (webpack) or include it in your html (link tags). Roughly, this is the HTML/CSS skeleton rendered by the component:\\r\\n\\r\\n```pug\\r\\ndiv.react-dropdown-tree-select\\r\\n div.dropdown\\r\\n a.dropdown-trigger\\r\\n span\\r\\n ul.tag-list\\r\\n li.tag-item\\r\\n input\\r\\n div.dropdown-content\\r\\n ul.root\\r\\n li.node.tree\\r\\n i.toggle.collapsed\\r\\n label\\r\\n input.checkbox-item\\r\\n span.node-label\\r\\n```\\r\\n\\r\\nWrite your own styles from scratch or copy [existing styles](https://github.com/search?utf8=%E2%9C%93&q=repo%3Adowjones%2Freact-dropdown-tree-select+language%3ACSS+path%3A%2Fsrc&type=Code&ref=advsearch&l=CSS&l=) and tweak them.\\r\\nThen include your own custom styles in your project.\\r\\n\\r\\n:bulb: Pro tip: Leverage [node's](#data) `className`, `tagClassName` or [action's](#data) `className` prop to emit your own class name. Then override/add css propeties in your class. Remember that last person wins in CSS (unless specificity or `!important` is involved). Often times, this may suffice and may be easier then writing all the styles from the ground up.\\r\\n\\r\\nIf you believe this aspect can be improved further, feel free to raise an issue.\\r\\n\\r\\n### My question is not listed here\\r\\n\\r\\nFind more questions and their answers in the [issue tracker](https://github.com/dowjones/react-dropdown-tree-select/issues?utf8=%E2%9C%93&q=%20label%3Aquestion%20). If it still doesn't answer your questions, please raise an issue.\\r\\n\\r\\n## Development\\r\\n\\r\\nClone the git repo and install dependencies.\\r\\n\\r\\n```\\r\\nnpm i\\r\\n\\r\\n// or\\r\\n\\r\\nyarn install\\r\\n```\\r\\n\\r\\nYou can then run following scripts for local development\\r\\n\\r\\n```\\r\\nnpm run demo // local demo, watches and rebuilds on changes\\r\\n\\r\\nnpm test // test your changes\\r\\n\\r\\nnpm lint // fixes anything that can be fixed and reports remaining errors\\r\\n\\r\\nnpm run test:cov // test coverage\\r\\n```\\r\\n\\r\\n## License\\r\\n\\r\\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\\r\\n\\r\\nReleased 2017 by [Hrusikesh Panda](https://github.com/mrchief) @ [Dow Jones](https://github.com/dowjones)\\r\\n\"\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/raw-loader!./README.md\n// module id = 135\n// module chunks = 0\n\n//# sourceURL=webpack:///./README.md?./node_modules/raw-loader"); +eval("module.exports = \"# react-dropdown-tree-select\\r\\n\\r\\n---\\r\\n\\r\\n[![NPM version][npm-image]][npm-url] [![gzip][gzip-image]][gzip-url] [![npm download][download-image]][npm-url]\\r\\n\\r\\n[![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![semantic-release][semantic-release]][semantic-release-url] [![Commitizen friendly][commitizen]][commitizen-url] [![Greenkeeper badge][greenkeeper]][greenkeeper-url]\\r\\n\\r\\n[npm-image]: http://img.shields.io/npm/v/react-dropdown-tree-select.svg?style=flat-square\\r\\n[npm-url]: http://npmjs.org/package/react-dropdown-tree-select\\r\\n[travis-image]: https://img.shields.io/travis/dowjones/react-dropdown-tree-select.svg?style=flat-square\\r\\n[travis-url]: https://travis-ci.org/dowjones/react-dropdown-tree-select\\r\\n[coveralls-image]: https://img.shields.io/coveralls/dowjones/react-dropdown-tree-select.svg?style=flat-square\\r\\n[coveralls-url]: https://coveralls.io/r/dowjones/react-dropdown-tree-select?branch=master\\r\\n[download-image]: https://img.shields.io/npm/dm/react-dropdown-tree-select.svg?style=flat-square\\r\\n[semantic-release]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square\\r\\n[semantic-release-url]: https://github.com/semantic-release/semantic-release\\r\\n[commitizen]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\\r\\n[commitizen-url]: http://commitizen.github.io/cz-cli/\\r\\n[greenkeeper]: https://badges.greenkeeper.io/dowjones/react-dropdown-tree-select.svg?style=flat-square\\r\\n[greenkeeper-url]: https://greenkeeper.io/\\r\\n[gzip-image]: http://img.badgesize.io/https://unpkg.com/react-dropdown-tree-select/dist/react-dropdown-tree-select.js?compression=gzip&style=flat-square\\r\\n[gzip-url]: https://unpkg.com/react-dropdown-tree-select/dist/react-dropdown-tree-select.js\\r\\n\\r\\n## React Dropdown Tree Select\\r\\n\\r\\nA lightweight and fast control to render a select component that can display hierarchical tree data. In addition, the control shows the selection in pills and allows user to search the options for quick filtering and selection.\\r\\n\\r\\n## Table of Contents\\r\\n\\r\\n* [Screenshot](#screenshot)\\r\\n* [Demo](#example)\\r\\n * [Vanilla (no framework)](#vanilla-no-framework)\\r\\n * [With Bootstrap](#with-bootstrap)\\r\\n * [With Material Design](#with-material-design)\\r\\n * [As Single Select](#as-single-select)\\r\\n* [Install](#install)\\r\\n * [Peer Dependencies](#peer-dependencies)\\r\\n* [Usage](#usage)\\r\\n* [Props](#props)\\r\\n * [className](#classname)\\r\\n * [onChange](#onchange)\\r\\n * [onNodeToggle](#onnodetoggle)\\r\\n * [data](#data)\\r\\n * [placeholderText](#placeholdertext)\\r\\n * [keepTreeOnSearch](#keeptreeonsearch)\\r\\n* [Styling and Customization](#styling-and-customization)\\r\\n * [Using default styles](#default-styles)\\r\\n * [Customizing with Bootstrap, Material Design styles](#customizing-styles)\\r\\n* [Performance](#performance)\\r\\n * [Search optimizations](#search-optimizations)\\r\\n * [Search debouncing](#search-debouncing)\\r\\n * [Virtualized rendering](#virtualized-rendering)\\r\\n * [Reducing costly DOM manipulations](#reducing-costly-dom-manipulations)\\r\\n* [FAQ](#faq)\\r\\n* [Doing more with HOCs](/docs/HOC.md)\\r\\n* [Development](#development)\\r\\n* [License](#license)\\r\\n\\r\\n## Screenshot\\r\\n\\r\\n![animated demo screenshot](https://user-images.githubusercontent.com/781818/37562235-0ae9e9ec-2a3a-11e8-8266-b0e6b716d0d1.gif)\\r\\n\\r\\n## Demo\\r\\n\\r\\n##### Vanilla, no framework\\r\\n\\r\\nOnline demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-vanilla-styles\\r\\n\\r\\n##### With Bootstrap\\r\\n\\r\\nOnline demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-bootstrap-styles\\r\\n\\r\\n##### With Material Design\\r\\n\\r\\nOnline demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-material-design-styles\\r\\n\\r\\n##### As Single Select\\r\\n\\r\\nOnline demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/simple-select\\r\\n\\r\\n## Install\\r\\n\\r\\n```\\r\\n> npm i react-dropdown-tree-select\\r\\n\\r\\n// or if using yarn\\r\\n\\r\\n> yarn add react-dropdown-tree-select\\r\\n```\\r\\n\\r\\n### Peer Dependencies\\r\\n\\r\\nIn order to avoid version conflicts in your project, you must specify and install [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom) as [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/). Note that NPM doesn't install peer dependencies automatically. Instead it will show you a warning message with instructions on how to install them.\\r\\n\\r\\n## Usage\\r\\n\\r\\n```jsx\\r\\nimport React from 'react'\\r\\nimport ReactDOM from 'react-dom'\\r\\nimport DropdownTreeSelect from 'react-dropdown-tree-select'\\r\\n\\r\\nconst tree = {\\r\\n label: 'search me',\\r\\n value: 'searchme',\\r\\n children: [\\r\\n {\\r\\n label: 'search me too',\\r\\n value: 'searchmetoo',\\r\\n children: [\\r\\n {\\r\\n label: 'No one can get me',\\r\\n value: 'anonymous'\\r\\n }\\r\\n ]\\r\\n }\\r\\n ]\\r\\n}\\r\\n\\r\\nconst onChange = (currentNode, selectedNodes) => {\\r\\n console.log('onChange::', currentNode, selectedNodes)\\r\\n}\\r\\nconst onAction = ({ action, node }) => {\\r\\n console.log(`onAction:: [${action}]`, node)\\r\\n}\\r\\nconst onNodeToggle = currentNode => {\\r\\n console.log('onNodeToggle::', currentNode)\\r\\n}\\r\\n\\r\\nReactDOM.render(\\r\\n ,\\r\\n document.body\\r\\n) // in real world, you'd want to render to an element, instead of body.\\r\\n```\\r\\n\\r\\n## Props\\r\\n\\r\\n### className\\r\\n\\r\\nType: `string`\\r\\n\\r\\nAdditional classname for container. The container renders with a default classname of `react-dropdown-tree-select`.\\r\\n\\r\\n### onChange\\r\\n\\r\\nType: `function`\\r\\n\\r\\nFires when a node change event occurs. Currently the following actions trigger a node change:\\r\\n\\r\\n* Checkbox click which checks/unchecks the item\\r\\n* Closing of pill (which unchecks the corresponding checkbox item)\\r\\n\\r\\nCalls the handler with the current node object and all selected nodes (if any). Example:\\r\\n\\r\\n```jsx\\r\\nfunction onChange(currentNode, selectedNodes) {\\r\\n // currentNode: { label, value, children, expanded, checked, className, ...extraProps }\\r\\n // selectedNodes: [{ label, value, children, expanded, checked, className, ...extraProps }]\\r\\n}\\r\\n\\r\\nreturn \\r\\n```\\r\\n\\r\\n### onNodeToggle\\r\\n\\r\\nType: `function`\\r\\n\\r\\nFires when a node is expanded or collapsed.\\r\\n\\r\\nCalls the handler with the current node object. Example:\\r\\n\\r\\n```jsx\\r\\nfunction onNodeToggle(currentNode) {\\r\\n // currentNode: { label, value, children, expanded, checked, className, ...extraProps }\\r\\n}\\r\\n\\r\\nreturn \\r\\n```\\r\\n\\r\\n### data\\r\\n\\r\\nType: `Object` or `Array`\\r\\n\\r\\nData for rendering the tree select items. The object requires the following structure:\\r\\n\\r\\n```js\\r\\n{\\r\\n label, // required: Checkbox label\\r\\n value, // required: Checkbox value\\r\\n children, // optional: Array of child objects\\r\\n checked, // optional: Initial state of checkbox. if true, checkbox is selected and corresponding pill is rendered.\\r\\n disabled, // optional: Selectable state of checkbox. if true, the checkbox is disabled and the node is not selectable.\\r\\n expanded, // optional: If true, the node is expanded (children of children nodes are not expanded by default unless children nodes also have expanded: true).\\r\\n className, // optional: Additional css class for the node. This is helpful to style the nodes your way\\r\\n tagClassName, // optional: Css class for the corresponding tag. Use this to add custom style the pill corresponding to the node.\\r\\n actions, // optional: An array of extra action on the node (such as displaying an info icon or any custom icons/elements)\\r\\n dataset, // optional: Allows data-* attributes to be set on the node and tag elements\\r\\n ... // optional: Any extra properties that you'd like to receive during `onChange` event\\r\\n}\\r\\n```\\r\\n\\r\\nThe `action` object requires the following structure:\\r\\n\\r\\n```js\\r\\n{\\r\\n className, // required: CSS class for the node. e.g. `fa fa-info`\\r\\n onAction, // required: Fired on click of the action. The event handler receives `action` object as well as the `node` object.\\r\\n title, // optional: HTML tooltip text\\r\\n text, // optional: Any text to be displayed. This is helpful to pass ligatures if you're using ligature fonts\\r\\n ... // optional: Any extra properties that you'd like to receive during `onChange` event\\r\\n}\\r\\n```\\r\\n\\r\\nAn array renders a tree with multiple root level items whereas an object renders a tree with a single root element (e.g. a `Select All` root node).\\r\\n\\r\\n### placeholderText\\r\\n\\r\\nType: `string`\\r\\n\\r\\nThe text to display as placeholder on the search box. Defaults to `Choose...`\\r\\n\\r\\n### keepTreeOnSearch\\r\\n\\r\\nType: `bool`\\r\\n\\r\\nDisplays search results as a tree instead of flattened results\\r\\n\\r\\n### simpleSelect\\r\\n\\r\\nType: `bool` (default: `false`)\\r\\n\\r\\nTurns the dropdown into a simple, single select dropdown. If you pass tree data, only immediate children are picked, grandchildren nodes are ignored. Defaults to `false`.\\r\\n\\r\\n## Styling and Customization\\r\\n\\r\\n### Default styles\\r\\n\\r\\nThe component brings minimal styles for bare-bones functional rendering. It is kept purposefully minimal so that user can style/customize it completely to suit their needs.\\r\\n\\r\\n#### Using WebPack\\r\\n\\r\\nIf you're using a bundler like webpack, make sure you configure webpack to import the default styles. To do so, simply add this rule to your webpack config:\\r\\n\\r\\n```js\\r\\n// allow webpack to import/bundle styles from node_modules for this component\\r\\nmodule: {\\r\\n rules: [\\r\\n {\\r\\n test: /\\\\.css$/,\\r\\n use: ExtractTextPlugin.extract({\\r\\n fallback: 'style-loader',\\r\\n use: [\\r\\n {\\r\\n loader: 'css-loader'\\r\\n }\\r\\n ]\\r\\n }),\\r\\n include: /node_modules[/\\\\\\\\]react-dropdown-tree-select/\\r\\n }\\r\\n ]\\r\\n}\\r\\n```\\r\\n\\r\\n#### Using a CDN\\r\\n\\r\\nYou can import and place a style link directly by referencing it from a CDN.\\r\\n\\r\\n```html\\r\\n\\r\\n```\\r\\n\\r\\nNote: Above example will always fetch the latest version. To fetch a specific version, use `https://unpkg.com/react-dropdown-tree-select@/dist/styles.css`. Visit [unpkg.com](https://unpkg.com/#/) to see other options.\\r\\n\\r\\n#### Using with other bundlers\\r\\n\\r\\nYou can reference the files from `node_modules/react-dropdown-tree-select/dist/styles.css` to include in your own bundle via gulp or any other bundlers you have.\\r\\n\\r\\n### Customizing styles\\r\\n\\r\\nOnce you import default styles, it is easy to add/override the provided styles to match popular frameworks. Checkout `/docs` folder for some examples.\\r\\n\\r\\n* [With Bootstrap](/docs/examples/bootstrap)\\r\\n* [With Material Design ](/docs/examples/material)\\r\\n\\r\\n## Performance\\r\\n\\r\\n### Search optimizations\\r\\n\\r\\n* The tree creates a flat list of nodes from hierarchical tree data to perform searches that are linear in time irrespective of the tree depth or size.\\r\\n* It also memoizes each search term, so subsequent searches are instantaneous (almost).\\r\\n* Last but not the least, the search employs progressive filtering technique where subsequent searches are performed on the previous search set. E.g., say the tree has 4000 nodes altogether and the user wants to filter nodes that contain the text: \\\"2002\\\". As the user enters each key press the search goes like this:\\r\\n\\r\\n```\\r\\nkey press : 2-----20-----200-----2002\\r\\n | | | |\\r\\nsearch set: 967 834 49 7\\r\\n```\\r\\n\\r\\nThe search for \\\"20\\\" happens against the previously matched set of 967 as opposed to all 4000 nodes; \\\"200\\\" happens against 834 nodes and so on.\\r\\n\\r\\n### Search debouncing\\r\\n\\r\\nThe tree debounces key presses to avoid costly search calculations. The default duration is 100ms.\\r\\n\\r\\n### Virtualized rendering\\r\\n\\r\\nThe dropdown renders only visible content and skips any nodes that are going to hidden from the user. E.g., if a parent node is not expanded, there is no point in rendering children since they will not be visible anyway.\\r\\n\\r\\nPlanned feature: Use [react-virtualized](https://github.com/bvaughn/react-virtualized) to take this to the next level.\\r\\n\\r\\n### Reducing costly DOM manipulations\\r\\n\\r\\nThe tree tries to minimize the DOM manipulations as much as possible. E.g., during searching, the non-matching nodes are simply `hidden` and css adjusted on remaining to create the perception of a new filtered list.\\r\\nNode toggling also achieves the expand/collapse effect by manipulating css classes instead of creating new tree with filtered out nodes.\\r\\n\\r\\n## FAQ\\r\\n\\r\\n### How do I change the placeholder text?\\r\\n\\r\\nThe default [placeholder](#placeholdertext) is `Choose...`. If you want to change this to something else, you can use `placeholderText` property to set it.\\r\\n\\r\\n```jsx\\r\\n\\r\\n```\\r\\n\\r\\n### How do I tweak styles?\\r\\n\\r\\nEasy style customization is one of the design goals of this component. Every visual aspect of this dropdown can be tweaked without going through extensive hacks. E.g., to change how disabled nodes appear:\\r\\n\\r\\n```css\\r\\n.node .fa-ban {\\r\\n color: #ccc;\\r\\n}\\r\\n```\\r\\n\\r\\nThe css classes needed to overide can be found by inspecting the component via developer tools (chrome/safari/ie) or firebug (firefox). You can also inspect the [source code](/src) or look in [examples](/docs/index.css).\\r\\n\\r\\n### I do not want the default styles, do I need to fork the project?\\r\\n\\r\\nAbsolutely not! Simply do not import the styles (webpack) or include it in your html (link tags). Roughly, this is the HTML/CSS skeleton rendered by the component:\\r\\n\\r\\n```pug\\r\\ndiv.react-dropdown-tree-select\\r\\n div.dropdown\\r\\n a.dropdown-trigger\\r\\n span\\r\\n ul.tag-list\\r\\n li.tag-item\\r\\n input\\r\\n div.dropdown-content\\r\\n ul.root\\r\\n li.node.tree\\r\\n i.toggle.collapsed\\r\\n label\\r\\n input.checkbox-item\\r\\n span.node-label\\r\\n```\\r\\n\\r\\nWrite your own styles from scratch or copy [existing styles](https://github.com/search?utf8=%E2%9C%93&q=repo%3Adowjones%2Freact-dropdown-tree-select+language%3ACSS+path%3A%2Fsrc&type=Code&ref=advsearch&l=CSS&l=) and tweak them.\\r\\nThen include your own custom styles in your project.\\r\\n\\r\\n:bulb: Pro tip: Leverage [node's](#data) `className`, `tagClassName` or [action's](#data) `className` prop to emit your own class name. Then override/add css propeties in your class. Remember that last person wins in CSS (unless specificity or `!important` is involved). Often times, this may suffice and may be easier then writing all the styles from the ground up.\\r\\n\\r\\nIf you believe this aspect can be improved further, feel free to raise an issue.\\r\\n\\r\\n### My question is not listed here\\r\\n\\r\\nFind more questions and their answers in the [issue tracker](https://github.com/dowjones/react-dropdown-tree-select/issues?utf8=%E2%9C%93&q=%20label%3Aquestion%20). If it still doesn't answer your questions, please raise an issue.\\r\\n\\r\\n## Development\\r\\n\\r\\nClone the git repo and install dependencies.\\r\\n\\r\\n```\\r\\nnpm i\\r\\n\\r\\n// or\\r\\n\\r\\nyarn install\\r\\n```\\r\\n\\r\\nYou can then run following scripts for local development\\r\\n\\r\\n```\\r\\nnpm run demo // local demo, watches and rebuilds on changes\\r\\n\\r\\nnpm test // test your changes\\r\\n\\r\\nnpm lint // fixes anything that can be fixed and reports remaining errors\\r\\n\\r\\nnpm run test:cov // test coverage\\r\\n```\\r\\n\\r\\n## License\\r\\n\\r\\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\\r\\n\\r\\nReleased 2017 by [Hrusikesh Panda](https://github.com/mrchief) @ [Dow Jones](https://github.com/dowjones)\\r\\n\"\n\n//////////////////\n// WEBPACK FOOTER\n// ./README.md\n// module id = 135\n// module chunks = 0\n\n//# sourceURL=webpack:///./README.md?"); /***/ }), /* 136 */ diff --git a/docs/src/App.js b/docs/src/App.js index dc32fc94..0b16d767 100644 --- a/docs/src/App.js +++ b/docs/src/App.js @@ -11,10 +11,11 @@ const stories = [ { name: 'Readme', component: Readme }, { name: 'HOC Readme', component: HOCReadme }, - { name: 'With Vanilla Styles', component: CodeSandbox('X6npLXPRW') }, + { name: 'With Vanilla Styles', component: CodeSandbox('v0nmw5ykk5') }, { name: 'With Bootstrap Styles', component: CodeSandbox('382pjronm') }, { name: 'With Material Design Styles', component: CodeSandbox('2o1pv6925p') }, { name: 'With Country flags', component: CodeSandbox('6w41wlvj8z') }, + { name: 'Simple Select', component: CodeSandbox('5xzn337wjn') }, { name: 'Custom Select/Unselect All Buttons (HOC)', component: CodeSandbox('n348v2qox0') @@ -31,7 +32,7 @@ const stories = [ ] export default class App extends React.Component { - render () { + render() { return ( - - React Table Logo -