A React-based UI library

Input

props

type: string

input value type, support number(float number), int(integer)

regExp: object

nativeType: string

input type

className: string

custom class names

placeholder: string

digits: number

floating number digits

label: string

label for input

labelWidth: number

custom label width

renderExtra: func

render the content behind input, return a react component

extraWidth: number

custom width of extra content

inner: bool

whether the extra content is inside input

onChange: func

onFocus: func

onBlur: func

defaultValue: string | number

inline: bool

whether the input component is inline

usage

import React, {Component} from 'react';
import {Input} from 'codish-ui';

class TestInput extends Component {
    state = {
        value: ''
    }

    handleChange = v => {
        this.setState({
            value: v
        });
    }

    render() {
        return (
            <div>
                <Input
                    type="number"
                    digits={3}
                    placeholder="input number"
                    onChange={this.handleChange} />
                <Input
                    type="int"
                    placeholder="input integer" />
                <Input
                    regExp={/^(a|b|c)*$/i}
                    placeholder="just input a, b or c" />
                <Input
                    defaultValue="default input value" />
                <Input
                    inline
                    placeholder="inline input"
                    label="weight"
                    labelWidth={100}
                    renderExtra={() => <div>kg</div>}
                    inner />
                <Input
                    nativeType="password"
                    placeholder="password" />
            </div>
        );
    }
}

Button

props

className: string

inline: bool

onClick: func

disabled: bool

usage

import React, {Component} from 'react';
import {Button} from 'codish-ui';

class TestButton extends Component {
    state = {
        disabled: false
    }

    handleClick = () => {
        console.log('button clicked');
        this.setState({
            disabled: !this.state.disabled
        });
    }

    render() {
        return (
            <Button className="test-button"
                disabled={this.state.disabled}
                onClick={this.handleClick}>button</Button>
        );
    }
}

Dragable

props

dragId: string

drag bar's id

draggable: bool

onMoveStart: func

onMoving: func

onMoveEnd: func

getBoundaryDom: func

return the boundary area dom of drag

usage

import React, {Component} from 'react';
import {Draggable} from 'codish-ui';

class TestDraggable extends Component {
    getBoundaryDom = () => {
        return document.getElementsByTagName('body')[0];
    }

    render() {
        return (
            <Draggable
                dragId="dragbar-id"
                getBoundaryDom={this.getBoundaryDom}>
                <div>
                    <div id="drag-id"></div>
                    draggable
                </div>
            </Draggable>
        );
    }
}

Modal

props

className: string

modal: bool

noneParent: bool

usage

import React, {Component} from 'react';
import {Modal} from 'codish-ui';

class TestModal extends Component {
    state = {
        show: false
    };

    handleHideClick = () => {
        this.setState({
            show: false
        });
    }

    handleShowClick = () => {
        this.setState({
            show: true
        });
    }

    render() {
        return (
            <div>
                <p onClick={this.handleShowClick}>click and show modal</p>
                {
                    this.state.show ? <Modal>
                        <div onClick={this.handleHideClick}>test modal</div>
                    </Modal> : null
                }
            </div>
        );
    }
}

Layer

props

className: string

position: object

{x: 0, y: 0}

fixed: bool

the css property position fixed

autoHide: bool

click document to hide layer

onClose: func

document click handler

delayClose: number

usage

import React, {Component} from 'react';
import {Layer} from 'codish-ui';

class TestLayer extends Component {
    state = {
        show: false
    };

    handleClose = () => {
        this.setState({
            show: false
        });
    }

    handleShowClick = () => {
        this.setState({
            show: true
        });
    }

    render() {
        return (
            <div>
                <p onClick={this.handleShowClick}>click and show Layer</p>
                {
                    this.state.show ? <Layer
                        onClose={this.handleClose}>
                            <div>test layer</div>
                        </Layer> : null
                }
            </div>
        );
    }
}

Menu

props

className: string

width: number

height: number

data: array

onItemClick: func

position: object

onClose: func

usage

import React, {Component} from 'react';
import {Menu} from 'codish-ui';

class TestMenu extends Component {
    data = [
        'menu item 1',
        {
            text: 'menu item 2'
        },
        '__sep__',
        {
            text: 'menu item 3',
            children: [
                'menu item 3-1',
                'menu item 3-2',
            ]
        }
    ];

    state = {
        show: false,
        position: {x: 0, y: 0}
    };

    handleClose = () => {
        this.setState({
            show: false
        });
    }

    handleShowClick = (e) => {
        this.setState({
            show: true,
            position: {
                x: e.pageX,
                y: e.pageY
            }
        });
    }

    handleItemClick = (text, index) => {
        console.log(text, index);
    }

    render() {
        return (
            <div>
                <p onClick={this.handleShowClick}>click and show Menu</p>
                {
                    this.state.show ? <Menu
                        data={this.data}
                        onItemClick={this.handleItemClick}
                        onClose={this.handleClose}
                        width={150}
                        position={this.state.position} /> : null
                }
            </div>
        );
    }
}

Popup

props

title: string

buttons: array

onBtnClick: func

onClose: func

draggable: bool

className: string

width: number

height: number

style: object

usage

import React, {Component} from 'react';
import {Popup} from 'codish-ui';

class TestPopup extends Component {
    state = {
        show: false
    };

    handleClose = () => {
        this.setState({
            show: false
        });
    }

    handleShowClick = () => {
        this.setState({
            show: true
        });
    }

    handleBtnClick = (index, e) => {
        console.log(index, e);
    }

    render() {
        return (
            <div>
                <p onClick={this.handleShowClick}>click and show popup</p>
                {
                    this.state.show ? <Popup
                        onClose={this.handleClose}
                        title="test popup"
                        buttons={['ok', 'cancel']}
                        onBtnClick={this.handleBtnClick}
                        draggable={false}
                        width={300}
                        height={150}>
                            <div>test popup</div>
                        </Popup> : null
                }
            </div>
        );
    }
}

Scrollable

props

className: string

style: object

options: object

see: perfect-scrollbar

getInstance: func

return the instance of perfect-scrollbar

Select

props

className: string

options: array

same with the property data of Menu

onItemClick: func

defaultActiveIndex: number

placeholder: string

width: number

usage

import React, {Component} from 'react';
import {Select} from 'codish-ui';

class TestSelect extends Component {
    data = ['item 1', 'item 2'];

    handleItemClick = (text, index) => {
        console.log(text, index);
    }

    render() {
        return (
            <div>
                <Select
                    options={this.data}
                    placeholder="pls select..."
                    defaultActiveIndex={1}
                    onItemClick={this.handleItemClick}
                    width={150} />
            </div>
        );
    }
}

Tab and TabPane

Tab props

className: string

tabClassName: string

tab item class name

showClose: bool

show tab item close button

showAdd: string

show add tab item button

tools: any

tab's tool buttons

vertical: bool

vertically arrange the tab item

TabPane props

className: string

label: string

the tab item text

closable: bool

usage

import React, {Component} from 'react';
import {Tab, TabPane, Button} from 'codish-ui';

class TestTab extends Component {
    state = {
        tabArr: ['tab1', 'tab2', 'tab3']
    }

    tabs = {
        'tab1': <TabPane label="tab1" closable={false} key="tab1">das 1</TabPane>,
        'tab2': <TabPane label="tab2" key="tab2">das 2</TabPane>,
        'tab3': <TabPane label="tab3" key="tab3">das 3</TabPane>
    };

    handleTabClose = (index, key) => {
        let tmpset = new Set(this.state.tabArr);
        tmpset.delete(key);
        this.setState({
            tabArr: [...tmpset]
        });
    }

    handleAddClick = (activeIndex, total) => {
        let newkey = `tabnew${total + 1}`;
        this.tabs[newkey] = (
            <TabPane label={newkey} key={newkey}>das new</TabPane>
        )
        let arr = this.state.tabArr;
        arr.push(newkey);
        this.setState({
            tabArr: arr
        });
    }

    render() {
        return (
            <div>
                <Tab className="testtab" showClose showAdd
                    onClose={this.handleTabClose}
                    onAddClick={this.handleAddClick}
                    tools={<Button>tab tool button</Button>}>
                    {tabs}
                </Tab>
                <Tab vertical>
                    <TabPane label="tab1">tab bar item is vertical 1</TabPane>
                    <TabPane label="tab2">tab bar item is vertical 2</TabPane>
                </Tab>
            </div>
        );
    }
}

Table

props

className: string

style: object

head: array

table head data

body: array

table body data

headFixed: bool

fix the table head when table scroll

resizable: bool

resize the table head item

bodyWidth: number

table body width

itemHeight: number

the height of table body item(tr)

overScan: number

trHoverClassName: string

onTrClick: func

onTrDoubleClick: func

usage

import React, {Component} from 'react';
import {Table} from 'codish-ui';

class TestTable extends Component {
    render() {
        return (
            <div>
                <Table
                    style={{height: '100px'}}
                    headFixed
                    bodyWidth={1800}
                    trHoverClassName="hover-class"
                    resizable
                    head={[<div onClick={() => {console.log('test')}}>dada</div>, {key: 'key1', label: 'key1 label'}, 'key2', 'key3']}
                    body={[
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: <div><input type="text"/></div>
                            },
                        },
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: 'key3-content'
                            },
                        },
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: 'key3-content'
                            },
                        },
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: 'key3-content'
                            },
                        },
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: 'key3-content'
                            },
                        },
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: 'key3-content'
                            },
                        },
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: 'key3-content'
                            },
                        },
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: 'key3-content'
                            },
                        },
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: 'key3-content'
                            },
                        },
                        {
                            key1: 'key1-content',
                            key2: 'key2-content',
                            key3: {
                                className: 'testclass',
                                content: 'key3-content'
                            },
                        }
                    ]} />
            </div>
        );
    }
}