'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _MultiPicker = require('rmc-picker/lib/MultiPicker'); var _MultiPicker2 = _interopRequireDefault(_MultiPicker); var _Picker = require('rmc-picker/lib/Picker'); var _Picker2 = _interopRequireDefault(_Picker); var _en_US = require('./locale/en_US'); var _en_US2 = _interopRequireDefault(_en_US); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function getDaysInMonth(date) { return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); } function pad(n) { return n < 10 ? '0' + n : n + ''; } function cloneDate(date) { return new Date(+date); } function setMonth(date, month) { date.setDate(Math.min(date.getDate(), getDaysInMonth(new Date(date.getFullYear(), month)))); date.setMonth(month); } var DATETIME = 'datetime'; var DATE = 'date'; var TIME = 'time'; var MONTH = 'month'; var YEAR = 'year'; var ONE_DAY = 24 * 60 * 60 * 1000; var DatePicker = function (_React$Component) { (0, _inherits3['default'])(DatePicker, _React$Component); function DatePicker() { (0, _classCallCheck3['default'])(this, DatePicker); var _this = (0, _possibleConstructorReturn3['default'])(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).apply(this, arguments)); _this.state = { date: _this.props.date || _this.props.defaultDate }; _this.getNewDate = function (values, index) { var value = parseInt(values[index], 10); var props = _this.props; var mode = props.mode; var newValue = cloneDate(_this.getDate()); if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) { switch (index) { case 0: newValue.setFullYear(value); break; case 1: // Note: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth // e.g. from 2017-03-31 to 2017-02-28 setMonth(newValue, value); break; case 2: newValue.setDate(value); break; case 3: _this.setHours(newValue, value); break; case 4: newValue.setMinutes(value); break; case 5: _this.setAmPm(newValue, value); break; default: break; } } else if (mode === TIME) { switch (index) { case 0: _this.setHours(newValue, value); break; case 1: newValue.setMinutes(value); break; case 2: _this.setAmPm(newValue, value); break; default: break; } } return _this.clipDate(newValue); }; _this.onValueChange = function (values, index) { var props = _this.props; var newValue = _this.getNewDate(values, index); if (!('date' in props)) { _this.setState({ date: newValue }); } if (props.onDateChange) { props.onDateChange(newValue); } if (props.onValueChange) { props.onValueChange(values, index); } }; _this.onScrollChange = function (values, index) { var props = _this.props; if (props.onScrollChange) { var newValue = _this.getNewDate(values, index); props.onScrollChange(newValue, values, index); } }; return _this; } (0, _createClass3['default'])(DatePicker, [{ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { if ('date' in nextProps) { this.setState({ date: nextProps.date || nextProps.defaultDate }); } } }, { key: 'setHours', value: function setHours(date, hour) { if (this.props.use12Hours) { var dh = date.getHours(); var nhour = hour; nhour = dh >= 12 ? hour + 12 : hour; nhour = nhour >= 24 ? 0 : nhour; // Make sure no more than one day date.setHours(nhour); } else { date.setHours(hour); } } }, { key: 'setAmPm', value: function setAmPm(date, index) { if (index === 0) { date.setTime(+date - ONE_DAY / 2); } else { date.setTime(+date + ONE_DAY / 2); } } }, { key: 'getDefaultMinDate', value: function getDefaultMinDate() { if (!this.defaultMinDate) { this.defaultMinDate = new Date(2000, 1, 1, 0, 0, 0); } return this.defaultMinDate; } }, { key: 'getDefaultMaxDate', value: function getDefaultMaxDate() { if (!this.defaultMaxDate) { this.defaultMaxDate = new Date(2030, 1, 1, 23, 59, 59); } return this.defaultMaxDate; } }, { key: 'getDate', value: function getDate() { return this.clipDate(this.state.date || this.getDefaultMinDate()); } // used by rmc-picker/lib/PopupMixin.js }, { key: 'getValue', value: function getValue() { return this.getDate(); } }, { key: 'getMinYear', value: function getMinYear() { return this.getMinDate().getFullYear(); } }, { key: 'getMaxYear', value: function getMaxYear() { return this.getMaxDate().getFullYear(); } }, { key: 'getMinMonth', value: function getMinMonth() { return this.getMinDate().getMonth(); } }, { key: 'getMaxMonth', value: function getMaxMonth() { return this.getMaxDate().getMonth(); } }, { key: 'getMinDay', value: function getMinDay() { return this.getMinDate().getDate(); } }, { key: 'getMaxDay', value: function getMaxDay() { return this.getMaxDate().getDate(); } }, { key: 'getMinHour', value: function getMinHour() { return this.getMinDate().getHours(); } }, { key: 'getMaxHour', value: function getMaxHour() { return this.getMaxDate().getHours(); } }, { key: 'getMinMinute', value: function getMinMinute() { return this.getMinDate().getMinutes(); } }, { key: 'getMaxMinute', value: function getMaxMinute() { return this.getMaxDate().getMinutes(); } }, { key: 'getMinDate', value: function getMinDate() { return this.props.minDate || this.getDefaultMinDate(); } }, { key: 'getMaxDate', value: function getMaxDate() { return this.props.maxDate || this.getDefaultMaxDate(); } }, { key: 'getDateData', value: function getDateData() { var _props = this.props, locale = _props.locale, formatMonth = _props.formatMonth, formatDay = _props.formatDay, mode = _props.mode; var date = this.getDate(); var selYear = date.getFullYear(); var selMonth = date.getMonth(); var minDateYear = this.getMinYear(); var maxDateYear = this.getMaxYear(); var minDateMonth = this.getMinMonth(); var maxDateMonth = this.getMaxMonth(); var minDateDay = this.getMinDay(); var maxDateDay = this.getMaxDay(); var years = []; for (var i = minDateYear; i <= maxDateYear; i++) { years.push({ value: i + '', label: i + locale.year + '' }); } var yearCol = { key: 'year', props: { children: years } }; if (mode === YEAR) { return [yearCol]; } var months = []; var minMonth = 0; var maxMonth = 11; if (minDateYear === selYear) { minMonth = minDateMonth; } if (maxDateYear === selYear) { maxMonth = maxDateMonth; } for (var _i = minMonth; _i <= maxMonth; _i++) { var label = formatMonth ? formatMonth(_i, date) : _i + 1 + locale.month + ''; months.push({ value: _i + '', label: label }); } var monthCol = { key: 'month', props: { children: months } }; if (mode === MONTH) { return [yearCol, monthCol]; } var days = []; var minDay = 1; var maxDay = getDaysInMonth(date); if (minDateYear === selYear && minDateMonth === selMonth) { minDay = minDateDay; } if (maxDateYear === selYear && maxDateMonth === selMonth) { maxDay = maxDateDay; } for (var _i2 = minDay; _i2 <= maxDay; _i2++) { var _label = formatDay ? formatDay(_i2, date) : _i2 + locale.day + ''; days.push({ value: _i2 + '', label: _label }); } return [yearCol, monthCol, { key: 'day', props: { children: days } }]; } }, { key: 'getDisplayHour', value: function getDisplayHour(rawHour) { // 12 hour am (midnight 00:00) -> 12 hour pm (noon 12:00) -> 12 hour am (midnight 00:00) if (this.props.use12Hours) { if (rawHour === 0) { rawHour = 12; } if (rawHour > 12) { rawHour -= 12; } return rawHour; } return rawHour; } }, { key: 'getTimeData', value: function getTimeData(date) { var _props2 = this.props, _props2$minHour = _props2.minHour, minHour = _props2$minHour === undefined ? 0 : _props2$minHour, _props2$maxHour = _props2.maxHour, maxHour = _props2$maxHour === undefined ? 23 : _props2$maxHour, _props2$minMinute = _props2.minMinute, minMinute = _props2$minMinute === undefined ? 0 : _props2$minMinute, _props2$maxMinute = _props2.maxMinute, maxMinute = _props2$maxMinute === undefined ? 59 : _props2$maxMinute; var _props3 = this.props, mode = _props3.mode, locale = _props3.locale, minuteStep = _props3.minuteStep, use12Hours = _props3.use12Hours; var minDateMinute = this.getMinMinute(); var maxDateMinute = this.getMaxMinute(); var minDateHour = this.getMinHour(); var maxDateHour = this.getMaxHour(); var hour = date.getHours(); if (mode === DATETIME) { var year = date.getFullYear(); var month = date.getMonth(); var day = date.getDate(); var minDateYear = this.getMinYear(); var maxDateYear = this.getMaxYear(); var minDateMonth = this.getMinMonth(); var maxDateMonth = this.getMaxMonth(); var minDateDay = this.getMinDay(); var maxDateDay = this.getMaxDay(); if (minDateYear === year && minDateMonth === month && minDateDay === day) { minHour = minDateHour; if (minDateHour === hour) { minMinute = minDateMinute; } } if (maxDateYear === year && maxDateMonth === month && maxDateDay === day) { maxHour = maxDateHour; if (maxDateHour === hour) { maxMinute = maxDateMinute; } } } else { minHour = minDateHour; if (minDateHour === hour) { minMinute = minDateMinute; } maxHour = maxDateHour; if (maxDateHour === hour) { maxMinute = maxDateMinute; } } var hours = []; if (minHour === 0 && maxHour === 0 || minHour !== 0 && maxHour !== 0) { minHour = this.getDisplayHour(minHour); } else if (minHour === 0 && use12Hours) { minHour = 1; hours.push({ value: '0', label: locale.hour ? '12' + locale.hour : '12' }); } maxHour = this.getDisplayHour(maxHour); for (var i = minHour; i <= maxHour; i++) { hours.push({ value: i + '', label: locale.hour ? i + locale.hour + '' : pad(i) }); } var minutes = []; var selMinute = date.getMinutes(); for (var _i3 = minMinute; _i3 <= maxMinute; _i3 += minuteStep) { minutes.push({ value: _i3 + '', label: locale.minute ? _i3 + locale.minute + '' : pad(_i3) }); if (selMinute > _i3 && selMinute < _i3 + minuteStep) { minutes.push({ value: selMinute + '', label: locale.minute ? selMinute + locale.minute + '' : pad(selMinute) }); } } var cols = [{ key: 'hours', props: { children: hours } }, { key: 'minutes', props: { children: minutes } }].concat(use12Hours ? [{ key: 'ampm', props: { children: [{ value: '0', label: locale.am }, { value: '1', label: locale.pm }] } }] : []); return { cols: cols, selMinute: selMinute }; } }, { key: 'clipDate', value: function clipDate(date) { var mode = this.props.mode; var minDate = this.getMinDate(); var maxDate = this.getMaxDate(); if (mode === DATETIME) { if (date < minDate) { return cloneDate(minDate); } if (date > maxDate) { return cloneDate(maxDate); } } else if (mode === DATE || mode === YEAR || mode === MONTH) { // compare-two-dates: https://stackoverflow.com/a/14629978/2190503 if (+date + ONE_DAY <= minDate) { return cloneDate(minDate); } if (date >= +maxDate + ONE_DAY) { return cloneDate(maxDate); } } else if (mode === TIME) { var maxHour = maxDate.getHours(); var maxMinutes = maxDate.getMinutes(); var minHour = minDate.getHours(); var minMinutes = minDate.getMinutes(); var hour = date.getHours(); var minutes = date.getMinutes(); if (hour < minHour || hour === minHour && minutes < minMinutes) { return cloneDate(minDate); } if (hour > maxHour || hour === maxHour && minutes > maxMinutes) { return cloneDate(maxDate); } } return date; } }, { key: 'getValueCols', value: function getValueCols() { var _props4 = this.props, mode = _props4.mode, use12Hours = _props4.use12Hours; var date = this.getDate(); var cols = []; var value = []; if (mode === YEAR) { return { cols: this.getDateData(), value: [date.getFullYear() + ''] }; } if (mode === MONTH) { return { cols: this.getDateData(), value: [date.getFullYear() + '', date.getMonth() + ''] }; } if (mode === DATETIME || mode === DATE) { cols = this.getDateData(); value = [date.getFullYear() + '', date.getMonth() + '', date.getDate() + '']; } if (mode === DATETIME || mode === TIME) { var time = this.getTimeData(date); cols = cols.concat(time.cols); var hour = date.getHours(); var dtValue = [hour + '', time.selMinute + '']; var nhour = hour; if (use12Hours) { nhour = hour > 12 ? hour - 12 : hour; dtValue = [nhour + '', time.selMinute + '', (hour >= 12 ? 1 : 0) + '']; } value = value.concat(dtValue); } return { value: value, cols: cols }; } }, { key: 'render', value: function render() { var _getValueCols = this.getValueCols(), value = _getValueCols.value, cols = _getValueCols.cols; var _props5 = this.props, disabled = _props5.disabled, pickerPrefixCls = _props5.pickerPrefixCls, prefixCls = _props5.prefixCls, rootNativeProps = _props5.rootNativeProps, className = _props5.className, style = _props5.style, itemStyle = _props5.itemStyle; var multiStyle = (0, _extends3['default'])({ flexDirection: 'row', alignItems: 'center' }, style); return _react2['default'].createElement(_MultiPicker2['default'], { style: multiStyle, rootNativeProps: rootNativeProps, className: className, prefixCls: prefixCls, selectedValue: value, onValueChange: this.onValueChange, onScrollChange: this.onScrollChange }, cols.map(function (p) { return _react2['default'].createElement(_Picker2['default'], { style: { flex: 1 }, key: p.key, disabled: disabled, prefixCls: pickerPrefixCls, itemStyle: itemStyle }, p.props.children.map(function (item) { return _react2['default'].createElement(_Picker2['default'].Item, { key: item.value, value: item.value }, item.label); })); })); } }]); return DatePicker; }(_react2['default'].Component); DatePicker.defaultProps = { prefixCls: 'rmc-date-picker', pickerPrefixCls: 'rmc-picker', locale: _en_US2['default'], mode: DATE, disabled: false, minuteStep: 1, onDateChange: function onDateChange() {}, use12Hours: false }; exports['default'] = DatePicker; module.exports = exports['default'];