@gem-mine/rmc-calendar
Version:
React Mobile Calendar Component(web and react-native)
249 lines (224 loc) • 11.4 kB
JavaScript
'use strict';
exports.__esModule = true;
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
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 React = _interopRequireWildcard(_react);
var _DataTypes = require('./DataTypes');
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var SingleMonth = function (_React$PureComponent) {
(0, _inherits3['default'])(SingleMonth, _React$PureComponent);
function SingleMonth(props) {
(0, _classCallCheck3['default'])(this, SingleMonth);
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$PureComponent.call(this, props));
_this.genWeek = function (weeksData, index) {
var _this$props = _this.props,
renderDateCellExtra = _this$props.renderDateCellExtra,
renderDateFullCell = _this$props.renderDateFullCell,
monthData = _this$props.monthData,
onCellClick = _this$props.onCellClick,
locale = _this$props.locale,
today = _this$props.today,
disabledDate = _this$props.disabledDate,
_this$props$showBegin = _this$props.showBeginEndInfo,
showBeginEndInfo = _this$props$showBegin === undefined ? true : _this$props$showBegin;
_this.state.weekComponents[index] = React.createElement(
'div',
{ key: index, className: 'row' },
weeksData.map(function (day, dayOfWeek) {
var extra = renderDateCellExtra && renderDateCellExtra(new Date(day.tick)) || {};
var info = extra.info;
var superscrip = extra.superscrip;
var disable = extra.disable || day.outOfDate || disabledDate && disabledDate(new Date(day.tick));
var cls = 'date';
var lCls = 'left';
var rCls = 'right';
var infoCls = 'info';
var superscripCls = 'superscrip';
superscripCls += extra.superscripCls ? ' ' + extra.superscripCls : '';
if (disable) {
cls += ' disable';
}
if (today && +today === day.tick) {
cls += ' today';
}
if (day.selected) {
cls += ' date-selected';
var styleType = day.selected;
switch (styleType) {
case _DataTypes.Models.SelectType.Only:
if (!showBeginEndInfo) break;
info = locale.begin;
infoCls += ' date-selected';
superscripCls += ' date-selected';
break;
case _DataTypes.Models.SelectType.All:
if (!showBeginEndInfo) break;
info = locale.begin_over;
infoCls += ' date-selected';
superscripCls += ' date-selected';
break;
case _DataTypes.Models.SelectType.Start:
if (!showBeginEndInfo) break;
info = locale.begin;
infoCls += ' date-selected';
superscripCls += ' date-selected';
if (dayOfWeek === 6 || day.isLastOfMonth) {
styleType = _DataTypes.Models.SelectType.All;
}
break;
case _DataTypes.Models.SelectType.Middle:
if (dayOfWeek === 0 || day.isFirstOfMonth) {
if (day.isLastOfMonth || dayOfWeek === 6) {
styleType = _DataTypes.Models.SelectType.All;
} else {
styleType = _DataTypes.Models.SelectType.Start;
}
} else if (dayOfWeek === 6 || day.isLastOfMonth) {
styleType = _DataTypes.Models.SelectType.End;
}
break;
case _DataTypes.Models.SelectType.End:
if (!showBeginEndInfo) break;
info = locale.over;
infoCls += ' date-selected';
superscripCls += ' date-selected';
if (dayOfWeek === 0 || day.isFirstOfMonth) {
styleType = _DataTypes.Models.SelectType.All;
}
break;
}
switch (styleType) {
case _DataTypes.Models.SelectType.Single:
case _DataTypes.Models.SelectType.Only:
case _DataTypes.Models.SelectType.All:
cls += ' selected-single';
break;
case _DataTypes.Models.SelectType.Start:
cls += ' selected-start';
rCls += ' date-selected';
break;
case _DataTypes.Models.SelectType.Middle:
cls += ' selected-middle';
lCls += ' date-selected';
rCls += ' date-selected';
break;
case _DataTypes.Models.SelectType.End:
cls += ' selected-end';
lCls += ' date-selected';
break;
}
}
var defaultContent = [React.createElement(
'div',
{ key: 'superscrip', className: superscripCls },
superscrip
), React.createElement(
'div',
{ key: 'wrapper', className: 'date-wrapper' },
React.createElement('span', { className: lCls }),
React.createElement(
'div',
{ className: cls },
day.dayOfMonth
),
React.createElement('span', { className: rCls })
), React.createElement(
'div',
{ key: 'info', className: infoCls },
info
), extra.extRender && extra.extRender(new Date(day.tick))];
return React.createElement(
'div',
{ key: dayOfWeek, className: 'cell ' + (extra.cellCls || ''), onClick: function onClick() {
!disable && onCellClick && onCellClick(day, monthData);
} },
renderDateFullCell ? renderDateFullCell(day) : defaultContent
);
})
);
};
_this.updateWeeks = function (monthData) {
(monthData || _this.props.monthData).weeks.forEach(function (week, index) {
_this.genWeek(week, index);
});
if (_this.props.swiper && !_this.state.weekComponents[5]) {
_this.state.weekComponents[5] = _this.emptyRow;
}
};
_this.setWarpper = function (dom) {
_this.wrapperDivDOM = dom;
};
_this.state = {
weekComponents: []
};
return _this;
}
SingleMonth.prototype.componentWillMount = function componentWillMount() {
var _this2 = this;
var swiper = this.props.swiper;
this.props.monthData.weeks.forEach(function (week, index) {
_this2.genWeek(week, index);
});
this.emptyRow = React.createElement(
'div',
{ key: 5, className: 'row' },
React.createElement(
'div',
{ className: 'cell' },
React.createElement('div', { key: 'superscrip', className: 'superscrip' }),
React.createElement(
'div',
{ key: 'wrapper', className: 'date-wrapper' },
React.createElement('span', { className: 'left' }),
React.createElement('div', { className: 'date' }),
React.createElement('span', { className: 'right' })
),
React.createElement('div', { key: 'info', className: 'info' })
)
);
// 如果是滑动翻页模式, 则把不足6行的月份日期补充至6行
if (swiper && !this.state.weekComponents[5]) {
this.state.weekComponents[5] = this.emptyRow;
}
};
SingleMonth.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.monthData !== nextProps.monthData) {
this.updateWeeks(nextProps.monthData);
}
};
SingleMonth.prototype.render = function render() {
var _props = this.props,
monthData = _props.monthData,
swiper = _props.swiper;
var title = monthData.title;
var weekComponents = this.state.weekComponents;
return React.createElement(
'div',
{ className: 'single-month', ref: this.setWarpper },
!swiper && React.createElement(
'div',
{ className: 'month-title' },
React.createElement('div', { className: 'title-line' }),
React.createElement(
'div',
{ className: 'title-space' },
title && title[5] === '0' ? title.slice(6) : title.slice(5)
)
),
React.createElement(
'div',
{ className: 'date-panel', 'data-title': title && title[5] === '0' ? title.slice(6, 7) : title.slice(5, 7) },
weekComponents
)
);
};
return SingleMonth;
}(React.PureComponent);
exports['default'] = SingleMonth;
module.exports = exports['default'];