@gdjiami/jm-mrc-components
Version:
移动端可复用组件库
127 lines (126 loc) • 6.31 kB
JavaScript
import { __awaiter, __extends, __generator } from "tslib";
/**
* TODO: 国际化
*/
import React from 'react';
import isEqual from 'react-fast-compare';
import classNames from 'classnames';
import omit from 'lodash/omit';
import NoticeBar from '../notice-bar';
import { genDates, isSameDay, isToday, inMonth } from './utils';
var SingleMonth = /** @class */ (function (_super) {
__extends(SingleMonth, _super);
function SingleMonth() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
dateList: genDates(_this.props.date),
};
_this.initialEvents = function () { return __awaiter(_this, void 0, void 0, function () {
var error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (this.props.onGetEventsForMonth == null) {
return [2 /*return*/];
}
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
this.setState({ error: undefined });
return [4 /*yield*/, this.props.onGetEventsForMonth(this.props.date)];
case 2:
_a.sent();
return [3 /*break*/, 4];
case 3:
error_1 = _a.sent();
this.setState({ error: error_1 });
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); };
_this.handleSelect = function (date) { return function () {
if (_this.props.onSelect) {
_this.props.onSelect(date);
}
}; };
return _this;
}
SingleMonth.prototype.componentDidMount = function () {
this.initialEvents();
};
SingleMonth.prototype.shouldComponentUpdate = function (nextProps, nextState) {
var omitList = [
'onSelect',
'onSuppressError',
'onGetEventsForMonth',
'style',
'currentSelect',
];
if (this.props.currentSelect !== nextProps.currentSelect &&
nextProps.currentSelect &&
inMonth(nextProps.date, nextProps.currentSelect)) {
return true;
}
if (!isEqual(this.state, nextState) ||
!isEqual(omit(this.props, omitList), omit(nextProps, omitList))) {
return true;
}
return false;
};
SingleMonth.prototype.componentDidUpdate = function (prevProps) {
if (prevProps.date !== this.props.date) {
this.setState({ dateList: genDates(this.props.date) });
}
};
SingleMonth.prototype.render = function () {
var _a = this.props, style = _a.style, showGetEventError = _a.showGetEventError, onSuppressError = _a.onSuppressError;
return (React.createElement("main", { className: "jm-calendar__body", style: style },
React.createElement("div", { className: "jm-calendar__weeks" }, this.renderDays()),
!!this.state.error && showGetEventError && (React.createElement(NoticeBar, { action: React.createElement(React.Fragment, null,
React.createElement("span", { onClick: this.initialEvents }, "\u91CD\u8BD5 "),
React.createElement("span", { className: "retry", onClick: onSuppressError }, "\u5FFD\u7565")) }, this.state.error.message))));
};
SingleMonth.prototype.renderDays = function () {
var _this = this;
var _a = this.props, showOutOfMonthDay = _a.showOutOfMonthDay, _b = _a.currentSelect, currentSelect = _b === void 0 ? new Date() : _b, showLunar = _a.showLunar, showHoliday = _a.showHoliday;
var dateList = this.state.dateList;
var rows = dateList.length / 7;
var weeks = [];
for (var i = 0; i < rows; i++) {
weeks.push(React.createElement("div", { className: "jm-calendar__week", key: i }, dateList.slice(i * 7, (i + 1) * 7).map(function (i) {
var dateStr = i.time.getFullYear() + "-" + (i.time.getMonth() +
1) + "-" + i.time.getDate();
var events = _this.props.events && _this.props.events[dateStr];
var legalHolidayEvents = _this.props.legalHolidayEvents &&
_this.props.legalHolidayEvents[dateStr];
return (React.createElement("div", { className: "jm-calendar__day", key: i.id }, !showOutOfMonthDay && (i.isPass || i.isFuture) ? null : (React.createElement("div", { className: classNames({
weekday: i.isWeekDay,
active: isSameDay(currentSelect, i.time),
today: isToday(i.time),
'out-of-month': i.isFuture || i.isPass,
'has-event': events && events.length,
}, 'jm-calendar__day-inner'), onClick: _this.handleSelect(i.time) },
!!legalHolidayEvents &&
legalHolidayEvents.length &&
_this.renderLegalHoliday(legalHolidayEvents[0]),
React.createElement("div", { className: "jm-calendar__day-number" }, i.value),
showHoliday && !!i.holiday ? (React.createElement("div", { className: "jm-calendar__day-desc" }, i.holiday)) : (showLunar &&
!!i.lunar && (React.createElement("div", { className: "jm-calendar__day-desc" }, i.lunar)))))));
})));
}
return weeks;
};
SingleMonth.prototype.renderLegalHoliday = function (legalHolidayEvent) {
return (legalHolidayEvent && (React.createElement("div", { className: "jm-calendar__legal-holiday", style: {
color: legalHolidayEvent.color || 'red',
} }, legalHolidayEvent.content)));
};
SingleMonth.defaultProps = {
showLunar: true,
showHoliday: true,
showGetEventError: true,
};
return SingleMonth;
}(React.Component));
export default SingleMonth;