├── src
├── setupTests.js
├── contants.js
├── renderers
│ ├── index.js
│ ├── Deletable.js
│ ├── Favorite.js
│ ├── Expandable.js
│ └── __tests__
│ │ ├── Deletable.test.js
│ │ ├── Favorite.test.js
│ │ └── Expandable.test.js
├── filtering
│ ├── __tests__
│ │ ├── __snapshots__
│ │ │ └── DefaultGroupRenderer.test.js.snap
│ │ └── DefaultGroupRenderer.test.js
│ └── DefaultGroupRenderer.js
├── shapes
│ ├── rendererShapes.js
│ └── nodeShapes.js
├── index.js
├── selectors
│ ├── __tests__
│ │ ├── getFlattenedTree.test.js
│ │ ├── filtering.test.js
│ │ ├── __snapshots__
│ │ │ ├── filtering.test.js.snap
│ │ │ ├── getFlattenedTree.test.js.snap
│ │ │ └── nodes.test.js.snap
│ │ └── nodes.test.js
│ ├── filtering.js
│ ├── getFlattenedTree.js
│ └── nodes.js
├── __tests__
│ ├── eventWrappers.test.js
│ ├── Tree
│ │ ├── render.test.js
│ │ ├── __snapshots__
│ │ │ └── render.test.js.snap
│ │ ├── extensions.test.js
│ │ └── filtering.test.js
│ ├── __snapshots__
│ │ └── FilteringContainer.test.js.snap
│ └── FilteringContainer.test.js
├── main.css
├── UnstableFastTree.js
├── eventWrappers.js
├── TreeContainer.js
├── state
│ ├── __tests__
│ │ ├── __snapshots__
│ │ │ └── TreeState.test.js.snap
│ │ ├── TreeState.test.js
│ │ └── TreeStateModifiers.test.js
│ ├── TreeStateModifiers.js
│ └── TreeState.js
├── FilteringContainer.js
└── Tree.js
├── demo
└── src
│ ├── examples
│ ├── Basic
│ │ ├── ItemTypes.js
│ │ ├── RendererDragContainer.js
│ │ ├── DraggableRenderer.js
│ │ └── index.js
│ ├── index.js
│ ├── Renderers.js
│ ├── KeyboardNavigation.js
│ ├── ChangeRenderers.js
│ ├── LargeCollection.js
│ ├── Extensions.js
│ ├── Filterable.js
│ ├── WorldCup.js
│ └── NodeMeasure.js
│ ├── index.css
│ ├── containers
│ ├── ExamplesContainer.css
│ ├── DocumentsContainer.js
│ └── ExamplesContainer.js
│ ├── NavBar.css
│ ├── docs
│ ├── index.js
│ ├── extensions.md
│ ├── Doc.js
│ ├── renderers.md
│ └── filtering.md
│ ├── index.html
│ ├── index.js
│ ├── toolbelt.js
│ ├── NavBar.js
│ └── Home.js
├── .gitignore
├── config
├── pages.js
└── test
│ ├── fileTransform.js
│ ├── cssTransform.js
│ └── test.js
├── .travis.yml
├── nwb.config.js
├── __mocks__
└── react-virtualized.js
├── CONTRIBUTING.md
├── tests
└── NodeDiff.js
├── LICENSE
├── testData
└── sampleTree.js
├── CHANGELOG.md
├── README.md
├── package.json
└── index.d.ts
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | jest.unmock('react-virtualized');
2 |
--------------------------------------------------------------------------------
/demo/src/examples/Basic/ItemTypes.js:
--------------------------------------------------------------------------------
1 | export default {
2 | RENDERER: 'renderer',
3 | };
4 |
--------------------------------------------------------------------------------
/demo/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/contants.js:
--------------------------------------------------------------------------------
1 | export const UPDATE_TYPE = {
2 | ADD: 0,
3 | DELETE: 1,
4 | UPDATE: 2,
5 | };
6 |
--------------------------------------------------------------------------------
/demo/src/containers/ExamplesContainer.css:
--------------------------------------------------------------------------------
1 | .jump-to-source {
2 | float: right;
3 | color: #87CEFA;
4 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /coverage
2 | /demo/dist
3 | /es
4 | /lib
5 | /node_modules
6 | /umd
7 | npm-debug.log*
8 | /gh-pages
9 | package-lock.json
10 | yarn-error.log
--------------------------------------------------------------------------------
/config/pages.js:
--------------------------------------------------------------------------------
1 | const ghpages = require('gh-pages');
2 | const path = require('path');
3 |
4 | ghpages.publish(path.join(__dirname, '../demo/dist'), err => {
5 | if (err) throw err;
6 | });
7 |
--------------------------------------------------------------------------------
/src/renderers/index.js:
--------------------------------------------------------------------------------
1 | import Deletable from './Deletable';
2 | import Expandable from './Expandable';
3 | import Favorite from './Favorite';
4 |
5 | export default {Deletable, Expandable, Favorite};
6 |
--------------------------------------------------------------------------------
/demo/src/NavBar.css:
--------------------------------------------------------------------------------
1 | .header {
2 | margin-bottom: 20px;
3 | }
4 |
5 | .header-text {
6 | text-align: center;
7 | font-size: 70px;
8 | margin-top: 50px;
9 | }
10 |
11 | .content {
12 | padding: 20px;
13 | }
--------------------------------------------------------------------------------
/demo/src/docs/index.js:
--------------------------------------------------------------------------------
1 | export default {
2 | renderers: {
3 | name: 'Renderers',
4 | },
5 | extensions: {
6 | name: 'Extensions',
7 | },
8 | filtering: {
9 | name: 'Filtering',
10 | },
11 | };
12 |
--------------------------------------------------------------------------------
/src/filtering/__tests__/__snapshots__/DefaultGroupRenderer.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`DefaultGroupRenderer should render an option for each group 1`] = `
4 | Array [
5 | "All",
6 | "Top",
7 | "Bottom",
8 | ]
9 | `;
10 |
--------------------------------------------------------------------------------
/src/shapes/rendererShapes.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | import {FlattenedNode} from './nodeShapes';
4 |
5 | export const Renderer = {
6 | measure: PropTypes.func,
7 | onChange: PropTypes.func.isRequired,
8 | node: PropTypes.shape(FlattenedNode),
9 | index: PropTypes.number.isRequired,
10 | };
11 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Tree from './TreeContainer';
2 | import * as selectors from './selectors/nodes';
3 | import renderers from './renderers';
4 | import * as constants from './contants';
5 | import FilteringContainer from './FilteringContainer';
6 |
7 | export default Tree;
8 | export {selectors, renderers, constants, FilteringContainer};
9 |
--------------------------------------------------------------------------------
/config/test/fileTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 |
5 | // This is a custom Jest transformer turning file imports into filenames.
6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
7 |
8 | module.exports = {
9 | process(src, filename) {
10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/config/test/cssTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // This is a custom Jest transformer turning style imports into empty objects.
4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
5 |
6 | module.exports = {
7 | process() {
8 | return 'module.exports = {};';
9 | },
10 | getCacheKey() {
11 | // The output is always the same.
12 | return 'cssTransform';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 |
3 | language: node_js
4 | node_js:
5 | - 8
6 |
7 | before_install:
8 | - yarn add coveralls -D
9 |
10 | script:
11 | - yarn run build
12 | - yarn run test:coverage
13 |
14 | after_success:
15 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage
16 | - npx semantic-release
17 |
18 | branches:
19 | only:
20 | - master
21 |
22 | env:
23 | global:
24 | - CI: true
25 |
--------------------------------------------------------------------------------
/config/test/test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | process.env.BABEL_ENV = 'test';
4 | process.env.NODE_ENV = 'test';
5 | process.env.PUBLIC_URL = '';
6 |
7 | process.on('unhandledRejection', err => {
8 | throw err;
9 | });
10 |
11 | const jest = require('jest');
12 | const argv = process.argv.slice(2);
13 |
14 | // Watch unless on CI or in coverage mode
15 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
16 | argv.push('--watch');
17 | }
18 |
19 | jest.run(argv);
20 |
--------------------------------------------------------------------------------
/src/selectors/__tests__/getFlattenedTree.test.js:
--------------------------------------------------------------------------------
1 | import {getFlattenedTree, getFlattenedTreePaths} from '../getFlattenedTree';
2 | import {Nodes} from '../../../testData/sampleTree';
3 |
4 | describe('getFlattenedTree', () => {
5 | it('should match snapshot', () => {
6 | expect(getFlattenedTree(Nodes)).toMatchSnapshot();
7 | });
8 | });
9 |
10 | test('getFlattenedTreePaths, should match snapshot', () => {
11 | expect(getFlattenedTreePaths(Nodes)).toMatchSnapshot();
12 | });
13 |
--------------------------------------------------------------------------------
/src/filtering/DefaultGroupRenderer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const DefaultGroupRenderer = ({onChange, groups, selectedGroup}) => {
4 | return (
5 | {
8 | onChange(value);
9 | }}
10 | value={selectedGroup}
11 | >
12 | {Object.keys(groups).map(g => (
13 |
14 | {groups[g].name}
15 |
16 | ))}
17 |
18 | );
19 | };
20 |
21 | export default DefaultGroupRenderer;
22 |
--------------------------------------------------------------------------------
/src/selectors/__tests__/filtering.test.js:
--------------------------------------------------------------------------------
1 | import {filterNodes} from '../filtering';
2 | import {Nodes} from '../../../testData/sampleTree';
3 |
4 | describe('filtering selectors', () => {
5 | const pairNodes = n => n.id % 2 === 0;
6 |
7 | it('should filter nodes based on injected filter', () => {
8 | expect(filterNodes(pairNodes, Nodes).nodes).toMatchSnapshot();
9 | });
10 |
11 | it('should create mappings matching filters', () => {
12 | const pairNodes = n => n.id % 2 === 0;
13 |
14 | expect(filterNodes(pairNodes, Nodes).nodeParentMappings).toMatchSnapshot();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/nwb.config.js:
--------------------------------------------------------------------------------
1 | const StatsPlugin = require('stats-webpack-plugin');
2 |
3 | module.exports = {
4 | type: 'react-component',
5 | npm: {
6 | esModules: true,
7 | umd: {
8 | global: 'reactVirtualizedTree',
9 | externals: {
10 | react: 'React',
11 | 'react-dom': 'ReactDOM',
12 | 'react-virtualized': 'ReactVirtualized',
13 | },
14 | },
15 | },
16 | webpack: {
17 | extra: {
18 | plugins: [new StatsPlugin('/stats.json')],
19 | },
20 | uglify: false,
21 | html: {
22 | template: 'demo/src/index.html',
23 | },
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/demo/src/examples/index.js:
--------------------------------------------------------------------------------
1 | import LargeCollection from './LargeCollection';
2 | import Basic from './Basic';
3 | import Renderers from './Renderers';
4 | import WorldCup from './WorldCup';
5 | import ChangeRenderers from './ChangeRenderers';
6 | import Extensions from './Extensions';
7 | import Filterable from './Filterable';
8 | import NodeMeasure from './NodeMeasure';
9 | import KeyboardNavigation from './KeyboardNavigation';
10 |
11 | export default {
12 | ...Basic,
13 | ...Renderers,
14 | ...ChangeRenderers,
15 | ...WorldCup,
16 | ...LargeCollection,
17 | ...Extensions,
18 | ...Filterable,
19 | ...NodeMeasure,
20 | ...KeyboardNavigation,
21 | };
22 |
--------------------------------------------------------------------------------
/src/shapes/nodeShapes.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | export const NodeState = {
4 | expanded: PropTypes.bool,
5 | deletable: PropTypes.bool,
6 | favorite: PropTypes.bool,
7 | };
8 |
9 | const BasicNode = {
10 | id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
11 | name: PropTypes.string,
12 | state: PropTypes.shape(NodeState),
13 | };
14 |
15 | export const Node = {
16 | ...BasicNode,
17 | };
18 |
19 | Node.children = PropTypes.arrayOf(PropTypes.shape(Node));
20 |
21 | export const FlattenedNode = {
22 | ...BasicNode,
23 | deepness: PropTypes.number.isRequired,
24 | parents: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
25 | };
26 |
--------------------------------------------------------------------------------
/demo/src/docs/extensions.md:
--------------------------------------------------------------------------------
1 | # Extensions
2 | The entry component supports extensions to the components original functionality. The currently available extensions are:
3 | - updateTypeHandlers
4 |
5 | ## updateTypeHandlers
6 | ### () => { [updateType: number]: (nodes: Node[], updatedNode: Node) => Nodes[]
7 | Allows you to override or create new handlers, can be of use in case you either want to extend currently supported functionality (for example if you wish to flag updated nodes with a boolean property to help you filter out data before sending to the server side) or to create your own update types and handlers to support bussiness requirements.
8 |
9 | The existing update types are exported by the module inside a named export (import { constants } from 'react-virtualized-tree')
10 |
--------------------------------------------------------------------------------
/demo/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-virtualized-tree demo
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import {HashRouter, Route} from 'react-router-dom';
4 |
5 | import NavBar from './NavBar';
6 | import ExamplesContainer from './containers/ExamplesContainer';
7 | import DocumentsContainer from './containers/DocumentsContainer';
8 | import Home from './Home';
9 |
10 | import './index.css';
11 | import 'react-virtualized/styles.css';
12 | import 'material-icons/css/material-icons.css';
13 | import '../../src/main.css';
14 |
15 | ReactDOM.render(
16 |
17 |
18 |
22 | ,
23 | document.getElementById('demo'),
24 | );
25 |
--------------------------------------------------------------------------------
/__mocks__/react-virtualized.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class CellMeasurerCache {}
4 |
5 | export const AutoSizer = ({children}) => {children({width: 1000, height: 1000})} ;
6 | // const mockInifiteLoader = ({children}) => (
7 | // {children({registerChild: jest.fn(), onRowsRendered: jest.fn()})}
8 | // );
9 |
10 | export const CellMeasurer = ({children}) => {children({measure: jest.fn()})} ;
11 |
12 | export const List = p =>
13 | Array.from({length: p.rowCount}).map((_, i) =>
14 | p.rowRenderer({
15 | key: String(i),
16 | columnIndex: 0,
17 | index: i,
18 | rowIndex: i,
19 | isScrolling: false,
20 | isVisible: true,
21 | parent: {},
22 | style: {},
23 | }),
24 | );
25 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Prerequisites
2 |
3 | [Node.js](http://nodejs.org/) >= v4 must be installed.
4 |
5 | ## Installation
6 |
7 | - Running `npm install` in the components's root directory will install everything you need for development.
8 |
9 | ## Demo Development Server
10 |
11 | - `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
12 |
13 | ## Running Tests
14 |
15 | - `npm test` will run the tests once.
16 |
17 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
18 |
19 | - `npm run test:watch` will run the tests on every change.
20 |
21 | ## Building
22 |
23 | - `npm run build` will build the component for publishing to npm and also bundle the demo app.
24 |
25 | - `npm run clean` will delete built resources.
26 |
--------------------------------------------------------------------------------
/demo/src/examples/Basic/RendererDragContainer.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {DragDropContext} from 'react-dnd';
3 | import HTML5Backend from 'react-dnd-html5-backend';
4 | import DraggableRenderer from './DraggableRenderer';
5 |
6 | const style = {
7 | width: 400,
8 | };
9 |
10 | @DragDropContext(HTML5Backend)
11 | export default class RendererDragContainer extends Component {
12 | render() {
13 | return (
14 |
15 | {this.props.selectedRenderers.map((card, i) => (
16 |
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/selectors/filtering.js:
--------------------------------------------------------------------------------
1 | const INITIAL_FILTERED_VALUE = {nodes: [], nodeParentMappings: {}};
2 |
3 | export const filterNodes = (filter, nodes, parents = []) =>
4 | nodes.reduce((filtered, n) => {
5 | const {nodes: filteredChildren, nodeParentMappings: childrenNodeMappings} = n.children
6 | ? filterNodes(filter, n.children, [...parents, n.id])
7 | : INITIAL_FILTERED_VALUE;
8 |
9 | return !(filter(n) || filteredChildren.length)
10 | ? filtered
11 | : {
12 | nodes: [
13 | ...filtered.nodes,
14 | {
15 | ...n,
16 | children: filteredChildren,
17 | },
18 | ],
19 | nodeParentMappings: {
20 | ...filtered.nodeParentMappings,
21 | ...childrenNodeMappings,
22 | [n.id]: parents,
23 | },
24 | };
25 | }, INITIAL_FILTERED_VALUE);
26 |
--------------------------------------------------------------------------------
/tests/NodeDiff.js:
--------------------------------------------------------------------------------
1 | export default class NodeDiff {
2 | added = new Set();
3 | deleted = new Set();
4 | changed = new Set();
5 | _original = new Map();
6 |
7 | constructor(originalContainer) {
8 | originalContainer.querySelectorAll('[data-type="node"]').forEach(n => {
9 | this._original.set(n.dataset.testid, n.innerHTML);
10 | });
11 | }
12 |
13 | run(finalContainer) {
14 | finalContainer.querySelectorAll('[data-type="node"]').forEach(n => {
15 | const nodeId = n.dataset.testid;
16 |
17 | if (this._original.has(nodeId)) {
18 | if (this._original.get(nodeId) !== n.innerHTML) {
19 | this.changed.add(nodeId);
20 | }
21 |
22 | this._original.delete(nodeId);
23 | } else {
24 | this.added.add(nodeId);
25 | }
26 | });
27 |
28 | [...this._original.keys()].forEach(k => {
29 | this.deleted.add(k);
30 | });
31 |
32 | return {
33 | mounted: [...this.added],
34 | unmounted: [...this.deleted],
35 | changed: [...this.changed],
36 | };
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/demo/src/containers/DocumentsContainer.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Grid, Menu, Segment, Header} from 'semantic-ui-react';
3 | import {Link, Route} from 'react-router-dom';
4 |
5 | import documents from '../docs';
6 | import Doc from '../docs/Doc';
7 | import {getDocumentsPath} from '../toolbelt';
8 | import './ExamplesContainer.css';
9 |
10 | export default class ExamplesContainer extends Component {
11 | render() {
12 | return (
13 |
14 |
15 |
16 |
17 | {Object.keys(documents).map(path => (
18 |
23 |
24 |
25 |
26 |
28 |
29 |
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/__tests__/eventWrappers.test.js:
--------------------------------------------------------------------------------
1 | import {wrapKeyDownEvent, KEY_CODES} from '../eventWrappers';
2 |
3 | describe('eventWrappers', () => {
4 | describe('wrapKeyDownEvent', () => {
5 | it('should call the handler for the binded keys with the correct params', () => {
6 | const bindedKeys = {
7 | [KEY_CODES.Tab]: null,
8 | [KEY_CODES.Alt]: null,
9 | [KEY_CODES.Backspace]: null,
10 | };
11 | const params = [5, 2, 8];
12 |
13 | Object.keys(bindedKeys).forEach(keyCode => {
14 | const handler = jest.fn();
15 | wrapKeyDownEvent(bindedKeys)(handler)({keyCode}, ...params);
16 |
17 | expect(handler).toHaveBeenCalledWith(...params);
18 | });
19 | });
20 |
21 | it('should not call the handler for keys that are not binded', () => {
22 | const bindedKeys = {
23 | [KEY_CODES.Tab]: null,
24 | };
25 | const params = [5, 2, 8];
26 | const handler = jest.fn();
27 | wrapKeyDownEvent(bindedKeys)(handler)({keyCode: KEY_CODES.Backspace}, ...params);
28 |
29 | expect(handler).not.toHaveBeenCalled();
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Diogo Cunha
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/renderers/Deletable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import PropTypes from 'prop-types';
4 |
5 | import {submitEvent} from '../eventWrappers';
6 | import {getNodeRenderOptions, deleteNode} from '../selectors/nodes';
7 | import {Renderer} from '../shapes/rendererShapes';
8 |
9 | const Deletable = ({
10 | onChange,
11 | node,
12 | iconsClassNameMap = {
13 | delete: 'mi mi-delete',
14 | },
15 | children,
16 | index,
17 | }) => {
18 | const {isDeletable} = getNodeRenderOptions(node);
19 |
20 | const className = classNames({
21 | [iconsClassNameMap.delete]: isDeletable,
22 | });
23 |
24 | const handleChange = () => onChange({...deleteNode(node), index});
25 |
26 | return (
27 |
28 | {isDeletable && (
29 |
33 | );
34 | };
35 |
36 | Deletable.propTypes = {
37 | ...Renderer,
38 | iconsClassNameMap: PropTypes.shape({
39 | delete: PropTypes.string,
40 | }),
41 | };
42 |
43 | export default Deletable;
44 |
--------------------------------------------------------------------------------
/demo/src/examples/Renderers.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import classNames from 'classnames';
3 |
4 | import Tree from '../../../src/TreeContainer';
5 | import {Nodes} from '../../../testData/sampleTree';
6 | import {createEntry} from '../toolbelt';
7 |
8 | const Deepness = ({node, children}) => {
9 | const deepness = node.deepness + 1;
10 | const className = classNames({
11 | [`mi mi-filter-${deepness}`]: deepness <= 9,
12 | 'filter-9-plus': deepness > 9,
13 | });
14 |
15 | return (
16 |
17 |
20 | );
21 | };
22 |
23 | class Renderers extends Component {
24 | render() {
25 | return (
26 |
27 | {({style, node, ...rest}) => (
28 |
29 |
30 | {node.name}
31 |
32 |
33 | )}
34 |
35 | );
36 | }
37 | }
38 |
39 | export default createEntry(
40 | 'renderers',
41 | 'Renderers',
42 | 'Create a custom renderer',
43 |
44 |
A tree that makes use of a custom renderer
45 |
30 |
33 | );
34 | };
35 |
36 | Favorite.propTypes = {
37 | ...Renderer,
38 | iconsClassNameMap: PropTypes.shape({
39 | favorite: PropTypes.string,
40 | notFavorite: PropTypes.string,
41 | }),
42 | };
43 |
44 | export default Favorite;
45 |
--------------------------------------------------------------------------------
/src/selectors/getFlattenedTree.js:
--------------------------------------------------------------------------------
1 | export const isNodeExpanded = node => node.state && node.state.expanded;
2 | export const nodeHasChildren = node => node.children && node.children.length;
3 |
4 | export const getFlattenedTree = (nodes, parents = []) =>
5 | nodes.reduce((flattenedTree, node) => {
6 | const deepness = parents.length;
7 | const nodeWithHelpers = {...node, deepness, parents};
8 |
9 | if (!nodeHasChildren(node) || !isNodeExpanded(node)) {
10 | return [...flattenedTree, nodeWithHelpers];
11 | }
12 |
13 | return [...flattenedTree, nodeWithHelpers, ...getFlattenedTree(node.children, [...parents, node.id])];
14 | }, []);
15 |
16 | export const getFlattenedTreePaths = (nodes, parents = []) => {
17 | const paths = [];
18 |
19 | for (const node of nodes) {
20 | const {id} = node;
21 |
22 | if (!nodeHasChildren(node) || !isNodeExpanded(node)) {
23 | paths.push(parents.concat(id));
24 | } else {
25 | paths.push(parents.concat(id));
26 | paths.push(...getFlattenedTreePaths(node.children, [...parents, id]));
27 | }
28 | }
29 |
30 | return paths;
31 | };
32 |
33 | export const doesChangeAffectFlattenedTree = (previousNode, nextNode) => {
34 | return isNodeExpanded(previousNode) !== isNodeExpanded(nextNode);
35 | };
36 |
--------------------------------------------------------------------------------
/demo/src/docs/Doc.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Loader} from 'semantic-ui-react';
3 | import ReactMarkdown from 'react-markdown';
4 |
5 | import documents from './';
6 | import {getDocumentFetchUrl} from '../toolbelt';
7 |
8 | import {polyfill} from 'react-lifecycles-compat';
9 |
10 | class Doc extends Component {
11 | state = {
12 | doc: null,
13 | };
14 |
15 | componentDidMount() {
16 | const {
17 | match: {
18 | params: {document},
19 | },
20 | } = this.props;
21 |
22 | this.getDocument(document);
23 | }
24 |
25 | getDocument = doc => {
26 | return fetch(getDocumentFetchUrl(doc))
27 | .then(r => r.text())
28 | .then(doc => {
29 | this.setState({doc});
30 | });
31 | };
32 |
33 | UNSAFE_componentWillReceiveProps({
34 | match: {
35 | params: {document},
36 | },
37 | }) {
38 | const {
39 | match: {
40 | params: {document: selectedDocument},
41 | },
42 | } = this.props;
43 |
44 | if (document !== selectedDocument) {
45 | this.setState({doc: null}, () => {
46 | this.getDocument(document);
47 | });
48 | }
49 | }
50 |
51 | render() {
52 | const {doc} = this.state;
53 |
54 | return !doc ?
23 |
24 |
25 | {node.name}
26 |
27 |
28 |
29 | );
30 | };
31 |
32 | render() {
33 | return (
34 |
35 |
36 | {this.nodeRenderer}
37 |
38 |
39 | );
40 | }
41 | }
42 |
43 | export default createEntry(
44 | 'keyboard-nav',
45 | 'KeyboardNavigation',
46 | 'Keyboard navigation',
47 |
48 |
A tree that supports keyboard navigation
49 |
31 | {hasChildren && (
32 |
36 | );
37 | };
38 |
39 | Expandable.propTypes = {
40 | ...Renderer,
41 | iconsClassNameMap: PropTypes.shape({
42 | expanded: PropTypes.string,
43 | collapsed: PropTypes.string,
44 | lastChild: PropTypes.string,
45 | }),
46 | };
47 |
48 | export default Expandable;
49 |
--------------------------------------------------------------------------------
/src/main.css:
--------------------------------------------------------------------------------
1 | .tree-lookup-input {
2 | font-size: 1em;
3 | position: relative;
4 | font-weight: 400;
5 | font-style: normal;
6 | color: rgba(0, 0, 0, 0.87);
7 | }
8 |
9 | .tree-lookup-input input {
10 | width: 100%;
11 | margin: 0;
12 | outline: 0;
13 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
14 | text-align: left;
15 | line-height: 1.21428571em;
16 | padding: 0.7em 1em;
17 | background: #fff;
18 | border: 1px solid rgba(34, 36, 38, 0.15);
19 | color: rgba(0, 0, 0, 0.87);
20 | border-radius: 0.28571429rem;
21 | -webkit-transition: box-shadow 0.1s ease, border.1s ease;
22 | transition: box-shadow 0.1s ease, border 0.1s ease;
23 | box-shadow: none;
24 | padding-right: 2.67142857em !important;
25 | margin-bottom: 7px;
26 | }
27 |
28 | .tree-lookup-input.group input {
29 | width: 80%;
30 | }
31 |
32 | .tree-lookup-input input:focus {
33 | border: 1px solid #85b7d9;
34 | background: #fff;
35 | color: rgba(0, 0, 0, 0.8);
36 | box-shadow: none;
37 | }
38 |
39 | .tree-lookup-input i {
40 | margin-left: -3em;
41 | padding: 0.7em 1em;
42 | color: rgba(0, 0, 0, 0.3);
43 | cursor: text;
44 | }
45 |
46 | .tree-filter-container {
47 | border: 1px solid rgba(0, 0, 0, 0.3);
48 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
49 | padding: 2%;
50 | }
51 |
52 | .tree-group {
53 | width: 20%;
54 | appearance: none;
55 | background-color: #2185d0;
56 | color: #fff;
57 | cursor: pointer;
58 | border: 1px solid #2185d0;
59 | font-weight: 700;
60 | padding: 0.7em 1em;
61 | }
62 |
--------------------------------------------------------------------------------
/demo/src/docs/renderers.md:
--------------------------------------------------------------------------------
1 | # Renderers
2 |
3 | A renderer is a component you can use to build your tree stucture. The power of it is that you can either use the renderers shipped with this package or you can create your own! A few examples on how to achieve it can be found at the examples section.
4 |
5 | ## Injected props
6 |
7 | | Name | Type | Description |
8 | | -------- | ---------------------------------------------- | ------------------------------------------------------------------------------------- |
9 | | onChange | ({ node: Node _, type: UPDATE_TYPE _}) => void | to be invoked with the updated node and the update type |
10 | | node | Node \* | The node being rendered for that row, with some additional info |
11 | | children | JSX | Anything your render as children of the component when using it |
12 | | style | React.CSSProperties | A opt in style property that will auto align your items and apply some default styles |
13 | | measure | () => void | A function that can be used to let the tree know about your node measurements |
14 |
15 | - Node = {
16 | id: number
17 | name: string,
18 | state: object,
19 | deepness: number,
20 | parents: number[]
21 | }
22 | - UPDATE_TYPE = {
23 | ADD: 0,
24 | DELETE: 1,
25 | UPDATE: 2
26 | }
27 |
--------------------------------------------------------------------------------
/src/selectors/__tests__/__snapshots__/filtering.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`filtering selectors should create mappings matching filters 1`] = `
4 | Object {
5 | "0": Array [],
6 | "1": Array [],
7 | "2": Array [
8 | 0,
9 | ],
10 | "4": Array [
11 | 0,
12 | 2,
13 | ],
14 | "6": Array [
15 | 1,
16 | ],
17 | "8": Array [
18 | 1,
19 | 6,
20 | ],
21 | }
22 | `;
23 |
24 | exports[`filtering selectors should filter nodes based on injected filter 1`] = `
25 | Array [
26 | Object {
27 | "children": Array [
28 | Object {
29 | "children": Array [
30 | Object {
31 | "children": Array [],
32 | "id": 4,
33 | "name": "Leaf 4",
34 | },
35 | ],
36 | "id": 2,
37 | "name": "Leaf 2",
38 | "state": Object {
39 | "deletable": true,
40 | "expanded": true,
41 | },
42 | },
43 | ],
44 | "id": 0,
45 | "name": "Leaf 1",
46 | "state": Object {
47 | "expanded": true,
48 | },
49 | },
50 | Object {
51 | "children": Array [
52 | Object {
53 | "children": Array [
54 | Object {
55 | "children": Array [],
56 | "id": 8,
57 | "name": "Leaf 9",
58 | },
59 | ],
60 | "id": 6,
61 | "name": "Leaf 7",
62 | "state": Object {
63 | "expanded": false,
64 | },
65 | },
66 | ],
67 | "id": 1,
68 | "name": "Leaf 6",
69 | "state": Object {
70 | "deletable": true,
71 | "expanded": false,
72 | },
73 | },
74 | ]
75 | `;
76 |
--------------------------------------------------------------------------------
/demo/src/toolbelt.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 |
3 | const pkg = require('../../package');
4 |
5 | export const getRepoPath = () => pkg.repository;
6 |
7 | export const getExamplePath = name => `${getRepoPath()}/blob/master/demo/src/examples/${name}.js`;
8 |
9 | export const getDocumentFetchUrl = doc => {
10 | const docPath = path.join(getRepoPath(), 'master', `demo/src/docs/${doc}.md`);
11 |
12 | const url = new URL(docPath);
13 | url.hostname = 'raw.githubusercontent.com';
14 |
15 | return url.href;
16 | };
17 |
18 | export const createEntry = (key, fileName, name, description, component) => ({
19 | [key]: {
20 | name,
21 | fileName,
22 | description,
23 | component,
24 | },
25 | });
26 |
27 | let ids = {};
28 |
29 | const getUniqueId = () => {
30 | const candidateId = Math.round(Math.random() * 1000000000);
31 |
32 | if (ids[candidateId]) {
33 | return getUniqueId();
34 | }
35 |
36 | ids[candidateId] = true;
37 |
38 | return candidateId;
39 | };
40 |
41 | export const constructTree = (maxDeepness, maxNumberOfChildren, minNumOfNodes, deepness = 1) => {
42 | return new Array(minNumOfNodes).fill(deepness).map((si, i) => {
43 | const id = getUniqueId();
44 | const numberOfChildren = deepness === maxDeepness ? 0 : Math.round(Math.random() * maxNumberOfChildren);
45 |
46 | return {
47 | id,
48 | name: `Leaf ${id}`,
49 | children: numberOfChildren ? constructTree(maxDeepness, maxNumberOfChildren, numberOfChildren, deepness + 1) : [],
50 | state: {
51 | expanded: numberOfChildren ? Boolean(Math.round(Math.random())) : false,
52 | favorite: Boolean(Math.round(Math.random())),
53 | deletable: Boolean(Math.round(Math.random())),
54 | },
55 | };
56 | });
57 | };
58 |
--------------------------------------------------------------------------------
/testData/sampleTree.js:
--------------------------------------------------------------------------------
1 | export const COLLAPSED_CHILDREN = {
2 | id: 3,
3 | name: 'Leaf 3',
4 | state: {
5 | expanded: false,
6 | favorite: true,
7 | deletable: true,
8 | },
9 | children: [
10 | {
11 | id: 'c-3',
12 | name: 'Leaf 3 Child',
13 | state: {},
14 | },
15 | ],
16 | };
17 |
18 | export const EXPANDED_CHILDREN = {
19 | id: 2,
20 | name: 'Leaf 2',
21 | state: {
22 | expanded: true,
23 | deletable: true,
24 | },
25 | children: [
26 | COLLAPSED_CHILDREN,
27 | {
28 | id: 4,
29 | name: 'Leaf 4',
30 | },
31 | ],
32 | };
33 |
34 | export const EXPANDED_NODE_IN_ROOT = {
35 | id: 0,
36 | name: 'Leaf 1',
37 | state: {
38 | expanded: true,
39 | },
40 | children: [
41 | EXPANDED_CHILDREN,
42 | {
43 | id: 5,
44 | name: 'Leaf 5',
45 | },
46 | ],
47 | };
48 |
49 | export const COLLAPSED_NODE_IN_ROOT = {
50 | id: 1,
51 | name: 'Leaf 6',
52 | state: {
53 | expanded: false,
54 | deletable: true,
55 | },
56 | children: [
57 | {
58 | id: 6,
59 | name: 'Leaf 7',
60 | state: {
61 | expanded: false,
62 | },
63 | children: [
64 | {
65 | id: 7,
66 | name: 'Leaf 8',
67 | },
68 | {
69 | id: 8,
70 | name: 'Leaf 9',
71 | },
72 | ],
73 | },
74 | {
75 | id: 9,
76 | name: 'Leaf 10',
77 | },
78 | ],
79 | };
80 |
81 | export const DELETABLE_IN_ROOT = {
82 | id: 'z',
83 | name: 'Leaf z',
84 | state: {
85 | deletable: true,
86 | favorite: true,
87 | },
88 | };
89 |
90 | export const DELETABLE_CHILDREN = EXPANDED_CHILDREN;
91 |
92 | export const Nodes = [EXPANDED_NODE_IN_ROOT, COLLAPSED_NODE_IN_ROOT, DELETABLE_IN_ROOT];
93 |
--------------------------------------------------------------------------------
/demo/src/examples/ChangeRenderers.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 |
3 | import Tree from '../../../src/TreeContainer';
4 | import Renderers from '../../../src/renderers';
5 | import {Nodes} from '../../../testData/sampleTree';
6 | import {createEntry} from '../toolbelt';
7 |
8 | const {Expandable} = Renderers;
9 |
10 | class ChangeRenderers extends Component {
11 | state = {
12 | nodes: Nodes,
13 | };
14 |
15 | handleChange = nodes => {
16 | this.setState({nodes});
17 | };
18 |
19 | render() {
20 | return (
21 |
22 | {({style, node, ...rest}) => (
23 |
24 |
33 | {node.name}
34 |
35 |
36 | )}
37 |
38 | );
39 | }
40 | }
41 |
42 | export default createEntry(
43 | 'customize-renderers',
44 | 'ChangeRenderers',
45 | 'Customize default renderers',
46 |
47 |
48 | A good example of a possible customization of a default renderer is customizing the tree to display as a folder
49 | structure.
50 |
51 |
52 |
53 | By exposing iconsClassNameMap it is possible to pass in the styles applied to the Expandable
54 | rendererer, the available style options are:
55 |
56 | {'{ '}
57 |
expanded: string; collapsed: string; lastChild: string;
58 | {' }'}
59 |
33 | {({style, node, ...rest}) => (
34 |
35 |
36 | {node.name}
37 |
38 |
40 |
41 |
42 | )}
43 |
44 | );
45 | }
46 | }
47 |
48 | export default createEntry(
49 | 'large-collection',
50 | 'LargeCollection',
51 | 'Large Data Collection',
52 |
53 |
A tree that renders a large collection of nodes.
54 |
This example is rendering a total of {totalNumberOfNodes} nodes
55 |
13 |
14 |
15 |
16 | {Object.keys(examples).map(path => (
17 |
22 |
23 |
24 |
25 | {
28 | const selectedExample = examples[p.match.params.example];
29 | const {component: Component, name, description, fileName} = selectedExample;
30 |
31 | return (
32 |
33 |
34 | Jump to source
35 |
36 |
37 | {description &&
{description} }
38 |
39 |
41 |
46 |
47 |
12 |
13 |
14 |
15 |
16 |
17 |
19 |
20 | react-virtualized-tree
21 |
22 |
23 |
26 |
27 |
37 |
38 |
40 |
41 |
43 |
44 |
46 |
47 | GitHub
48 |
49 |
50 |
51 |
52 |
6 |
7 |
8 |
9 | react-virtualized-tree is a react library built on top of{' '}
10 | react-virtualized .
11 |
12 | Its main goal is to display tree like data in a beautiful and fast way.
13 | Being a reactive library it uses children functions to achieve maximum extensibility
14 |
15 | The core idea behind it is that anyone using it is enable to create a tree as they wich just by rendering their
16 | own components or components exported by the tree
17 |
18 |
19 |
20 |
21 | You can install via npm or yarn.
22 |
23 | npm i react-virtualized-tree --save
24 |
25 |
26 | yarn add react-virtualized-tree
27 |
28 | To get the basic styles for free you need to import react-virtualized styles only once.
29 |
30 | import 'react-virtualized/styles.css';
31 |
32 |
33 | import 'react-virtualized-tree/lib/main.css';
34 |
35 | If you want to use the icons in the default renderers do the same for material icons.
36 |
37 | import 'material-icons/css/material-icons.css';
38 |
39 |
40 |
41 |
42 |
43 | Most react-virtualized-tree Dependencies are managed internally, the only required peerDependencies are{' '}
44 | react , react-dom and react-virtualized .
45 |
46 |
47 |
44 |
47 | this.setState({
48 | nodes: this.expandAllNodes(this.state.nodes),
49 | })
50 | }
51 | />
52 |
54 |
55 | {({style, node, ...rest}) => (
56 |
57 |
58 | {node.name}
59 |
60 |
61 | )}
62 |
63 |
17 |
18 |
78 |
79 |
83 | {treeRenderer({nodes: filteredNodes, nodeParentMappings})}
84 |
22 |
25 | onChange({
26 | node: {
27 | ...node,
28 | state: {
29 | ...(node.state || {}),
30 | selected: !selected,
31 | },
32 | },
33 | type: SELECT,
34 | })
35 | }
36 | />
37 | {children}
38 |
39 | );
40 | };
41 |
42 | class Extensions extends Component {
43 | state = {
44 | nodes: Nodes,
45 | };
46 |
47 | handleChange = nodes => {
48 | this.setState({nodes});
49 | };
50 |
51 | selectNodes = (nodes, selected) =>
52 | nodes.map(n => ({
53 | ...n,
54 | children: n.children ? this.selectNodes(n.children, selected) : [],
55 | state: {
56 | ...n.state,
57 | selected,
58 | },
59 | }));
60 |
61 | nodeSelectionHandler = (nodes, updatedNode) =>
62 | nodes.map(node => {
63 | if (node.id === updatedNode.id) {
64 | return {
65 | ...updatedNode,
66 | children: node.children ? this.selectNodes(node.children, updatedNode.state.selected) : [],
67 | };
68 | }
69 |
70 | if (node.children) {
71 | return {...node, children: this.nodeSelectionHandler(node.children, updatedNode)};
72 | }
73 |
74 | return node;
75 | });
76 |
77 | render() {
78 | return (
79 |
88 | {({style, node, ...rest}) => (
89 |
90 |
91 |
92 | {node.name}
93 |
94 |
95 |
96 | )}
97 |
98 | );
99 | }
100 | }
101 |
102 | export default createEntry(
103 | 'extensions',
104 | 'Extensions',
105 | 'Extending behaviour',
106 |
107 |
108 | A good example of a possible extension is creating a new handler to select nodes that automatically selects all
109 | the children nodes.
110 |
111 |
112 |
113 | By injecting extensions prop with an update type handler for node selection that can be achieved.
114 |
115 |
64 | {m => this.rowRenderer({...m, index, node, key, style, NodeRenderer})}
65 |
66 | );
67 | };
68 |
69 | render() {
70 | const {nodes, width, scrollToIndex, scrollToAlignment} = this.props;
71 |
72 | return (
73 |
74 | {({height, width: autoWidth}) => (
75 | (this._list = r)}
78 | height={height}
79 | rowCount={this.getRowCount()}
80 | rowHeight={this._cache.rowHeight}
81 | rowRenderer={this.measureRowRenderer(nodes)}
82 | width={width || autoWidth}
83 | scrollToIndex={scrollToIndex}
84 | scrollToAlignment={scrollToAlignment}
85 | />
86 | )}
87 |
88 | );
89 | }
90 | }
91 |
92 | Tree.propTypes = {
93 | nodes: PropTypes.arrayOf(PropTypes.shape(FlattenedNode)).isRequired,
94 | NodeRenderer: PropTypes.func.isRequired,
95 | onChange: PropTypes.func.isRequired,
96 | nodeMarginLeft: PropTypes.number,
97 | width: PropTypes.number,
98 | scrollToIndex: PropTypes.number,
99 | scrollToAlignment: PropTypes.string,
100 | };
101 |
--------------------------------------------------------------------------------
/demo/src/examples/Filterable.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import classNames from 'classnames';
3 | import {Checkbox} from 'semantic-ui-react';
4 |
5 | import Tree from '../../../src/TreeContainer';
6 | import Renderers from '../../../src/renderers';
7 | import {createEntry, constructTree} from '../toolbelt';
8 | import FilteringContainer from '../../../src/FilteringContainer';
9 | import Favorite from '../../../src/renderers/Favorite';
10 |
11 | const {Expandable} = Renderers;
12 |
13 | const MAX_DEEPNESS = 3;
14 | const MAX_NUMBER_OF_CHILDREN = 4;
15 | const MIN_NUMBER_OF_PARENTS = 5;
16 |
17 | const Nodes = constructTree(MAX_DEEPNESS, MAX_NUMBER_OF_CHILDREN, MIN_NUMBER_OF_PARENTS);
18 |
19 | const EXPANDED = 'EXPANDED';
20 |
21 | class Filterable extends Component {
22 | state = {
23 | nodes: Nodes,
24 | selectedGroup: EXPANDED,
25 | groupsEnabled: true,
26 | };
27 |
28 | get _groupProps() {
29 | return this.state.groupsEnabled
30 | ? {
31 | groups: {
32 | ALL: {
33 | name: 'All',
34 | filter: node => true,
35 | },
36 | [EXPANDED]: {
37 | name: 'Expanded',
38 | filter: node => (node.state || {}).expanded,
39 | },
40 | FAVORITES: {
41 | name: 'Favorites',
42 | filter: node => (node.state || {}).favorite,
43 | },
44 | },
45 | selectedGroup: this.state.selectedGroup,
46 | onSelectedGroupChange: this.handleSelectedGroupChange,
47 | }
48 | : {};
49 | }
50 |
51 | handleChange = nodes => {
52 | this.setState({nodes});
53 | };
54 |
55 | handleSelectedGroupChange = selectedGroup => {
56 | this.setState({selectedGroup});
57 | };
58 |
59 | handleGroupsToogle = () => {
60 | this.setState({groupsEnabled: !this.state.groupsEnabled});
61 | };
62 |
63 | render() {
64 | return (
65 |
66 |
73 |
74 | {({nodes}) => (
75 |
76 |
77 | {({style, node, ...rest}) => (
78 |
79 |
80 |
81 | {node.name}
82 |
83 |
84 |
85 | )}
86 |
87 |
90 |
100 |
When working with big data collections filtering can be very handy.
101 |
102 |
103 | By wrapping the Tree with the FilteringContainer your tree will only recieve the nodes it needs to
104 | render.
105 |
106 |
97 |
98 | {name}
99 | {!isNodeName &&
101 |
,
102 | ),
103 | );
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/demo/src/examples/WorldCup.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import 'flag-icon-css/css/flag-icon.min.css';
3 |
4 | import Tree from '../../../src/TreeContainer';
5 | import Renderers from '../../../src/renderers';
6 | import {createEntry} from '../toolbelt';
7 |
8 | const {Expandable} = Renderers;
9 |
10 | const groups = {
11 | A: [0, 1, 2, 3],
12 | B: [4, 5, 6, 7],
13 | C: [8, 9, 10, 11],
14 | D: [12, 13, 14, 15],
15 | E: [16, 17, 18, 19],
16 | F: [20, 21, 22, 23],
17 | G: [24, 25, 26, 27],
18 | H: [28, 29, 30, 31],
19 | };
20 |
21 | const countries = {
22 | 0: {name: 'Russia', flag: 'RU'},
23 | 1: {name: 'Saudi Arabia', flag: 'SA'},
24 | 2: {name: 'Egypt', flag: 'EG'},
25 | 3: {name: 'Uruguay', flag: 'UY'},
26 | 4: {name: 'Portugal', flag: 'PT'},
27 | 5: {name: 'Spain', flag: 'ES'},
28 | 6: {name: 'Morocco', flag: 'MA'},
29 | 7: {name: 'Iran', flag: 'IR'},
30 | 8: {name: 'France', flag: 'FR'},
31 | 9: {name: 'Australia', flag: 'AU'},
32 | 10: {name: 'Peru', flag: 'PE'},
33 | 11: {name: 'Denmark', flag: 'DK'},
34 | 12: {name: 'Argentina', flag: 'AR'},
35 | 13: {name: 'Iceland', flag: 'IS'},
36 | 14: {name: 'Croatia', flag: 'HR'},
37 | 15: {name: 'Nigeria', flag: 'NG'},
38 | 16: {name: 'Brazil', flag: 'BR'},
39 | 17: {name: 'Switzerland', flag: 'CH'},
40 | 18: {name: 'Costa Rica', flag: 'CR'},
41 | 19: {name: 'Serbia', flag: 'RS'},
42 | 20: {name: 'Germany', flag: 'DE'},
43 | 21: {name: 'Mexico', flag: 'MX'},
44 | 22: {name: 'Sweden', flag: 'SE'},
45 | 23: {name: 'South Korea', flag: 'KR'},
46 | 24: {name: 'Belgium', flag: 'BE'},
47 | 25: {name: 'Panama', flag: 'PA'},
48 | 26: {name: 'Tunisia', flag: 'TN'},
49 | 27: {name: 'England', flag: 'GB'},
50 | 28: {name: 'Poland', flag: 'PL'},
51 | 29: {name: 'Senegal', flag: 'SN'},
52 | 30: {name: 'Colombia', flag: 'CO'},
53 | 31: {name: 'Japan', flag: 'JP'},
54 | };
55 |
56 | const worldCup = Object.keys(groups).reduce((wc, g) => {
57 | const groupCountries = groups[g];
58 |
59 | const group = {
60 | id: Math.random(),
61 | name: `Group ${g}`,
62 | state: {
63 | expanded: true,
64 | },
65 | children: groupCountries.map(gc => ({
66 | id: gc,
67 | name: countries[gc].name,
68 | })),
69 | };
70 |
71 | return [...wc, group];
72 | }, []);
73 |
74 | class WorldCupExample extends Component {
75 | state = {
76 | nodes: worldCup,
77 | };
78 |
79 | handleChange = nodes => {
80 | this.setState({nodes});
81 | };
82 |
83 | render() {
84 | return (
85 |
86 | {({style, node, ...rest}) => {
87 | const country = countries[node.id] && countries[node.id].flag.toLowerCase();
88 |
89 | return (
90 |
91 |
92 | {country &&
99 | {node.name}
100 |
101 |
102 |
103 | );
104 | }}
105 |
106 | );
107 | }
108 | }
109 |
110 | export default createEntry(
111 | 'world-cup',
112 | 'WorldCup',
113 | 'World cup groups',
114 |
115 |
116 | FIFA world cup is back in 2018, in this special example the tree view is used to display the group stage draw
117 | results!
118 |
119 |
Let the best team win.
120 |
/src/setupTests.js"
81 | ],
82 | "testMatch": [
83 | "/src/**/__tests__/**/*.{js,jsx,mjs}",
84 | "/src/**/?(*.)(spec|test).{js,jsx,mjs}"
85 | ],
86 | "testEnvironment": "node",
87 | "testURL": "http://localhost",
88 | "transform": {
89 | "^.+\\.(js|jsx|mjs)$": "/node_modules/babel-jest",
90 | "^.+\\.css$": "/config/test/cssTransform.js",
91 | "^(?!.*\\.(js|jsx|mjs|css|json)$)": "/config/test/fileTransform.js"
92 | },
93 | "transformIgnorePatterns": [
94 | "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
95 | ]
96 | },
97 | "babel": {
98 | "presets": [
99 | "react-app"
100 | ]
101 | },
102 | "husky": {
103 | "hooks": {
104 | "pre-commit": "lint-staged"
105 | }
106 | },
107 | "lint-staged": {
108 | "**/*.js": [
109 | "prettier --write",
110 | "git add"
111 | ]
112 | },
113 | "prettier": {
114 | "printWidth": 120,
115 | "tabWidth": 2,
116 | "useTabs": false,
117 | "semi": true,
118 | "singleQuote": true,
119 | "trailingComma": "all",
120 | "bracketSpacing": false,
121 | "jsxBracketSameLine": false
122 | },
123 | "author": "Diogo Cunha",
124 | "homepage": "https://diogofcunha.github.io/react-virtualized-tree/",
125 | "license": "MIT",
126 | "repository": "https://github.com/diogofcunha/react-virtualized-tree/",
127 | "keywords": [
128 | "react",
129 | "tree",
130 | "view",
131 | "react-virtualized",
132 | "react-tree",
133 | "tree-view",
134 | "foder-structure",
135 | "react-virtualized-tree",
136 | "react-tree-view",
137 | "react-component"
138 | ]
139 | }
140 |
--------------------------------------------------------------------------------
/src/selectors/__tests__/__snapshots__/getFlattenedTree.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`getFlattenedTree should match snapshot 1`] = `
4 | Array [
5 | Object {
6 | "children": Array [
7 | Object {
8 | "children": Array [
9 | Object {
10 | "children": Array [
11 | Object {
12 | "id": "c-3",
13 | "name": "Leaf 3 Child",
14 | "state": Object {},
15 | },
16 | ],
17 | "id": 3,
18 | "name": "Leaf 3",
19 | "state": Object {
20 | "deletable": true,
21 | "expanded": false,
22 | "favorite": true,
23 | },
24 | },
25 | Object {
26 | "id": 4,
27 | "name": "Leaf 4",
28 | },
29 | ],
30 | "id": 2,
31 | "name": "Leaf 2",
32 | "state": Object {
33 | "deletable": true,
34 | "expanded": true,
35 | },
36 | },
37 | Object {
38 | "id": 5,
39 | "name": "Leaf 5",
40 | },
41 | ],
42 | "deepness": 0,
43 | "id": 0,
44 | "name": "Leaf 1",
45 | "parents": Array [],
46 | "state": Object {
47 | "expanded": true,
48 | },
49 | },
50 | Object {
51 | "children": Array [
52 | Object {
53 | "children": Array [
54 | Object {
55 | "id": "c-3",
56 | "name": "Leaf 3 Child",
57 | "state": Object {},
58 | },
59 | ],
60 | "id": 3,
61 | "name": "Leaf 3",
62 | "state": Object {
63 | "deletable": true,
64 | "expanded": false,
65 | "favorite": true,
66 | },
67 | },
68 | Object {
69 | "id": 4,
70 | "name": "Leaf 4",
71 | },
72 | ],
73 | "deepness": 1,
74 | "id": 2,
75 | "name": "Leaf 2",
76 | "parents": Array [
77 | 0,
78 | ],
79 | "state": Object {
80 | "deletable": true,
81 | "expanded": true,
82 | },
83 | },
84 | Object {
85 | "children": Array [
86 | Object {
87 | "id": "c-3",
88 | "name": "Leaf 3 Child",
89 | "state": Object {},
90 | },
91 | ],
92 | "deepness": 2,
93 | "id": 3,
94 | "name": "Leaf 3",
95 | "parents": Array [
96 | 0,
97 | 2,
98 | ],
99 | "state": Object {
100 | "deletable": true,
101 | "expanded": false,
102 | "favorite": true,
103 | },
104 | },
105 | Object {
106 | "deepness": 2,
107 | "id": 4,
108 | "name": "Leaf 4",
109 | "parents": Array [
110 | 0,
111 | 2,
112 | ],
113 | },
114 | Object {
115 | "deepness": 1,
116 | "id": 5,
117 | "name": "Leaf 5",
118 | "parents": Array [
119 | 0,
120 | ],
121 | },
122 | Object {
123 | "children": Array [
124 | Object {
125 | "children": Array [
126 | Object {
127 | "id": 7,
128 | "name": "Leaf 8",
129 | },
130 | Object {
131 | "id": 8,
132 | "name": "Leaf 9",
133 | },
134 | ],
135 | "id": 6,
136 | "name": "Leaf 7",
137 | "state": Object {
138 | "expanded": false,
139 | },
140 | },
141 | Object {
142 | "id": 9,
143 | "name": "Leaf 10",
144 | },
145 | ],
146 | "deepness": 0,
147 | "id": 1,
148 | "name": "Leaf 6",
149 | "parents": Array [],
150 | "state": Object {
151 | "deletable": true,
152 | "expanded": false,
153 | },
154 | },
155 | Object {
156 | "deepness": 0,
157 | "id": "z",
158 | "name": "Leaf z",
159 | "parents": Array [],
160 | "state": Object {
161 | "deletable": true,
162 | "favorite": true,
163 | },
164 | },
165 | ]
166 | `;
167 |
168 | exports[`getFlattenedTreePaths, should match snapshot 1`] = `
169 | Array [
170 | Array [
171 | 0,
172 | ],
173 | Array [
174 | 0,
175 | 2,
176 | ],
177 | Array [
178 | 0,
179 | 2,
180 | 3,
181 | ],
182 | Array [
183 | 0,
184 | 2,
185 | 4,
186 | ],
187 | Array [
188 | 0,
189 | 5,
190 | ],
191 | Array [
192 | 1,
193 | ],
194 | Array [
195 | "z",
196 | ],
197 | ]
198 | `;
199 |
--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/FilteringContainer.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`FilteringContainer filtering should filter for deepsearch 1`] = `
4 | Array [
5 | Object {
6 | "children": Array [
7 | Object {
8 | "children": Array [],
9 | "id": 2,
10 | "name": "Leaf 2",
11 | "state": Object {
12 | "deletable": true,
13 | "expanded": true,
14 | },
15 | },
16 | ],
17 | "id": 0,
18 | "name": "Leaf 1",
19 | "state": Object {
20 | "expanded": true,
21 | },
22 | },
23 | ]
24 | `;
25 |
26 | exports[`FilteringContainer filtering should filter when results match more then 1 node 1`] = `
27 | Array [
28 | Object {
29 | "children": Array [],
30 | "id": 0,
31 | "name": "Leaf 1",
32 | "state": Object {
33 | "expanded": true,
34 | },
35 | },
36 | Object {
37 | "children": Array [
38 | Object {
39 | "children": Array [],
40 | "id": 9,
41 | "name": "Leaf 10",
42 | },
43 | ],
44 | "id": 1,
45 | "name": "Leaf 6",
46 | "state": Object {
47 | "deletable": true,
48 | "expanded": false,
49 | },
50 | },
51 | ]
52 | `;
53 |
54 | exports[`FilteringContainer filtering should ignore boundarie spaces when filtering 1`] = `
55 | Array [
56 | Object {
57 | "children": Array [],
58 | "id": 0,
59 | "name": "Leaf 1",
60 | "state": Object {
61 | "expanded": true,
62 | },
63 | },
64 | Object {
65 | "children": Array [
66 | Object {
67 | "children": Array [],
68 | "id": 9,
69 | "name": "Leaf 10",
70 | },
71 | ],
72 | "id": 1,
73 | "name": "Leaf 6",
74 | "state": Object {
75 | "deletable": true,
76 | "expanded": false,
77 | },
78 | },
79 | ]
80 | `;
81 |
82 | exports[`FilteringContainer filtering should ignore casing when filtering 1`] = `
83 | Array [
84 | Object {
85 | "children": Array [
86 | Object {
87 | "children": Array [
88 | Object {
89 | "children": Array [
90 | Object {
91 | "children": Array [],
92 | "id": "c-3",
93 | "name": "Leaf 3 Child",
94 | "state": Object {},
95 | },
96 | ],
97 | "id": 3,
98 | "name": "Leaf 3",
99 | "state": Object {
100 | "deletable": true,
101 | "expanded": false,
102 | "favorite": true,
103 | },
104 | },
105 | ],
106 | "id": 2,
107 | "name": "Leaf 2",
108 | "state": Object {
109 | "deletable": true,
110 | "expanded": true,
111 | },
112 | },
113 | ],
114 | "id": 0,
115 | "name": "Leaf 1",
116 | "state": Object {
117 | "expanded": true,
118 | },
119 | },
120 | ]
121 | `;
122 |
123 | exports[`FilteringContainer groups when groups exist should filter results based on the selected group 1`] = `
124 | Array [
125 | Object {
126 | "children": Array [
127 | Object {
128 | "children": Array [],
129 | "id": 2,
130 | "name": "Leaf 2",
131 | "state": Object {
132 | "deletable": true,
133 | "expanded": true,
134 | },
135 | },
136 | ],
137 | "id": 0,
138 | "name": "Leaf 1",
139 | "state": Object {
140 | "expanded": true,
141 | },
142 | },
143 | ]
144 | `;
145 |
146 | exports[`FilteringContainer groups when groups exist should render a injected groupRenderer 1`] = `
147 |
150 | Group renderer!
151 | {"groups":{"EXPANDED":{"name":"Expanded"},"FAVORITES":{"name":"Favorites"}},"selectedGroup":"EXPANDED"}
152 |
153 | `;
154 |
155 | exports[`FilteringContainer groups when groups exist should render the DefaultGroupRenderer when one is not injected as a prop 1`] = `
156 |
159 |
162 | Expanded
163 |
164 |
167 | Favorites
168 |
169 |
170 | `;
171 |
172 | exports[`FilteringContainer groups when groups exist should work when matched with filtering 1`] = `
173 | Array [
174 | Object {
175 | "children": Array [],
176 | "id": 0,
177 | "name": "Leaf 1",
178 | "state": Object {
179 | "expanded": true,
180 | },
181 | },
182 | ]
183 | `;
184 |
--------------------------------------------------------------------------------
/src/renderers/__tests__/Expandable.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {render, cleanup, fireEvent} from 'react-testing-library';
3 |
4 | import Expandable from '../Expandable';
5 | import {KEY_CODES} from '../../eventWrappers';
6 | import {updateNode} from '../../selectors/nodes';
7 |
8 | describe('renderers Expandable', () => {
9 | afterEach(cleanup);
10 |
11 | const setup = (state = {}, extraProps = {}) => {
12 | const baseProps = {
13 | onChange: jest.fn(),
14 | node: {
15 | id: 1,
16 | name: 'Node 1',
17 | state,
18 | deepness: 0,
19 | children: [{}],
20 | },
21 | measure: jest.fn(),
22 | index: 1,
23 | };
24 |
25 | const props = {...baseProps, ...extraProps};
26 |
27 | return {
28 | ...render(Child
);
13 |
14 | const props = {nodes: Nodes, debouncer: v => v, ...extraProps};
15 |
16 | const wrapper = render({child} );
17 |
18 | return {
19 | changeFilter: value => {
20 | const input = wrapper.getByPlaceholderText('Search...');
21 |
22 | ReactTestUtils.Simulate.change(input, {
23 | target: {
24 | value,
25 | },
26 | });
27 | },
28 | getInjectedNodes: () => {
29 | return child.mock.calls.slice(-1)[0][0].nodes;
30 | },
31 | wrapper,
32 | child,
33 | props,
34 | };
35 | };
36 |
37 | describe('filtering', () => {
38 | it('should not filter when searchTerm is empty', () => {
39 | const {changeFilter, props, getInjectedNodes} = setup();
40 |
41 | changeFilter('');
42 |
43 | expect(getInjectedNodes()).toEqual(props.nodes);
44 | });
45 |
46 | it('should filter for deepsearch', async () => {
47 | const {changeFilter, getInjectedNodes} = setup();
48 |
49 | changeFilter('2');
50 |
51 | expect(getInjectedNodes()).toMatchSnapshot();
52 | });
53 |
54 | it('should filter when results match more then 1 node', () => {
55 | const {changeFilter, getInjectedNodes} = setup();
56 |
57 | changeFilter('1');
58 |
59 | expect(getInjectedNodes()).toMatchSnapshot();
60 | });
61 |
62 | it('should filter when there are no results', () => {
63 | const {changeFilter, getInjectedNodes} = setup();
64 |
65 | changeFilter('Node');
66 |
67 | expect(getInjectedNodes()).toEqual([]);
68 | });
69 |
70 | it('should ignore boundarie spaces when filtering', () => {
71 | const {changeFilter, getInjectedNodes} = setup();
72 |
73 | changeFilter('1 ');
74 |
75 | expect(getInjectedNodes()).toMatchSnapshot();
76 | });
77 |
78 | it('should ignore casing when filtering', () => {
79 | const {changeFilter, getInjectedNodes} = setup();
80 |
81 | changeFilter('LEAf 3');
82 |
83 | expect(getInjectedNodes()).toMatchSnapshot();
84 | });
85 | });
86 |
87 | describe('groups', () => {
88 | it('when groups do not exist should not render groups related info', () => {
89 | const {wrapper} = setup();
90 |
91 | expect(wrapper.container.querySelector('.group')).toBeNull();
92 | expect(wrapper.container.querySelector('.tree-group')).toBeNull();
93 | });
94 |
95 | describe('when groups exist', () => {
96 | const EXPANDED = 'EXPANDED';
97 |
98 | const setupWithGroups = (extraProps = {}) =>
99 | setup({
100 | groups: {
101 | [EXPANDED]: {
102 | name: 'Expanded',
103 | filter: node => (node.state || {}).expanded,
104 | },
105 | FAVORITES: {
106 | name: 'Favorites',
107 | filter: node => (node.state || {}).favorite,
108 | },
109 | },
110 | selectedGroup: EXPANDED,
111 | onSelectedGroupChange: jest.fn(),
112 | ...extraProps,
113 | });
114 |
115 | it('should render the expected className', () => {
116 | const {wrapper} = setupWithGroups();
117 |
118 | expect(wrapper.container.querySelector('.group')).not.toBeNull();
119 | });
120 |
121 | it('should render the DefaultGroupRenderer when one is not injected as a prop', () => {
122 | const {wrapper} = setupWithGroups();
123 |
124 | expect(wrapper.container.querySelector('.tree-group')).toMatchSnapshot();
125 | });
126 |
127 | it('should render a injected groupRenderer', () => {
128 | const GroupRenderer = props => Group renderer! {JSON.stringify(props)}
;
129 |
130 | const {wrapper} = setupWithGroups({
131 | groupRenderer: GroupRenderer,
132 | });
133 |
134 | expect(wrapper.getByTestId('group-renderer')).toMatchSnapshot();
135 | });
136 |
137 | it('should filter results based on the selected group', () => {
138 | const {getInjectedNodes} = setupWithGroups();
139 |
140 | expect(getInjectedNodes()).toMatchSnapshot();
141 | });
142 |
143 | it('should work when matched with filtering', () => {
144 | const {getInjectedNodes, changeFilter} = setupWithGroups();
145 |
146 | changeFilter('1');
147 |
148 | expect(getInjectedNodes()).toMatchSnapshot();
149 | });
150 | });
151 | });
152 | });
153 |
--------------------------------------------------------------------------------
/src/selectors/__tests__/nodes.test.js:
--------------------------------------------------------------------------------
1 | import deepFreeze from 'deep-freeze';
2 |
3 | import * as nodeSelectors from '../nodes';
4 | import {Nodes} from '../../../testData/sampleTree';
5 | import {getFlattenedTree} from '../getFlattenedTree';
6 |
7 | describe('selectors -> nodes ->', () => {
8 | const getSampleNode = (i = 0) => getFlattenedTree(Nodes)[i];
9 |
10 | describe('single node actions', () => {
11 | it('updateNode should update the supplied node state without mutations', () => {
12 | const originalNode = getSampleNode();
13 |
14 | deepFreeze(originalNode);
15 |
16 | expect(nodeSelectors.updateNode(originalNode, {favorite: true, expanded: false})).toMatchSnapshot();
17 | });
18 |
19 | it('addNode should create the expected object', () => {
20 | expect(nodeSelectors.addNode(getSampleNode())).toMatchSnapshot();
21 | });
22 |
23 | it('deleteNode should create the expected object', () => {
24 | expect(nodeSelectors.deleteNode(getSampleNode())).toMatchSnapshot();
25 | });
26 | });
27 |
28 | describe('Tree actions', () => {
29 | describe('deleteNodeFromTree', () => {
30 | it('when root node is deleted, should delete that node and all children nodes', () => {
31 | deepFreeze(Nodes);
32 |
33 | expect(nodeSelectors.deleteNodeFromTree(Nodes, getSampleNode())).toMatchSnapshot();
34 | });
35 |
36 | it('when a node is deleted, should delete that node and all children nodes', () => {
37 | deepFreeze(Nodes);
38 |
39 | expect(nodeSelectors.deleteNodeFromTree(Nodes, getSampleNode(1))).toMatchSnapshot();
40 | });
41 | });
42 |
43 | it('replaceNodeFromTree should replace a node in the tree without mutations', () => {
44 | deepFreeze(Nodes);
45 |
46 | const updatedNode = nodeSelectors.updateNode(getSampleNode(), {favorite: true, expanded: false});
47 |
48 | expect(nodeSelectors.replaceNodeFromTree(Nodes, updatedNode.node)).toMatchSnapshot();
49 | });
50 | });
51 |
52 | describe('getNodeRenderOptions', () => {
53 | it('should extract state from nodes correctly when there are no children', () => {
54 | expect(nodeSelectors.getNodeRenderOptions({state: {expanded: true, favorite: true}})).toMatchSnapshot();
55 | });
56 |
57 | it('should extract state from nodes correctly when there are children', () => {
58 | expect(nodeSelectors.getNodeRenderOptions({children: [{}], state: {deletable: true}})).toMatchSnapshot();
59 | });
60 |
61 | it('should extract state from nodes correctly when there is no state', () => {
62 | expect(nodeSelectors.getNodeRenderOptions({children: [{}]})).toMatchSnapshot();
63 | });
64 | });
65 |
66 | describe('getNodeFromPath', () => {
67 | test('should get a node from a path in the root of the tree', () => {
68 | expect(nodeSelectors.getNodeFromPath([Nodes[0].id], Nodes)).toEqual(Nodes[0]);
69 | expect(nodeSelectors.getNodeFromPath([Nodes[1].id], Nodes)).toEqual(Nodes[1]);
70 | expect(nodeSelectors.getNodeFromPath([Nodes[2].id], Nodes)).toEqual(Nodes[2]);
71 | });
72 |
73 | test('should get a node from a path in the first set of children of the tree', () => {
74 | expect(nodeSelectors.getNodeFromPath([Nodes[0].id, Nodes[0].children[1].id], Nodes)).toEqual(
75 | Nodes[0].children[1],
76 | );
77 | });
78 |
79 | test('should get a node from a path deep in the tree', () => {
80 | expect(
81 | nodeSelectors.getNodeFromPath(
82 | [Nodes[0].id, Nodes[0].children[0].id, Nodes[0].children[0].children[1].id],
83 | Nodes,
84 | ),
85 | ).toEqual(Nodes[0].children[0].children[1]);
86 | });
87 |
88 | test('should throw custom error when the path is invalid', () => {
89 | expect(() => nodeSelectors.getNodeFromPath('', Nodes)).toThrowError('path is not an array');
90 | expect(() => nodeSelectors.getNodeFromPath({}, Nodes)).toThrowError('path is not an array');
91 | expect(() => nodeSelectors.getNodeFromPath(1245, Nodes)).toThrowError('path is not an array');
92 | expect(() => nodeSelectors.getNodeFromPath(true, Nodes)).toThrowError('path is not an array');
93 | });
94 |
95 | test('should throw custom error when path does not exist in a middle node', () => {
96 | const {id: existingId1} = Nodes[0];
97 | const {id: existingId2} = Nodes[0].children[0].children[1];
98 |
99 | expect(() => nodeSelectors.getNodeFromPath([existingId1, 25, existingId2], Nodes)).toThrowError(
100 | `Could not find node at ${existingId1},25,${existingId2}`,
101 | );
102 | });
103 |
104 | test('should throw custom error when path does not exist in the final node', () => {
105 | const {id: existingId1} = Nodes[0];
106 | const {id: existingId2} = Nodes[0].children[0];
107 |
108 | expect(() => nodeSelectors.getNodeFromPath([existingId1, existingId2, 25], Nodes)).toThrowError(
109 | `Could not find node at ${existingId1},${existingId2},25`,
110 | );
111 | });
112 | });
113 | });
114 |
--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for react-virtualized-tree
2 | // Definitions by: Diogo Cunha
3 |
4 | import * as React from 'react';
5 |
6 | type NodeId = number | string;
7 |
8 | interface BasicNode {
9 | id: NodeId;
10 | name: string;
11 | state?: {[stateKey: string]: any};
12 | }
13 |
14 | export interface Node extends BasicNode {
15 | children?: BasicNode[];
16 | }
17 |
18 | export interface FlattenedNode extends Node {
19 | deepness: number;
20 | parents: number[];
21 | }
22 |
23 | interface NodeAction {
24 | type: string;
25 | node: FlattenedNode;
26 | }
27 |
28 | type onChange = (nodes: Node[], node: Node) => Node[];
29 |
30 | export interface Extensions {
31 | updateTypeHandlers: {[type: number]: onChange};
32 | }
33 |
34 | export interface TreeProps {
35 | extensions?: Extensions;
36 | nodes: Node[];
37 | onChange: (nodes: Node[]) => void;
38 | children: (props: RendererProps) => JSX.Element;
39 | nodeMarginLeft?: number;
40 | width?: number;
41 | scrollToId?: number;
42 | scrollToAlignment?: string;
43 | }
44 |
45 | export default class Tree extends React.Component {}
46 |
47 | export type Omit = Pick>;
48 |
49 | export interface RendererProps {
50 | measure: () => void;
51 | index: number;
52 | onChange: (updateParams: NodeAction) => void;
53 | node: FlattenedNode;
54 | iconsClassNameMap?: T;
55 | style: React.CSSProperties;
56 | children?: React.ReactNode;
57 | }
58 |
59 | export type InjectedRendererProps = Omit, 'iconsClassNameMap'>;
60 | export type CustomRendererProps = Omit, 'style'>;
61 |
62 | type DeletableRenderProps = CustomRendererProps<{delete?: string}>;
63 |
64 | type ExpandableRenderProps = CustomRendererProps<{
65 | expanded?: string;
66 | collapsed?: string;
67 | lastChild?: string;
68 | }>;
69 |
70 | type FavoriteRenderProps = CustomRendererProps<{
71 | favorite?: string;
72 | notFavorite?: string;
73 | }>;
74 |
75 | declare const Deletable: React.SFC;
76 | declare const Expandable: React.SFC;
77 | declare const Favorite: React.SFC;
78 |
79 | interface Renderers {
80 | Deletable: React.SFC;
81 | Expandable: React.SFC;
82 | Favorite: React.SFC;
83 | }
84 |
85 | export const renderers: Renderers;
86 |
87 | export interface Group {
88 | filter: (node: Node) => boolean;
89 | name: string;
90 | }
91 |
92 | interface GroupRendererProps {
93 | onChange: (c: string) => void;
94 | groups: {[g: string]: Group};
95 | selectedGroup: string;
96 | }
97 |
98 | export interface FilteringContainerProps {
99 | nodes: Node[];
100 | children: (params: {nodes: Node[]; nodeParentMappings: {[id: NodeId]: NodeId[]}}) => JSX.Element;
101 | debouncer?: (func: (...p: any[]) => any, timeout: number) => void;
102 | groups?: {[g: string]: Group};
103 | selectedGroup?: string;
104 | groupRenderer?: React.StatelessComponent | React.Component;
105 | onSelectedGroupChange?: (c: string) => void;
106 | indexSearch: (searchTerm: string, nodes: FlattenedNode[]) => (node: FlattenedNode) => boolean;
107 | }
108 |
109 | export class FilteringContainer extends React.Component {}
110 |
111 | export enum UPDATE_TYPE {
112 | ADD = 0,
113 | DELETE = 1,
114 | UPDATE = 2,
115 | }
116 |
117 | interface Constants {
118 | UPDATE_TYPE: UPDATE_TYPE;
119 | }
120 |
121 | export const constants: Constants;
122 |
123 | interface NodeRenderOptions {
124 | hasChildren: boolean;
125 | isExpanded: boolean;
126 | isFavorite: boolean;
127 | isDeletable: boolean;
128 | }
129 |
130 | export enum NODE_CHANGE_OPERATIONS {
131 | CHANGE_NODE = 'CHANGE_NODE',
132 | DELETE_NODE = 'DELETE_NODE',
133 | }
134 |
135 | interface Selectors {
136 | getNodeRenderOptions: (node: FlattenedNode) => NodeRenderOptions;
137 | replaceNodeFromTree: (nodes: Node[], updatedNode: FlattenedNode, operation?: NODE_CHANGE_OPERATIONS) => Node[];
138 | deleteNodeFromTree: (nodes: Node[], nodeToDelete: FlattenedNode) => Node[];
139 | deleteNode: (node: FlattenedNode[]) => NodeAction;
140 | addNode: (node: FlattenedNode[]) => NodeAction;
141 | updateNode: (node: FlattenedNode, state: {[stateKey: string]: any}) => NodeAction;
142 | }
143 |
144 | interface State {
145 | flattenedTree: Array[];
146 | tree: Node[];
147 | }
148 |
149 | export interface TreeState {
150 | getNodeAt: (state: State, index: number) => Node;
151 | getTree: (state: State) => Node[];
152 | createFromTree: (tree: Node[]) => State;
153 | getNumberOfVisibleDescendants: (state: State, index: number) => number;
154 | getNodeDeepness: (state: State, index: number) => number;
155 | }
156 |
157 | export interface TreeStateModifiers {
158 | editNodeAt: (state: State, index: number, updateNode: ((oldNode: Node) => Node) | Node) => State;
159 | deleteNodeAt: (state: State, index: number) => State;
160 | }
161 |
162 | export const selectors: Selectors;
163 |
--------------------------------------------------------------------------------
/demo/src/examples/Basic/index.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import reactElementToJSXString from 'react-element-to-jsx-string';
3 | import {Grid, Header, Label, Icon} from 'semantic-ui-react';
4 | import update from 'immutability-helper';
5 |
6 | import Tree from '../../../../src/TreeContainer';
7 | import Renderers from '../../../../src/renderers';
8 | import {Nodes} from '../../../../testData/sampleTree';
9 | import {createEntry} from '../../toolbelt';
10 | import RendererDragContainer from './RendererDragContainer';
11 |
12 | const {Deletable, Expandable, Favorite} = Renderers;
13 |
14 | const NodeNameRenderer = ({node: {name}, children}) => (
15 |
16 | {name}
17 | {children}
18 |
19 | );
20 |
21 | class BasicTree extends Component {
22 | state = {
23 | nodes: Nodes,
24 | availableRenderers: [Expandable, Deletable, Favorite],
25 | selectedRenderers: [Expandable, NodeNameRenderer],
26 | };
27 |
28 | handleRendererMove = (dragIndex, hoverIndex) => {
29 | const {selectedRenderers} = this.state;
30 | const dragCard = selectedRenderers[dragIndex];
31 |
32 | this.setState(
33 | update(this.state, {
34 | selectedRenderers: {
35 | $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]],
36 | },
37 | }),
38 | );
39 | };
40 |
41 | handleChange = nodes => {
42 | this.setState({nodes});
43 | };
44 |
45 | renderNodeDisplay = (display, props, children = []) => React.createElement(display, props, children);
46 |
47 | createNodeRenderer = (nodeDisplay = this.state.nodeDisplay, props) => {
48 | const [nextNode, ...remainingNodes] = nodeDisplay;
49 |
50 | if (remainingNodes.length === 0) {
51 | return this.renderNodeDisplay(nextNode, props);
52 | }
53 |
54 | return this.renderNodeDisplay(nextNode, props, this.createNodeRenderer(remainingNodes, props));
55 | };
56 |
57 | getRenderedComponentTree = () =>
58 | reactElementToJSXString(this.createNodeRenderer(this.state.selectedRenderers, {node: {name: 'X', id: 0}}))
59 | .split('>')
60 | .filter(c => c)
61 | .map((c, i) => {
62 | const {
63 | selectedRenderers: {length},
64 | } = this.state;
65 | const isClosingTag = i >= length;
66 |
67 | const marginLeft = !isClosingTag ? 10 * i : 10 * (length - 2 - Math.abs(length - i));
68 |
69 | return {c}>
;
70 | });
71 |
72 | handleRendererDeselection = i => () => {
73 | this.setState(({selectedRenderers}) => ({
74 | selectedRenderers: [...selectedRenderers.slice(0, i), ...selectedRenderers.slice(i + 1)],
75 | }));
76 | };
77 |
78 | handleRendererSelection = renderer => () => {
79 | this.setState(({selectedRenderers}) => ({
80 | selectedRenderers: [...selectedRenderers, renderer],
81 | }));
82 | };
83 |
84 | render() {
85 | const renderersAvailableForAdd = this.state.availableRenderers.filter(
86 | r => this.state.selectedRenderers.indexOf(r) === -1,
87 | );
88 |
89 | return (
90 |
91 |
92 |
93 |
94 |
95 |
96 | {renderersAvailableForAdd.map((r, i) => {
97 | return (
98 |
99 | {r.name}
100 |
102 | );
103 | })}
104 |
105 |
106 |
107 |
108 |
109 |
110 | {({style, ...p}) => {this.createNodeRenderer(this.state.selectedRenderers, p)}
}
111 |
112 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
126 |
127 |
128 |
129 |
130 | {this.getRenderedComponentTree()}
131 |
132 |
133 |
134 | );
135 | }
136 | }
137 |
138 | export default createEntry(
139 | 'basic-tree',
140 | 'Basic/index',
141 | 'Basic Tree',
142 |
143 |
144 | A tree that enables favorite toogle, expansion and deletion, this example only makes use of the default renderers
145 |
146 |
7 |
10 |
14 | Leaf 1
15 |
16 |
17 |
20 |
24 | Leaf 2
25 |
26 |
27 |
30 |
34 | Leaf 3
35 |
36 |
37 |
40 |
44 | Leaf 4
45 |
46 |
47 |
50 |
54 | Leaf 5
55 |
56 |
57 |
60 |
64 | Leaf 6
65 |
66 |
67 |
70 |
74 | Leaf z
75 |
76 |
77 |
84 |
87 |
91 | Leaf 1
92 |
93 |
94 |
97 |
101 | Leaf 2
102 |
103 |
104 |
107 |
111 | Leaf 3
112 |
113 |
114 |
117 |
121 | Leaf 3 Child
122 |
123 |
124 |
127 |
131 | Leaf 4
132 |
133 |
134 |
137 |
141 | Leaf 5
142 |
143 |
144 |
147 |
151 | Leaf 6
152 |
153 |
154 |
157 |
161 | Leaf 7
162 |
163 |
164 |
167 |
171 | Leaf 8
172 |
173 |
174 |
177 |
181 | Leaf 9
182 |
183 |
184 |
187 |
191 | Leaf 10
192 |
193 |
194 |
197 |
201 | Leaf z
202 |
203 |
204 |
211 |
214 |
218 | Leaf 6
219 |
220 |
221 |
224 |
228 | Leaf 7
229 |
230 |
231 |
234 |
238 | Leaf 8
239 |
240 |
241 |
244 |
248 | Leaf 9
249 |
250 |
251 |
254 |
258 | Leaf 10
259 |
260 |
261 |
23 |
41 | );
42 | };
43 |
44 | const selectNodes = (nodes, selected) =>
45 | nodes.map(n => ({
46 | ...n,
47 | children: n.children ? selectNodes(n.children, selected) : [],
48 | state: {
49 | ...n.state,
50 | selected,
51 | },
52 | }));
53 |
54 | const nodeSelectionHandler = (nodes, updatedNode) =>
55 | nodes.map(node => {
56 | if (node.id === updatedNode.id) {
57 | return {
58 | ...updatedNode,
59 | children: node.children ? selectNodes(node.children, updatedNode.state.selected) : [],
60 | };
61 | }
62 |
63 | if (node.children) {
64 | return {...node, children: nodeSelectionHandler(node.children, updatedNode)};
65 | }
66 |
67 | return node;
68 | });
69 |
70 | const toggleNodeVisibility = (nodes, expanded) =>
71 | nodes.map(n => ({
72 | ...n,
73 | children: n.children ? toggleNodeVisibility(n.children, expanded) : [],
74 | state: {
75 | ...n.state,
76 | expanded,
77 | },
78 | }));
79 |
80 | const toggleAllChildrenVisibility = (nodes, updatedNode) =>
81 | nodes.map(node => {
82 | if (node.id === updatedNode.id) {
83 | const children = node.children ? toggleNodeVisibility(node.children, updatedNode.state.expanded) : [];
84 |
85 | return {
86 | ...updatedNode,
87 | children,
88 | };
89 | }
90 |
91 | return node;
92 | });
93 |
94 | class Example extends React.Component {
95 | state = {
96 | nodes: Nodes,
97 | };
98 |
99 | handleChange = nodes => {
100 | this.setState({nodes});
101 | };
102 |
103 | render() {
104 | const {extensions} = this.props;
105 | return (
106 |
107 |
108 | {({style, node, ...rest}) => (
109 |
110 |
118 |
119 | {node.name}
120 |
121 |
122 |
123 | )}
124 |
125 |
v}
199 | selectedGroup={this.state.selectedGroup}
200 | onSelectedGroupChange={this.handleSelectedGroupChange}
201 | {...this.props}
202 | >
203 | {({nodes}) => (
204 |
205 | {({style, node, ...rest}) => (
206 |
207 |
208 | {node.name}
209 |
210 |
211 | )}
212 |
213 | )}
214 |
215 | );
216 | }
217 | }
218 |
219 | describe('Tree with filtering container', () => {
220 | afterEach(cleanup);
221 |
222 | const getRenderedNodesNames = container => {
223 | const nodes = container.querySelectorAll('[data-type="node"]');
224 |
225 | const names = [];
226 | nodes.forEach(n => {
227 | names.push(n.textContent);
228 | });
229 |
230 | return names;
231 | };
232 |
233 | const setup = (props = {}) => {
234 | const wrapper = render(
123 | {children}
124 | {name}
125 | {isExpanded && {DESCRIPTIONS[id]}
}
126 |
127 | );
128 | }
129 | }
130 |
131 | class NodeMeasure extends Component {
132 | state = {
133 | nodes: Nodes,
134 | };
135 |
136 | handleChange = nodes => {
137 | this.setState({nodes});
138 | };
139 |
140 | render() {
141 | return (
142 |
143 | {({style, ...p}) => (
144 |
145 |
146 |
148 |
149 | )}
150 |
151 | );
152 | }
153 | }
154 |
155 | export default createEntry(
156 | 'node-measure',
157 | 'NodeMeasure',
158 | 'Nodes with auto measure',
159 |
160 |
All cells in react-virtualized-tree implement react-virtualized's CellMeasurer
161 |
162 | All nodes receive a measure prop that can be used to measure nodes with different heights like what happens in
163 | this example
164 |
165 |
18 | 
18 |