{"bugs":{"url":"https://github.com/storybookjs/react-treebeard/issues"},"dist":{"shasum":"33aa0a299a18bcd3b55f4523ae0bb2bf5d30c8a3","tarball":"https://registry.npmjs.org/react-treebeard/-/react-treebeard-4.2.4-beta.0.tgz","fileCount":21,"integrity":"sha512-3bUzh1V7hIhr7Fz4GvcPj2dmtz4OG6f1kMjDS6u1NRoo3JmWxaZnCLmNiiEmM8cM2MriaG1ZsqNkXcXFfK248A==","signatures":[{"sig":"MEQCIExWmOVHE5L4vW9CA5J/fl+sGaJgf9gKYQA3SKV73WzdAiBKYAHluiZWi9pxF44W/qM5Xdp0jSv7lNTy5dChFMwcgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf4fdCRA9TVsSAnZWagAA4dYQAKOipi0IPVU4VPdRvrEa\nh4vqOudYX7uhrcE3tzs7zuygjIBRZYM6fWypcybt9zei+gnb7oLL7zG9KgJv\nOploCzFYd19wSmhpZmf4bTTYnTMriv6+Mno8njIelVRq/5FK0PCtrTeCr3Rs\ntplyaE6L6trtVdKg/nbcoRHgH8pt3oz5SH+5Uckanmy0SsrrhJFPZtRUe3LY\nrnmHy+jVjSF6ouvQjflxwo0vQ16fzXkuHMDCPvViz8hbZ+XxgVYl2Rrqc8lE\nAhgskRCvlwyLxFqCAWzfNJlYasodI1APkNnKXVt0evAE6iaWb9WbaMb8jklu\nVmXcmhl/8A8+oGZ6ohtpxldWJBSwCsyRBhSttNlZhgnImaXyd6xKNmz3VhAV\nGk8c2HiSgCduocm4sgFTw1mJInYN63DEHvCIfpqzsGcSlt9Et4zxHICg49Up\n+iLOUelBUNq3varggtNlfWHTq5jGVQyNXnYp0x28j8GUukp6f3rNG8oG5vhD\nUuyEpXh2MS78yTa7i0ZlUR+Uc717ze2QyHsJL6nv1zCkwZfAtUYlwG7K2tE+\nLqe9FpHgZxgi+vldejB+Ej34k5tZHFYbmqJHLQVr64XrYdaCSamFGYp77Fvt\nNi55FYRR9+bPNwtryYPGXaEdq0JjXJfB+8NOfV4whBZsgLTZuHxWqtfzAkxF\no+EC\r\n=Mene\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"react-treebeard","author":{"name":"Alex Curtis"},"readme":"# react-treebeard\n\n[![Build Status](https://travis-ci.org/storybookjs/react-treebeard.svg?branch=master)](https://travis-ci.org/storybookjs/react-treebeard) [![Coverage Status](https://coveralls.io/repos/storybookjs/react-treebeard/badge.svg?branch=master&service=github)](https://coveralls.io/github/storybookjs/react-treebeard?branch=master)\n\nReact Tree View Component. Data-Driven, Fast, Efficient and Customisable.\n\n### Install\n\n```\nnpm install react-treebeard --save\n```\n\n### [Example](http://storybookjs.github.io/react-treebeard/)\n\nAn online example from the `/example` directory can be found here: [Here](http://storybookjs.github.io/react-treebeard/)\n\n### Quick Start\n```javascript\nimport React, {PureComponent} from 'react';\nimport ReactDOM from 'react-dom';\nimport {Treebeard} from 'react-treebeard';\n\nconst data = {\n    name: 'root',\n    toggled: true,\n    children: [\n        {\n            name: 'parent',\n            children: [\n                { name: 'child1' },\n                { name: 'child2' }\n            ]\n        },\n        {\n            name: 'loading parent',\n            loading: true,\n            children: []\n        },\n        {\n            name: 'parent',\n            children: [\n                {\n                    name: 'nested parent',\n                    children: [\n                        { name: 'nested child 1' },\n                        { name: 'nested child 2' }\n                    ]\n                }\n            ]\n        }\n    ]\n};\n\nclass TreeExample extends PureComponent {\n    constructor(props){\n        super(props);\n        this.state = {data};\n        this.onToggle = this.onToggle.bind(this);\n    }\n    \n    onToggle(node, toggled){\n        const {cursor, data} = this.state;\n        if (cursor) {\n            this.setState(() => ({cursor, active: false}));\n        }\n        node.active = true;\n        if (node.children) { \n            node.toggled = toggled; \n        }\n        this.setState(() => ({cursor: node, data: Object.assign({}, data)}));\n    }\n    \n    render(){\n        const {data} = this.state;\n        return (\n            <Treebeard\n                data={data}\n                onToggle={this.onToggle}\n            />\n        );\n    }\n}\n\nconst content = document.getElementById('content');\nReactDOM.render(<TreeExample/>, content);\n```\n\nIf you use react-hooks you should do something like this:\n```javascript\nimport React, {useState} from 'react';\nconst TreeExample = () => {\n    const [data, setData] = useState(data);\n    const [cursor, setCursor] = useState(false);\n    \n    const onToggle = (node, toggled) => {\n        if (cursor) {\n            cursor.active = false;\n        }\n        node.active = true;\n        if (node.children) {\n            node.toggled = toggled;\n        }\n        setCursor(node);\n        setData(Object.assign({}, data))\n    }\n    \n    return (\n       <Treebeard data={data} onToggle={onToggle}/>\n    )\n}\n\nconst content = document.getElementById('content');\nReactDOM.render(<TreeExample/>, content);\n```\n\n### Prop Values\n\n#### data\n`PropTypes.oneOfType([PropTypes.object,PropTypes.array]).isRequired`\n\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`\n\n#### onToggle\n`PropTypes.func`\n\nCallback function when a node is toggled / clicked. Passes 2 attributes: the data node and it's toggled boolean state.\n\n#### style\n`PropTypes.object`\n\nSets the treeview styling. Defaults to `src/themes/default`.\n\n#### animations\n`PropTypes.oneOfType([PropTypes.object, PropTypes.bool])`\n\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`.\n\n#### decorators\n`PropTypes.object`\n\nDecorates the treeview. Here you can use your own Container, Header, Toggle and Loading components. Defaults to `src/decorators`. See example below:\n\n```javascript\nconst decorators = {\n    Loading: (props) => {\n        return (\n            <div style={props.style}>\n                loading...\n            </div>\n        );\n    },\n    Toggle: (props) => {\n        return (\n            <div style={props.style}>\n                <svg height={props.height} width={props.width}>\n                    // Vector Toggle Here\n                </svg>\n            </div>\n        );\n    },\n    Header: (props) => {\n        return (\n            <div style={props.style}>\n                {props.node.name}\n            </div>\n        );\n    },\n    Container: (props) => {\n        return (\n            <div onClick={this.props.onClick}>\n                // Hide Toggle When Terminal Here\n                <this.props.decorators.Toggle/>\n                <this.props.decorators.Header/>\n            </div>\n        );\n    }\n};\n\n<Treebeard data={...} decorators={decorators}/>\n```\n\n### Data Attributes\n\n```javascript\n{\n    id: '[optional] string',\n    name: 'string',\n    children: '[optional] array',\n    toggled: '[optional] boolean',\n    active: '[optional] boolean',\n    loading: '[optional] boolean',\n    decorators: '[optional] object',\n    animations: '[optional] object'\n},\n```\n#### id\nThe component key. If not defined, an auto-generated index is used.\n\n#### name\nThe name prop passed into the Header component.\n\n#### children\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.\n\n#### toggled\nToggled flag. Sets the visibility of a node's children. It also sets the state for the toggle decorator.\n\n#### active\nActive flag. If active, the node will be highlighted. The highlight is derived from the `node.activeLink` style object in the theme.\n\n#### loading\nLoading flag. It will populate the treeview with the loading component. Useful when asynchronously pulling the data into the treeview.\n\n#### decorators / animations\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.\n","gitHead":"21ec6fdd4a4f0a7dcbe8513104ecb0d1ea096245","license":"MIT","scripts":{"lint":"eslint .","test":"jest --config=jest.config.js","build":"rimraf dist && babel src/ --out-dir dist/","example":"webpack-dev-server --content-base ./example/ --config ./example/webpack.config.js","prepublish":"npm run build","test:watch":"jest --config=jest.config.js --watch","build-example":"webpack --content-base ./example/ --config ./example/webpack.config.js --output ./dist/example.js","test:coverage":"jest --config=jest.config.js --coverage"},"_npmUser":{"name":"mforlenza","email":"forlenzamaximiliano@gmail.com"},"homepage":"https://github.com/storybooks/react-treebeard#readme","keywords":["react","treeview","data-driven","customisable","fast"],"repository":{"url":"git+https://github.com/storybookjs/react-treebeard.git","type":"git"},"_npmVersion":"6.10.2","description":"React Tree View Component","directories":{},"maintainers":[{"name":"alexcurtis","email":"alx.curtis@gmail.com"},{"name":"michaeldeboey","email":"info@michaeldeboey.be"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"shilman","email":"michael@lab80.co"}],"_nodeVersion":"10.15.3","dependencies":{"deep-equal":"^1.1.0","shallowequal":"^1.1.0","@emotion/core":"^10.0.17","velocity-react":"^1.4.3","@emotion/styled":"^10.0.17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","husky":"^3.0.5","react":"^16.9.0","enzyme":"^3.10.0","eslint":"^6.3.0","lodash":"^4.17.15","rimraf":"^3.0.0","webpack":"^4.39.3","react-dom":"^16.9.0","@babel/cli":"^7.6.0","babel-jest":"^24.9.0","prop-types":"^15.7.2","@babel/core":"^7.6.0","webpack-cli":"^3.3.8","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","eslint-loader":"^3.0.0","@babel/runtime":"^7.6.0","enzyme-to-json":"^3.4.0","@commitlint/cli":"^8.1.0","react-hot-loader":"^4.12.12","@babel/preset-env":"^7.6.0","babel-preset-react":"^6.24.1","webpack-dev-server":"^3.8.0","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","@commitlint/travis-cli":"^8.1.0","enzyme-adapter-react-16":"^1.14.0"},"peerDependencies":{"react":">=16.7.0","react-dom":">=16.7.0","prop-types":">=15.7.2","@babel/runtime":">=7.0.0","@emotion/styled":"^10.0.10"},"_npmOperationalInternal":{"tmp":"tmp/react-treebeard_4.2.4-beta.0_1568638940944_0.2571113371187004","host":"s3://npm-registry-packages"},"_id":"react-treebeard@4.2.4-beta.0","version":"4.2.4-beta.0"}