1.0.4 • Published 6 years ago
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:
| 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);
| 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' });
| 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' });
| 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' });
| 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' });
| 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' });