bee-table7/demo/index.js

85 lines
188 KiB
JavaScript
Raw Permalink Normal View History

2019-04-16 13:35:25 +08:00
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Con, Row, Col } from 'bee-layout';
import { Panel } from 'bee-panel';
import Drawer from 'bee-drawer';
import Clipboard from 'bee-clipboard';
import Button from '../src';
var Demo0101 = require("./demolist/Demo0101");var Demo0102 = require("./demolist/Demo0102");var Demo0103 = require("./demolist/Demo0103");var Demo0104 = require("./demolist/Demo0104");var Demo0105 = require("./demolist/Demo0105");var Demo0106 = require("./demolist/Demo0106");var Demo0107 = require("./demolist/Demo0107");var Demo0201 = require("./demolist/Demo0201");var Demo0202 = require("./demolist/Demo0202");var Demo0301 = require("./demolist/Demo0301");var Demo0302 = require("./demolist/Demo0302");var Demo0402 = require("./demolist/Demo0402");var Demo0404 = require("./demolist/Demo0404");var Demo0405 = require("./demolist/Demo0405");var Demo0406 = require("./demolist/Demo0406");var Demo0501 = require("./demolist/Demo0501");var Demo0502 = require("./demolist/Demo0502");var Demo0503 = require("./demolist/Demo0503");var Demo0505 = require("./demolist/Demo0505");var Demo0601 = require("./demolist/Demo0601");var Demo0602 = require("./demolist/Demo0602");var Demo0603 = require("./demolist/Demo0603");var Demo0701 = require("./demolist/Demo0701");var Demo0702 = require("./demolist/Demo0702");var Demo0802 = require("./demolist/Demo0802");var Demo0901 = require("./demolist/Demo0901");var Demo0902 = require("./demolist/Demo0902");var Demo0903 = require("./demolist/Demo0903");var Demo1001 = require("./demolist/Demo1001");var Demo1002 = require("./demolist/Demo1002");var Demo1101 = require("./demolist/Demo1101");var Demo1102 = require("./demolist/Demo1102");var Demo1103 = require("./demolist/Demo1103");var Demo1105 = require("./demolist/Demo1105");var Demo1106 = require("./demolist/Demo1106");var Demo1107 = require("./demolist/Demo1107");var Demo1108 = require("./demolist/Demo1108");var Demo1201 = require("./demolist/Demo1201");var Demo1301 = require("./demolist/Demo1301");var Demo1302 = require("./demolist/Demo1302");var Demo1401 = require("./demolist/Demo1401");var Demo1402 = require("./demolist/Demo1402");var Demo1403 = require("./demolist/Demo1403");var Demo1404 = require("./demolist/Demo1404");var Demo1601 = require("./demolist/Demo1601");var DemoArray = [{"example":<Demo0101 />,"title":" 基本表格","code":"/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 当单元格内容过多时会自动显示省略号鼠标hover有提示。showRowNum 设置是否显示序号列。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0101 extends Component {\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n showRowNum={true}\n />\n );\n }\n}\n\nexport default Demo0101;\n","desc":" 当单元格内容过多时会自动显示省略号鼠标hover有提示。showRowNum 设置是否显示序号列。"},{"example":<Demo0102 />,"title":" 默认无数据展示","code":"/**\r\n*\r\n* @title 默认无数据展示\r\n* @parent 基础 Basic\r\n* @description 无数据时默认展示图标,可在`emptyText`方法中自定义展示内容。\r\n* demo0102\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"员工姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n
2019-04-16 13:35:25 +08:00
class Demo extends Component {
constructor(props){
super(props);
this.state = {
open: false
}
}
handleClick=()=> {
this.setState({ open: !this.state.open })
}
fCloseDrawer=()=>{
this.setState({
open: false
})
}
render () {
const { title, example, code, desc, scss_code } = this.props;
const header = (
<div>
<p className='component-title'>{ title }</p>
<p>{ desc }</p>
<span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
</div>
);
return (
<Col md={12} id={title.trim()} className='component-demo'>
<Panel header={header}>
{example}
</Panel>
<Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
<div className='component-code-copy'> JS代码
<Clipboard action="copy" text={code}/>
</div>
<pre className="pre-js">
<code className="hljs javascript">{ code }</code>
</pre >
{!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码
<Clipboard action="copy" text={scss_code}/>
</div>:null }
{ !!scss_code ? <pre className="pre-css">
<code className="hljs css">{ scss_code }</code>
</pre> : null }
</Drawer>
</Col>
)
}
}
class DemoGroup extends Component {
constructor(props){
super(props)
}
render () {
return (
<Row>
{DemoArray.map((child,index) => {
return (
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
)
})}
</Row>
)
}
}
ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));