A React-based UI library
input value type, support number(float number), int(integer)
input type
custom class names
floating number digits
label for input
custom label width
render the content behind input, return a react component
custom width of extra content
whether the extra content is inside input
whether the input component is inline
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>
);
}
}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>
);
}
}drag bar's id
return the boundary area dom of drag
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>
);
}
}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>
);
}
}{x: 0, y: 0}
the css property position fixed
click document to hide layer
document click handler
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>
);
}
}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>
);
}
}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>
);
}
}see: perfect-scrollbar
return the instance of perfect-scrollbar
same with the property data of Menu
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 item class name
show tab item close button
show add tab item button
tab's tool buttons
vertically arrange the tab item
the tab item text
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 head data
table body data
fix the table head when table scroll
resize the table head item
table body width
the height of table body item(tr)
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>
);
}
}