bee-drawer
Version:
Drawer ui component for react
84 lines (71 loc) • 29.3 kB
JavaScript
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 '../src';
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 Demo5 = require("./demolist/Demo5");var DemoArray = [{"example":<Demo1 />,"title":" Drawer基本示例","code":"/**\n *\n * Drawer基本示例\n * 弹出文字\n *\n */\n\nimport React, { Component } from 'react';\nimport Drawer from \"tinper-bee/lib/Drawer\";\nimport { Icon, Button } from 'tinper-bee';\n\nclass Demo1 extends Component {\n constructor(props){\n super(props);\n this.state = {\n placement: 'right',\n showDrawer: false,\n title: 'Basic Drawer'\n };\n this.fPopDrawer = this.fPopDrawer.bind(this);\n this.fCloseDrawer = this.fCloseDrawer.bind(this);\n }\n fPopDrawer(){\n this.setState({\n showDrawer: true\n })\n }\n fCloseDrawer(){\n this.setState({\n showDrawer: false\n })\n }\n render () {\n let {placement,showDrawer,title} = this.state;\n\n return (\n <div className=\"demoPadding\">\n <div className=\"btnc\"> \n <Button onClick={this.fPopDrawer} colors=\"primary\">打开</Button>\n </div>\n <Drawer closeIcon={<Icon type=\"uf-close-c\"/>} showClose={true} className={'demo1'} title={title} show={showDrawer} placement={placement} onClose={this.fCloseDrawer}>\n <div className=\"con\">\n <p>这是第一行文字</p>\n <p>这是第二行文字</p>\n <p>这是第三行文字，啦啦啦~</p> \n </div>\n </Drawer>\n </div>\n )\n }\n}\n\n\n","desc":" 弹出文字","scss_code":".demo1{\n .btnc{\n margin-top: 10px;\n }\n .con{\n padding: 10px 20px;\n }\n}"},{"example":<Demo2 />,"title":" Drawer位置示例","code":"/**\n *\n * Drawer位置示例\n * 从上下左右弹出抽屉\n *\n */\n\nimport React, { Component } from 'react';\nimport Drawer from \"tinper-bee/lib/Drawer\";\nimport { Button } from 'tinper-bee';\n\nclass Demo2 extends Component {\n constructor(props){\n super(props);\n this.state = {\n left:false,\n right:false,\n top:false,\n down:false\n };\n }\n open=(placement)=>{\n switch(placement){\n case 'left':\n this.setState({\n left:true\n })\n break;\n case 'right':\n this.setState({\n right:true\n })\n break;\n case 'top':\n this.setState({\n top:true\n })\n break;\n case 'down':\n this.setState({\n down:true\n })\n break;\n }\n }\n close=(placement)=>{\n switch(placement){\n case 'left':\n this.setState({\n left:false\n })\n break;\n case 'right':\n this.setState({\n right:false\n })\n break;\n case 'top':\n this.setState({\n top:false\n })\n break;\n case 'down':\n this.setState({\n down:false\n })\n break;\n }\n }\n render () {\n let { left,right,top,down } = this.state;\n return (\n <div className=\"demoPadding demo2\">\n <div className=\"btnc\"> \n <Button colors=\"primary\" onClick={()=>{this.open('left')}}>左边</Button>\n <Button colors=\"primary\" onClick={()=>{this.open('right')}}>右边</Button>\n <Button colors=\"primary\" onClick={()=>{this.open('top')}}>上边</Button>\n <Button colors=\"primary\" onClick={()=>{this.open('down')}}>下边</Button>\n </div>\n <Drawer className={'demo2'} placement='left' title=\"我从左边来\" show={left} onClose={()=>{this.close('left')}}>\n <div className=\"con\">\n <p>我从左边来</p>\n <p>这是第一行文字</p>\n <p>这是第二行文字</p>\n <p>这是第三行文字，啦啦啦~</p> \n </div>\n </Drawer>\n <Drawer className={'demo2'} placement='right' title=\"我从右边来\" show={right} onClose={()=>{this.close('right')}}>\n <div className=\"con\">\n <p>我从右边来</p>\n <p>这是第一行文字</p>\n <p>这是第二行文字</p>\n <p>这是第三行文字，啦啦啦~</p> \n </div>\n </Drawer>\n <Drawer className={'demo2'} placement='top' title=\"我从上边来\" show={top} onClose={()=>{this.close('top')}}>\n <div className=\"con\">\n <p>我从上边来</p>\n <p>这是第一行文字</p>\n <p>这是第二行文字</p>\n <p>这是第三行文字，啦啦啦~</p> \n </div>\n </Drawer>\n <Drawer className={'demo2'} placement='bottom' title=\"我从下边来\" show={down} onClose={()=>{this.close('down')}}>\n <div className=\"con\">\n <p>我从下边来</p>\n <p>这是第一行文字</p>\n <p>这是第二行文字</p>\n <p>这是第三行文字，啦啦啦~</p> \n </div>\n </Drawer>\n </div>\n )\n }\n}\n\n\n","desc":" 从上下左右弹出抽屉","scss_code":".demo2{\n .btnc{\n margin-top: 10px;\n .u-button{\n margin-right: 10px;\n }\n }\n .con{\n padding: 10px 20px;\n }\n}"},{"example":<Demo3 />,"title":" Drawer表单示例","code":"/**\n *\n * Drawer表单示例\n * 弹出表单信息\n *\n */\n\nimport React, { Component } from 'react';\nimport Drawer from \"tinper-bee/lib/Drawer\";\nimport { Checkbox, Icon, Label, FormControl, Form, Button } from 'tinper-bee';\n\nconst FormItem = Form.FormItem;\n\nclass Demo3 extends Component {\n constructor(props){\n super(props);\n this.state = {\n placement: 'right',\n showDrawer: false,\n title: '表单'\n };\n this.fPopDrawer = this.fPopDrawer.bind(this);\n this.fCloseDrawer = this.fCloseDrawer.bind(this);\n }\n fPopDrawer(){\n this.setState({\n showDrawer: true\n })\n }\n fCloseDrawer(){\n this.setState({\n showDrawer: false\n })\n }\n submit = (e) => {\n e.preventDefault();\n this.props.form.validateFields((err, values) => {\n if (err) {\n console.log('校验失败', values);\n } else {\n console.log('提交成功', values)\n }\n });\n }\n handleConfirmPassword = (rule, value, callback) => {\n const { getFieldValue } = this.props.form;\n if (value && value !== getFieldValue('password')) {\n callback(<span><Icon type=\"uf-exc-t\"></Icon><span>两次输入不一致！</span></span>)\n }\n callback();\n }\n render () {\n let {placement,showDrawer,title} = this.state;\n const { getFieldProps, getFieldError } = this.props.form;\n return (\n <div className=\"demoPadding\">\n <div className=\"btnc\"> \n <Button colors=\"primary\" onClick={this.fPopDrawer}>打开</Button>\n </div>\n <Drawer className='demo3' title={title} show={showDrawer} placement={placement} onClose={this.fCloseDrawer}>\n <Form>\n <FormItem>\n <Label>用户名</Label>\n <FormControl placeholder=\"请输入用户名(包含数字和字母，8-15位)\"\n {...getFieldProps('username', {\n validateTrigger: 'onBlur',\n rules: [{\n required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入用户名</span></span>,\n }, {\n pattern: /^(?!\\d+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{8,15}$/, \n message: <span><Icon type=\"uf-exc-t\"></Icon><span>用户名格式错误</span></span>,\n }],\n }) }\n />\n <span className='error'>\n {getFieldError('username')}\n </span>\n </FormItem>\n\n <FormItem>\n <Label>密码</Label>\n <FormControl placeholder=\"请输入密码\" type='password'\n {...getFieldProps('password', {\n validateTrigger: 'onBlur',\n rules: [{\n required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入密码</span></span>,\n }],\n }) }\n />\n <span className='error'>\n {getFieldError('password')}\n </span>\n </FormItem>\n\n <FormItem>\n <Label>再次输入密码</Label>\n <FormControl placeholder=\"请输入密码\" type='password'\n {...getFieldProps('password2', {\n validateTrigger: 'onBlur',\n rules: [{\n required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入密码</span></span>,\n }, {\n validator: this.handleConfirmPassword\n }],\n }) }\n />\n <span className='error'>\n {getFieldError('password2')}\n </span>\n </FormItem>\n\n <FormItem>\n <Label>邮箱</Label>\n <FormControl placeholder=\"请输入邮箱\"\n {...getFieldProps('email', {\n validateTrigger: 'onBlur',\n rules: [{\n required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入邮箱</span></span>,\n }, {\n type: 'email', message: <span><Icon type=\"uf-exc-t\"></Icon><span>邮箱格式不正确</span></span>\n }],\n }) }\n />\n <span className='error'>\n {getFieldError('email')}\n </span>\n </FormItem>\n <FormItem>\n <Label>手机号</Label>\n\n <FormControl placeholder=\"请输入手机号\"\n {...getFieldProps('phone', {\n validateTrigger: 'onBlur',\n rules: [{\n required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入手机号</span></span>,\n }, {\n pattern: /^\\d{11}$/, message: <span><Icon type=\"uf-exc-t\"></Icon><span>手机号格式不正确</span></span>\n }],\n }) }\n />\n\n <span className='error'>\n {getFieldError('phone')}\n </span>\n </FormItem>\n\n <FormItem style={{'paddingLeft':'106px'}}>\n <Checkbox\n defaultChecked={this.state.checkbox}\n {\n ...getFieldProps('checkbox', {\n initialValue: false,\n }\n ) }\n >\n 我已经阅读并同意相关条款\n </Checkbox>\n </FormItem>\n <FormItem style={{'paddingLeft':'106px'}}>\n <Button shape=\"border\" className=\"reset\" style={{\"marginRight\":\"8px\"}}>取消</Button>\n <Button colors=\"primary\" className=\"login\" onClick={this.submit}>注册</Button>\n </FormItem>\n </Form>\n </Drawer>\n </div>\n )\n }\n}\n\n\n","desc":" 弹出表单信息","scss_code":".demo3{\n .drawer-body{\n min-width: 600px;\n text-align: center;\n padding-top: 40px;\n .u-form-item .error{\n display: block;\n }\n .u-form-item .u-checkbox-group, .u-form-item .u-form-control, .u-form-item .u-input-group .u-form-control, .u-form-item .u-select{\n min-width: 60%;\n }\n }\n}"},{"example":<Demo4 />,"title":" Drawer多层抽屉示例","code":"/**\n *\n * Drawer多层抽屉示例\n * 弹出多层抽屉\n *\n */\n\nimport React, { Component } from 'react';\nimport Drawer from \"tinper-bee/lib/Drawer\";\nimport { Button } from 'tinper-bee';\n\nclass Demo4 extends Component {\n constructor(props){\n super(props);\n this.state = {\n placement: 'right',\n showDrawer: false,\n title: 'Basic Drawer',\n secondTitle: 'Second Drawer',\n showSecondDrawer: false,\n secondPlacement: 'right'\n };\n this.fPopDrawer = this.fPopDrawer.bind(this);\n this.fCloseDrawer = this.fCloseDrawer.bind(this);\n this.fPopSecondDrawer = this.fPopSecondDrawer.bind(this);\n this.fCloseSecondDrawer = this.fCloseSecondDrawer.bind(this);\n }\n fPopDrawer(){\n this.setState({\n showDrawer: true\n })\n }\n fCloseDrawer(){\n this.setState({\n showDrawer: false\n })\n }\n fPopSecondDrawer(){\n this.setState({\n showSecondDrawer: true\n })\n }\n fCloseSecondDrawer(){\n this.setState({\n showSecondDrawer: false\n })\n }\n render () {\n let {placement,showDrawer,title,secondTitle,showSecondDrawer,secondPlacement} = this.state;\n\n return (\n <div className=\"demoPadding\">\n <div className=\"btnc\"> \n <Button colors=\"primary\" onClick={this.fPopDrawer}>打开</Button>\n </div>\n <Drawer className={'demo4'} width={500} title={title} show={showDrawer} placement={placement} onClose={this.fCloseDrawer}>\n <div className=\"con\">\n <Button onClick={this.fPopSecondDrawer} className=\"btn\">二级抽屉</Button>\n </div>\n <Drawer className={'demo4'} width={'320px'} zIndex={1000001} title={secondTitle} show={showSecondDrawer} placement={secondPlacement} onClose={this.fCloseSecondDrawer}>\n <div className=\"con\">\n <p>这是第一行文字</p>\n <p>这是第二行文字</p>\n <p>这是第三行文字，啦啦啦~</p> \n <p>这是第四行文字，啦啦啦~</p> \n </div>\n </Drawer> \n </Drawer>\n </div>\n )\n }\n}\n\n\n","desc":" 弹出多层抽屉","scss_code":".demo4{\n\n .con{\n padding: 10px 20px;\n }\n}"},{"example":<Demo5 />,"title":" Drawer列表信息示例","code":"/**\n *\n * Drawer列表信息示例\n * 弹出列表中一项的信息\n *\n */\n\nimport React, { Component } from 'react';\nimport Drawer from \"tinper-bee/lib/Drawer\";\n\nclass Demo5 extends Component {\n constructor(props){\n super(props);\n this.state = {\n placement: 'right',\n showDrawer: false,\n title: 'Basic Drawer',\n list: [\n {id:1, name: 'XiaoMing',hometown:'henan', age:23, school: 'MIT', avatar: '//design.yonyoucloud.com/static/tinper-bee/images/xiaoming.png',\n province:'henan',city:'shangqiu',county:'suiyangqu',country:'chengguanzhen',\n phone:'138xxxxxxxx',email:'xiaoming@168.com',bio:'xiaoming@weibo.com',weixin:'xiaoming'},\n {id:2, name: 'XiaoZhang',hometown:'hebei', age:25, school: 'MIT', avatar: '//design.yonyoucloud.com/static/tinper-bee/images/xiaozhang.png',\n province:'beijing',city:'beijing',county:'changping',country:'huilongguan',\n phone:'139xxxxxxxx',email:'xiaozhang@168.com',bio:'xiaozhang@weibo.com',weixin:'xiaozhang'}\n ],\n curItem: {}\n };\n this.fPopDrawer = this.fPopDrawer.bind(this);\n this.fCloseDrawer = this.fCloseDrawer.bind(this);\n this.fItemClick = this.fItemClick.bind(this);\n }\n fItemClick(ev,item){\n this.setState({\n curItem: item,\n showDrawer: true,\n title: item.name + '\\'s Profile' \n })\n }\n fPopDrawer(){\n this.setState({\n showDrawer: true\n })\n }\n fCloseDrawer(){\n this.setState({\n showDrawer: false\n })\n }\n render () {\n let {list,title,placement,showDrawer,curItem} = this.state;\n\n return (\n <div className=\"demoPadding demo5\">\n <ul className=\"infos\">\n {\n list.map(item => {\n return (<li key={item.id} className=\"info-item\">\n <div className=\"item-inner\">\n <div className=\"item-left\">\n <img className=\"item-avatar\" src={item.avatar} />\n </div>\n <div className=\"item-main\">\n <div>{item.name}</div>\n <div>{item.email}</div>\n <div>{item.hometown}</div>\n </div>\n <div className=\"item-right\">\n <a className=\"item-link\" onClick={(ev) => this.fItemClick(ev,item)} href=\"javascript:;\">View</a>\n </div>\n </div>\n </li>)\n })\n }\n </ul>\n <Drawer className={'demo5'} width={500} title={title} show={showDrawer} placement={placement} onClose={this.fCloseDrawer}>\n <div className=\"con\">\n <div className=\"section\">\n <div className=\"sec-title\">Avatar</div>\n <div className=\"sec-body\">\n <div className=\"row\">\n <img className=\"sec-avatar\" src={curItem.avatar} />\n </div>\n </div>\n </div>\n <div className=\"section\">\n <div className=\"sec-title\">Profile</div>\n <div className=\"sec-body\">\n <div className=\"row\">\n <div className=\"col\">\n <span>Name: </span>\n <span>{curItem.name}</span>\n </div>\n <div className=\"col\">\n <span>hometown: </span>\n <span>{curItem.hometown}</span>\n </div>\n </div>\n <div className=\"row\">\n <div className=\"col\">\n <span>Age: </span>\n <span>{curItem.age}</span>\n </div>\n <div className=\"col\">\n <span>School: </span>\n <span>{curItem.school}</span>\n </div>\n </div>\n </div>\n </div>\n <div className=\"section\">\n <div className=\"sec-title\">Address</div>\n <div className=\"sec-body\">\n <div className=\"row\">\n <div className=\"col\">\n <span>Province: </span>\n <span>{curItem.province}</span>\n </div>\n <div className=\"col\">\n <span>City: </span>\n <span>{curItem.city}</span>\n </div>\n </div>\n <div className=\"row\">\n <div className=\"col\">\n <span>County: </span>\n <span>{curItem.county}</span>\n </div>\n <div className=\"col\">\n <span>Country: </span>\n <span>{curItem.country}</span>\n </div>\n </div>\n </div>\n </div>\n <div className=\"section\">\n <div className=\"sec-title\">Contract</div>\n <div className=\"sec-body\">\n <div className=\"row\">\n <div className=\"col\">\n <span>Phone: </span>\n <span>{curItem.phone}</span>\n </div>\n <div className=\"col\">\n <span>Email: </span>\n <span>{curItem.email}</span>\n </div>\n </div>\n <div className=\"row\">\n <div className=\"col\">\n <span>Bio: </span>\n <span>{curItem.bio}</span>\n </div>\n <div className=\"col\">\n <span>Weixin: </span>\n <span>{curItem.weixin}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </Drawer>\n </div>\n )\n }\n}\n\n\n","desc":" 弹出列表中一项的信息","scss_code":".demo5{\n .con{\n padding: 10px 20px;\n padding-top: 0;\n }\n .section:first-child{\n margin-top: 15px;\n }\n .section:nth-child(2){\n margin-top: 20px;\n }\n .section{\n margin-top: 30px;\n }\n .sec-title{\n font-size: 22px;\n font-weight: bold;\n }\n .sec-avatar{\n width: 40px;\n height: 40px;\n margin-top: 10px;\n }\n .col{\n display: inline-block;\n }\n .col:first-child{\n margin-left: 0;\n width: 200px;\n }\n .info-item{width: 300px;}\n .info-item:first-child{\n .item-inner{border-top-left-radius:4px;border-top-right-radius:4px;}\n }\n .info-item:last-child{\n margin-top:-1px;\n .item-inner{border-bottom-left-radius:4px;border-bottom-right-radius:4px;}\n }\n .item-inner{overflow: hidden;border:1px solid #ccc;padding:10px 20px;}\n .item-left,.item-main,.item-right{float:left}\n .item-main{padding-left:30px;}\n .item-right{padding-left:30px;padding-top:20px;}\n .item-avatar{width:30px;height:30px;}\n .item-link{color:#f53c32;}\n .item-link:link,.item-link:visited,.item-link::active,.item-link:hover{\n color: #f53c32;\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'));