{"_id":"storybook-react-treebeard","_rev":"471329","name":"storybook-react-treebeard","description":"React Tree View Component","dist-tags":{"latest":"1.1.6"},"maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"time":{"modified":"2021-08-05T08:19:38.000Z","created":"2017-07-01T10:08:58.900Z","1.1.6":"2017-07-02T07:41:54.486Z","1.1.5":"2017-07-01T10:08:58.900Z"},"users":{},"author":{"name":"Alex Curtis"},"repository":{"type":"git","url":"git+https://github.com/storybooks/react-treebeard.git"},"versions":{"1.1.6":{"name":"storybook-react-treebeard","version":"1.1.6","description":"React Tree View Component","main":"index.js","scripts":{"prepublish":"npm run lib","lib":"npm run babel","babel":"rimraf lib && babel src/ -d lib/","test":"karma start karma.conf.js","test-travis":"karma start --browsers Firefox --single-run","example":"webpack-dev-server --content-base ./example/ --config ./example/webpack.config.js"},"peerDependencies":{"react":"^15.5.4","react-dom":"^15.5.4"},"repository":{"type":"git","url":"git+https://github.com/storybooks/react-treebeard.git"},"keywords":["react","treeview","data-driven","customisable","fast"],"author":{"name":"Alex Curtis"},"license":"MIT","bugs":{"url":"https://github.com/storybooks/react-treebeard/issues"},"homepage":"https://github.com/storybooks/react-treebeard#readme","devDependencies":{"babel":"^6.23.0","babel-cli":"^6.24.1","babel-core":"^6.25.0","babel-eslint":"^7.2.3","babel-loader":"^7.1.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","chai":"^3.4.0","del":"^2.0.2","eslint":"^1.8.0","eslint-loader":"^1.1.0","eslint-plugin-react":"^3.6.3","gulp":"^3.9.0","gulp-babel":"^6.0.0","gulp-eslint":"^1.0.0","gulp-open":"^1.0.0","gulp-util":"^3.0.7","istanbul":"^0.3.22","istanbul-instrumenter-loader":"^0.1.3","karma":"^0.13.14","karma-babel-preprocessor":"^6.0.1","karma-chrome-launcher":"^0.2.1","karma-coverage":"^0.5.3","karma-firefox-launcher":"^0.1.6","karma-mocha":"^0.2.0","karma-sourcemap-loader":"^0.3.6","karma-spec-reporter":"0.0.22","karma-webpack":"^1.7.0","mocha":"^2.3.3","node-libs-browser":"^0.5.3","react":"^15.5.4","react-dom":"^15.5.4","react-hot-loader":"^1.3.0","rimraf":"^2.4.4","sinon":"github:uberVU/Sinon.JS","sinon-chai":"^2.8.0","webpack":"^1.12.2","webpack-dev-server":"^1.12.1"},"dependencies":{"babel-runtime":"^6.23.0","deep-equal":"^1.0.1","prop-types":"^15.5.8","radium":"^0.19.0","shallowequal":"^0.2.2","velocity-react":"^1.3.1"},"gitHead":"53e0011b72eb6e54b688422ff69589825ebfc73c","_id":"storybook-react-treebeard@1.1.6","_npmVersion":"5.0.0","_nodeVersion":"8.0.0","_npmUser":{"name":"igor-dv","email":"davydkin.igor@gmail.com"},"dist":{"shasum":"2db14ba0975b33fb2452680de026a655263b0bd5","size":19650,"noattachment":false,"key":"/storybook-react-treebeard/-/storybook-react-treebeard-1.1.6.tgz","tarball":"http://registry.cnpm.dingdandao.com/storybook-react-treebeard/download/storybook-react-treebeard-1.1.6.tgz"},"maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-react-treebeard-1.1.6.tgz_1498981313285_0.8959261514246464"},"directories":{},"publish_time":1498981314486,"_hasShrinkwrap":false,"_cnpm_publish_time":1498981314486},"1.1.5":{"name":"storybook-react-treebeard","version":"1.1.5","description":"React Tree View Component","main":"index.js","scripts":{"prepublish":"npm run lib","lib":"npm run babel","babel":"rimraf lib && babel src/ -d lib/","test":"karma start karma.conf.js","test-travis":"karma start --browsers Firefox --single-run","example":"webpack-dev-server --content-base ./example/ --config ./example/webpack.config.js"},"peerDependencies":{"react":"^15.5.4","react-dom":"^15.5.4"},"repository":{"type":"git","url":"git+https://github.com/storybooks/react-treebeard.git"},"keywords":["react","treeview","data-driven","customisable","fast"],"author":{"name":"Alex Curtis"},"license":"MIT","bugs":{"url":"https://github.com/storybooks/react-treebeard/issues"},"homepage":"https://github.com/storybooks/react-treebeard#readme","devDependencies":{"babel":"^5.8.29","babel-core":"^5.8.29","babel-eslint":"^4.1.3","babel-loader":"^5.3.3","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","chai":"^3.4.0","del":"^2.0.2","eslint":"^1.8.0","eslint-loader":"^1.1.0","eslint-plugin-react":"^3.6.3","gulp":"^3.9.0","gulp-babel":"^6.0.0","gulp-eslint":"^1.0.0","gulp-open":"^1.0.0","gulp-util":"^3.0.7","istanbul":"^0.3.22","istanbul-instrumenter-loader":"^0.1.3","karma":"^0.13.14","karma-babel-preprocessor":"^6.0.1","karma-chrome-launcher":"^0.2.1","karma-coverage":"^0.5.3","karma-firefox-launcher":"^0.1.6","karma-mocha":"^0.2.0","karma-sourcemap-loader":"^0.3.6","karma-spec-reporter":"0.0.22","karma-webpack":"^1.7.0","mocha":"^2.3.3","node-libs-browser":"^0.5.3","react":"^15.5.4","react-dom":"^15.5.4","react-hot-loader":"^1.3.0","rimraf":"^2.4.4","sinon":"github:uberVU/Sinon.JS","sinon-chai":"^2.8.0","webpack":"^1.12.2","webpack-dev-server":"^1.12.1"},"dependencies":{"babel-runtime":"^5.8.29","deep-equal":"^1.0.1","prop-types":"^15.5.8","radium":"^0.19.0","shallowequal":"^0.2.2","velocity-react":"^1.3.1"},"gitHead":"41e6ff25f510425bad8a8762eea45b3ebded56dc","_id":"storybook-react-treebeard@1.1.5","_npmVersion":"5.0.0","_nodeVersion":"8.0.0","_npmUser":{"name":"igor-dv","email":"davydkin.igor@gmail.com"},"dist":{"shasum":"ea215aa2491450367195840ae92e9c7093ce3e51","size":19639,"noattachment":false,"key":"/storybook-react-treebeard/-/storybook-react-treebeard-1.1.5.tgz","tarball":"http://registry.cnpm.dingdandao.com/storybook-react-treebeard/download/storybook-react-treebeard-1.1.5.tgz"},"maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-react-treebeard-1.1.5.tgz_1498903737736_0.7936961732339114"},"directories":{},"publish_time":1498903738900,"_hasShrinkwrap":false,"_cnpm_publish_time":1498903738900}},"readme":"# react-treebeard\r\n\r\n[](https://travis-ci.org/alexcurtis/react-treebeard) [](https://coveralls.io/github/alexcurtis/react-treebeard?branch=master)\r\n\r\nReact Tree View Component. Data-Driven, Fast, Efficient and Customisable.\r\n\r\n### Install\r\n\r\n```\r\nnpm install react-treebeard --save\r\n```\r\n\r\n### [Example](http://alexcurtis.github.io/react-treebeard/)\r\n\r\nAn online example from the `/example` directory can be found here: [Here](http://alexcurtis.github.io/react-treebeard/)\r\n\r\n### Quick Start\r\n```javascript\r\n'use strict';\r\n\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport {Treebeard} from 'react-treebeard';\r\n\r\nconst data = {\r\n name: 'root',\r\n toggled: true,\r\n children: [\r\n {\r\n name: 'parent',\r\n children: [\r\n { name: 'child1' },\r\n { name: 'child2' }\r\n ]\r\n },\r\n {\r\n name: 'loading parent',\r\n loading: true,\r\n children: []\r\n },\r\n {\r\n name: 'parent',\r\n children: [\r\n {\r\n name: 'nested parent',\r\n children: [\r\n { name: 'nested child 1' },\r\n { name: 'nested child 2' }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nclass TreeExample extends React.Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {};\r\n this.onToggle = this.onToggle.bind(this);\r\n }\r\n onToggle(node, toggled){\r\n if(this.state.cursor){this.state.cursor.active = false;}\r\n node.active = true;\r\n if(node.children){ node.toggled = toggled; }\r\n this.setState({ cursor: node });\r\n }\r\n render(){\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nconst content = document.getElementById('content');\r\nReactDOM.render(, content);\r\n```\r\n\r\n### Prop Values\r\n\r\n#### data\r\n`PropTypes.oneOfType([PropTypes.object,PropTypes.array]).isRequired`\r\n\r\nData that drives the tree view. State-driven effects can be built by manipulating the attributes in this object. Also supports an array for multiple nodes at the root level. An example can be found in `example/data.js`\r\n\r\n#### onToggle\r\n`PropTypes.func`\r\n\r\nCallback function when a node is toggled / clicked. Passes 2 attributes: the data node and it's toggled boolean state.\r\n\r\n#### style\r\n`PropTypes.object`\r\n\r\nSets the treeview styling. Defaults to `src/themes/default`.\r\n\r\n#### animations\r\n`PropTypes.oneOfType([PropTypes.object, PropTypes.bool])`\r\n\r\nSets the treeview animations. Set to `false` if you want to turn off animations. See [velocity-react](https://github.com/twitter-fabric/velocity-react) for more details. Defaults to `src/themes/animations`.\r\n\r\n#### decorators\r\n`PropTypes.object`\r\n\r\nDecorates the treeview. Here you can use your own Container, Header, Toggle and Loading components. Defaults to `src/decorators`. See example below:\r\n\r\n```javascript\r\nconst decorators = {\r\n Loading: (props) => {\r\n return (\r\n
\r\n // Hide Toggle When Terminal Here\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\n\r\n```\r\n\r\n### Data Attributes\r\n\r\n```javascript\r\n{\r\n id: '[optional] string',\r\n name: 'string',\r\n children: '[optional] array',\r\n toggled: '[optional] boolean',\r\n active: '[optional] boolean',\r\n loading: '[optional] boolean',\r\n decorators: '[optional] object',\r\n animations: '[optional] object'\r\n},\r\n```\r\n#### id\r\nThe component key. If not defined, an auto-generated index is used.\r\n\r\n#### name\r\nThe name prop passed into the Header component.\r\n\r\n#### children\r\nThe children attached to the node. This value populates the subtree at the specific node. Each child is built from the same basic data structure. Tip: Make this an empty array, if you want to asynchronously load a potential parent.\r\n\r\n#### toggled\r\nToggled flag. Sets the visibility of a node's children. It also sets the state for the toggle decorator.\r\n\r\n#### active\r\nActive flag. If active, the node will be highlighted. The highlight is derived from the `node.activeLink` style object in the theme.\r\n\r\n#### loading\r\nLoading flag. It will populate the treeview with the loading component. Useful when asynchronously pulling the data into the treeview.\r\n\r\n#### decorators / animations\r\nAttach specific decorators / animations to a node. Provides the low level functionality to create visuals on a node-by-node basis. These structures are the same as the top level props, described above.\r\n","_attachments":{},"homepage":"https://github.com/storybooks/react-treebeard#readme","bugs":{"url":"https://github.com/storybooks/react-treebeard/issues"},"license":"MIT"}