UNPKG

zent

Version:

一套前端设计语言和基于React的实现

280 lines (240 loc) 9.72 kB
'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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _class, _temp, _initialiseProps; var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _classnames = require('zent-utils/classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _DatePanel = require('./date/DatePanel'); var _DatePanel2 = _interopRequireDefault(_DatePanel); var _PanelFooter = require('./common/PanelFooter'); var _PanelFooter2 = _interopRequireDefault(_PanelFooter); var _utils = require('./utils'); var _format = require('./utils/format'); var _clickOutside = require('./utils/clickOutside'); var _clickOutside2 = _interopRequireDefault(_clickOutside); var _constants = require('./constants/'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': 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) : subClass.__proto__ = superClass; } var returnType = 'string'; var DatePicker = (_temp = _class = function (_Component) { _inherits(DatePicker, _Component); function DatePicker(props) { _classCallCheck(this, DatePicker); var _this = _possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call(this, props)); _initialiseProps.call(_this); var showPlaceholder = void 0; var selected = void 0; var actived = void 0; if (props.value) { if (typeof props.value === 'number') returnType = 'numer'; if (props.value instanceof Date) returnType = 'date'; var tmpDate = (0, _format.parseDate)(props.value, props.format); if (!tmpDate) { showPlaceholder = true; actived = new Date(); } else { showPlaceholder = false; actived = selected = tmpDate; } } else { showPlaceholder = true; actived = new Date(); } _this.state = { value: selected && (0, _format.formatDate)(selected, props.format), actived: actived, selected: selected, activedTime: actived, openPanel: false, showPlaceholder: showPlaceholder }; return _this; } _createClass(DatePicker, [{ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(next) { if (next.value) { var showPlaceholder = false; var selected = (0, _format.parseDate)(next.value, next.format || this.props.format); this.setState({ value: (0, _format.formatDate)(selected, next.format || this.props.format), actived: selected, selected: selected, activedTime: selected, openPanel: false, showPlaceholder: showPlaceholder }); } else { var _showPlaceholder = true; var actived = new Date(); this.setState({ value: '', actived: actived, selected: '', activedTime: actived, openPanel: false, showPlaceholder: _showPlaceholder }); } } }, { key: 'getReturnValue', value: function getReturnValue(date, format) { if (returnType === 'numer') { return date.getTime(); } else if (returnType === 'date') { return date; } else if (returnType === 'string') { return (0, _format.formatDate)(date, format); } } }, { key: 'render', value: function render() { var _this2 = this; var state = this.state; var props = this.props; var prefixCls = props.prefix + '-datetime-picker ' + props.className; var inputCls = (0, _classnames2['default'])({ 'picker-input': true, 'picker-input--filled': !state.showPlaceholder, 'picker-input--disabled': props.disabled }); var showTime = void 0; var datePicker = void 0; if (props.showTime) { showTime = _extends({}, { actived: state.activedTime, format: _constants.TIME_PROPS.format, disabledTime: _constants.TIME_PROPS.disabledTime }, props.showTime || {}, { disabledTime: props.disabledTime && props.disabledTime(), onChange: this.onChangeTime }); } if (state.openPanel) { var linkCls = (0, _classnames2['default'])({ 'link--current': true, 'link--disabled': this.isDisabled(_utils.CURRENT_DAY) }); datePicker = _react2['default'].createElement( 'div', { className: 'date-picker' }, _react2['default'].createElement(_DatePanel2['default'], { showTime: showTime, actived: state.actived, selected: state.selected, disabledDate: this.isDisabled, onSelect: this.onSelectDate, onChange: this.onChangeDate }), _react2['default'].createElement(_PanelFooter2['default'], { linkText: '\u4ECA\u5929', linkCls: linkCls, onClickLink: function onClickLink() { return _this2.onSelectDate(_utils.CURRENT_DAY); }, onClickButton: this.onConfirm }) ); } return _react2['default'].createElement( 'div', { className: prefixCls, ref: function ref(_ref) { return _this2.picker = _ref; } }, _react2['default'].createElement( 'div', { className: 'picker-wrapper' }, _react2['default'].createElement( 'div', { className: inputCls, onClick: this.onClickInput }, state.showPlaceholder ? props.placeholder : state.value, _react2['default'].createElement('span', { className: 'zenticon zenticon-calendar-o' }), _react2['default'].createElement('span', { onClick: this.onClearInput, className: 'zenticon zenticon-close-circle' }) ), state.openPanel ? datePicker : '' ) ); } }]); return DatePicker; }(_react.Component), _class.defaultProps = _constants.DATE_PROPS, _initialiseProps = function _initialiseProps() { var _this3 = this; this.clickOutside = function (e) { if (!_this3.picker.contains(e.target)) { _this3.setState({ openPanel: false }); } }; this.onChangeDate = function (val) { _this3.setState({ actived: val }); }; this.onSelectDate = function (val) { if (_this3.isDisabled(val)) { return; } _this3.setState({ actived: val, selected: val }); }; this.isDisabled = function (val) { var props = _this3.props; if (props.disabledDate && props.disabledDate(val)) return true; if (props.min && val < new Date(props.min)) return true; if (props.max && val > new Date(props.max)) return true; return false; }; this.onChangeTime = function (val) { _this3.setState({ activedTime: val }); }; this.onClickInput = function () { if (_this3.props.disabled) return; _this3.setState({ openPanel: !_this3.state.openPanel }); }; this.onClearInput = function () { _this3.props.onChange(''); }; this.onConfirm = function () { var _state = _this3.state, selected = _state.selected, activedTime = _state.activedTime; var _props = _this3.props, format = _props.format, showTime = _props.showTime; var value = void 0; var ret = void 0; if (!selected) return; if (showTime) { var tmp = new Date(selected.getFullYear(), selected.getMonth(), selected.getDate(), activedTime.getHours(), activedTime.getMinutes(), activedTime.getSeconds()); value = (0, _format.formatDate)(tmp, format); ret = _this3.getReturnValue(tmp, format); } else { value = (0, _format.formatDate)(selected, format); ret = _this3.getReturnValue(selected, format); } _this3.setState({ value: value, openPanel: false, showPlaceholder: false }); _this3.props.onChange(ret); }; }, _temp); exports['default'] = (0, _clickOutside2['default'])(DatePicker); module.exports = exports['default'];