bee-drawer
Version:
Drawer ui component for react
695 lines (530 loc) • 1.42 MB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(2);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _beeLayout = __webpack_require__(3);
var _beePanel = __webpack_require__(9);
var _src = __webpack_require__(84);
var _src2 = _interopRequireDefault(_src);
var _beeClipboard = __webpack_require__(98);
var _beeClipboard2 = _interopRequireDefault(_beeClipboard);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var Demo1 = __webpack_require__(264);var Demo2 = __webpack_require__(265);var Demo3 = __webpack_require__(266);var Demo4 = __webpack_require__(420);var Demo5 = __webpack_require__(421);var DemoArray = [{ "example": _react2['default'].createElement(Demo1, null), "title": " Drawer基本示例", "code": "/**\n *\n * @title Drawer基本示例\n * @description 弹出文字\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": _react2['default'].createElement(Demo2, null), "title": " Drawer位置示例", "code": "/**\n *\n * @title Drawer位置示例\n * @description 从上下左右弹出抽屉\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": _react2['default'].createElement(Demo3, null), "title": " Drawer表单示例", "code": "/**\n *\n * @title Drawer表单示例\n * @description 弹出表单信息\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": _react2['default'].createElement(Demo4, null), "title": " Drawer多层抽屉示例", "code": "/**\n *\n * @title Drawer多层抽屉示例\n * @description 弹出多层抽屉\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": _react2['default'].createElement(Demo5, null), "title": " Drawer列表信息示例", "code": "/**\n *\n * @title Drawer列表信息示例\n * @description 弹出列表中一项的信息\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}" }];
var Demo = function (_Component) {
_inherits(Demo, _Component);
function Demo(props) {
_classCallCheck(this, Demo);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.handleClick = function () {
_this.setState({ open: !_this.state.open });
};
_this.fCloseDrawer = function () {
_this.setState({
open: false
});
};
_this.state = {
open: false
};
return _this;
}
Demo.prototype.render = function render() {
var _props = this.props,
title = _props.title,
example = _props.example,
code = _props.code,
desc = _props.desc,
scss_code = _props.scss_code;
var header = _react2['default'].createElement(
'div',
null,
_react2['default'].createElement(
'p',
{ className: 'component-title' },
title
),
_react2['default'].createElement(
'p',
null,
desc
),
_react2['default'].createElement(
'span',
{ className: 'component-code', onClick: this.handleClick },
' \u67E5\u770B\u6E90\u7801 ',
_react2['default'].createElement('i', { className: 'uf uf-arrow-right' }),
' '
)
);
return _react2['default'].createElement(
_beeLayout.Col,
{ md: 12, id: title.trim(), className: 'component-demo' },
_react2['default'].createElement(
_beePanel.Panel,
{ header: header },
example
),
_react2['default'].createElement(
_src2['default'],
{ className: 'component-drawerc', title: title, show: this.state.open, placement: 'right', onClose: this.fCloseDrawer },
_react2['default'].createElement(
'div',
{ className: 'component-code-copy' },
' JS\u4EE3\u7801',
_react2['default'].createElement(_beeClipboard2['default'], { action: 'copy', text: code })
),
_react2['default'].createElement(
'pre',
{ className: 'pre-js' },
_react2['default'].createElement(
'code',
{ className: 'hljs javascript' },
code
)
),
!!scss_code ? _react2['default'].createElement(
'div',
{ className: 'component-code-copy copy-css' },
' SCSS\u4EE3\u7801',
_react2['default'].createElement(_beeClipboard2['default'], { action: 'copy', text: scss_code })
) : null,
!!scss_code ? _react2['default'].createElement(
'pre',
{ className: 'pre-css' },
_react2['default'].createElement(
'code',
{ className: 'hljs css' },
scss_code
)
) : null
)
);
};
return Demo;
}(_react.Component);
var DemoGroup = function (_Component2) {
_inherits(DemoGroup, _Component2);
function DemoGroup(props) {
_classCallCheck(this, DemoGroup);
return _possibleConstructorReturn(this, _Component2.call(this, props));
}
DemoGroup.prototype.render = function render() {
return _react2['default'].createElement(
_beeLayout.Row,
null,
DemoArray.map(function (child, index) {
return _react2['default'].createElement(Demo, { example: child.example, title: child.title, code: child.code, scss_code: child.scss_code, desc: child.desc, key: index });
})
);
};
return DemoGroup;
}(_react.Component);
_reactDom2['default'].render(_react2['default'].createElement(DemoGroup, null), document.getElementById('tinperBeeDemo'));
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = React;
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = ReactDOM;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Con = exports.Row = exports.Col = undefined;
var _Col2 = __webpack_require__(4);
var _Col3 = _interopRequireDefault(_Col2);
var _Row2 = __webpack_require__(7);
var _Row3 = _interopRequireDefault(_Row2);
var _Layout = __webpack_require__(8);
var _Layout2 = _interopRequireDefault(_Layout);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
exports.Col = _Col3["default"];
exports.Row = _Row3["default"];
exports.Con = _Layout2["default"];
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _classnames = __webpack_require__(5);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(6);
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
componentClass: _propTypes2["default"].oneOfType([_propTypes2["default"].element, _propTypes2["default"].string]),
/**
* xs显示列数
*/
xs: _propTypes2["default"].number,
/**
* sm显示列数
*/
sm: _propTypes2["default"].number,
/**
* md显示列数
*/
md: _propTypes2["default"].number,
/**
* lg显示列数
*/
lg: _propTypes2["default"].number,
/**
* xs偏移列数
*/
xsOffset: _propTypes2["default"].number,
/**
* sm偏移列数
*/
smOffset: _propTypes2["default"].number,
/**
* md偏移列数
*/
mdOffset: _propTypes2["default"].number,
/**
* lg偏移列数
*/
lgOffset: _propTypes2["default"].number,
/**
* xs右偏移列数
*/
xsPush: _propTypes2["default"].number,
/**
* sm右偏移列数
*/
smPush: _propTypes2["default"].number,
/**
* md右偏移列数
*/
mdPush: _propTypes2["default"].number,
/**
* lg右偏移列数
*/
lgPush: _propTypes2["default"].number,
/**
* xs左偏移列数
*/
xsPull: _propTypes2["default"].number,
/**
* sm左偏移列数
*/
smPull: _propTypes2["default"].number,
/**
* md左偏移列数
*/
mdPull: _propTypes2["default"].number,
/**
* lg左偏移列数
*/
lgPull: _propTypes2["default"].number
};
var defaultProps = {
componentClass: 'div',
clsPrefix: 'u-col'
};
var DEVICE_SIZES = ['lg', 'md', 'sm', 'xs'];
var Col = function (_Component) {
_inherits(Col, _Component);
function Col() {
_classCallCheck(this, Col);
return _possibleConstructorReturn(this, _Component.apply(this, arguments));
}
Col.prototype.render = function render() {
var _props = this.props,
Component = _props.componentClass,
className = _props.className,
clsPrefix = _props.clsPrefix,
others = _objectWithoutProperties(_props, ['componentClass', 'className', 'clsPrefix']);
var tbClass = [];
/**
* 对传入props做样式转化
* @type {[type]}
*/
DEVICE_SIZES.forEach(function (size) {
function popProp(propSuffix, modifier) {
var propName = '' + size + propSuffix;
var propValue = others[propName];
if (propValue != undefined && propValue != null) {
tbClass.push(clsPrefix + '-' + size + modifier + '-' + propValue);
}
delete others[propName];
}
popProp('', '');
popProp('Offset', '-offset');
popProp('Push', '-push');
popProp('Pull', '-pull');
});
return _react2["default"].createElement(
Component,
_extends({
className: (0, _classnames2["default"])(tbClass, className)
}, others),
this.props.children
);
};
return Col;
}(_react.Component);
Col.defaultProps = defaultProps;
Col.propTypes = propTypes;
exports["default"] = Col;
module.exports = exports['default'];
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if (typeof module !== 'undefined' && module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else if (true) {
// register as 'classnames', consistent with npm package name
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
return classNames;
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {
window.classNames = classNames;
}
}());
/***/ }),
/* 6 */
/***/ (function(module, exports) {
module.exports = PropTypes;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _classnames = __webpack_require__(5);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(6);
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
componentClass: _propTypes2["default"].oneOfType([_propTypes2["default"].element, _propTypes2["default"].string])
};
var defaultProps = {
componentClass: 'div',
clsPrefix: 'u-row'
};
var Row = function (_Component) {
_inherits(Row, _Component);
function Row() {
_classCallCheck(this, Row);
return _possibleConstructorReturn(this, _Component.apply(this, arguments));
}
Row.prototype.render = function render() {
var _props = this.props,
Component = _props.componentClass,
clsPrefix = _props.clsPrefix,
className = _props.className,
others = _objectWithoutProperties(_props, ['componentClass', 'clsPrefix', 'className']);
var bsclass = '' + clsPrefix;
return _react2["default"].createElement(
Component,
_extends({}, others, {
className: (0, _classnames2["default"])(bsclass, className)
}),
this.props.children
);
};
return Row;
}(_react.Component);
Row.propTypes = propTypes;
Row.defaultProps = defaultProps;
exports["default"] = Row;
module.exports = exports['default'];
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _classnames = __webpack_require__(5);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(6);
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
/**
* Adds `container-fluid` class.
*/
fluid: _propTypes2["default"].bool,
/**
* You can use a custom element for this component
*/
componentClass: _propTypes2["default"].oneOfType([_propTypes2["default"].element, _propTypes2["default"].string])
};
var defaultProps = {
componentClass: 'div',
fluid: false,
clsPrefix: 'u-container'
};
var Con = function (_React$Component) {
_inherits(Con, _React$Component);
function Con() {
_classCallCheck(this, Con);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
Con.prototype.render = function render() {
var _tbclass;
var _props = this.props,
fluid = _props.fluid,
Component = _props.componentClass,
clsPrefix = _props.clsPrefix,
className = _props.className,
others = _objectWithoutProperties(_props, ['fluid', 'componentClass', 'clsPrefix', 'className']);
var tbclass = (_tbclass = {}, _defineProperty(_tbclass, '' + clsPrefix, !fluid), _defineProperty(_tbclass, clsPrefix + '-fluid', fluid), _tbclass);
return _react2["default"].createElement(
Component,
_extends({}, others, {
className: (0, _classnames2["default"])(tbclass, className)
}),
this.props.children
);
};
return Con;
}(_react2["default"].Component);
Con.propTypes = propTypes;
Con.defaultProps = defaultProps;
exports["default"] = Con;
module.exports = exports['default'];
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PanelGroup = exports.Panel = undefined;
var _Panel2 = __webpack_require__(10);
var _Panel3 = _interopRequireDefault(_Panel2);
var _PanelGroup2 = __webpack_require__(83);
var _PanelGroup3 = _interopRequireDefault(_PanelGroup2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
exports.Panel = _Panel3["default"];
exports.PanelGroup = _PanelGroup3["default"];
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _classnames = __webpack_require__(5);
var _