bee-cascader/demo/index.js

Cascader 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'; 
import Button from '../src';



var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var DemoArray = [{"example":<Demo1 />,"title":" 基础级联菜单","code":"/**\n *\n * @title 基础级联菜单\n * @description 级联选择对数据有较严格要求，请参照示例的格式使用options，每项数据至少包含 value、label 两项，子集为 children，以此类推。\n *\n */\n\nimport React, { Component } from 'react';\nimport { Cascader,  Row, Col  } from 'tinper-bee';\n\nconst options = [{\n\tlabel: '基础组件',\n\tvalue: 'jczj',\n\tchildren: [{\n\t\tlabel: '导航',\n\t\tvalue: 'dh',\n\t\tchildren: [{\n\t\t\tlabel: '面包屑',\n\t\t\tvalue: 'mbx'\n\t\t},{\n\t\t\tlabel: '分页',\n\t\t\tvalue: 'fy'\n\t\t},{\n\t\t\tlabel: '标签',\n\t\t\tvalue: 'bq'\n\t\t},{\n\t\t\tlabel: '菜单',\n\t\t\tvalue: 'cd'\n\t\t}]\n\t},{\n\t\tlabel: '反馈',\n\t\tvalue: 'fk',\n\t\tchildren: [{\n\t\t\tlabel: '模态框',\n\t\t\tvalue: 'mtk'\n\t\t},{\n\t\t\tlabel: '通知',\n\t\t\tvalue: 'tz'\n\t\t}]\n \t},\n \t{\n\t\tlabel: '表单',\n \t    value: 'bd'\n \t}]\n\t},{\n\t\tlabel: '应用组件',\n\t\tvalue: 'yyzj',\n\t\tchildren: [{\n\t\t\tlabel: '参照',\n\t\t\tvalue: 'ref',\n\t\t\tchildren: [{\n\t\t\t\tlabel: '树参照',\n\t\t\t\tvalue: 'reftree'\n\t\t\t},{\n\t\t\t\tlabel: '表参照',\n\t\t\t\tvalue: 'reftable'\n\t\t\t},{\n\t\t\t\tlabel: '穿梭参照',\n\t\t\t\tvalue: 'reftransfer'\n\t\t\t}]\n\t\t}]\n\t}\n];\nclass Demo1 extends Component {\n\n\tonChange = (value, selectedOptions) => {\n\t\tconsole.log(value, selectedOptions);\n\t}\n\t\n \trender(){\n \t\treturn(\n\t\t\t<Row>\n\t\t\t\t<Col md={4}>\n\t\t\t\t\t<div className=\"height-150\">\n\t\t\t\t\t\t<Cascader \n\t\t\t\t\t\t\toptions = {options} \n\t\t\t\t\t\t\tonChange = {this.onChange}\n\t\t\t\t\t\t\tplaceholder = \"请选择\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n \t\t)\n \t}\n}\n","desc":" 级联选择对数据有较严格要求，请参照示例的格式使用options，每项数据至少包含 value、label 两项，子集为 children，以此类推。"},{"example":<Demo2 />,"title":" 默认值","code":"/**\r\n *\r\n * @title 默认值\r\n * @description 默认值通过数组的方式指定。注：需要给数组的每一项指定label和value属性。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n\tlabel: '基础组件',\r\n\tvalue: 'jczj',\r\n\tchildren: [{\r\n\t\tlabel: '导航',\r\n\t\tvalue: 'dh',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '面包屑',\r\n\t\t\tvalue: 'mbx'\r\n\t\t},{\r\n\t\t\tlabel: '分页',\r\n\t\t\tvalue: 'fy'\r\n\t\t},{\r\n\t\t\tlabel: '标签',\r\n\t\t\tvalue: 'bq'\r\n\t\t},{\r\n\t\t\tlabel: '菜单',\r\n\t\t\tvalue: 'cd'\r\n\t\t}]\r\n\t},{\r\n\t\tlabel: '反馈',\r\n\t\tvalue: 'fk',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '模态框',\r\n\t\t\tvalue: 'mtk'\r\n\t\t},{\r\n\t\t\tlabel: '通知',\r\n\t\t\tvalue: 'tz'\r\n\t\t}]\r\n \t},\r\n \t{\r\n\t\tlabel: '表单',\r\n \t    value: 'bd'\r\n \t}]\r\n\t},{\r\n\t\tlabel: '应用组件',\r\n\t\tvalue: 'yyzj',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '参照',\r\n\t\t\tvalue: 'ref',\r\n\t\t\tchildren: [{\r\n\t\t\t\tlabel: '树参照',\r\n\t\t\t\tvalue: 'reftree'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '表参照',\r\n\t\t\t\tvalue: 'reftable'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '穿梭参照',\r\n\t\t\t\tvalue: 'reftransfer'\r\n\t\t\t}]\r\n\t\t}]\r\n\t}\r\n];\r\n\r\nconst defaultOptions = [{\r\n    label: '基础组件',\r\n    value: 'jczj',\r\n}, {\r\n    label: '导航',\r\n    value: 'dh',\r\n}, {\r\n    label: '菜单',\r\n    value: 'cd',\r\n}];\r\n\r\nclass Demo2 extends Component {\r\n\r\n\tonChange = (value, selectedOptions) => {\r\n        console.log(value, selectedOptions);\r\n\t}\r\n\t\r\n \trender(){\r\n \t\treturn(\r\n\t\t\t<Row>\r\n\t\t\t\t<Col md={4}>\r\n\t\t\t\t\t<div className=\"height-150\">\r\n                        <Cascader \r\n                            defaultValue={defaultOptions}\r\n\t\t\t\t\t\t\toptions = {options} \r\n\t\t\t\t\t\t\tonChange = {this.onChange}\r\n\t\t\t\t\t\t\tplaceholder = \"请选择\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</Col>\r\n\t\t\t</Row>\r\n \t\t)\r\n \t}\r\n}\r\n","desc":" 默认值通过数组的方式指定。注：需要给数组的每一项指定label和value属性。"},{"example":<Demo3 />,"title":" 移入展开","code":"/**\r\n *\r\n * @title 移入展开\r\n * @description 鼠标hover时展开菜单子选项\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n\tlabel: '基础组件',\r\n\tvalue: 'jczj',\r\n\tchildren: [{\r\n\t\tlabel: '导航',\r\n\t\tvalue: 'dh',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '面包屑',\r\n\t\t\tvalue: 'mbx'\r\n\t\t},{\r\n\t\t\tlabel: '分页',\r\n\t\t\tvalue: 'fy'\r\n\t\t},{\r\n\t\t\tlabel: '标签',\r\n\t\t\tvalue: 'bq'\r\n\t\t},{\r\n\t\t\tlabel: '菜单',\r\n\t\t\tvalue: 'cd'\r\n\t\t}]\r\n\t},{\r\n\t\tlabel: '反馈',\r\n\t\tvalue: 'fk',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '模态框',\r\n\t\t\tvalue: 'mtk'\r\n\t\t},{\r\n\t\t\tlabel: '通知',\r\n\t\t\tvalue: 'tz'\r\n\t\t}]\r\n \t},\r\n \t{\r\n\t\tlabel: '表单',\r\n \t    value: 'bd'\r\n \t}]\r\n\t},{\r\n\t\tlabel: '应用组件',\r\n\t\tvalue: 'yyzj',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '参照',\r\n\t\t\tvalue: 'ref',\r\n\t\t\tchildren: [{\r\n\t\t\t\tlabel: '树参照',\r\n\t\t\t\tvalue: 'reftree'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '表参照',\r\n\t\t\t\tvalue: 'reftable'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '穿梭参照',\r\n\t\t\t\tvalue: 'reftransfer'\r\n\t\t\t}]\r\n\t\t}]\r\n\t}\r\n];\r\n\r\nclass Demo3 extends Component {\r\n\r\n    onChange = (value) => {\r\n        console.log(value)\r\n    }\r\n\r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150\">\r\n                        <Cascader expandTrigger=\"hover\" options={options} onChange={this.onChange} placeholder=\"请选择\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 鼠标hover时展开菜单子选项"},{"example":<Demo4 />,"title":" 禁用状态","code":"/**\r\n *\r\n * @title 禁用状态\r\n * @description 通过`disabled`参数设置是否禁用。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n    label: '浙江',\r\n    value: 'zj',\r\n    children: [{\r\n            label: '杭州',\r\n            value: 'hz',\r\n            children: [{\r\n                label: '西湖',\r\n                value: 'xh',\r\n                children: [{\r\n                    label: '白娘子',\r\n                    value: 'bnz'\r\n                },{\r\n                    label: '许仙',\r\n                    value: 'xx'\r\n                }]\r\n            }]\r\n        }]\r\n    },\r\n    {\r\n        label: '江苏',\r\n    value: 'js',\r\n    children: [{\r\n            label: '南京',\r\n            value: 'nj',\r\n            children: [{\r\n                label: '中华门',\r\n                value: 'zhm'\r\n            }]\r\n        }]\r\n    },\r\n    {\r\n        label: '山东',\r\n    value: 'sd'\r\n    }\r\n];\r\n\r\nclass Demo4 extends Component {  \r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150\">\r\n                        <Cascader disabled options={options} placeholder=\"请选择地址\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 通过`disabled`参数设置是否禁用。"},{"example":<Demo5 />,"title":" 选择即改变","code":"/**\r\n *\r\n * @title 选择即改变\r\n * @description 设置属性 `changeOnSelect` 点任何一级都可以选择。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n\tlabel: '基础组件',\r\n\tvalue: 'jczj',\r\n\tchildren: [{\r\n\t\tlabel: '导航',\r\n\t\tvalue: 'dh',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '面包屑',\r\n\t\t\tvalue: 'mbx'\r\n\t\t},{\r\n\t\t\tlabel: '分页',\r\n\t\t\tvalue: 'fy'\r\n\t\t},{\r\n\t\t\tlabel: '标签',\r\n\t\t\tvalue: 'bq'\r\n\t\t},{\r\n\t\t\tlabel: '菜单',\r\n\t\t\tvalue: 'cd'\r\n\t\t}]\r\n\t},{\r\n\t\tlabel: '反馈',\r\n\t\tvalue: 'fk',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '模态框',\r\n\t\t\tvalue: 'mtk'\r\n\t\t},{\r\n\t\t\tlabel: '通知',\r\n\t\t\tvalue: 'tz'\r\n\t\t}]\r\n \t},\r\n \t{\r\n\t\tlabel: '表单',\r\n \t    value: 'bd'\r\n \t}]\r\n\t},{\r\n\t\tlabel: '应用组件',\r\n\t\tvalue: 'yyzj',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '参照',\r\n\t\t\tvalue: 'ref',\r\n\t\t\tchildren: [{\r\n\t\t\t\tlabel: '树参照',\r\n\t\t\t\tvalue: 'reftree'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '表参照',\r\n\t\t\t\tvalue: 'reftable'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '穿梭参照',\r\n\t\t\t\tvalue: 'reftransfer'\r\n\t\t\t}]\r\n\t\t}]\r\n\t}\r\n];\r\n\r\nclass Demo5 extends Component {  \r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150\">\r\n                        <Cascader changeOnSelect options={options} placeholder=\"请选择\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 设置属性 `changeOnSelect` 点任何一级都可以选择。"},{"example":<Demo6 />,"title":" 动态改变options","code":"/**\r\n *\r\n * @title 动态改变options\r\n * @description 通过动态设置`options`参数，即可灵活改变数据源。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\n\nimport { Cascader, Button,  Row, Col  } from 'tinper-bee';\r\n\r\nconst baseOptions = [{\r\n    label: '基础组件',\r\n    value: 'jczj',\r\n    children: [{\r\n        label: '导航',\r\n        value: 'dh',\r\n        children: [{\r\n            label: '面包屑',\r\n            value: 'mbx'\r\n        },{\r\n            label: '分页',\r\n            value: 'fy'\r\n        },{\r\n            label: '标签',\r\n            value: 'bq'\r\n        },{\r\n            label: '菜单',\r\n            value: 'cd'\r\n        }]\r\n    },{\r\n        label: '反馈',\r\n        value: 'fk',\r\n        children: [{\r\n            label: '模态框',\r\n            value: 'mtk'\r\n        },{\r\n            label: '通知',\r\n            value: 'tz'\r\n        }]\r\n        },\r\n        {\r\n        label: '表单',\r\n            value: 'bd'\r\n        }]\r\n    },{\r\n        label: '应用组件',\r\n        value: 'yyzj',\r\n        children: [{\r\n            label: '参照',\r\n            value: 'ref',\r\n            children: [{\r\n                label: '树参照',\r\n                value: 'reftree'\r\n            },{\r\n                label: '表参照',\r\n                value: 'reftable'\r\n            },{\r\n                label: '穿梭参照',\r\n                value: 'reftransfer'\r\n            }]\r\n        }]\r\n    }\r\n];\r\n\r\nclass Demo6 extends Component {  \r\n    state = {\r\n        options: baseOptions\r\n    }\r\n    \r\n    changeOptions = () => {\r\n        this.setState({\r\n            options: [{\r\n                label: '北京',\r\n                value: 'bj',\r\n                children: [{\r\n                        label: '故宫',\r\n                        value: 'gg',\r\n                    },{\r\n                        label: '天坛',\r\n                        value: 'tt',\r\n                    },{\r\n                        label: '王府井',\r\n                        value: 'wfj',\r\n                    }]\r\n                },\r\n                {\r\n                    label: '江苏',\r\n                    value: 'js',\r\n                    children: [{\r\n                            label: '南京',\r\n                            value: 'nj',\r\n                            children: [{\r\n                                label: '中华门',\r\n                                value: 'zhm'\r\n                            }]\r\n                        }]\r\n                    },\r\n                    {\r\n                        label: '山东',\r\n                    value: 'sd'\r\n                }\r\n            ]\r\n        })\r\n    }\r\n\r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150\">\r\n                        <Button colors=\"primary\" onClick={this.changeOptions} style={{marginBottom:8+'px'}}>点击改变选项数组</Button>\r\n                        <Cascader options={this.state.options} placeholder=\"请选择\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 通过动态设置`options`参数，即可灵活改变数据源。"},{"example":<Demo7 />,"title":" 不同尺寸的Cascader","code":"/**\r\n *\r\n * @title 不同尺寸的Cascader\r\n * @description 通过设置`size`属性为 \"lg\" 和 \"sm\" 将输入框设置为大和小尺寸，不设置为默认（中）尺寸。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\n\nimport { Cascader, Button,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n    label: '基础组件',\r\n    value: 'jczj',\r\n    children: [{\r\n        label: '导航',\r\n        value: 'dh',\r\n        children: [{\r\n            label: '面包屑',\r\n            value: 'mbx'\r\n        },{\r\n            label: '分页',\r\n            value: 'fy'\r\n        },{\r\n            label: '标签',\r\n            value: 'bq'\r\n        },{\r\n            label: '菜单',\r\n            value: 'cd'\r\n        }]\r\n    },{\r\n        label: '反馈',\r\n        value: 'fk',\r\n        children: [{\r\n            label: '模态框',\r\n            value: 'mtk'\r\n        },{\r\n            label: '通知',\r\n            value: 'tz'\r\n        }]\r\n        },\r\n        {\r\n        label: '表单',\r\n            value: 'bd'\r\n        }]\r\n    },{\r\n        label: '应用组件',\r\n        value: 'yyzj',\r\n        children: [{\r\n            label: '参照',\r\n            value: 'ref',\r\n            children: [{\r\n                label: '树参照',\r\n                value: 'reftree'\r\n            },{\r\n                label: '表参照',\r\n                value: 'reftable'\r\n            },{\r\n                label: '穿梭参照',\r\n                value: 'reftransfer'\r\n            }]\r\n        }]\r\n    }\r\n];\r\n\r\nclass Demo7 extends Component {  \r\n\r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150 demo7\">\r\n                        <Cascader size=\"sm\" options={options} placeholder=\"请选择\"/>\r\n                        <Cascader options={options} placeholder=\"请选择\"/>\r\n                        <Cascader size=\"lg\" options={options} placeholder=\"请选择\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 通过设置`size`属性为 \"lg\" 和 \"sm\" 将输入框设置为大和小尺寸，不设置为默认（中）尺寸。","scss_code":".demo7{\r\n    span{\r\n        margin-bottom: 16px;\r\n    }\r\n    .u-form-control.lg{\r\n        width: 183px;\r\n    }\r\n}"},{"example":<Demo8 />,"title":" 自定义输入框显示","code":"/**\r\n *\r\n * @title 自定义输入框显示\r\n * @description 通过设置 `inputValue` 属性，可自定义输入框展示内容。可在 onChange 回调函数中对数据进行自定义处理。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n\tlabel: '基础组件',\r\n\tvalue: 'jczj',\r\n\tchildren: [{\r\n\t\tlabel: '导航',\r\n\t\tvalue: 'dh',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '面包屑',\r\n\t\t\tvalue: 'mbx'\r\n\t\t},{\r\n\t\t\tlabel: '分页',\r\n\t\t\tvalue: 'fy'\r\n\t\t},{\r\n\t\t\tlabel: '标签',\r\n\t\t\tvalue: 'bq'\r\n\t\t},{\r\n\t\t\tlabel: '菜单',\r\n\t\t\tvalue: 'cd'\r\n\t\t}]\r\n\t},{\r\n\t\tlabel: '反馈',\r\n\t\tvalue: 'fk',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '模态框',\r\n\t\t\tvalue: 'mtk'\r\n\t\t},{\r\n\t\t\tlabel: '通知',\r\n\t\t\tvalue: 'tz'\r\n\t\t}]\r\n \t},\r\n \t{\r\n\t\tlabel: '表单',\r\n \t    value: 'bd'\r\n \t}]\r\n\t},{\r\n\t\tlabel: '应用组件',\r\n\t\tvalue: 'yyzj',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '参照',\r\n\t\t\tvalue: 'ref',\r\n\t\t\tchildren: [{\r\n\t\t\t\tlabel: '树参照',\r\n\t\t\t\tvalue: 'reftree'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '表参照',\r\n\t\t\t\tvalue: 'reftable'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '穿梭参照',\r\n\t\t\t\tvalue: 'reftransfer'\r\n\t\t\t}]\r\n\t\t}]\r\n\t}\r\n];\r\nclass Demo8 extends Component {\r\n\tconstructor(props){\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tinputValue:\"\"\r\n\t\t}\r\n\t}\r\n\r\n\tonChange = (value, selectedOptions) => {\r\n        console.log(value, selectedOptions);\r\n        // 自定义输入框显示内容\r\n        let lastLabel = '';\r\n        if (typeof selectedOptions !== 'undefined') {\r\n            lastLabel = selectedOptions[selectedOptions.length - 1].label;\r\n        }\r\n        this.setState({ \r\n            inputValue : lastLabel\r\n        })\r\n\t}\r\n\t\r\n \trender(){\r\n \t\treturn(\r\n\t\t\t<Row>\r\n\t\t\t\t<Col md={4}>\r\n\t\t\t\t\t<div className=\"height-150\">\r\n\t\t\t\t\t\t<Cascader \r\n\t\t\t\t\t\t\toptions = {options} \r\n\t\t\t\t\t\t\tonChange = {this.onChange}\r\n\t\t\t\t\t\t\tplaceholder = \"请选择\"\r\n\t\t\t\t\t\t\tinputValue = {this.state.inputValue}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</Col>\r\n\t\t\t</Row>\r\n \t\t)\r\n \t}\r\n}\r\n","desc":" 通过设置 `inputValue` 属性，可自定义输入框展示内容。可在 onChange 回调函数中对数据进行自定义处理。"}]


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