508 lines
21 KiB
JavaScript
508 lines
21 KiB
JavaScript
|
|
|||
|
|
import { Con, Row, Col } from 'bee-layout';
|
|||
|
|
import { Panel } from 'bee-panel';
|
|||
|
|
import Button from 'bee-button';
|
|||
|
|
import React, { Component } from 'react';
|
|||
|
|
import ReactDOM from 'react-dom';
|
|||
|
|
import Table from '../src';
|
|||
|
|
import Animate from 'bee-animate';
|
|||
|
|
import Menu, { Item, Divider } from 'bee-menus';
|
|||
|
|
import DropDown from 'bee-dropdown';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const CARET = <i className="uf uf-chevronarrowdown"></i>;
|
|||
|
|
|
|||
|
|
const CARETUP = <i className="uf uf-chevronarrowup"></i>;
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @title 这是标题
|
|||
|
|
* @description 这是描述
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
class Demo1 extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
this.columns = [
|
|||
|
|
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
|
|||
|
|
{ id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
|
|||
|
|
{ title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
|
|||
|
|
{
|
|||
|
|
title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
|
|||
|
|
<a onClick={e => this.onDelete(record.key, e)} href="#">Delete</a>,
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
this.state = {
|
|||
|
|
data: [
|
|||
|
|
{ a: '123', key: '1' },
|
|||
|
|
{ a: 'cdd', b: 'edd', key: '2' },
|
|||
|
|
{ a: '1333', c: 'eee', key: '3' },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onDelete(key, e) {
|
|||
|
|
console.log('Delete', key);
|
|||
|
|
e.preventDefault();
|
|||
|
|
const data = this.state.data.filter(item => item.key !== key);
|
|||
|
|
this.setState({ data });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onAdd() {
|
|||
|
|
const data = [...this.state.data];
|
|||
|
|
data.push({
|
|||
|
|
a: 'new data',
|
|||
|
|
b: 'new data',
|
|||
|
|
c: 'new data',
|
|||
|
|
key: Date.now(),
|
|||
|
|
});
|
|||
|
|
this.setState({ data });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getBodyWrapper(body) {
|
|||
|
|
return (
|
|||
|
|
<Animate transitionName="move" component="tbody" className={body.props.className}>
|
|||
|
|
{body.props.children}
|
|||
|
|
</Animate>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
return (
|
|||
|
|
<div style={{ margin: 20 }}>
|
|||
|
|
<h2>Table row with animation</h2>
|
|||
|
|
<button onClick={() => this.onAdd()}>添加</button>
|
|||
|
|
<Table
|
|||
|
|
columns={this.columns}
|
|||
|
|
data={this.state.data}
|
|||
|
|
getBodyWrapper={this.getBodyWrapper}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @title 这是标题
|
|||
|
|
* @description 这是描述
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const columns1 = [{
|
|||
|
|
title: 'Name',
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
key: 'name',
|
|||
|
|
width: 400,
|
|||
|
|
}, {
|
|||
|
|
title: 'Age',
|
|||
|
|
dataIndex: 'age',
|
|||
|
|
key: 'age',
|
|||
|
|
width: 100,
|
|||
|
|
}, {
|
|||
|
|
title: 'Address',
|
|||
|
|
dataIndex: 'address',
|
|||
|
|
key: 'address',
|
|||
|
|
width: 200,
|
|||
|
|
}, {
|
|||
|
|
title: 'Operations',
|
|||
|
|
dataIndex: 'operation',
|
|||
|
|
key: 'x',
|
|||
|
|
width: 150,
|
|||
|
|
}];
|
|||
|
|
|
|||
|
|
const data1 = [{
|
|||
|
|
key: 1,
|
|||
|
|
name: 'a',
|
|||
|
|
age: 32,
|
|||
|
|
address: 'I am a',
|
|||
|
|
children: [{
|
|||
|
|
key: 11,
|
|||
|
|
name: 'aa',
|
|||
|
|
age: 33,
|
|||
|
|
address: 'I am aa',
|
|||
|
|
}, {
|
|||
|
|
key: 12,
|
|||
|
|
name: 'ab',
|
|||
|
|
age: 33,
|
|||
|
|
address: 'I am ab',
|
|||
|
|
children: [{
|
|||
|
|
key: 121,
|
|||
|
|
name: 'aba',
|
|||
|
|
age: 33,
|
|||
|
|
address: 'I am aba',
|
|||
|
|
}],
|
|||
|
|
}, {
|
|||
|
|
key: 13,
|
|||
|
|
name: 'ac',
|
|||
|
|
age: 33,
|
|||
|
|
address: 'I am ac',
|
|||
|
|
children: [{
|
|||
|
|
key: 131,
|
|||
|
|
name: 'aca',
|
|||
|
|
age: 33,
|
|||
|
|
address: 'I am aca',
|
|||
|
|
children: [{
|
|||
|
|
key: 1311,
|
|||
|
|
name: 'acaa',
|
|||
|
|
age: 33,
|
|||
|
|
address: 'I am acaa',
|
|||
|
|
}, {
|
|||
|
|
key: 1312,
|
|||
|
|
name: 'acab',
|
|||
|
|
age: 33,
|
|||
|
|
address: 'I am acab',
|
|||
|
|
}],
|
|||
|
|
}],
|
|||
|
|
}],
|
|||
|
|
}, {
|
|||
|
|
key: 2,
|
|||
|
|
name: 'b',
|
|||
|
|
age: 32,
|
|||
|
|
address: 'I am b',
|
|||
|
|
}];
|
|||
|
|
|
|||
|
|
function onExpand(expanded, record) {
|
|||
|
|
console.log('onExpand', expanded, record);
|
|||
|
|
}
|
|||
|
|
class Demo2 extends Component {
|
|||
|
|
render () {
|
|||
|
|
return (
|
|||
|
|
<Table defaultExpandAllRows columns={columns1} data={data1} indentSize={30} onExpand={onExpand} />
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @title 这是标题
|
|||
|
|
* @description 这是描述
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const columns2 = [
|
|||
|
|
{ title: 'title1', dataIndex: 'a',
|
|||
|
|
className: 'a',
|
|||
|
|
key: 'a', width: 100 },
|
|||
|
|
{ id: '123', title: 'title2', dataIndex: 'b',
|
|||
|
|
className: 'b',
|
|||
|
|
key: 'b', width: 100 },
|
|||
|
|
{ title: 'title3', dataIndex: 'c',
|
|||
|
|
className: 'c',
|
|||
|
|
key: 'c', width: 200 },
|
|||
|
|
{
|
|||
|
|
title: 'Operations', dataIndex: '',
|
|||
|
|
className: 'd',
|
|||
|
|
key: 'd', render() {
|
|||
|
|
return <a href="#">Operations</a>;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const data2 = [
|
|||
|
|
{ a: '123', key: '1' },
|
|||
|
|
{ a: 'cdd', b: 'edd', key: '2' },
|
|||
|
|
{ a: '1333', c: 'eee', d: 2, key: '3' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
class Demo3 extends Component {
|
|||
|
|
render () {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<h2>rowClassName and className</h2>
|
|||
|
|
<Table
|
|||
|
|
columns={columns2}
|
|||
|
|
rowClassName={(record, i) => `row-${i}`}
|
|||
|
|
expandedRowRender={record => <p>extra: {record.a}</p>}
|
|||
|
|
expandedRowClassName={(record, i) => `ex-row-${i}`}
|
|||
|
|
data={data2}
|
|||
|
|
className="table"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @title 这是标题
|
|||
|
|
* @description 这是描述
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const columns3 = [
|
|||
|
|
{ title: '手机号', dataIndex: 'a', colSpan: 2, width: 100, key: 'a', render(o, row, index) {
|
|||
|
|
const obj = {
|
|||
|
|
children: o,
|
|||
|
|
props: {},
|
|||
|
|
};
|
|||
|
|
// 设置第一行为链接
|
|||
|
|
if (index === 0) {
|
|||
|
|
obj.children = <a href="#">{o}</a>;
|
|||
|
|
}
|
|||
|
|
// 第5行合并两列
|
|||
|
|
if (index === 4) {
|
|||
|
|
obj.props.colSpan = 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (index === 5) {
|
|||
|
|
obj.props.colSpan = 6;
|
|||
|
|
}
|
|||
|
|
return obj;
|
|||
|
|
} },
|
|||
|
|
{ title: '电话', dataIndex: 'b', colSpan: 0, width: 100, key: 'b', render(o, row, index) {
|
|||
|
|
const obj = {
|
|||
|
|
children: o,
|
|||
|
|
props: {},
|
|||
|
|
};
|
|||
|
|
// 列合并掉的表格设置colSpan=0，不会去渲染
|
|||
|
|
if (index === 4 || index === 5) {
|
|||
|
|
obj.props.colSpan = 0;
|
|||
|
|
}
|
|||
|
|
return obj;
|
|||
|
|
} },
|
|||
|
|
{ title: 'Name', dataIndex: 'c', width: 100, key: 'c', render(o, row, index) {
|
|||
|
|
const obj = {
|
|||
|
|
children: o,
|
|||
|
|
props: {},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (index === 5) {
|
|||
|
|
obj.props.colSpan = 0;
|
|||
|
|
}
|
|||
|
|
return obj;
|
|||
|
|
} },
|
|||
|
|
{ title: 'Address', dataIndex: 'd', width: 200, key: 'd', render(o, row, index) {
|
|||
|
|
const obj = {
|
|||
|
|
children: o,
|
|||
|
|
props: {},
|
|||
|
|
};
|
|||
|
|
if (index === 0) {
|
|||
|
|
obj.props.rowSpan = 2;
|
|||
|
|
}
|
|||
|
|
if (index === 1 || index === 5) {
|
|||
|
|
obj.props.rowSpan = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return obj;
|
|||
|
|
} },
|
|||
|
|
{ title: 'Gender', dataIndex: 'e', width: 200, key: 'e', render(o, row, index) {
|
|||
|
|
const obj = {
|
|||
|
|
children: o,
|
|||
|
|
props: {},
|
|||
|
|
};
|
|||
|
|
if (index === 5) {
|
|||
|
|
obj.props.colSpan = 0;
|
|||
|
|
}
|
|||
|
|
return obj;
|
|||
|
|
} },
|
|||
|
|
{
|
|||
|
|
title: 'Operations', dataIndex: '', key: 'f',
|
|||
|
|
render(o, row, index) {
|
|||
|
|
if (index === 5) {
|
|||
|
|
return {
|
|||
|
|
props: {
|
|||
|
|
colSpan: 0,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return <a href="#">Operations</a>;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const data3 = [
|
|||
|
|
{ a: '13812340987', b: '0571-12345678', c: '张三', d: '文一西路', e: 'Male', key: '1' },
|
|||
|
|
{ a: '13812340986', b: '0571-98787658', c: '张夫人', d: '文一西路', e: 'Female', key: '2' },
|
|||
|
|
{ a: '13812988888', b: '0571-099877', c: '李四', d: '文二西路', e: 'Male', key: '3' },
|
|||
|
|
{ a: '1381200008888', b: '0571-099877', c: '王五', d: '文二西路', e: 'Male', key: '4' },
|
|||
|
|
{ a: '0571-88888110', c: '李警官', d: '武林门', e: 'Male', key: '5' },
|
|||
|
|
{ a: '资料统计完毕于xxxx年xxx月xxx日', key: '6' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
|
|||
|
|
class Demo4 extends Component {
|
|||
|
|
render () {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<h2>colSpan & rowSpan</h2>
|
|||
|
|
<Table
|
|||
|
|
columns={columns3}
|
|||
|
|
data={data3}
|
|||
|
|
className="table"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @title 这是标题
|
|||
|
|
* @description 这是描述
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
const data = [];
|
|||
|
|
for (let i = 0; i < 10; i++) {
|
|||
|
|
data.push({
|
|||
|
|
key: i,
|
|||
|
|
a: `a${i}`,
|
|||
|
|
b: `b${i}`,
|
|||
|
|
c: `c${i}`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const Demo5 = React.createClass({
|
|||
|
|
getInitialState() {
|
|||
|
|
this.filters = [];
|
|||
|
|
return {
|
|||
|
|
visible: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleVisibleChange(visible) {
|
|||
|
|
this.setState({ visible });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleSelect(selected) {
|
|||
|
|
this.filters.push(selected);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleDeselect(key) {
|
|||
|
|
const index = this.filters.indexOf(key);
|
|||
|
|
if (index !== -1) {
|
|||
|
|
this.filters.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
confirmFilter() {
|
|||
|
|
console.log(this.filters.join(','));
|
|||
|
|
this.setState({
|
|||
|
|
visible: false,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
const menu = (
|
|||
|
|
<Menu
|
|||
|
|
style={{ width: 200 }}
|
|||
|
|
multiple
|
|||
|
|
onSelect={this.handleSelect}
|
|||
|
|
onDeselect={this.handleDeselect}
|
|||
|
|
>
|
|||
|
|
<Item key="1">one</Item>
|
|||
|
|
<Item key="2">two</Item>
|
|||
|
|
<Item key="3">three</Item>
|
|||
|
|
<Divider />
|
|||
|
|
<Item disabled>
|
|||
|
|
<button
|
|||
|
|
style={{
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
color: '#000',
|
|||
|
|
pointerEvents: 'visible',
|
|||
|
|
}}
|
|||
|
|
onClick={this.confirmFilter}
|
|||
|
|
>确定</button>
|
|||
|
|
</Item>
|
|||
|
|
</Menu>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const columns = [
|
|||
|
|
{
|
|||
|
|
title: (
|
|||
|
|
<div>
|
|||
|
|
title1
|
|||
|
|
<DropDown
|
|||
|
|
trigger={['click']}
|
|||
|
|
onVisibleChange={this.handleVisibleChange}
|
|||
|
|
visible={this.state.visible}
|
|||
|
|
overlay={menu}
|
|||
|
|
>
|
|||
|
|
<a href="#">filter</a>
|
|||
|
|
</DropDown>
|
|||
|
|
</div>
|
|||
|
|
), key: 'a', dataIndex: 'a', width: 100,
|
|||
|
|
},
|
|||
|
|
{ title: 'title2', key: 'b', dataIndex: 'b', width: 100 },
|
|||
|
|
{ title: 'title3', key: 'c', dataIndex: 'c', width: 200 },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Table
|
|||
|
|
columns={columns}
|
|||
|
|
data={data}
|
|||
|
|
rowKey={record => record.key}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
var DemoArray = [{"example":<Demo1 />,"title":" 这是标题","code":"/**\n*\n* @title 这是标题\n* @description 这是描述\n*\n*/\nclass Demo1 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [\n { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },\n { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },\n { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },\n {\n title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>\n <a onClick={e => this.onDelete(record.key, e)} href=\"#\">Delete</a>,\n },\n ];\n this.state = {\n data: [\n { a: '123', key: '1' },\n { a: 'cdd', b: 'edd', key: '2' },\n { a: '1333', c: 'eee', key: '3' },\n ],\n };\n }\n\n onDelete(key, e) {\n console.log('Delete', key);\n e.preventDefault();\n const data = this.state.data.filter(item => item.key !== key);\n this.setState({ data });\n }\n\n onAdd() {\n const data = [...this.state.data];\n data.push({\n a: 'new data',\n b: 'new data',\n c: 'new data',\n key: Date.now(),\n });\n this.setState({ data });\n }\n\n getBodyWrapper(body) {\n return (\n <Animate transitionName=\"move\" component=\"tbody\" className={body.props.className}>\n {body.props.children}\n </Animate>\n );\n }\n\n render() {\n return (\n <div style={{ margin: 20 }}>\n <h2>Table row with animation</h2>\n <button onClick={() => this.onAdd()}>添加</button>\n <Table\n columns={this.columns}\n data={this.state.data}\n getBodyWrapper={this.getBodyWrapper}\n />\n </div>\n );\n }\n}\n","desc":" 这是描述"},{"example":<Demo2 />,"title":" 这是标题","code":"/**\r\n*\r\n* @title 这是标题\r\n* @description 这是描述\r\n*\r\n*/\r\n\r\nconst columns1 = [{\r\n title: 'Name',\r\n dataIndex: 'name',\r\n key: 'name',\r\n width: 400,\r\n}, {\r\n title: 'Age',\r\n dataIndex: 'age',\r\n key: 'age',\r\n width: 100,\r\n}, {\r\n title: 'Address',\r\n dataIndex: 'address',\r\n key: 'address',\r\n width: 200,\r\n}, {\r\n title: 'Operations',\r\n dataIndex: 'operation',\r\n key: 'x',\r\n width: 150,\r\n}];\r\n\r\nconst data1 = [{\r\n key: 1,\r\n name: 'a',\r\n age: 32,\r\n address: 'I am a',\r\n children: [{\r\n key: 11,\r\n name: 'aa',\r\n age: 33,\r\n address: 'I am aa',\r\n }, {\r\n key: 12,\r\n name: 'ab',\r\n age: 33,\r\n address: 'I am ab',\r\n children: [{\r\n key: 121,\r\n name: 'aba',\r\n age: 33,\r\n address: 'I am aba',\r\n }],\r\n }, {\r\n key: 13,\r\n name: 'ac',\r\n age: 33,\r\n address: 'I am ac',\r\n children: [{\r\n key: 131,\r\n name: 'aca',\r\n age: 33,\r\n address: 'I am aca',\r\n children: [{\r\n key: 1311,\r\n name: 'acaa',\r\n age: 33,\r\n address: 'I am acaa',\r\n }, {\r\n key: 1312,\r\n name: 'acab',\r\n age: 33,\r\n address: 'I am acab',\r\n }],\r\n }],\r\n }],\r\n}, {\r\n key: 2,\r\n name: 'b',\r\n age: 32,\r\n address: 'I am b',\r\n}];\r\n\r\nfunction onExpand(expanded, record) {\r\n console.log('onExpand', expanded, record);\r\n}\r\nclass Demo2 extends Component {\r\n render () {\r\n return (\r\n <Table defaultExpandAllRows columns={columns1} data={data1} indentSize={30} onExpand={onExpand} />\r\n )\r\n }\r\n}\r\n","desc":" 这是描述"},{"example":<Demo3 />,"title":" 这是标题","code":"/**\r\n*\r\n* @title 这是标题\r\n* @description 这是描述\r\n*\r\n*/\r\n\r\nconst columns2 = [\r\n { title: 'title1', dataIndex: 'a',\r\n className: 'a',\r\n key: 'a', width: 100 },\r\n { id: '123', title: 'title2', dataIndex: 'b',\r\n className: 'b',\r\n key: 'b', width: 100 },\r\n { title: 'title3', dataIndex: 'c',\r\n className: 'c',\r\n key: 'c', width: 200 },\r\n {\r\n title: 'Operations', dataIndex: '',\r\n className: 'd
|
|||
|
|
|
|||
|
|
|
|||
|
|
class Demo extends Component {
|
|||
|
|
constructor(props){
|
|||
|
|
super(props);
|
|||
|
|
this.state = {
|
|||
|
|
open: false
|
|||
|
|
}
|
|||
|
|
this.handleClick = this.handleClick.bind(this);
|
|||
|
|
}
|
|||
|
|
handleClick() {
|
|||
|
|
this.setState({ open: !this.state.open })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render () {
|
|||
|
|
const { title, example, code, desc } = this.props;
|
|||
|
|
let caret = this.state.open ? CARETUP : CARET;
|
|||
|
|
let text = this.state.open ? "隐藏代码" : "查看代码";
|
|||
|
|
|
|||
|
|
const footer = (
|
|||
|
|
<Button shape="block" onClick={ this.handleClick }>
|
|||
|
|
{ caret }
|
|||
|
|
{ text }
|
|||
|
|
</Button>
|
|||
|
|
);
|
|||
|
|
const header = (
|
|||
|
|
<Row>
|
|||
|
|
<Col md={11}>
|
|||
|
|
{ example }
|
|||
|
|
</Col>
|
|||
|
|
<Col md={1}>
|
|||
|
|
<Button shape="icon" onClick={ this.handleClick }>
|
|||
|
|
{ caret }
|
|||
|
|
</Button>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
);
|
|||
|
|
return (
|
|||
|
|
<Col md={12} >
|
|||
|
|
<h3>{ title }</h3>
|
|||
|
|
<p>{ desc }</p>
|
|||
|
|
<Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footer={footer} footerStyle = {{padding: 0}}>
|
|||
|
|
<pre><code className="hljs javascript">{ code }</code></pre>
|
|||
|
|
</Panel>
|
|||
|
|
</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} desc= {child.desc} key= {index}/>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
})}
|
|||
|
|
</Row>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));
|