i-react-utils v2.0.0

i-React utils

Components:

React components.

List

import {List} from 'i-react-utils';

<List data={dataObject see below} renderRow={function(item,index,reactRowKey) { return (<tr key={reactRowKey}>...</tr>);}}>
    (Optional table elements thead or tfoot)
</List>

Where:

• data can be one of:
  • { items: arrayOfData, paging: {count: numItemsOn, total:numOfTotalItems, page:currentPageNumber} }
  • Array of items
• renderRow = function that returns <tr> component for each element of data.

Methods:

• void data(dataObject); // see above

AjaxList

import {AjaxList} from 'i-react-utils';

<AjaxList
    renderRow={function(item,index,reactRowKey) { return (<tr key={reactRowKey}>...</tr>); }}
    onError={function(err) {}},
    fetchDataCallback={function(pageNum) {}}
    >
    (Optional table elements thead or tfoot)
</AjaxList>

Where:

• fetchDataCallback is a function that return Promise of ajax request. Argument pageNum is one-indexed.
• renderRow = function that returns <tr> component for each element of data.

Methods:

• void updateAndResetPage()
• void update()

FormWizard

import {fw} from 'i-react-utils'; TODO

GlobalMessage

import {GlobalMessage} from 'i-react-utils';

This component should wrap a page content.

<GlobalMessage>{ this.props.children }</GlobalMessage>

Usage:

class Page extends React.Component {
    static contextTypes = {
        messenger : React.PropTypes.object
    };

    onError(error) {
        this.context.messenger.clear();
        this.context.messenger.error('Error ' + error);
    }
}

LazyLoad

import {GlobalMessage} from 'i-react-utils';

This component lazy loads and render components.

<LazyLoad
            component={this.props.component}
            errorComponent={this.props.errorComponent}
            loadingComponent={<img src="/public/images/ajax-loader.gif" alt="..." />}
            ajax={this.ajax.bind(this)}>
</LazyLoad>

Where:

• ajax is a function that return Promise of ajax request.
• component = an React component or element to render when data is available.
• errorComponent = an React component or element to render when data is not available (optional).
• loadingComponent = an React component or element to render during ajax call (optional).