react-nestedlist

Livedemo

For a livedemo click here.

Usage

npm install --save react-nestedlist

import {flatMap} from 'react-nestedlist/dist/utils/nestedListUtils';
import NestedList, {NestedListItem} from 'react-nestedlist';
import Immutable from 'immutable';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      tree: Immutable.fromJS([
        {
          _id: 'startpage',
          label: 'Startpage',
          children: []
        },
        {
          _id: 'page-1',
          label: 'Page 1',
          children: [
            {
              _id: 'page-1a',
              label: 'Page 1a',
              children: []
            },
            {
              _id: 'page-1b',
              label: 'Page 1b',
              children: []
            }
          ]
        },
        {
          _id: 'page-2',
          label: 'Page 2',
          children: []
        }
      ])
    }
  }

  validate(tree) {
    if (tree.first().get('label') !== 'Startpage') return 'Startpage must be first';

    return true;
  }

  render() {
    return (
      <NestedList data={this.state.tree} onDataChange={tree => this.setState({tree})} validate={this.validate}>
        {(items, draggedId) => (
          <div className="list">
            {flatMap(items, item => (
              <NestedListItem key={item.get('_id')} item={item}>
                <div
                  style={{paddingLeft: (item.get('__level') - 1) * 20 + 10}}
                  className={'list-item' + (draggedId === item.get('_id') ? ' list-item-preview' : '')}>
                  {item.get('label')}
                </div>
              </NestedListItem>
            ))}
          </div>
        )}
      </NestedList>
    );
  }
}

Development

# prepare
npm install

# run development server at http://localhost:8082
npm start

# run tests (per default in PhantomJS without coverage report)
npm test
npm test -- --coverage
npm test -- --browser chrome
npm test -- --browser firefox

# build dist bundle
npm run dist