Not a Propaganda Machine

    react-toolbox-additions
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.9 • Public • Published

    Additional components for react-toolbox components library

    npm version

    The project provides additions for react-toolbox library (http://react-toolbox.com/), which are not defined at material design and therefore were not included to original react-toolbox components library, but it could be useful to have.

    Installation

    React Toolbox can be installed as an npm package:

    $ npm install react-toolbox-additions

    Prerequisites

    React Toolbox Additions require uses react-toolbox components library and react.

    Like react-toolbox authors I also would recommend webpack to use module bundler.

    The components can be customized via themes by using react-css-themr which is also used by React Toolbox to make component easily themeable.

    Basic usage

    Examples how to use.

    Pager:

    import Pager from 'react-toolbox-additions/lib/pager';
    import FontIcon from 'react-toolbox-additions/lib/font_icon';
     
    const PagerTest = () => {
     
        onPageChange = (newPage, oldPage) => {
          console.info('Selected page : ' + newPage + ', Previous page: ' + oldPage);
        }
     
        return (
          <Pager 
            prevButtonLabel={(<FontIcon value='chevron_left' />)}
            nextButtonLabel={(<FontIcon value='chevron_right' />)}
            rangeLeftButtonLabel={(<FontIcon value='more_horiz' />)}
            rangeRightButtonLabel={(<FontIcon value='more_horiz' />)}
            totalPages={29}
            currentPage={5}
            visiblePagesBlockSize={3}
            onPageChange={onPageChange}
          />
      );
    };

    Accordion:

    import React, { PropTypes } from 'react';
    import FontIcon from 'react-toolbox/lib/font_icon';
    import Input from 'react-toolbox/lib/input';
    import {Button} from 'react-toolbox/lib/button';
    import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider, ListItemText, ListItemContent } from 'react-toolbox/lib/list';
     
    import { Accordion, Chord } from 'react-toolbox-additions/lib/accordion';
    import style from '../style';
     
    class AccordionTest extends React.Component {
     
      static propTypes = {
      };
     
      static defaultProps = {
      }
     
      state = {
        index: 0
      }
     
      onChange = (idx) => {
        this.setState({
          index: idx
        });
      }
     
      onActive1 = () => {
        console.info('Selected chord: ' + this.state.index);
      }
     
      onActive2 = () => {
        console.info('Selected chord: ' + this.state.index);
      }
     
      onActive3 = () => {
        console.info('Selected chord: ' + this.state.index);
      }
     
      render () {
     
        return (
          <Accordion
            className={style.accordion}
            index={this.state.index}
            onChange={this.onChange}
          >
            <Chord
              label='Number One'
              onActive={this.onActive1}
            >
              <div className={style['accordion-body2']}>
                The project provides additions for react-toolbox which are not defined at material design and therefore were not included to original react-toolbox components library but it could be useful to have.
              </div>
            </Chord>
            <Chord
              labelIcon={<FontIcon value='build' />}
              label='Number Two'
              onActive={this.onActive2}
            >
              <div className={style['accordion-body1']} >
                <Input
                  type='number'
                  value={1000}
                  label='Number'
                />
     
                <Button
                  label='Click Me'
                />
              </div>
     
            </Chord>
            <Chord
              labelIcon={'view_list'}
              label='Number Three'
              labelPostIcon={this.state.index1 === 2 ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
              onActive={this.onActive3}
            >
              <List selectable ripple>
                <ListSubHeader caption='Contacts' />
                <ListItem caption='Inbox' leftIcon='inbox' />
                <ListItem caption='Outbox' selectable={false} ripple={false} leftIcon='send' />
                <ListItem caption='Trash' leftIcon='delete' />
                <ListItem caption='Spam' leftIcon='report' />
              </List>
            </Chord>
          </Accordion>
        );
      }
    }

    Also important notice from authors of react-toolbox: "Take into account that any required style will be included in the final CSS so your final would include Button styles in this case. It's more convenient to import components this way (or with raw imports) because if you require from the project root, every stylesheet of React Toolbox will be included, even if you don't use it."

    Importing components

    The project inherits the same style of component structures that is in react-toolbox project, what makes it easy to use for everybody who is familiar with react-toolbox components structure.

     |- /pager
     |---- pager.js
     |---- _config.scss
     |---- index.js
     |---- readme.md
     |---- theme.scss
    

    Bundled component

    import { Pager } from 'react-toolbox-additions/lib/pager';
    import { Accordion, Chord } from 'react-toolbox-additions/lib/accordion';
    import { FilePicker } from 'react-toolbox-additions/lib/filepicker';

    Authors and Contributors

    The project is being initially developed and maintained by Max Komlev.

    Steps to build project and run example locally.

    $ git clone https://github.com/MaximKomlev/react-toolbox-additions.git
    $ npm install
    $ npm run build
    $ npm start
    

    Local example will be available at http://localhost:8000/.

    Components in bundle

    Currently the library implements Pager, FilePicker and Accordion components.

    Changes

    The log of changes.

    License

    This project is licensed under the terms of the MIT license.

    Install

    npm i react-toolbox-additions

    DownloadsWeekly Downloads

    7

    Version

    1.3.9

    License

    none

    Last publish

    Collaborators

    • maximkomlev