newton-checkbox-tree

Overview

Newton Checkbox Tree component renders a tree of items that contain configurable checkboxes, icons, labels and events. The component is extensible and customizable at the global and individual node level. The style used within the component is implemented with IBM Carbon Design System framework.

The build, test, serve, package and deploy tasks use modern tooling and practices with Parcel, Jest, Enzyme, Storybook and Babel. All of the tasks are extrememly simple to execute which allows for excellent development environment.

This component is part of the Newton Component family. Eventually it will be moved into the Newton Common Component library.

DEVELOPMENT

SETUP DEVELOPMENT ENVIRONMENT

Quick overview for getting your local development environment setup for development, browsing and publishing. Below are all of the commands needed to build, test, run and publish the component.

CLONE REPOSITORY

git clone https://github.com/ryan-rocketsoftware/newton-checkbox-tree.git

COMMANDS

• clean - Deletes dist, demo, build, cache and storybook folders
• clean:dist - Deletes dist folder
• clean:demo - Deletes demo folder
• clean:build - Deletes build folder
• clean:cache - Deletes cache folder
• clean:storybook - Deletes storybook folder
• start:demo - Run demo in the browser
• build:demo - Bundle demo application
• publish:demo - Deploy demo to gh-pages branch
• build - Transpile scss and javascript for production
• build:css - Transpile scss to css for production
• build:commonjs - Transpile javascript to commonjs for production
• build:esmodules - Transpile javascript to esmodule for production
• start:dev - Run demo in the browser with original source
• start:prod - Run demo in the browser with production bundle
• start:examples:* - Run specified demo in the browser. Replace the * with the name of the demo.
• test - Run tests
• test:details - Run tests with details
• test:coverage - Run tests with code coverage
• test:snapshot:cleanup - Remove old outdated snapshots prior to running tests
• storybook - Run storybook stories in browser
• build-storybook - Build storybook stories
• build-source-map - Bundle source map for analyzer
• view-source-map - View application depenendency tree and bundle size

HOW TO USE

INSTALL

Add the component to your React application with npm or yarn.

Using yarn:

yarn add newton-checkbox-tree

Using npm:

npm install newton-checkbox-tree --save

Note – This library makes use of Font Awesome styles and expects them to be loaded in the browser.

INCLUDE CSS

For your convenience, the library's styles can be consumed utilizing one of the following files:

• newton-checkbox-tree/dist/css/newton-checkbox-tree.css
• newton-checkbox-tree/src/scss/newton-checkbox-tree.scss

Either include one of these files in your stylesheets or utilize a CSS loader:

import 'newton-checkbox-tree/dist/css/newton-checkbox-tree.css';
import 'newton-checkbox-tree/src/scss/newton-checkbox-tree.scss';

RENDER COMPONENT

A quick usage example is included below. Note that the newton-checkbox-tree component is controlled. In other words, it is stateless. You must update its checked and expanded properties whenever a change occurs.

import React from 'react';
import CheckboxTree from 'newton-checkbox-tree';

const nodes = [{
    value: 'user',
    label: 'user',
    category: 'table',
    children: [
        { value: 'name', label: 'name', category: 'field' },
        { value: 'address', label: 'address', category: 'field' },
    ],
}];

class Widget extends React.Component {
    state = {
        checked: [],
        expanded: [],
    };

    render() {
        return (
            <CheckboxTree
                nodes={nodes}
                checked={this.state.checked}
                expanded={this.state.expanded}
                onCheck={checked => this.setState({ checked })}
                onExpand={expanded => this.setState({ expanded })}
            />
        );
    }
}

All node objects must have a unique value. This value is serialized into the checked and expanded arrays and is also used for performance optimizations.

CHANGING DEFAULT ICONS

By default, newton-checkbox-tree uses Font Awesome for the various icons that appear in the tree. To change the defaults, simply pass in the icons property and override the defaults. Note that you can override as many or as little icons as you like:

<CheckboxTree
    ...
    icons={{
        check: <span className="rct-icon rct-icon-check" />,
        uncheck: <span className="rct-icon rct-icon-uncheck" />,
        halfCheck: <span className="rct-icon rct-icon-half-check" />,
        expandClose: <span className="rct-icon rct-icon-expand-close" />,
        expandOpen: <span className="rct-icon rct-icon-expand-open" />,
        expandAll: <span className="rct-icon rct-icon-expand-all" />,
        collapseAll: <span className="rct-icon rct-icon-collapse-all" />,
        parentClose: <span className="rct-icon rct-icon-parent-close" />,
        parentOpen: <span className="rct-icon rct-icon-parent-open" />,
        leaf: <span className="rct-icon rct-icon-leaf" />,
    }}
/>

If you are using the react-fontawesome library, you can also directly substitute those icons:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
...

<CheckboxTree
    ...
    icons={{
        check: <FontAwesomeIcon className="rct-icon rct-icon-check" icon="check-square" />,
        uncheck: <FontAwesomeIcon className="rct-icon rct-icon-uncheck" icon={['far', 'square']} />,
        halfCheck: <FontAwesomeIcon className="rct-icon rct-icon-half-check" icon="check-square" />,
        expandClose: <FontAwesomeIcon className="rct-icon rct-icon-expand-close" icon="chevron-right" />,
        expandOpen: <FontAwesomeIcon className="rct-icon rct-icon-expand-open" icon="chevron-down" />,
        expandAll: <FontAwesomeIcon className="rct-icon rct-icon-expand-all" icon="plus-square" />,
        collapseAll: <FontAwesomeIcon className="rct-icon rct-icon-collapse-all" icon="minus-square" />,
        parentClose: <FontAwesomeIcon className="rct-icon rct-icon-parent-close" icon="folder" />,
        parentOpen: <FontAwesomeIcon className="rct-icon rct-icon-parent-open" icon="folder-open" />,
        leaf: <FontAwesomeIcon className="rct-icon rct-icon-leaf-close" icon="file" />
    }}
/>

COMPONENT PROPERTIES

onCheck and onExpand

onCheck and onExpand events must be implemented in your React component in order to update newton checkbox tree checked and expanded state. Clicking the checkbox or clicking the expand icon will not update the components state due to the fact that its a stateless component.

NODE PROPERTIES

Individual nodes within the nodes property can have the following structure: