bee-search-panel/demo/index.js

SearchPanel ui component for react

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'; 



var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var DemoArray = [{"example":<Demo1 />,"title":" 普通搜索面板","code":"/**\n *\n * @title 普通搜索面板\n * @description 一般用于页面中有搜索功能的内容区。\n *\n */\nimport React, {Component} from 'react';\nimport { SearchPanel, FormControl,Row, Col,Label,Form,Radio } from 'tinper-bee';\n\n\nlet HeadContainer = SearchPanel.HeadContainer;\nlet AdvancedContainer = SearchPanel.AdvancedContainer;\n\nconst FormItem = Form.FormItem;\n\nclass Demo1 extends Component {\n    constructor(props){\n        super(props);\n        this.state={\n            expanded: true\n        }\n    }\n    search=()=>{\n        this.props.form.validateFields((err, values) => {\n            if (err) {\n                console.log(err);\n            } else {\n                console.log('提交成功', values)\n            }\n        });\n    }\n    clear=()=>{\n        this.props.form.resetFields()\n    }\n    onChange = () => {\n        this.setState({expanded: !this.state.expanded})\n    }\n    render() {\n        const { getFieldProps, getFieldError } = this.props.form;\n        return (<div className=\"demo1\">\n            <SearchPanel\n                title='条件筛选'\n                onSearch={this.search}\n                onReset={this.clear}\n                expanded={this.state.expanded}\n                onChange={this.onChange}\n                onPanelChangeStart={status => {\n                    console.log(status, \"start\")\n                }}\n                onPanelChangeIng={status => {\n                    console.log(status, \"ing\")\n                }}\n                onPanelChangeEnd={status => {\n                    console.log(status, \"end\")\n                }}>\n                <HeadContainer>\n                    <div className='demo-head'>\n                        <Form>\n                            <Row>\n                                <Col xs={12} sm={6} md={4} lg={3}>\n                                    <FormItem>\n                                            <Label>名 称</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('name', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>电话</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('phone', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n                            </Row>\n                        </Form>\n                    </div>\n                </HeadContainer>\n                \n                <AdvancedContainer>\n                    <div className='demo-body'>\n                        <Form>\n                            <Row>\n\n                                <Col xs={12} sm={6} md={4} lg={3}>\n                                    <FormItem>\n                                            <Label>联系人</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('people', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>供应商</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('supplier', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col> \n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>地址</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('address', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col> \n\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>车牌</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('carNumber', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>备注</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('remark', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>编号</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('id', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                            </Row>\n                        </Form>\n                    </div>                 \n                </AdvancedContainer>\n            </SearchPanel>\n            </div>\n        )\n    }\n}\nexport default Form.createForm()(Demo1);","desc":" 一般用于页面中有搜索功能的内容区。","scss_code":".demo1 {\n    .u-label {\n        min-width: 80px;\n        white-space: nowrap;\n        text-align: right;\n    }\n    .u-checkbox-group,\n    .col {\n        display: inline-flex;\n    }\n    .u-form-item {\n        min-height: 42px;\n        .u-select {\n            min-width: 152px;\n        }\n        .u-form-control {\n            min-width: 152px;\n        }\n    }\n    .u-form-item,\n    .u-row>div {\n        padding: 0;\n    }\n    .u-search .u-panel {\n        padding-top: 0px;\n        padding-bottom: 0;\n        .u-panel-body{\n            padding-bottom: 0\n        }\n    }\n    .u-search-resident {\n        padding-bottom: 0px;\n        padding-top: 0px;\n    }\n    .demo-head {\n        box-sizing: border-box;\n    }\n    .demo-body {\n        margin: 0 -20px;\n    }\n}"},{"example":<Demo2 />,"title":" HeadContainer 为空状态","code":"/**\n *\n * @title HeadContainer 为空状态\n * @description 目前提供 HeadContainer(常驻区)、AdvancedContainer(收起区) 两部分示例\n *\n */\nimport React, {Component} from 'react';\nimport { SearchPanel } from 'tinper-bee';\n\nimport { Form, Label,Checkbox,Switch,Button,\n     Radio, Select,  Col , Row , FormControl } from 'tinper-bee';\nimport DatePicker from 'bee-datepicker';\nimport moment from \"moment/moment\";\nconst FormItem = Form.FormItem;\nconst Option = Select.Option;\nconst { RangePicker } = DatePicker;\nconst CheckboxGroup = Checkbox.CheckboxGroup;\nconst HeadContainer = SearchPanel.HeadContainer;\nconst AdvancedContainer = SearchPanel.AdvancedContainer;\n\nclass Demo2 extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            expanded: true,\n            orderTypes:[\n                {\n                    'code':'001',\n                    'name':'类型1'\n                },\n                {\n                    'code':'002',\n                    'name':'类型2'\n                },\n                {\n                    'code':'003',\n                    'name':'类型3'\n                },\n            ]\n        };\n    }\n    clear = () =>{\n        this.props.form.resetFields();\n    }\n    onChange = () => {\n        this.setState({expanded: !this.state.expanded})\n    }\n\n    search =()=>{\n        this.props.form.validateFields((err, values) => {\n            if (err) {\n                console.log(err);\n            } else {\n                console.log('提交成功', values)\n            }\n        });\n    }\n\n    render() {\n        const { getFieldProps, getFieldError } = this.props.form;\n        let self = this;\n        return (<div className=\"demo2\">\n            <SearchPanel\n                title='条件筛选'\n                onSearch={this.search}\n                onReset={this.clear}\n                expanded={this.state.expanded}\n                onChange={this.onChange} \n                onPanelChangeStart={status => {\n                    console.log(status, \"start\")\n                }}\n                onPanelChangeIng={status => {\n                    console.log(status, \"ing\")\n                }}\n                onPanelChangeEnd={status => {\n                    console.log(status, \"end\")\n                }}>\n                <AdvancedContainer>\n                    <div className='demo-body'>\n                        <Form>\n                            <Row>\n                            <Col xs={12} sm={6} md={4} lg={4}>\n                                    <FormItem>\n                                            <Label>订单编号</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('orderCode', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={4}>\n                                    <FormItem>\n                                            <Label>供应商名称</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('supplierName', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n                                <Col xs={12} sm={6} md={4}  lg={4}>\n                                    <FormItem>\n                                            <Label>订单类型</Label>\n                                            <Select size=\"sm\"\n                                                {\n                                                ...getFieldProps('type', {\n                                                    initialValue: '',\n                                                }\n                                                )}>\n                                                <Option value=\"\">请选择</Option>\n                                                {\n                                                    self.state.orderTypes.map((item, index) => {\n                                                        return (\n                                                            <Option key={index} value={item.code}>{item.name}</Option>\n                                                        )\n                                                    })\n                                                }\n                                            </Select>\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={4}>\n                                    <FormItem>\n                                            <Label>采购组</Label>\n                                            <CheckboxGroup \n                                                    {\n                                                        ...getFieldProps('purchasingGroup',{\n                                                            initialValue:['2']\n                                                        })\n                                                    }\n                                                >\n                                                    <Checkbox value='1'>人力</Checkbox>\n                                                    <Checkbox value='2'>财务</Checkbox>\n                                            </CheckboxGroup>\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={4}>\n                                    <FormItem>\n                                            <Label>审批</Label>\n                                            <Radio.RadioGroup\n                                                    {\n                                                    ...getFieldProps('approvalState', {\n                                                        initialValue: '1',\n                                                        valuePropName:\"selectedValue\"\n                                                    }\n                                                    )}\n                                                >\n                                                <Radio value=\"0\" >未审批</Radio>\n                                                <Radio value=\"1\" >已审批</Radio>\n                                            </Radio.RadioGroup>\n                                    </FormItem>\n                                </Col>\n                            </Row>\n                        </Form>\n                    </div>\n                </AdvancedContainer>\n            </SearchPanel>\n            </div>\n        )\n    }\n}\n\nexport default Form.createForm()(Demo2);","desc":" 目前提供 HeadContainer(常驻区)、AdvancedContainer(收起区) 两部分示例","scss_code":".demo2 {\n    .u-label {\n        min-width: 80px;\n        white-space: nowrap;\n        text-align: right;\n    }\n    .u-checkbox-group,\n    .col {\n        display: inline-flex;\n    }\n    .u-form-item {\n        min-height: 42px;\n        .u-select {\n            min-width: 152px;\n        }\n        .u-form-control {\n            min-width: 152px;\n        }\n    }\n    .u-form-item,\n    .u-row>div {\n        padding: 0;\n    }\n    .u-search .u-panel {\n        padding-top: 0px;\n        padding-bottom: 0;\n        .u-panel-body{\n            padding-bottom: 0\n        }\n    }\n    .u-search-resident {\n        padding-bottom: 0px;\n        padding-top: 0px;\n    }\n    .demo-head {\n        box-sizing: border-box;\n    }\n    .demo-body {\n        margin: 0 -20px;\n    }\n}"},{"example":<Demo3 />,"title":" 提取所有输入信息","code":"/**\n *\n * @title 提取所有输入信息\n * @description 针对表头中的搜索内容，进行提取键入的信息数据。【查看console的输出】\n *\n */\nimport React, {Component} from 'react';\nimport { SearchPanel } from 'tinper-bee';\n\nimport { Form, Label,Checkbox,Switch,Button,\n     Radio, Select,  Col , Row , FormControl } from 'tinper-bee';\nimport DatePicker from 'bee-datepicker';\nimport moment from \"moment/moment\";\nconst FormItem = Form.FormItem;\nconst Option = Select.Option;\nconst { RangePicker } = DatePicker;\nconst CheckboxGroup = Checkbox.CheckboxGroup;\nconst HeadContainer = SearchPanel.HeadContainer;\nconst AdvancedContainer = SearchPanel.AdvancedContainer;\n\nclass Demo3 extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            expanded: true,\n            orderTypes:[\n                {\n                    'code':'001',\n                    'name':'类型1'\n                },\n                {\n                    'code':'002',\n                    'name':'类型2'\n                },\n                {\n                    'code':'003',\n                    'name':'类型3'\n                },\n            ]\n        };\n    }\n    clear = () =>{\n        this.props.form.resetFields();\n    }\n    onChange = () => {\n        this.setState({expanded: !this.state.expanded})\n    }\n\n    search =()=>{\n        this.props.form.validateFields((err, values) => {\n            if (err) {\n                console.log(err);\n            } else {\n                console.log('提交成功', values)\n            }\n        });\n    }\n\n    render() {\n        const { getFieldProps, getFieldError } = this.props.form;\n        let self = this;\n        return (<div className=\"demo3\">\n            <SearchPanel\n                title='条件筛选'\n                onSearch={this.search}\n                onReset={this.clear}\n                expanded={this.state.expanded}\n                onChange={this.onChange}\n                onPanelChangeStart={status => {\n                    console.log(status, \"start\")\n                }}\n                onPanelChangeIng={status => {\n                    console.log(status, \"ing\")\n                }}\n                onPanelChangeEnd={status => {\n                    console.log(status, \"end\")\n                }}>\n                <HeadContainer>\n                    <div className='demo-head'>\n                        <Form>\n                            <Row>\n                                <Col xs={12} sm={6} md={4} lg={3}>\n                                    <FormItem>\n                                            <Label>订单编号</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('orderCode', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>供应商名称</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('supplierName', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n                            </Row>\n                        </Form>\n                    </div>\n                </HeadContainer>\n            \n\n                <AdvancedContainer>\n                    <div className='demo-body'>\n                        <Form>\n                            <Row>\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>订单类型</Label>\n                                            <Select size=\"sm\"\n                                                {\n                                                ...getFieldProps('type', {\n                                                    initialValue: '',\n                                                }\n                                                )}>\n                                                <Option value=\"\">请选择</Option>\n                                                {\n                                                    self.state.orderTypes.map((item, index) => {\n                                                        return (\n                                                            <Option key={index} value={item.code}>{item.name}</Option>\n                                                        )\n                                                    })\n                                                }\n                                            </Select>\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>采购组</Label>\n                                            <CheckboxGroup \n                                                    {\n                                                        ...getFieldProps('purchasingGroup',{\n                                                            initialValue:['2']\n                                                        })\n                                                    }\n                                                >\n                                                    <Checkbox value='1'>人力</Checkbox>\n                                                    <Checkbox value='2'>财务</Checkbox>\n                                            </CheckboxGroup>\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>审批</Label>\n                                            <Radio.RadioGroup\n                                                    {\n                                                    ...getFieldProps('approvalState', {\n                                                        initialValue: '1',\n                                                        valuePropName:\"selectedValue\"\n                                                    }\n                                                    )}\n                                                >\n                                                <Radio value=\"0\" >未审批</Radio>\n                                                <Radio value=\"1\" >已审批</Radio>\n                                            </Radio.RadioGroup>\n                                    </FormItem>\n                                </Col>\n                            </Row>\n                        </Form>\n                    </div>\n                </AdvancedContainer>\n            </SearchPanel>\n            </div>\n        )\n    }\n}\n\nexport default Form.createForm()(Demo3);","desc":" 针对表头中的搜索内容，进行提取键入的信息数据。【查看console的输出】","scss_code":".demo3 {\n    .u-label {\n        min-width: 80px;\n        white-space: nowrap;\n        text-align: right;\n    }\n    .u-checkbox-group,\n    .col {\n        display: inline-flex;\n    }\n    .u-form-item {\n        min-height: 42px;\n        .u-select {\n            min-width: 152px;\n        }\n        .u-form-control {\n            min-width: 152px;\n        }\n    }\n    .u-form-item,\n    .u-row>div {\n        padding: 0;\n    }\n    .u-search .u-panel {\n        padding-top: 0px;\n        padding-bottom: 0;\n        .u-panel-body{\n            padding-bottom: 0\n        }\n    }\n    .u-search-resident {\n        padding-bottom: 0px;\n        padding-top: 0px;\n    }\n    .demo-head {\n        box-sizing: border-box;\n    }\n    .demo-body {\n        margin: 0 -20px;\n    }\n}"},{"example":<Demo4 />,"title":" 多语示例","code":"/**\n *\n * @title 多语示例\n * @description 使用tinper-bee的locale组件或者传locale属性。此处为使用locale属性示例\n *\n */\nimport React, {Component} from 'react';\nimport { SearchPanel, FormControl,Row, Col,Label,Form,Radio } from 'tinper-bee';\n\n\nlet HeadContainer = SearchPanel.HeadContainer;\nlet AdvancedContainer = SearchPanel.AdvancedContainer;\n\nconst FormItem = Form.FormItem;\n\nclass Demo1 extends Component {\n    constructor(props){\n        super(props);\n        this.state={\n            expanded: true\n        }\n    }\n    search=()=>{\n        this.props.form.validateFields((err, values) => {\n            if (err) {\n                console.log(err);\n            } else {\n                console.log('提交成功', values)\n            }\n        });\n    }\n    clear=()=>{\n        this.props.form.resetFields()\n    }\n    onChange = () => {\n        this.setState({expanded: !this.state.expanded})\n    }\n    render() {\n        const { getFieldProps, getFieldError } = this.props.form;\n        let locale = {\n            'title': 'screening conditions',\n            'resetName': 'reset',\n            'searchName': 'submit',\n            'down':'open',\n            'up':'close',\n        }\n        return (<div className=\"demo1\">\n            <SearchPanel\n                locale={locale}\n                onSearch={this.search}\n                onReset={this.clear}\n                expanded={this.state.expanded}\n                onChange={this.onChange}\n                onPanelChangeStart={status => {\n                    console.log(status, \"start\")\n                }}\n                onPanelChangeIng={status => {\n                    console.log(status, \"ing\")\n                }}\n                onPanelChangeEnd={status => {\n                    console.log(status, \"end\")\n                }}>\n                <HeadContainer>\n                    <div className='demo-head'>\n                        <Form>\n                            <Row>\n                                <Col xs={12} sm={6} md={4} lg={3}>\n                                    <FormItem>\n                                            <Label>名 称</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('name', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>电话</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('phone', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n                            </Row>\n                        </Form>\n                    </div>\n                </HeadContainer>\n                \n                <AdvancedContainer>\n                    <div className='demo-body'>\n                        <Form>\n                            <Row>\n\n                                <Col xs={12} sm={6} md={4} lg={3}>\n                                    <FormItem>\n                                            <Label>联系人</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('people', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>供应商</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('supplier', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col> \n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>地址</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('address', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col> \n\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>车牌</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('carNumber', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>备注</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('remark', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                                <Col xs={12} sm={6} md={4}  lg={3}>\n                                    <FormItem>\n                                            <Label>编号</Label>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('id', {\n                                                    initialValue: '',\n                                                })\n                                                }\n                                            />\n                                    </FormItem>\n                                </Col>\n\n                            </Row>\n                        </Form>\n                    </div>                 \n                </AdvancedContainer>\n            </SearchPanel>\n            </div>\n        )\n    }\n}\nexport default Form.createForm()(Demo1);","desc":" 使用tinper-bee的locale组件或者传locale属性。此处为使用locale属性示例","scss_code":".demo4 {\n    .u-label {\n        min-width: 80px;\n        white-space: nowrap;\n        text-align: right;\n    }\n    .u-checkbox-group,\n    .col {\n        display: inline-flex;\n    }\n    .u-form-item {\n        min-height: 42px;\n        .u-select {\n            min-width: 152px;\n        }\n        .u-form-control {\n            min-width: 152px;\n        }\n    }\n    .u-form-item,\n    .u-row>div {\n        padding: 0;\n    }\n    .u-search .u-panel {\n        padding-top: 0px;\n        padding-bottom: 0;\n        .u-panel-body{\n            padding-bottom: 0\n        }\n    }\n    .u-search-resident {\n        padding-bottom: 0px;\n        padding-top: 0px;\n    }\n    .demo-head {\n        box-sizing: border-box;\n    }\n    .demo-body {\n        margin: 0 -20px;\n    }\n}"}]


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'));