bee-datepicker
Version:
DatePicker ui component for react
458 lines (367 loc) • 3.85 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__(70);
var _beeDrawer2 = _interopRequireDefault(_beeDrawer);
var _beeClipboard = __webpack_require__(84);
var _beeClipboard2 = _interopRequireDefault(_beeClipboard);
var _src = __webpack_require__(301);
var _src2 = _interopRequireDefault(_src);
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__(545);var Demo2 = __webpack_require__(546);var Demo3 = __webpack_require__(547);var Demo4 = __webpack_require__(548);var Demo5 = __webpack_require__(549);var Demo6 = __webpack_require__(550);var Demo7 = __webpack_require__(676);var Demo8 = __webpack_require__(677);var Demo9 = __webpack_require__(772);var Demo10 = __webpack_require__(773);var Demo11 = __webpack_require__(774);var Demo12 = __webpack_require__(775);var Demo13 = __webpack_require__(776);var DemoArray = [{ "example": _react2['default'].createElement(Demo1, null), "title": " 选择日期", "code": "/**\r\n *\r\n * @title 选择日期\r\n * @description 以「日期」为基本单位，基础的日期选择控件\r\n */\r\n\r\nimport React, {Component} from \"react\";\nimport { Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\n\r\nconst format = \"YYYY-MM-DD dddd\";\r\nconst dateInputPlaceholder = \"选择日期\";\r\n\r\nclass Demo1 extends Component {\r\n onSelect = (d, dataString) => {\r\n console.log('select')\r\n console.log(d, dataString);\r\n }\r\n onClick = d => {\r\n console.log('click')\r\n }\r\n onChange = (d, dataString) => {\r\n console.log('change')\r\n console.log(d, dataString)\r\n };\r\n onDateInputBlur = (e,v) => {\r\n console.log(e,v);\r\n }\r\n render() {\r\n var self = this;\r\n return (\r\n <div>\r\n <Row>\r\n <Col md={6}>\r\n <DatePicker\r\n format={format}\r\n onSelect={this.onSelect}\r\n onChange={this.onChange}\r\n onClick={this.onClick}\r\n onDateInputBlur={this.onDateInputBlur}\r\n />\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo1;\r\n", "desc": " 以「日期」为基本单位，基础的日期选择控件" }, { "example": _react2['default'].createElement(Demo2, null), "title": " 禁用日期", "code": "/**\r\n *\r\n * @title 禁用日期\r\n * @description 设置 disabled\r\n */\r\n\r\nimport React, {Component} from \"react\";\nimport { Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\nimport moment from \"moment\";\r\n\r\nconst format = \"YYYY-MM-DD dddd\";\r\nconst dateInputPlaceholder = \"选择日期\";\r\n\r\nclass Demo2 extends Component {\r\n onSelect = d => {\r\n console.log(d);\r\n }\r\n onChange = (d, dataString) => {\r\n console.log(dataString);\r\n };\r\n render() {\r\n var self = this;\r\n return (\r\n <div>\r\n <Row>\r\n <Col md={6}>\r\n <DatePicker\r\n format={format}\r\n onSelect={this.onSelect}\r\n onChange={this.onChange}\r\n disabled\r\n defaultValue={moment()}\r\n />\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo2;\r\n", "desc": " 设置 disabled" }, { "example": _react2['default'].createElement(Demo3, null), "title": " 不可选择日期和时间", "code": "/**\r\n *\r\n * @title 不可选择日期和时间\r\n * @description 可用 disabledDate 和 disabledTime 分别禁止选择部分日期和时间，其中 disabledTime 需要和 showTime 一起使用。\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\nimport moment from \"moment\";\r\n\r\nconst { MonthPicker, RangePicker } = DatePicker;\r\n\r\nfunction range(start, end) {\r\n const result = [];\r\n for (let i = start; i < end; i++) {\r\n result.push(i);\r\n }\r\n return result;\r\n}\r\n\r\nfunction disabledDate(current) {\r\n // Can not select days before today and today\r\n return current && current < moment().endOf('day');\r\n}\r\n\r\nfunction disabledDateTime() {\r\n return {\r\n disabledHours: () => range(0, 24).splice(4, 20),\r\n disabledMinutes: () => range(30, 60),\r\n disabledSeconds: () => [55, 56],\r\n };\r\n}\r\n\r\nfunction disabledRangeTime(_, type) {\r\n if (type === 'start') {\r\n return {\r\n disabledHours: () => range(0, 60).splice(4, 20),\r\n disabledMinutes: () => range(30, 60),\r\n disabledSeconds: () => [55, 56],\r\n };\r\n }\r\n return {\r\n disabledHours: () => range(0, 60).splice(20, 4),\r\n disabledMinutes: () => range(0, 31),\r\n disabledSeconds: () => [55, 56],\r\n };\r\n}\r\n\r\nclass Demo3 extends Component {\r\n render() {\r\n return (\r\n <div className='demo3'>\r\n <Row className='demo3-item'>\r\n <DatePicker\r\n placeholder=\"选择日期\"\r\n format=\"YYYY-MM-DD HH:mm:ss\"\r\n disabledDate={disabledDate}\r\n disabledTime={disabledDateTime}\r\n showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}\r\n />\r\n </Row>\r\n <Row className='demo3-item'>\r\n <MonthPicker disabledDate={disabledDate} placeholder=\"选择月份\" />\r\n </Row>\r\n <Row className='demo3-item'>\r\n <RangePicker\r\n placeholder={'开始 ~ 结束'}\r\n disabledDate={disabledDate}\r\n disabledTime={disabledRangeTime}\r\n showTime={{\r\n hideDisabledOptions: true,\r\n defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],\r\n }}\r\n format=\"YYYY-MM-DD HH:mm:ss\"\r\n />\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo3;\r\n", "desc": " 可用 disabledDate 和 disabledTime 分别禁止选择部分日期和时间，其中 disabledTime 需要和 showTime 一起使用。", "scss_code": ".demo3{\r\n >.demo3-item{\r\n margin: 0;\r\n margin-bottom: 20px!important;\r\n }\r\n}" }, { "example": _react2['default'].createElement(Demo4, null), "title": " 选择年，年月，周，日期范围", "code": "/**\r\n *\r\n * @title 选择年，年月，周，日期范围\r\n * @description 选择年，年月，周，日期范围基本示例\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\nimport moment from \"moment\";\r\nimport zhCN from \"bee-datepicker/build/locale/zh_CN\";\r\nconst { YearPicker,MonthPicker,WeekPicker,RangePicker } = DatePicker;\r\n\r\n\r\nclass Demo4 extends Component {\r\n onChange = (d, dataString) => {\r\n console.log('change')\r\n console.log(d);\r\n console.log(dataString);\r\n };\r\n onSelect = d => {\r\n console.log('select')\r\n console.log(d);\r\n }\r\n onClear = () => {\r\n console.log('clear')\r\n }\r\n /**\r\n *@param e 事件对象\r\n *@param startValue 开始时间\r\n *@param array 包含开始时间和结束时间的数组\r\n */\r\n onStartInputBlur = (e,startValue,array) => {\r\n console.log('RangePicker面板 左输入框的失焦事件',startValue,array)\r\n }\r\n /**\r\n *@param e 事件对象\r\n *@param endValue 结束时间\r\n *@param array 包含开始时间和结束时间的数组\r\n */\r\n onEndInputBlur = (e,endValue,array) => {\r\n console.log('RangePicker面板 右输入框的失焦事件',endValue,array)\r\n }\r\n render() {\r\n return (\r\n <div>\r\n <Row style={{'marginBottom':'10px'}}>\r\n <Col md={6}>\r\n <YearPicker\r\n format=\"YYYY\"\r\n onChange={this.onChange}\r\n onSelect={this.onSelect}\r\n locale={zhCN}\r\n placeholder=\"选择年\"\r\n defaultValue={moment()}\r\n showClose={false}\r\n />\r\n </Col>\r\n <Col md={6} style={{'marginBottom':'10px'}}>\r\n <MonthPicker\r\n format='YYYY-MM'\r\n onSelect={this.onSelect}\r\n onChange={this.onChange}\r\n locale={zhCN}\r\n defaultValue={moment()}\r\n placeholder=\"选择年月\"\r\n onClear={this.onClear} \r\n showClose={false}\r\n />\r\n </Col>\r\n <Col md={6} style={{'marginBottom':'10px'}}>\r\n <WeekPicker \r\n defaultValue={moment()}\r\n onSelect={this.onSelect}\r\n onChange={this.onChange}\r\n placeholder=\"选择周\" \r\n showClose={false}\r\n />\r\n </Col>\r\n <Col md={6} style={{'marginBottom':'10px'}}>\r\n <RangePicker\r\n placeholder={'开始 ~ 结束'}\r\n dateInputPlaceholder={['开始', '结束']}\r\n showClear={true}\r\n onChange={this.onChange}\r\n onPanelChange={(v)=>{console.log('onPanelChange',v)}}\r\n showClose={true}\r\n onStartInputBlur={this.onStartInputBlur}\r\n onEndInputBlur={this.onEndInputBlur}\r\n />\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo4;\r\n", "desc": " 选择年，年月，周，日期范围基本示例" }, { "example": _react2['default'].createElement(Demo5, null), "title": " 动态的改变时间", "code": "/**\r\n *\r\n * @title 动态的改变时间\r\n * @description 以「日期时间」为基本单位，基础的日期时间选择控件\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Button, Row, Col } from 'tinper-bee';\r\nimport DatePicker from \"bee-datepicker\";\r\nimport moment from \"moment\";\r\nimport zhCN from \"bee-datepicker/build/locale/zh_CN\";\r\n\n\nconst format = \"YYYY-MM-DD HH:mm:ss\";\r\nconst dateInputPlaceholder = \"选择日期\";\r\n\r\nclass Demo5 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: moment()\r\n };\r\n }\r\n\r\n handleChange = value => {\r\n this.setState({\r\n value: value\r\n });\r\n };\r\n onSelect = d => {\r\n console.log(d);\r\n };\r\n\r\n handlerChangeDate = () => {\r\n this.setState({\r\n value: moment(\"2011-11-11 11:11:11\")\r\n });\r\n console.log(\"click\");\r\n };\r\n render() {\r\n return (\r\n <div>\r\n <Row>\r\n <Col md={6}>\r\n <DatePicker\r\n format={format}\r\n locale={zhCN}\r\n onSelect={this.onSelect}\r\n onChange={this.handleChange}\r\n value={this.state.value}\r\n placeholder={dateInputPlaceholder}\r\n />\r\n </Col>\r\n <Col md={3}>\r\n <Button onClick={this.handlerChangeDate}>变</Button>\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo5;\r\n", "desc": " 以「日期时间」为基本单位，基础的日期时间选择控件" }, { "example": _react2['default'].createElement(Demo6, null), "title": " 自定义日期渲染父级容器\t", "code": "/**\r\n *\r\n * @title 自定义日期渲染父级容器\t\r\n * @description getCalendarContainer自定义浮层渲染的父容器。该属性常用来将组件渲染到滚动区域内。\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\r\nimport DatePicker from \"bee-datepicker\";\r\n\n\r\nconst dataSource = [\r\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"\", key: \"1\" },\r\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"\", key: \"2\" },\r\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"\", key: \"3\" },\r\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"\", key: \"4\" },\r\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"\", key: \"5\" },\r\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"\", key: \"6\" },\r\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"\", key: \"7\" },\r\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"\", key: \"8\" },\r\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"\", key: \"9\" },\r\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"\", key: \"10\" },\r\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"\", key: \"11\" },\r\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"\", key: \"12\" }\r\n];\r\n\r\nclass Demo6 extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\r\n { title: \"出生日期\", dataIndex: \"c\", key: \"c\", render: () => {\r\n return (\r\n <DatePicker \r\n placeholder=\"选择日期\"\r\n showToday={false}\r\n getCalendarContainer={trigger => trigger.parentNode} \r\n />\r\n )\r\n }},\r\n { title: \"\", dataIndex: \"\", key: \"\"}\r\n ];\r\n render() {\r\n return (\r\n <Table data={dataSource} columns={this.columns} scroll={{ y: 300 }} height={40}/>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo6;\r\n", "desc": " getCalendarContainer自定义浮层渲染的父容器。该属性常用来将组件渲染到滚动区域内。" }, { "example": _react2['default'].createElement(Demo7, null), "title": " 自定义展示日期面板，外层输入框可输入", "code": "/**\r\n *\r\n * @title 自定义展示日期面板，外层输入框可输入\r\n * @description open设置面板展开收起，keyboardInput外层input是否可输入，showDateInput是否显示内层input\r\n */\r\n\r\nimport React, {Component} from \"react\";\nimport { Icon, Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\nimport zhCN from \"bee-datepicker/build/locale/zh_CN\";\r\nimport enUS from \"bee-datepicker/build/locale/en_US\";\r\nimport moment from \"moment\";\r\n\nimport 'moment/locale/zh-cn';\r\n\r\nmoment.locale('zh-cn');\r\n\r\nconst format = \"YYYY-MM-DD\";\r\n\r\nconst dateInputPlaceholder = \"选择日期\";\r\n\r\nclass Demo7 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n open: false\r\n };\r\n }\r\n onSelect = d=> {\r\n console.log(d);\r\n }\r\n onChange = (d, dataString) => {\r\n this.setState({\r\n value:d\r\n })\r\n console.log('onChange',dataString)\r\n };\r\n onOpenChange = open => {\r\n console.log(open)\r\n }\r\n open = d => {\r\n this.setState({\r\n open: !this.state.open\r\n })\r\n }\r\n onClick = (e,d,str) => {\r\n console.log(d);\r\n }\r\n outInputKeydown = ()=>{\r\n console.log('keydown')\r\n }\r\n render() {\r\n return (\r\n <div>\r\n <Row>\r\n <Col md={6}>\r\n <DatePicker\r\n format={format}\r\n onSelect={this.onSelect}\r\n onChange={this.onChange}\r\n locale={zhCN}\r\n open={this.state.open}\r\n defaultValue={moment('2018-01-01')}\r\n value={this.state.value}\r\n onOpenChange={this.onOpenChange}\r\n placeholder={dateInputPlaceholder}\r\n className={\"Demo7\"}\r\n onClick={this.onClick}\r\n keyboardInput={true}\r\n showDateInput={false}\r\n />\r\n </Col>\r\n <Col md={3}>\r\n <button className=\"u-button\" onClick={this.open}>展开面板</button>\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo7;\r\n", "desc": " open设置面板展开收起，keyboardInput外层input是否可输入，showDateInput是否显示内层input" }, { "example": _react2['default'].createElement(Demo8, null), "title": " 自定义展示日期面板，外层输入框可输入，配合form使用", "code": "/**\r\n *\r\n * @title 自定义展示日期面板，外层输入框可输入，配合form使用\r\n * @description open设置面板展开收起，keyboardInput外层input是否可输入，showDateInput是否显示内层input\r\n */\r\n\r\nimport React, {Component} from \"react\";\nimport { Form, Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\nimport zhCN from \"bee-datepicker/build/locale/zh_CN\";\r\nimport enUS from \"bee-datepicker/build/locale/en_US\";\r\nimport moment from \"moment\";\r\nimport 'moment/locale/zh-cn';\r\n\n\r\nmoment.locale('zh-cn');\r\n\r\nconst format = \"YYYY-MM-DD\";\r\n\r\nconst dateInputPlaceholder = \"选择日期\";\r\n\r\n\r\nclass Demo8 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: '',\r\n open: false\r\n };\r\n }\r\n onOpenChange = open => {\r\n console.log(open)\r\n }\r\n open = d => {\r\n this.setState({\r\n open: !this.state.open\r\n })\r\n }\r\n onClick = (e,d,str) => {\r\n console.log(d);\r\n }\r\n onSelect(d) {\r\n console.log(\"select:\"+d);\r\n }\r\n outInputKeydown = ()=>{\r\n console.log('keydown')\r\n }\r\n submit = (e) => {\r\n this.props.form.validateFields((err, values) => {\r\n if (err) {\r\n console.log('校验失败', values);\r\n } else {\r\n console.log('提交成功', values, moment(values.date).format('YYYY-MM-DD'));\r\n }\r\n });\r\n }\r\n render() {\r\n var self = this; \r\n const { getFieldProps, getFieldError } = this.props.form;\r\n return (\r\n <div>\r\n <Row>\r\n <Col md={6}>\r\n <DatePicker\r\n format={format}\r\n onSelect={this.onSelect}\r\n onChange={this.onChange}\r\n locale={zhCN}\r\n open={this.state.open}\r\n onOpenChange={this.onOpenChange.bind(this)}\r\n placeholder={dateInputPlaceholder}\r\n className={\"demo11\"}\r\n onClick={this.onClick}\r\n keyboardInput={true}\r\n showDateInput={false}\r\n iconClick={this.open}\r\n outInputKeydown={this.outInputKeydown}\r\n {...getFieldProps('date', {\r\n validateTrigger: 'onBlur',\r\n initialValue:moment('2018-01-01'),\r\n rules: [{\r\n required: true, message: '请输入日期',\r\n }],\r\n }) }\r\n />\r\n </Col>\r\n <Col md={3}>\r\n <button className=\"u-button\" onClick={this.open}>展开/收起面板</button>\r\n <button className=\"u-button\" onClick={this.submit}>获得值</button>\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Form.createForm()(Demo8);\r\n", "desc": " open设置面板展开收起，keyboardInput外层input是否可输入，showDateInput是否显示内层input" }, { "example": _react2['default'].createElement(Demo9, null), "title": " 额外的页脚", "code": "/**\r\n *\r\n * @title 额外的页脚\r\n * @description 在浮层中加入额外的页脚，以满足某些定制信息的需求。\r\n */\r\n\r\nimport React, {Component} from \"react\";\nimport { Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\n\r\nconst { RangePicker, MonthPicker } = DatePicker;\r\n\r\nclass Demo9 extends Component {\r\n render() {\r\n return (\r\n <div className=\"demo9\">\r\n <Row>\r\n <Col md={6}>\r\n <DatePicker renderFooter={() => '额外页脚'} placeholder=\"选择日期\"/>\r\n </Col>\r\n \r\n <Col md={6}>\r\n <DatePicker renderFooter={() => '额外页脚'} showTime placeholder=\"选择日期\"/>\r\n </Col>\r\n \r\n <Col md={6}>\r\n <RangePicker renderFooter={() => '额外页脚'} placeholder={'开始 ~ 结束'}/>\r\n </Col>\r\n \r\n <Col md={6}>\r\n <RangePicker renderFooter={() => '额外页脚'} showTime placeholder={'开始 ~ 结束'}/>\r\n </Col>\r\n \r\n <Col md={6}>\r\n <MonthPicker renderFooter={() => '额外页脚'} placeholder=\"选择月\" />\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo9;\r\n", "desc": " 在浮层中加入额外的页脚，以满足某些定制信息的需求。", "scss_code": ".demo9 {\r\n .u-row .u-col-md-6 {\r\n margin-bottom: 10px;\r\n }\r\n}" }, { "example": _react2['default'].createElement(Demo10, null), "title": " 使用normal格式化", "code": "/**\r\n *\r\n * @title 使用normal格式化\r\n * @description 配合form 使用normal格式化，已 MothPicker 为例\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Form, Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\n\n\r\nconst { MonthPicker } = DatePicker;\r\n\r\n\r\nclass Demo4 extends Component {\r\n submit = (e) => {\r\n this.props.form.validateFields((err, values) => {\r\n if (err) {\r\n console.log('校验失败', values);\r\n } else {\r\n console.log('提交成功', values);\r\n }\r\n });\r\n }\r\n render() {\r\n const { getFieldProps, getFieldError } = this.props.form;\r\n return (\r\n <div>\r\n <Row style={{'marginBottom':'10px'}}>\r\n <Col md={6} style={{'marginBottom':'10px'}}>\r\n <MonthPicker\r\n format=\"YYYY-MM\"\r\n {...getFieldProps('date', {\r\n validateTrigger: 'onBlur',\r\n initialValue:null,\r\n normalize:(value)=>{\r\n if(value&&value.format){\r\n return value.format('YYYY-MM')\r\n }else{\r\n return value\r\n }\r\n },\r\n rules: [{\r\n required: true, message: '请输入日期',\r\n }],\r\n }) }\r\n />\r\n </Col>\r\n <button className=\"u-button\" onClick={this.submit}>获得值</button>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Form.createForm()(Demo4);\r\n", "desc": " 配合form 使用normal格式化，已 MothPicker 为例" }, { "example": _react2['default'].createElement(Demo11, null), "title": " 配合form使用", "code": "/**\r\n *\r\n * @title 配合form使用\r\n * @description 各类型组件配合form使用，注意事项\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Button, Form, Row } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\n\n\n\r\nconst { YearPicker,MonthPicker,WeekPicker,RangePicker } = DatePicker;\r\n\r\nclass Demo11 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n initialValues:{\r\n \r\n } \r\n }\r\n }\r\n\r\n componentWillMount(){\r\n //如果初始值需要接口返回，则需要在组件初始化之前，获得初始值。 这里模拟设置初始值\r\n this.setState({\r\n initialValues:{\r\n date:'2019-02-03',\r\n dateTime:'2009-10-11 12:13:14',\r\n month:'2019-12',\r\n year:'2019',\r\n week:'2019-45',\r\n range:['2019-11-12','2019-12-13']\r\n }\r\n })\r\n }\r\n\r\n\r\n submit = (e) => {\r\n this.props.form.validateFields((err, values) => {\r\n if (err) {\r\n console.log('校验失败', values);\r\n } else {\r\n console.log('提交成功', values);\r\n }\r\n });\r\n }\r\n\r\n change=()=>{\r\n this.setState({\r\n initialValues:{\r\n date:'2020-10-10',\r\n dateTime:'2020-10-10 10:10:10',\r\n month:'2020-10',\r\n year:'2020',\r\n week:'2020-20',\r\n range:['2020-10-10','2020-12-12']\r\n }\r\n })\r\n }\r\n reset=()=>{\r\n //此方法将所有元素还原到初始值。即还原到 componentWillMount 设置的值。\r\n // 注意：this.props.form.resetFields() 并不是清空值，而是还原到 initialValue 的值\r\n this.props.form.resetFields()\r\n }\r\n\r\n render() {\r\n const { getFieldProps, getFieldError } = this.props.form;\r\n return (\r\n <div className='demo11'>\r\n <Row className='demo11-item'>\r\n <DatePicker\r\n format='YYYY-MM-DD'\r\n {\r\n ...getFieldProps('date',{\r\n initialValue:this.state.initialValues.date,\r\n normalize:(value)=>{\r\n if(value&&value.format){\r\n return value.format('YYYY-MM-DD')\r\n }else{\r\n return value\r\n }\r\n },\r\n })\r\n }\r\n />\r\n </Row>\r\n <Row className='demo11-item'>\r\n <DatePicker\r\n format='YYYY-MM-DD hh:mm:ss'\r\n showTime={true}\r\n {\r\n ...getFieldProps('dateTime',{\r\n initialValue:this.state.initialValues.dateTime,\r\n normalize:(value)=>{\r\n if(value&&value.format){\r\n return value.format('YYYY-MM-DD hh:mm:ss')\r\n }else{\r\n return value\r\n }\r\n },\r\n })\r\n }\r\n />\r\n </Row>\r\n <Row className='demo11-item'>\r\n <MonthPicker\r\n format='YYYY-MM'\r\n {\r\n ...getFieldProps('month',{\r\n initialValue:this.state.initialValues.month,\r\n normalize:(value)=>{\r\n if(value&&value.format){\r\n return value.format('YYYY-MM')\r\n }else{\r\n return value\r\n }\r\n },\r\n })\r\n }\r\n />\r\n </Row>\r\n <Row className='demo11-item'>\r\n <YearPicker\r\n format='YYYY'\r\n {\r\n ...getFieldProps('year',{\r\n initialValue:this.state.initialValues.year,\r\n normalize:(value)=>{\r\n if(value&&value.format){\r\n return value.format('YYYY')\r\n }else{\r\n return value\r\n }\r\n },\r\n })\r\n }\r\n />\r\n </Row>\r\n <Row className='demo11-item'>\r\n <WeekPicker\r\n format='YYYY-WW'\r\n {\r\n ...getFieldProps('week',{\r\n initialValue:this.state.initialValues.week,\r\n normalize:(value)=>{\r\n if(value&&value.format){\r\n return value.format('YYYY-WW')\r\n }else{\r\n return value\r\n }\r\n },\r\n })\r\n }\r\n />\r\n </Row>\r\n <Row className='demo11-item'>\r\n <RangePicker\r\n format='YYYY-MM-DD'\r\n {\r\n ...getFieldProps('range',{\r\n initialValue:this.state.initialValues.range,\r\n normalize:(value)=>{\r\n let values = [];\r\n if(value[0]&&value[0].format){\r\n values.push(value[0].format('YYYY-MM-DD')||'')\r\n }else{\r\n values.push(value[0]||'')\r\n }\r\n if(value[1]&&value[1].format){\r\n values.push(value[1].format('YYYY-MM-DD')||'')\r\n }else{\r\n values.push(value[1]||'')\r\n }\r\n return values;\r\n },\r\n })\r\n }\r\n />\r\n </Row>\r\n <Row className='demo11-item'>\r\n <Button className='options-btns' colors='primary' onClick={this.change}>改变初始值</Button>\r\n <Button className='options-btns' colors='primary' onClick={this.submit}>获得所有值</Button>\r\n <Button className='options-btns' colors='primary' onClick={this.reset}>还原所有值</Button>\r\n </Row>\r\n \r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Form.createForm()(Demo11);\r\n", "desc": " 各类型组件配合form使用，注意事项", "scss_code": ".demo11{\r\n >.demo11-item{\r\n margin: 0;\r\n margin-bottom: 20px!important;\r\n .u-button{\r\n margin-right: 20px;\r\n }\r\n }\r\n}" }, { "example": _react2['default'].createElement(Demo12, null), "title": " 多语示例", "code": "/**\r\n *\r\n * @title 多语示例\r\n * @description 设置locale属性，并设置moment语言\r\n */\r\n\r\nimport React, {Component} from \"react\";\nimport { Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\nimport zhCN from \"bee-datepicker/build/locale/zh_CN\";//1、引入日期组件语言包\r\nimport enUS from \"bee-datepicker/build/locale/en_US\";\r\n\r\nimport moment from \"moment\";//2、引入 moment\r\n\r\nmoment.locale('zh-cn');//3、设置moment语言，更多语言参考 http://momentjs.cn/docs/#/i18n/\r\n\r\nconst format = \"YYYY-MM-DD dddd\";\r\n\r\nclass Demo12 extends Component {\r\n \r\n onChange = (d, dataString) => {\r\n console.log('change')\r\n console.log(d, dataString)\r\n };\r\n render() {\r\n return (\r\n <div>\r\n <Row>\r\n <Col md={6}>\r\n <DatePicker\r\n locale={zhCN}//4、将需要的语言包传入到日期组件locale属性\r\n format={format}\r\n onChange={this.onChange}\r\n />\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo12;\r\n", "desc": " 设置locale属性，并设置moment语言" }, { "example": _react2['default'].createElement(Demo13, null), "title": " 设置初始日期选择范围", "code": "/**\r\n *\r\n * @title 设置初始日期选择范围\r\n * @description 设置初始日期选择范围基本实例\r\n */\r\n\r\nimport React, {Component} from \"react\";\nimport { Row, Col } from 'tinper-bee';\r\n\nimport DatePicker from \"bee-datepicker\";\r\nimport moment from \"moment\";\r\n\r\nconst { RangePicker } = DatePicker\r\n\r\nconst format = \"YYYY-MM-DD dddd\";\r\n\r\nclass Demo13 extends Component {\r\n state = {\r\n datePickerPanelValue: '2004-05-09',\r\n rangePickerPanelValues: ['3409-09-02', '7876-10-19'],\r\n dateValue: '2020-02-03',\r\n rangeValue: ['2098-09-02', '2099-08-06']\r\n }\r\n onSelect = d => {\r\n console.log(d);\r\n }\r\n onDateChange = (d) => {\r\n this.setState({\r\n // datePickerPanelValue: null,\r\n dateValue: d\r\n })\r\n };\r\n onRangeChange = (d) => {\r\n this.setState({\r\n rangeValue: d,\r\n // rangePickerPanelValues: null\r\n })\r\n };\r\n render() {\r\n var self = this;\r\n const { value } = this.state\r\n return (\r\n <div>\r\n <Row>\r\n <Col md={6}>\r\n <DatePicker\r\n format={format}\r\n onSelect={this.onSelect}\r\n onChange={this.onDateChange}\r\n panelValue={this.state.datePickerPanelValue}\r\n value={this.state.dateValue}\r\n />\r\n </Col>\r\n <Col md={6} style={{'marginBottom':'10px'}}>\r\n <RangePicker\r\n placeholder={'开始 ~ 结束'}\r\n dateInputPlaceholder={['开始', '结束']}\r\n showClear={true}\r\n onChange={this.onRangeChange}\r\n onPanelChange={(v)=>{console.log('onPanelChange',v)}}\r\n showClose={true}\r\n onStartInputBlur={this.onStartInputBlur}\r\n onEndInputBlur={this.onEndInputBlur}\r\n panelValues={this.state.rangePickerPanelValues}\r\n value={this.state.rangeValue}\r\n />\r\n </Col>\r\n </Row>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo13;\r\n", "desc": " 设置初始日期选择范围基本实例" }];
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) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
var nativeCodeString = '[native code]';
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)) {
if (arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
}
} else if (argType === 'object') {
if