@gem-mine/rmc-calendar
Version:
React Mobile Calendar Component(web and react-native)
390 lines (333 loc) • 18.3 kB
JavaScript
'use strict';
exports.__esModule = true;
exports.StateType = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _rcAnimate = require('rc-animate');
var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
var _DatePicker = require('./DatePicker');
var _DatePicker2 = _interopRequireDefault(_DatePicker);
var _CalendarPanel = require('./panel/CalendarPanel');
var _CalendarPanel2 = _interopRequireDefault(_CalendarPanel);
var _CalendarPanel3 = require('./panel/CalendarPanel.swiper');
var _CalendarPanel4 = _interopRequireDefault(_CalendarPanel3);
var _ConfirmPanel = require('./panel/ConfirmPanel');
var _ConfirmPanel2 = _interopRequireDefault(_ConfirmPanel);
var _AnimateWrapper = require('./panel/AnimateWrapper');
var _AnimateWrapper2 = _interopRequireDefault(_AnimateWrapper);
var _Header = require('./panel/Header');
var _Header2 = _interopRequireDefault(_Header);
var _util = require('./util');
var _zh_CN = require('./locale/zh_CN');
var _zh_CN2 = _interopRequireDefault(_zh_CN);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var StateType = exports.StateType = function StateType() {
(0, _classCallCheck3['default'])(this, StateType);
this.returnToday = false;
this.showDatePicker = false;
this.showDate = undefined;
this.startDate = undefined;
this.endDate = undefined;
this.disConfirmBtn = true;
this.clientHight = 0;
};
var Calendar = function (_React$PureComponent) {
(0, _inherits3['default'])(Calendar, _React$PureComponent);
function Calendar(props) {
(0, _classCallCheck3['default'])(this, Calendar);
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$PureComponent.call(this, props));
_this.state = new StateType();
_this.selectDate = function (date) {
var oldState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.props;
if (!date) return {};
var newState = {};
var type = props.type;
var startDate = oldState.startDate,
endDate = oldState.endDate;
switch (type) {
case 'one':
newState = (0, _extends3['default'])({}, newState, { startDate: date, disConfirmBtn: false });
break;
case 'range':
if (!startDate || endDate) {
newState = (0, _extends3['default'])({}, newState, { startDate: date, endDate: undefined, disConfirmBtn: true });
} else {
newState = (0, _extends3['default'])({}, newState, { disConfirmBtn: false, endDate: date });
}
break;
}
return newState;
};
_this.onSelectedDate = function (date) {
var _this$state = _this.state,
startDate = _this$state.startDate,
endDate = _this$state.endDate;
var onSelect = _this.props.onSelect;
onSelect && onSelect(date, [startDate, endDate]);
_this.setState(_this.selectDate(date, { startDate: startDate, endDate: endDate }));
};
_this.onSelectMonth = function () {
_this.setState({
showDatePicker: true
});
};
_this.onClose = function () {
_this.setState(new StateType(), function () {
if (_this.bodyElement && _this.documentElement && _this.originStyle) {
var _this$originStyle = _this.originStyle,
position = _this$originStyle.position,
overflowY = _this$originStyle.overflowY,
height = _this$originStyle.height,
width = _this$originStyle.width,
marginTop = _this$originStyle.marginTop,
scrollTop = _this$originStyle.scrollTop;
_this.bodyElement.style.position = position;
_this.bodyElement.style.overflowY = overflowY;
_this.bodyElement.style.width = height;
_this.bodyElement.style.height = width;
_this.bodyElement.style.marginTop = marginTop;
_this.documentElement.scrollTop = scrollTop;
}
});
};
_this.onCancel = function () {
_this.props.onCancel && _this.props.onCancel();
_this.onClose();
};
_this.onOk = function () {
var onOk = _this.props.onOk;
var _this$state2 = _this.state,
startDate = _this$state2.startDate,
endDate = _this$state2.endDate;
if (startDate && endDate && +startDate > +endDate) {
onOk && onOk(endDate, startDate);
_this.onClose();
return;
}
onOk && onOk(startDate, endDate);
_this.onClose();
};
_this.onTimeOk = function (date) {
var locale = _this.props.locale;
_this.setState({
showDatePicker: false,
showDate: date,
headerTitle: (0, _util.formatDate)(date, locale ? locale.monthTitle : 'yyyy/MM', locale)
});
};
_this.onTimeCancel = function () {
_this.setState({
showDatePicker: false
});
};
_this.onChangeShowDateInfo = function () {
var showDate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Date();
var headerTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
_this.setState({ showDate: showDate, headerTitle: headerTitle });
};
_this.onChangeMonth = function (monthData) {
var firstDate = monthData.firstDate,
title = monthData.title;
_this.setState({ showDate: firstDate, headerTitle: title });
};
_this.onComeToday = function () {
var _this$props = _this.props,
locale = _this$props.locale,
type = _this$props.type,
_this$props$firstDayO = _this$props.firstDayOfMonth,
firstDayOfMonth = _this$props$firstDayO === undefined ? 1 : _this$props$firstDayO;
var today = new Date();
var showDate = _this.getShowDate(today, firstDayOfMonth);
_this.setState({
showDate: showDate,
startDate: today,
endDate: type === 'one' ? undefined : today,
returnToday: true,
disConfirmBtn: false,
headerTitle: (0, _util.formatDate)(showDate, locale ? locale.monthTitle : 'yyyy/MM', locale)
}, function () {
_this.setState({ returnToday: false });
});
};
_this.onClear = function () {
_this.setState({
startDate: undefined,
endDate: undefined,
showDatePicker: false,
showDate: new Date(),
disConfirmBtn: true
});
_this.props.onClear && _this.props.onClear();
};
_this.setClientHeight = function (height) {
_this.setState({
clientHight: height
});
};
_this.getShowDate = function (defaultDate, firstDayOfMonth) {
var startMonthNum = defaultDate.getMonth();
var startDateNum = defaultDate.getDate();
return startDateNum >= firstDayOfMonth ? defaultDate : new Date(defaultDate.getFullYear(), startMonthNum - 1, firstDayOfMonth);
};
var locale = props.locale,
_props$firstDayOfMont = props.firstDayOfMonth,
firstDayOfMonth = _props$firstDayOfMont === undefined ? 1 : _props$firstDayOfMont;
var value = props.value || props.defaultValue;
var showDate = void 0;
if (value && value.length > 0 && value[0]) {
showDate = _this.getShowDate(value[0], firstDayOfMonth);
_this.state = (0, _extends3['default'])({}, _this.state, { showDate: showDate, disConfirmBtn: false }, _this.selectDate(value[1], { startDate: value[0], headerTitle: (0, _util.formatDate)(showDate, locale ? locale.monthTitle : 'yyyy/MM', locale), returnToday: false }, props));
} else {
showDate = _this.getShowDate(new Date(), firstDayOfMonth);
_this.state = (0, _extends3['default'])({}, _this.state, { headerTitle: (0, _util.formatDate)(showDate, locale ? locale.monthTitle : 'yyyy/MM', locale), showDate: showDate });
}
return _this;
}
Calendar.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var locale = nextProps.locale,
_nextProps$firstDayOf = nextProps.firstDayOfMonth,
firstDayOfMonth = _nextProps$firstDayOf === undefined ? 1 : _nextProps$firstDayOf;
var value = nextProps.value || nextProps.defaultValue;
if (!value) return;
var showDate = void 0;
if (value.length > 0 && value[0]) {
showDate = this.getShowDate(value[0], firstDayOfMonth);
this.setState((0, _extends3['default'])({ startDate: value[0], showDate: showDate, disConfirmBtn: false, headerTitle: (0, _util.formatDate)(showDate, locale ? locale.monthTitle : 'yyyy/MM', locale) }, this.selectDate(value[1], { startDate: value[0], returnToday: false }, nextProps)));
} else if (value.length === 0) {
showDate = this.getShowDate(new Date(), firstDayOfMonth);
this.setState({
showDate: showDate,
startDate: undefined,
endDate: undefined,
headerTitle: (0, _util.formatDate)(showDate, locale ? locale.monthTitle : 'yyyy/MM', locale)
});
}
if (this.bodyElement && this.documentElement && nextProps.visible) {
var _bodyElement$style = this.bodyElement.style,
position = _bodyElement$style.position,
overflowY = _bodyElement$style.overflowY,
height = _bodyElement$style.height,
width = _bodyElement$style.width,
marginTop = _bodyElement$style.marginTop;
var scrollTop = this.documentElement.scrollTop;
this.originStyle = { position: position, overflowY: overflowY, height: height, width: width, marginTop: marginTop, scrollTop: scrollTop };
this.bodyElement.style.position = 'fixed';
this.bodyElement.style.overflowY = 'hidden';
this.bodyElement.style.width = '100%';
this.bodyElement.style.height = '100%';
this.bodyElement.style.marginTop = -scrollTop + 'px';
}
};
Calendar.prototype.componentDidMount = function componentDidMount() {
this.bodyElement = document.body;
this.documentElement = document.documentElement;
};
Calendar.prototype.componentWillUnmount = function componentWillUnmount() {
if (this.bodyElement && this.documentElement && this.originStyle) {
var _originStyle = this.originStyle,
position = _originStyle.position,
overflowY = _originStyle.overflowY,
height = _originStyle.height,
width = _originStyle.width,
marginTop = _originStyle.marginTop,
scrollTop = _originStyle.scrollTop;
this.bodyElement.style.position = position;
this.bodyElement.style.overflowY = overflowY;
this.bodyElement.style.width = height;
this.bodyElement.style.height = width;
this.bodyElement.style.marginTop = marginTop;
this.bodyElement = null;
this.documentElement.scrollTop = scrollTop;
this.documentElement = null;
}
};
Calendar.prototype.render = function render() {
var _this2 = this;
var _props = this.props,
type = _props.type,
_props$locale = _props.locale,
locale = _props$locale === undefined ? {} : _props$locale,
prefixCls = _props.prefixCls,
visible = _props.visible,
infinite = _props.infinite,
swiper = _props.swiper,
showBeginEndInfo = _props.showBeginEndInfo,
initalMonths = _props.initalMonths,
_props$validRange = _props.validRange,
validRange = _props$validRange === undefined ? [] : _props$validRange,
disabledDate = _props.disabledDate,
renderDateCellExtra = _props.renderDateCellExtra,
renderDateFullCell = _props.renderDateFullCell,
renderConfirm = _props.renderConfirm,
datePickerPrefixCls = _props.datePickerPrefixCls,
datePickerPickerPrefixCls = _props.datePickerPickerPrefixCls,
style = _props.style,
title = _props.title,
firstDayOfMonth = _props.firstDayOfMonth,
firstDayOfWeek = _props.firstDayOfWeek;
var _state = this.state,
returnToday = _state.returnToday,
showDatePicker = _state.showDatePicker,
startDate = _state.startDate,
endDate = _state.endDate,
showDate = _state.showDate,
headerTitle = _state.headerTitle,
disConfirmBtn = _state.disConfirmBtn,
clientHight = _state.clientHight;
return _react2['default'].createElement(
'div',
{ className: '' + prefixCls, style: style },
_react2['default'].createElement(
_rcAnimate2['default'],
{ showProp: 'visible', transitionName: 'fade' },
_react2['default'].createElement(_AnimateWrapper2['default'], { className: 'mask', visible: !!visible, onClose: this.onCancel })
),
_react2['default'].createElement(
_rcAnimate2['default'],
{ showProp: 'visible', transitionName: 'slideV' },
_react2['default'].createElement(
_AnimateWrapper2['default'],
{ className: 'content ' + (swiper && 'calendar-swiper'), visible: !!visible && !showDatePicker },
_react2['default'].createElement(_Header2['default'], { locale: locale, headerTitle: headerTitle, showClear: !!startDate, onClear: this.onClear, onComeToday: this.onComeToday, onSelectMonth: this.onSelectMonth }),
!returnToday && (swiper ? _react2['default'].createElement(_CalendarPanel4['default'], { ref: function ref(node) {
return _this2.datePicker = node;
}, locale: locale, type: type, prefixCls: prefixCls, initalMonths: 3, swiper: swiper, showBeginEndInfo: showBeginEndInfo, defaultDate: showDate, minDate: validRange[0], maxDate: validRange[1], onLayout: this.setClientHeight, startDate: startDate, endDate: endDate, firstDayOfMonth: firstDayOfMonth, firstDayOfWeek: firstDayOfWeek, disabledDate: disabledDate, renderDateCellExtra: renderDateCellExtra, renderDateFullCell: renderDateFullCell, onChangeShowDateInfo: this.onChangeShowDateInfo, onSlider: this.onChangeMonth, onCellClick: this.onSelectedDate }) : _react2['default'].createElement(_CalendarPanel2['default'], { ref: function ref(node) {
return _this2.datePicker = node;
}, locale: locale, type: type, prefixCls: prefixCls, infinite: infinite, initalMonths: initalMonths, showBeginEndInfo: showBeginEndInfo, defaultDate: showDate, minDate: validRange[0], maxDate: validRange[1], onLayout: this.setClientHeight, startDate: startDate, endDate: endDate, firstDayOfMonth: firstDayOfMonth, firstDayOfWeek: firstDayOfWeek, disabledDate: disabledDate, renderDateCellExtra: renderDateCellExtra, renderDateFullCell: renderDateFullCell, onChangeShowDateInfo: this.onChangeShowDateInfo, onCellClick: this.onSelectedDate })),
_react2['default'].createElement(_ConfirmPanel2['default'], { type: type, locale: locale, startDateTime: startDate, endDateTime: endDate, renderConfirm: renderConfirm, onOk: this.onOk, onCancel: this.onCancel, disableBtn: disConfirmBtn, formatStr: locale.dateFormat })
)
),
_react2['default'].createElement(
_rcAnimate2['default'],
{ showProp: 'visible', transitionName: 'slideV' },
_react2['default'].createElement(
_AnimateWrapper2['default'],
{ className: 'picker', visible: !!showDatePicker },
_react2['default'].createElement(_DatePicker2['default'], { prefixCls: datePickerPrefixCls, pickerPrefixCls: datePickerPickerPrefixCls, locale: locale, title: title, defaultValue: showDate, minDate: validRange[0], maxDate: validRange[1], clientHeight: clientHight, onTimeOk: this.onTimeOk, onCancel: this.onTimeCancel })
)
)
);
};
return Calendar;
}(_react2['default'].PureComponent);
exports['default'] = Calendar;
Calendar.DefaultHeader = _Header2['default'];
Calendar.defaultProps = {
visible: false,
showHeader: true,
locale: _zh_CN2['default'],
prefixCls: 'rmc-calendar',
type: 'one',
value: [],
validRange: [new Date(1900, 0, 1, 0, 0, 0), new Date(2100, 11, 31, 23, 59, 59)],
firstDayOfMonth: 1
};