React-eco-ui-kit

Usage:

import EcoUiKit from 'react-eco-ui-kit';

const { utils, consts, components } = EcoUiKit;
const { Paginator } = components;

//or
import { components, utils, consts } from 'react-eco-ui-kit';

const { Picker } = components;

//or
import { Paginator, Input, Picker } from 'react-eco-ui-kit';

Components:

• Paginator

| Name | Type | Default | Description | |:-------------:|:-------------:|:-----:|:------------:| | amount | number.isRequered | --- | All items | valuePerPage | number | 10 | Items per one page | amountPickersToShow | number | 4 | Pickers to show in the Paginator | onPickerChange | func | noop | function to trigger after picker change | initIndex | number | 1 | start picked index | className | string | EMPTY | class name for the Paginator wrapper | customPickerComponent | React.Component | Picker | Picker component | pickerClassName | string | EMPTY | provided class name for the Picker component | enableDelimeter | bool | true | Flag to toggle delimeter visibility | customDelimeterComponent | React.Component | Delimeter | Delimeter component | delimeterValue | string | ... | Delimeter value to show | delimeterClassName | string | EMPTY | provided class name for the Delimeter component | enableLabels | bool | true | Flag to toggle labels visibility | customLabelComponent | React.Component | Label | Label Component | firstLabel | string | First | Value for first label | lastLabel | string | Last | Value for last label | labelClassName | strings | EMPTY | provided class name for the Label component | enableControls | bool | true | Flag to toggle controls visibility | customControlComponent | React.Component | Control | Control component | controlUp | any | > | Value for control up | controlDown | any | < | Value for control down | controlClassName | string | EMPTY | provided class name for the Control component | enableInputControl | bool | true | Flag to toggle input visibility | customInputComponent | React.Component | Input | Input component | inputControlValidator | func | --- | function to validate input values. Will trigger on each change. | inputClassName | string | EMPTY | provided class name for the Input component

Usage:

const renderPaginator = (amount) => (<Paginator amount={amount} />);
const myData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] //your data

renderPaginator(myData.length);

• Delimeter

| Name | Type | Default | Description | |:-------------:|:-------------:|:-----:|:------------:| | className | string | EMPTY | provided class name for the Delimeter component | value | any | ... | Delimeter value to show

Usage:

const renderDelimeter = (props) => (<Delimeter {...props} />);

renderDelimeter({ value: '---', className: 'myDelimeter' });

• Control

| Name | Type | Default | Description | |:-------------:|:-------------:|:-----:|:------------:| | className | string | EMPTY | provided class name for the Control component | value | any | def | Control value to show | disabled | bool | false | Flag to toggle availability of the Control | onClick | func | noop | click handler

Usage:

const renderControl = (props) => (<Control {...props} />);

renderControl({ value: '->', className: 'myControl' });

• Label

| Name | Type | Default | Description | |:-------------:|:-------------:|:-----:|:------------:| | className | string | EMPTY | provided class name for the Label component | value | any | def | Label value to show | disabled | bool | false | Flag to toggle availability of the Label | onClick | func | noop | click handler

Usage:

const renderLabel = (props) => (<Label {...props} />);

renderLabel({ value: 'FIRST', className: 'myLabel' });

• Picker

| Name | Type | Default | Description | |:-------------:|:-------------:|:-----:|:------------:| | className | string | EMPTY | provided class name for the Picker component | value | any | def | Picker value to show | disabled | bool | false | Flag to toggle availability of the Picker | picked | bool | false | Flag to toggle picked state of the Picker | onClick | func | noop | click handler

Usage:

const renderPicker = (props) => (<Picker {...props} />);

renderPicker({ value: '22', className: 'myPicker' });

• Input

| Name | Type | Default | Description | |:-------------:|:-------------:|:-----:|:------------:| | className | string | EMPTY | provided class name for the Input component | value | string | def | Input value to show | validator | func | identity | function to validate input values. Will trigger on each change. | onChange | func | noop | change handler

Usage:

const renderInput = (props) => (<Input {...props} />);

renderInput({ value: '22', className: 'myInput' });