bee-search-panel
Version:
SearchPanel ui component for react
467 lines (376 loc) • 6.15 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 _beeDrawer = __webpack_require__(82);
var _beeDrawer2 = _interopRequireDefault(_beeDrawer);
var _beeClipboard = __webpack_require__(96);
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__(262);var Demo2 = __webpack_require__(269);var Demo3 = __webpack_require__(508);var Demo4 = __webpack_require__(509);var DemoArray = [{ "example": _react2['default'].createElement(Demo1, null), "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": _react2['default'].createElement(Demo2, null), "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": _react2['default'].createElement(Demo3, null), "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": _react2['default'].createElement(Demo4, null), "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}" }];
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(
_beeDrawer2['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) 2016 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)) {
classes.push(classNames.apply(null, arg));
} 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) {
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 = cl