tsp-component
Version:
提供多端和react版本的UI组件
315 lines (314 loc) • 15.9 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import * as React from 'react';
import classNames from 'classnames';
import Hammer from 'react-hammerjs';
import Slider from '../slider';
import { setTranslate } from '../util/animation';
import { getDaysInMonth, zellerFormula, valueFormat } from '../util/date';
var today = new Date();
var startYear = 1950;
var prefix = 'tsp-component-calendar';
var Calendar = (function (_super) {
__extends(Calendar, _super);
function Calendar(props, state) {
var _this = _super.call(this, props, state) || this;
_this.selectedIndex = _this.getIndexByDate(_this.props.year, _this.props.month);
_this.selectedDay = [_this.selectedIndex, undefined, _this.props.day];
_this.onPanStart = _this.onPanStart.bind(_this);
_this.onPan = _this.onPan.bind(_this);
_this.onPanEnd = _this.onPanEnd.bind(_this);
_this.onTransitionEnd = _this.onTransitionEnd.bind(_this);
_this.onClickWithDay = _this.onClickWithDay.bind(_this);
return _this;
}
Calendar.prototype.getPrevYear = function (selectedIndex) {
return this.getYearByIndex(selectedIndex - 1);
};
Calendar.prototype.getPrevMonth = function (selectedIndex) {
return this.getMonthByIndex(selectedIndex - 1);
};
Calendar.prototype.getSelectedYear = function (selectedIndex) {
return this.getYearByIndex(selectedIndex);
};
Calendar.prototype.getSelectedMonth = function (selectedIndex) {
return this.getMonthByIndex(selectedIndex);
};
Calendar.prototype.getNextYear = function (selectedIndex) {
return this.getYearByIndex(selectedIndex + 1);
};
Calendar.prototype.getNextMonth = function (selectedIndex) {
return this.getMonthByIndex(selectedIndex + 1);
};
Calendar.prototype.componentDidMount = function () {
this.sliderElem = this.refs['slider'];
this.containerElem = this.refs['container'];
this.dateElem = this.refs['date'];
this.slider = new Slider({
sliderElem: this.sliderElem,
containerElem: this.containerElem,
count: 1200,
direction: 'horizontal',
width: this.props.width,
height: this.props.height,
selectedIndex: this.selectedIndex
});
this.calendarInitial();
this.setCurrentDayStyle();
this.setDarkenByDay(this.props.darken);
this.sliderElem.addEventListener('webkitTransitionEnd', this.onTransitionEnd);
};
Calendar.prototype.componentWillReceiveProps = function (nextProps) {
if (this.props.darken !== nextProps.darken) {
this.setDarkenByDay(nextProps.darken);
}
};
Calendar.prototype.shouldComponentUpdate = function (nextProps) {
return this.props.refreshId && (this.props.refreshId !== nextProps.refreshId);
};
Calendar.prototype.componentWillUnmount = function () {
this.sliderElem.removeEventListener('webkitTransitionEnd', this.onTransitionEnd);
};
Calendar.prototype.onPanStart = function (evt) {
evt.preventDefault();
this.slider.panStart();
};
Calendar.prototype.onPan = function (evt) {
evt.preventDefault();
this.slider.panMove(evt);
};
Calendar.prototype.onPanEnd = function (evt) {
evt.preventDefault();
if (this.slider.isPanEnd) {
return;
}
this.containerElem.classList.add('tsp-compoent-slider-disabled');
this.slider.addPanEndClass();
this.slider.panEnd(evt);
};
Calendar.prototype.onTransitionEnd = function () {
var afterSelectedIndex = this.slider.afterChangeIndexs.afterSelectedIndex;
this.selectedIndex = afterSelectedIndex;
var year = this.getSelectedYear(this.selectedIndex);
var month = this.getSelectedMonth(this.selectedIndex) + 1;
this.calendarReplace();
this.setDarkenByDay(this.props.darken);
if (this.props.afterChange) {
this.props.afterChange(this.slider.afterChangeIndexs, [year, month]);
}
this.slider.removePanEndClass();
this.containerElem.classList.remove('tsp-compoent-slider-disabled');
};
Calendar.prototype.onClickWithDay = function (e) {
if (e.target.classList.contains(prefix + "-table-currentMonth")) {
var dayInMonthElem = e.target;
var dayCurrentElem = this.sliderElem.querySelector("." + prefix + "-day-current");
var year = this.getSelectedYear(this.selectedIndex);
var month = this.getSelectedMonth(this.selectedIndex) + 1;
var index = parseInt(dayInMonthElem['dataset'].index);
if (dayCurrentElem) {
dayCurrentElem.classList.remove(prefix + "-day-current");
}
dayInMonthElem.classList.add(prefix + "-day-current");
this.selectedDay = [this.selectedIndex, index, parseInt(dayInMonthElem.textContent)];
if (this.props.onClick) {
this.props.onClick([year, month, this.selectedDay[2]]);
}
}
};
Calendar.prototype.getYearByIndex = function (index) {
return parseInt((index / 12).toString()) + startYear;
};
Calendar.prototype.getMonthByIndex = function (index) {
return index % 12;
};
Calendar.prototype.getIndexByDate = function (year, month) {
return (year - startYear) * 12 + month;
};
Calendar.prototype.getCalendarRenderData = function (index) {
var selectedYear = this.getSelectedYear(index);
var selectedMonth = this.getSelectedMonth(index);
var currentMonthDays = getDaysInMonth(selectedYear, selectedMonth, 'array');
var firstDayInMonth = zellerFormula(selectedYear, selectedMonth, 1);
var prevSliceIndex = firstDayInMonth === 0 ? 7 : firstDayInMonth;
var prevMonthDays = getDaysInMonth(this.getPrevYear(index), this.getPrevMonth(index), 'array');
var prevMonthDisplayDays = prevMonthDays.reverse().slice(0, prevSliceIndex).reverse();
var nextMonthDaysSliceEnd = 42 - currentMonthDays.length - prevMonthDisplayDays.length;
var nextMonthDays = getDaysInMonth(this.getNextYear(index), this.getNextMonth(index), 'array').slice(0, nextMonthDaysSliceEnd);
return {
prevMonthDisplayDays: prevMonthDisplayDays,
currentMonthDays: currentMonthDays,
nextMonthDays: nextMonthDays,
table: prevMonthDisplayDays.concat(currentMonthDays, nextMonthDays)
};
};
Calendar.prototype.calendarRender = function (renderData) {
var fragment = document.createDocumentFragment();
var prevMonthDisplayDaysLength = renderData.prevMonthDisplayDays.length;
var currentMonthDaysLength = renderData.currentMonthDays.length;
var nextMonthDisplayDaysStart = prevMonthDisplayDaysLength + currentMonthDaysLength;
var divElem = document.createElement('div');
var getSelectedYear = this.getSelectedYear(this.selectedIndex);
var getSelectedMonth = this.getSelectedMonth(this.selectedIndex) + 1;
var yearMonth = getSelectedYear + "-" + valueFormat(getSelectedMonth, 'string') + "-";
var i = 0;
divElem.classList.add(prefix + "-table-day");
for (i = 0; i < 42; i++) {
var tempElem = divElem.cloneNode(false);
var day = renderData.table[i].toString();
if (i < prevMonthDisplayDaysLength || i >= nextMonthDisplayDaysStart) {
tempElem.classList.add(prefix + "-table-noCurrentMonth");
tempElem.dataset.date = '';
}
else {
tempElem.classList.add(prefix + "-table-currentMonth");
tempElem.dataset.date = yearMonth + valueFormat(day, 'string');
}
tempElem.innerText = renderData.table[i].toString();
tempElem.dataset.index = i.toString();
fragment.appendChild(tempElem);
}
return fragment;
};
Calendar.prototype.calendarInitial = function () {
var prevMonthCalendar = this.calendarRender(this.getCalendarRenderData(this.selectedIndex - 1));
var currentMonthCalendar = this.calendarRender(this.getCalendarRenderData(this.selectedIndex));
var nextMonthCalendar = this.calendarRender(this.getCalendarRenderData(this.selectedIndex + 1));
var fragment = document.createDocumentFragment();
var wrapElem = document.createElement('div');
var calendarArray = [prevMonthCalendar, currentMonthCalendar, nextMonthCalendar];
var i = 0;
wrapElem.classList.add(prefix + "-table");
wrapElem.style.width = this.props.width + 'px';
for (i = 0; i < 3; i++) {
var tempElem = wrapElem.cloneNode(false);
tempElem.appendChild(calendarArray[i]);
fragment.appendChild(tempElem);
}
this.sliderElem.appendChild(fragment);
this.restPosition();
this.renderYearMonth();
};
Calendar.prototype.calendarReplace = function () {
var prevMonthRenderData = this.getCalendarRenderData(this.selectedIndex - 1);
var currentMonthRenderData = this.getCalendarRenderData(this.selectedIndex);
var nextMonthRenderData = this.getCalendarRenderData(this.selectedIndex + 1);
var renderDataArray = [prevMonthRenderData, currentMonthRenderData, nextMonthRenderData];
var children = this.sliderElem.children;
var getSelectedYear = this.getSelectedYear(this.selectedIndex);
var getSelectedMonth = this.getSelectedMonth(this.selectedIndex) + 1;
var yearMonth = getSelectedYear + "-" + valueFormat(getSelectedMonth, 'string') + "-";
var _a = [0, 0], i = _a[0], j = _a[1];
for (i = 0; i < 42; i++) {
for (j = 0; j < 3; j++) {
var prevMonthDisplayDaysLength = renderDataArray[j].prevMonthDisplayDays.length;
var currentMonthDaysLength = renderDataArray[j].currentMonthDays.length;
var nextMonthDisplayDaysStart = prevMonthDisplayDaysLength + currentMonthDaysLength;
var day = renderDataArray[j].table[i].toString();
if (i < prevMonthDisplayDaysLength || i >= nextMonthDisplayDaysStart) {
children[j].children[i].classList.add(prefix + "-table-noCurrentMonth");
children[j].children[i].classList.remove(prefix + "-table-currentMonth");
children[j].children[i]['dataset'].date = '';
}
else {
children[j].children[i].classList.add(prefix + "-table-currentMonth");
children[j].children[i].classList.remove(prefix + "-table-noCurrentMonth");
children[j].children[i]['dataset'].date = yearMonth + valueFormat(day, 'string');
}
if (this.selectedIndex !== this.selectedDay[0]) {
if (children[j].children[i].classList.contains(prefix + "-day-current")) {
children[j].children[i].classList.remove(prefix + "-day-current");
}
}
else if (j === 1) {
children[1].children[this.selectedDay[1]].classList.add(prefix + "-day-current");
}
children[j].children[i].textContent = day;
children[j].children[i]['dataset'].index = i.toString();
}
}
this.restPosition();
this.renderYearMonth();
};
Calendar.prototype.setCurrentDayStyle = function () {
var currentSliderElem = this.sliderElem.children[1];
for (var i = 0; i < 42; i++) {
var children = currentSliderElem.children[i];
if (children.classList.contains(prefix + "-table-currentMonth")) {
if (children.textContent === this.props.day.toString()) {
children.classList.add(prefix + "-day-current");
this.selectedDay = [this.selectedIndex, i, this.props.day];
break;
}
}
}
};
Calendar.prototype.restPosition = function () {
var position = this.slider.getMoveBeforePosition();
setTranslate(this.sliderElem, position.x, position.y);
};
Calendar.prototype.renderYearMonth = function () {
this.dateElem.innerText = this.getSelectedYear(this.selectedIndex) + "\u5E74" + (this.getSelectedMonth(this.selectedIndex) + 1) + "\u6708";
};
Calendar.prototype.setDarkenByDay = function (days) {
var elem = this.sliderElem.children[1];
if (days.length) {
var length_1 = days.length;
var count = 0;
for (var j = 0; j < length_1; j++) {
for (var i = count; i < 42; i++) {
var dayElem = elem.children[i];
if (dayElem.classList.contains('tsp-component-calendar-table-currentMonth')) {
if (dayElem.dataset.date === days[j]) {
dayElem.dataset.darken = 'true';
count = i + 1;
break;
}
else {
dayElem.dataset.darken = 'false';
}
}
}
}
}
else {
for (var i = 0; i < 42; i++) {
var dayElem = elem.children[i];
dayElem.dataset.darken = 'false';
}
}
};
Calendar.prototype.render = function () {
var contentStyle = { width: this.props.width };
var flexStyle = { width: this.props.width * 3 };
return (React.createElement("div", { className: classNames((_a = {},
_a[prefix] = true,
_a[this.props.className] = this.props.className,
_a)), ref: "container" },
React.createElement("div", { className: prefix + "-date", ref: "date" }),
React.createElement(Hammer, { className: prefix + "-hammer", onPanStart: this.onPanStart, onPan: this.onPan, onPanEnd: this.onPanEnd },
React.createElement("div", { style: contentStyle },
React.createElement(Hammer, { onTap: this.onClickWithDay },
React.createElement("div", { className: prefix + "-flex", style: flexStyle, ref: "slider" })))),
this.props.leftArrow ? (React.createElement("div", { className: prefix + "-left-arrow" }, this.props.leftArrow)) : null,
this.props.rightArrow ? (React.createElement("div", { className: prefix + "-right-arrow" }, this.props.rightArrow)) : null));
var _a;
};
Calendar.defaultProps = {
width: document.body.clientWidth,
height: document.documentElement.clientHeight,
year: today.getFullYear(),
month: today.getMonth(),
day: today.getDate()
};
return Calendar;
}(React.Component));
export default Calendar;