tsp-component
Version:
提供多端和react版本的UI组件
319 lines (318 loc) • 15 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 view from '../picker/view';
import { createYearArray, createMinutesAndSecondsArray, createHoursArray, createMonthArray, getDaysInMonth, getDefaultValue, valueFormat, getTodayDate } from '../util/date';
import PickerCore from '../picker/core';
var prefix = 'tsp-component-Picker';
function formatLabel(selected) {
var label = '';
for (var i = 0; i < selected.length; i++) {
var value = selected[i].value;
if (i < 2) {
label += value + '-';
}
else if (i === 3) {
label += ' ' + value;
}
else if (i === 4) {
label += ':' + value;
}
else {
label += value;
}
}
return label;
}
var DatePicker = (function (_super) {
__extends(DatePicker, _super);
function DatePicker(props, state) {
var _this = _super.call(this, props, state) || this;
_this.onPanStart = _this.onPanStart.bind(_this);
_this.onPan = _this.onPan.bind(_this);
_this.onPanEnd = _this.onPanEnd.bind(_this);
_this.onOk = _this.onOk.bind(_this);
_this.onCancel = _this.onCancel.bind(_this);
_this.onOpen = _this.onOpen.bind(_this);
_this.onTransitionEnd = _this.onTransitionEnd.bind(_this);
return _this;
}
DatePicker.prototype.shouldComponentUpdate = function (nextProps) {
return this.props.updateId !== nextProps.updateId;
};
DatePicker.prototype.componentDidMount = function () {
var value = this.props.defaultValue.slice(0, 5).map(function (item) { return item.value; }).join('');
var startDate = this.props.startDate.join('');
var endDate = this.props.endDate.join('');
if (value < startDate && this.props.enableStartDate) {
console.error('value设定值不能小于startDate的设定值');
return;
}
if (value > endDate && this.props.enableEndDate) {
console.error('value设定值不能超过endDate的设定值');
return;
}
this.core = new PickerCore({
id: this.props.id,
cascade: false,
defaultValue: this.props.defaultValue,
onOk: this.props.onOk,
defaultLabel: this.props.defaultLabel,
data: [],
sliderElem: this.refs.slider,
containerElem: this.refs.container['elem'],
labelElem: this.refs.label,
formatLabel: this.props.formatLabel
});
this.core.data = this.setMode();
this.core.init();
this.core.sliderElem.addEventListener('webkitTransitionEnd', this.onTransitionEnd);
};
DatePicker.prototype.componentWillReceiveProps = function (nextProps) {
};
DatePicker.prototype.componentDidUpdate = function (prevProps) {
this.core.data = this.setMode();
this.core.componentWillReceiveProps(prevProps, this.props);
};
DatePicker.prototype.onPanStart = function (evt) {
evt.preventDefault();
this.core.panStart(evt);
};
DatePicker.prototype.onPan = function (evt) {
evt.preventDefault();
this.core.pan(evt);
};
DatePicker.prototype.onPanEnd = function (evt) {
var _this = this;
evt.preventDefault();
this.core.panEnd(evt);
if (this.core.isPanEnd && this.core.touchElementCol !== undefined) {
this.transitionEndTimeout = setTimeout(function () {
if (!_this.core.isTransitionEnd) {
_this.onTransitionEnd();
}
}, 300);
}
};
DatePicker.prototype.onTransitionEnd = function () {
this.core.transitionEnd(this.transitionEndTimeout);
this.reset();
};
DatePicker.prototype.reset = function () {
switch (this.props.mode) {
case 'yyMMdd':
case 'yyMMddHH':
case 'yyMMddHHmm':
if (this.props.enableStartDate || this.props.enableEndDate) {
if (this.core.touchElementCol === 0 || this.core.touchElementCol === 1) {
var year = parseInt(this.core.data[0][this.core.getValueIndex(0, this.core.selected)].value.toString());
var month = parseInt(this.core.data[1][this.core.getValueIndex(1, this.core.selected)].value.toString()) - 1;
var day = parseInt(this.core.data[2][this.core.getValueIndex(2, this.core.selected)].value.toString());
if (this.core.touchElementCol === 0) {
this.replaceMonth(year);
}
else if (this.core.touchElementCol === 1) {
this.replaceDays(year, month, day);
}
}
}
else {
this.renderDays();
}
break;
default: break;
}
};
DatePicker.prototype.onOk = function () {
this.core.ok();
};
DatePicker.prototype.onCancel = function () {
this.core.cancel();
};
DatePicker.prototype.onOpen = function () {
if (!this.props.disabled) {
this.reset();
this.core['value'] = this.core.selected;
this.core.open();
}
};
DatePicker.prototype.setMode = function (yearIndex, monthIndex) {
if (yearIndex === void 0) { yearIndex = this.props.defaultValue[0].index; }
if (monthIndex === void 0) { monthIndex = this.props.defaultValue[1].index; }
var mode = this.props.mode;
var startYear = parseInt(this.props.startDate[0].toString());
var endYear = parseInt(this.props.endDate[0].toString());
var startMonth = parseInt(this.props.startDate[1].toString());
var endMonth = parseInt(this.props.endDate[1].toString());
var startDay = parseInt(this.props.startDate[2].toString());
var endDay = parseInt(this.props.endDate[2].toString());
var year = yearIndex !== undefined ? startYear + yearIndex : this.props.defaultValue[0].value;
var month = monthIndex !== undefined ? monthIndex : parseInt(this.props.defaultValue[1].value.toString()) - 1;
var _a = [undefined, undefined, undefined, undefined, undefined], yy = _a[0], MM = _a[1], dd = _a[2], HH = _a[3], mm = _a[4];
if (mode.indexOf('yy') >= 0) {
var startDate = parseInt(this.props.startDate[0]);
var endDate = parseInt(this.props.endDate[0]);
yy = createYearArray(startDate, endDate, 'array').map(function (value) { return valueFormat(value, 'object', '年'); });
}
year = parseInt(year.toString());
month = parseInt(month.toString());
if (mode.indexOf('MM') >= 0) {
MM = createMonthArray('array').map(function (value) { return valueFormat(value + 1, 'object', '月'); });
if (this.props.enableStartDate && year === startYear) {
if (this.props.startDate.length >= 2) {
MM = MM.slice(startMonth - 1);
}
else {
console.error('startDate设置错误，startDate数组长度不足2维');
}
}
if (this.props.enableEndDate && year === endYear) {
if (this.props.endDate.length >= 2) {
MM = MM.slice(0, endMonth - startMonth + 1);
}
else {
console.error('endDate设置错误，endDate数组长度不足2维');
}
}
}
if (mode.indexOf('dd') >= 0) {
dd = getDaysInMonth(year, month, 'array').map(function (value) { return valueFormat(value, 'object', '日'); });
if (this.props.enableStartDate && year === startYear && month === startMonth - 1) {
if (this.props.startDate.length >= 3) {
dd = dd.slice(startDay - 1);
}
else {
console.error('startDate设置错误，startDate数组长度不等于3维');
}
}
if (this.props.enableEndDate && year === endYear && month === endMonth - 1) {
if (this.props.endDate.length >= 3) {
dd = dd.slice(0, endDay);
}
else {
console.error('endDate设置错误，endDate数组长度不足3维');
}
}
}
if (mode.indexOf('HH') >= 0) {
HH = createHoursArray('array').map(function (value) { return valueFormat(value, 'object', '时'); });
}
if (mode.indexOf('mm') >= 0) {
mm = createMinutesAndSecondsArray('array').map(function (value) { return valueFormat(value, 'object', '分'); });
}
switch (mode) {
case 'yy': return [yy];
case 'yyMM': return [yy, MM];
case 'yyMMdd': return [yy, MM, dd];
case 'yyMMddHH': return [yy, MM, dd, HH];
case 'yyMMddHHmm': return [yy, MM, dd, HH, mm];
case 'HHmm': return [HH, mm];
default: break;
}
};
DatePicker.prototype.renderDays = function () {
var data = this.core.data;
var year = parseInt(data[0][this.core.getValueIndex(0, this.core.selected)].value.toString());
var month = parseInt(data[1][this.core.getValueIndex(1, this.core.selected)].value.toString()) - 1;
var days = getDaysInMonth(year, month, 'array').map(function (value) { return valueFormat(value, 'object', '日'); });
var oldLength = data[2].length;
var newLength = days.length;
var parent = this.core.sliderElem.children[2];
var fragment = document.createDocumentFragment();
var length = oldLength > newLength ? oldLength : newLength;
var flag = oldLength > newLength ? 1 : 2;
if (oldLength === newLength) {
return;
}
parent.innerHTML = null;
for (var i = 0; i < length; i++) {
var tempElem = document.createElement('div');
tempElem.classList.add(prefix + "-body-col-item");
tempElem.innerText = valueFormat(i + 1, 'string', '日');
fragment.appendChild(tempElem);
}
parent.appendChild(fragment);
this.core.data[2] = days;
var selected = this.core.getValueIndex(2, this.core.selected);
this.core.pickerTranslateInitial(2, this.core.data[2][selected] ? selected : 0);
};
DatePicker.prototype.replaceMonth = function (year) {
var _a = this.props, startDate = _a.startDate, endDate = _a.endDate, enableStartDate = _a.enableStartDate, enableEndDate = _a.enableEndDate;
var startYear = parseInt(startDate[0].toString());
var endYear = parseInt(endDate[0].toString());
var enableStartYear = year === startYear && enableStartDate;
var enableEndYear = year === endYear && enableEndDate;
var startMonth = parseInt(startDate[1].toString());
var endMonth = parseInt(endDate[1].toString());
var selectedMonth = parseInt(this.core.selected[1].value.toString());
var _b = [undefined, undefined], month = _b[0], day = _b[1];
if (enableStartYear || enableEndYear) {
if (enableStartYear) {
month = selectedMonth < startMonth ? startMonth : selectedMonth;
}
else {
month = selectedMonth > endMonth ? endMonth : selectedMonth;
}
this.core.data = this.setMode(this.core.selected[0].index, month - 1);
this.core.renderCol(this.core.data[1], 1, 'replace');
if (!enableStartYear) {
this.core.selected[1].index = undefined;
this.core.selected[1].value = valueFormat(month, 'string', '月');
}
this.core.pickerTranslateInitial(1, this.core.getValueIndex(1, this.core.selected));
var dayValueIndex = this.core.getValueIndex(2, this.core.selected);
var dayIndex = this.core.data[2].length > dayValueIndex ? dayValueIndex : 0;
day = parseInt(this.core.data[2][dayIndex].value.toString());
this.replaceDays(year, month - 1, day);
}
else {
this.renderDays();
this.core.data = this.setMode(this.core.selected[0].index, selectedMonth - 1);
this.core.renderCol(this.core.data[1], 1, 'replace');
this.core.pickerTranslateInitial(1, this.core.getValueIndex(1, this.core.selected));
}
};
DatePicker.prototype.replaceDays = function (year, month, day) {
var _a = this.props, startDate = _a.startDate, endDate = _a.endDate, enableStartDate = _a.enableStartDate, enableEndDate = _a.enableEndDate;
var startYear = parseInt(startDate[0].toString());
var endYear = parseInt(endDate[0].toString());
var startMonth = parseInt(startDate[1].toString()) - 1;
var endMonth = parseInt(endDate[1].toString()) - 1;
var startMatch = year === startYear && month === startMonth && enableStartDate;
var endMatch = year === endYear && month === endMonth && enableEndDate;
if (startMatch || endMatch) {
this.core.data = this.setMode(this.core.selected[0].index, month);
this.core.renderCol(this.core.data[2], 2, 'replace');
this.core.selected[2].index = undefined;
this.core.selected[2].value = valueFormat(day, 'string', '月');
this.core.pickerTranslateInitial(2, this.core.getValueIndex(2, this.core.selected));
}
else {
this.renderDays();
}
};
DatePicker.prototype.render = function () {
return view(this);
};
DatePicker.defaultProps = {
id: '',
cascade: false,
defaultValue: getDefaultValue(),
startDate: getTodayDate(),
endDate: getTodayDate(),
enableStartDate: false,
enableEndDate: false,
mode: 'yyMMddHHmm',
formatLabel: formatLabel
};
return DatePicker;
}(React.Component));
export default DatePicker;