boundless-progress

Progress

Installation

npm i boundless-progress --save

Then use it like:

/** @jsx createElement */

import { each } from 'lodash';
import { createElement, PureComponent } from 'react';
import Button from 'boundless-button';
import Progress from 'boundless-progress';

export default class ProgressDemo extends PureComponent {
    state = {
        barProgress: 0,
        meterProgress: 0,
    }

    componentDidMount() {
        each(this.refs, (value, key) => this.updateProgress(key));
    }

    componentWillUnmount() {
        window.clearTimeout(this.barTimerHandle);
        window.clearTimeout(this.meterTimerHandle);
    }

    updateProgress(type) {
        if (this.state[`${type}Progress`] < 100) {
            this[`${type}TimerHandle`] = window.setTimeout(() => {
                this.setState({ [`${type}Progress`]: this.state[`${type}Progress`] + 1 }, () => {
                    this.updateProgress(type);
                });
            }, 35);
        }
    }

    resetProgress(type) {
        window.clearTimeout(this[`${type}TimerHandle`]);

        this.setState({ [`${type}Progress`]: 0 }, () => { this.updateProgress(type); });
    }

    render() {
        return (
            <div className='progress-demo spread align-end'>
                <figure>
                    <h5>Horizontal Progress Bar</h5>
                    <Progress
                        ref='bar'
                        aria-label={`${this.state.barProgress}% complete`}
                        progress={`${this.state.barProgress}%`} />
                    <Button
                        onPressed={this.resetProgress.bind(this, 'bar')}
                        style={{ marginTop: '1rem' }}>
                        Reset
                    </Button>
                </figure>
                <figure>
                    <h5>Filling Progress Meter</h5>
                    <Progress
                        ref='meter'
                        id='progress-meter'
                        aria-label={`${this.state.meterProgress}% complete`}
                        progress={`${this.state.meterProgress}%`}
                        tweenProperty='height' />
                    <Button
                        onPressed={this.resetProgress.bind(this, 'meter')}
                        style={{ marginTop: '1rem' }}>
                        Reset
                    </Button>
                </figure>
                <figure>
                    <h5>Indeterminate Progress Bar</h5>
                    <Progress
                        ref='indeterminate'
                        aria-label={'Processing...'} />
                </figure>
            </div>
        );
    }
}

Progress can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Progress } from 'boundless';

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

There are no required props.

Optional Props

• * · any React-supported attribute

  Expects	Default Value
  any	n/a

• cancelComponent · any valid HTML tag name

  Expects	Default Value
  string or function	'button'

• cancelProps

  Expects	Default Value
  object	{}

• component · any valid HTML tag name

  Expects	Default Value
  string	'div'

• onCancel · if supplied, adds a cancel element and calls this function when that element is clicked

  Expects	Default Value
  function	null

• progress · the integer (and unit, if applicable) of the current progress state, e.g. 0.01 (opacity)

  Expects	Default Value
  string or number	undefined

• progressComponent · any valid HTML tag name

  Expects	Default Value
  string	'div'

• progressProps

  Expects	Default Value
  object	{}

• tweenProperty · the CSS property to tween (must accept percentages) - defaults to "width"

  Expects	Default Value
  string	'width'

Reference Styles

Stylus

You can see what variables are available to override in variables.styl.

// Redefine any variables as desired, e.g:
color-accent = royalblue

// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-progress/style"

CSS

If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css, based on Boundless's default variables.