@gem-mine/rmc-calendar
Version:
React Mobile Calendar Component(web and react-native)
228 lines (215 loc) • 10.5 kB
JavaScript
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import * as React from 'react';
import { Models } from './DataTypes';
var SingleMonth = function (_React$PureComponent) {
_inherits(SingleMonth, _React$PureComponent);
function SingleMonth(props) {
_classCallCheck(this, SingleMonth);
var _this = _possibleConstructorReturn(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 Models.SelectType.Only:
if (!showBeginEndInfo) break;
info = locale.begin;
infoCls += ' date-selected';
superscripCls += ' date-selected';
break;
case Models.SelectType.All:
if (!showBeginEndInfo) break;
info = locale.begin_over;
infoCls += ' date-selected';
superscripCls += ' date-selected';
break;
case Models.SelectType.Start:
if (!showBeginEndInfo) break;
info = locale.begin;
infoCls += ' date-selected';
superscripCls += ' date-selected';
if (dayOfWeek === 6 || day.isLastOfMonth) {
styleType = Models.SelectType.All;
}
break;
case Models.SelectType.Middle:
if (dayOfWeek === 0 || day.isFirstOfMonth) {
if (day.isLastOfMonth || dayOfWeek === 6) {
styleType = Models.SelectType.All;
} else {
styleType = Models.SelectType.Start;
}
} else if (dayOfWeek === 6 || day.isLastOfMonth) {
styleType = Models.SelectType.End;
}
break;
case Models.SelectType.End:
if (!showBeginEndInfo) break;
info = locale.over;
infoCls += ' date-selected';
superscripCls += ' date-selected';
if (dayOfWeek === 0 || day.isFirstOfMonth) {
styleType = Models.SelectType.All;
}
break;
}
switch (styleType) {
case Models.SelectType.Single:
case Models.SelectType.Only:
case Models.SelectType.All:
cls += ' selected-single';
break;
case Models.SelectType.Start:
cls += ' selected-start';
rCls += ' date-selected';
break;
case Models.SelectType.Middle:
cls += ' selected-middle';
lCls += ' date-selected';
rCls += ' date-selected';
break;
case 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);
export default SingleMonth;