fastlion-amis
Version:
一种MIS页面生成工具
354 lines (353 loc) • 18.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomTimeView = void 0;
var tslib_1 = require("tslib");
// @ts-ignore
var TimeView_1 = (0, tslib_1.__importDefault)(require("react-datetime/src/TimeView"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var locale_1 = require("../../locale");
var icons_1 = require("../icons");
var Picker_1 = (0, tslib_1.__importDefault)(require("../Picker"));
var helper_1 = require("../../utils/helper");
var downshift_1 = (0, tslib_1.__importDefault)(require("downshift"));
;
var CustomTimeView = /** @class */ (function (_super) {
(0, tslib_1.__extends)(CustomTimeView, _super);
function CustomTimeView() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.timeConstraints = {
hours: {
min: 0,
max: 23,
step: 1
},
minutes: {
min: 0,
max: 59,
step: 1
},
seconds: {
min: 0,
max: 59,
step: 1
},
milliseconds: {
min: 0,
max: 999,
step: 1
}
};
/** 基于 timeConstraints 计算出的时间列表 */
_this.timeList = [];
_this.padValues = {
hours: 2,
minutes: 2,
seconds: 2,
milliseconds: 3
};
_this.shoudExtractTimeConstraintsList = function () {
var timeConstraints = _this.timeConstraints;
var result = false;
if (!timeConstraints || !(0, helper_1.isObject)(timeConstraints)) {
return result;
}
['hours', 'minutes', 'seconds'].forEach(function (timeScale) {
var _a = timeConstraints[timeScale], min = _a.min, max = _a.max, step = _a.step;
if (result !== false) {
return;
}
if (timeScale === 'hours') {
result = min > 0 || max < 23 || step > 1;
}
else if (timeScale === 'minutes') {
result = min > 0 || max < 59 || step > 1;
}
else if (timeScale === 'seconds') {
result = min > 0 || max < 59 || step > 1;
}
});
return result;
};
_this.renderDayPart = function () {
var _a = _this.props, __ = _a.translate, cx = _a.classnames;
return (react_1.default.createElement("div", { key: "dayPart", className: cx('CalendarCounter CalendarCounter--daypart') },
react_1.default.createElement("span", { key: "up", className: cx('CalendarCounter-btn CalendarCounter-btn--up'), onClick: _this.onStartClicking('toggleDayPart', 'hours'), onContextMenu: _this.disableContextMenu },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold" })),
react_1.default.createElement("div", { className: cx('CalendarCounter-value'), key: _this.state.daypart }, __(_this.state.daypart)),
react_1.default.createElement("span", { key: "down", className: cx('CalendarCounter-btn CalendarCounter-btn--down'), onClick: _this.onStartClicking('toggleDayPart', 'hours'), onContextMenu: _this.disableContextMenu },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold" }))));
};
_this.getCounterValue = function (type) {
if (type !== 'daypart') {
var value = _this.state[type];
if (type === 'hours' &&
_this.props.timeFormat.toLowerCase().indexOf(' a') !== -1) {
value = ((value - 1) % 12) + 1;
if (value === 0) {
value = 12;
}
}
return parseInt(value);
}
return 0;
};
_this.renderCounter = function (type) {
var cx = _this.props.classnames;
if (type !== 'daypart') {
var value = _this.getCounterValue(type);
var _a = _this.timeConstraints[type], min_1 = _a.min, max_1 = _a.max, step = _a.step;
return (react_1.default.createElement("div", { key: type, className: cx('CalendarCounter') },
react_1.default.createElement("span", { key: "up", className: cx('CalendarCounter-btn CalendarCounter-btn--up'), onMouseDown: _this.onStartClicking('increase', type), onContextMenu: _this.disableContextMenu },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold" })),
react_1.default.createElement("div", { key: "c", className: cx('CalendarCounter-value') },
react_1.default.createElement("input", { type: "text", value: _this.pad(type, value), className: cx('CalendarInput'), min: min_1, max: max_1, step: step, onChange: function (e) {
return _this.props.setTime(type, Math.max(min_1, Math.min(parseInt(e.currentTarget.value.replace(/\D/g, ''), 10) ||
0, max_1)));
} })),
react_1.default.createElement("span", { key: "do", className: cx('CalendarCounter-btn CalendarCounter-btn--down'), onMouseDown: _this.onStartClicking('decrease', type), onContextMenu: _this.disableContextMenu },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold" }))));
}
return null;
};
_this.onConfirm = function (value, isHandleChange) {
// 修正am、pm
var hourIndex = _this.state.counters.indexOf('hours');
if (hourIndex !== -1 &&
_this.state.daypart !== false &&
_this.props.timeFormat.toLowerCase().indexOf(' a') !== -1) {
var amMode = value.splice(-1, 1)[0];
var hour = value[hourIndex] % 12;
// 修正pm
amMode.toLowerCase().indexOf('p') !== -1 && (hour = hour + 12);
value[hourIndex] = hour;
}
_this.props.onConfirm && _this.props.onConfirm(value, _this.state.counters, isHandleChange);
};
_this.getDayPartOptions = function () {
var __ = _this.props.translate;
var options = ['am', 'pm'];
if (_this.props.timeFormat.indexOf(' A') !== -1) {
options = ['AM', 'PM'];
}
return options.map(function (daypart) { return ({
text: __(daypart),
value: daypart
}); });
};
_this.onPickerChange = function (value, index) {
var time = {};
_this.state.counters.forEach(function (type, i) { return time[type] = value[i]; });
if (_this.state.daypart !== false && index > _this.state.counters.length - 1) {
time.daypart = value[value.length - 1];
}
_this.setState(function (prevState) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, prevState), time);
});
// this.props.onChange && this.props.onChange(value);
};
_this.renderTimeViewPicker = function () {
var _a = _this.props, __ = _a.translate, type = _a.type;
var title = __('Date.titleTime');
var columns = [];
var values = [];
_this.state.counters.forEach(function (type) {
if (type !== 'daypart') {
var _a = _this.timeConstraints[type], min = _a.min, max = _a.max, step = _a.step;
// 修正am pm时hours可选最大值
if (type === 'hours' &&
_this.state.daypart !== false &&
_this.props.timeFormat.toLowerCase().indexOf(' a') !== -1) {
max = max > 12 ? 12 : max;
}
columns.push({
options: (0, helper_1.getRange)(min, max, step).map(function (item) {
return {
text: _this.pad(type, item),
value: item
};
}),
type: __('Data.' + type)
});
values.push(parseInt(_this.state[type], 10));
}
});
if (_this.state.daypart !== false) {
columns.push({
options: _this.getDayPartOptions()
});
values.push(_this.state.daypart);
}
return (react_1.default.createElement(Picker_1.default, { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: columns, value: values, onConfirm: _this.onConfirm, onClose: _this.props.onClose, showToolbar: _this.props.showToolbar, onChange: _this.onPickerChange, footer: true, type: type }));
};
_this.setupTime = function (date, timeFormat, mode) {
var formatMap = {
hours: 'HH',
minutes: 'mm',
seconds: 'ss'
};
timeFormat.split(':').forEach(function (format, i) {
var type = /h/i.test(format)
? 'hours'
: /m/.test(format)
? 'minutes'
: /s/.test(format)
? 'seconds'
: '';
if (type) {
_this.scrollToTop(type, parseInt(date.format(formatMap[type]), 10), i, mode);
}
});
};
_this.setTime = function (type, value) {
var _a, _b;
var date = (_this.props.selectedDate || _this.props.viewDate).clone();
date[type](value);
_this.props.setDateTimeState({
viewDate: date.clone(),
selectedDate: date.clone()
});
if (!_this.props.requiredConfirm) {
(_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, date);
}
};
_this.scrollToTop = function (type, value, i, label) {
var _a, _b;
var elf = document.getElementById(_this.state.uniqueTag + "-" + i + "-input");
var _c = _this.timeConstraints[type], min = _c.min, step = _c.step;
var offset = (value - min) / step;
var height = 28; /** 单个选项的高度 */
(_b = (_a = elf === null || elf === void 0 ? void 0 : elf.parentNode) === null || _a === void 0 ? void 0 : _a.scrollTo) === null || _b === void 0 ? void 0 : _b.call(_a, {
top: offset * height,
behavior: label === 'init' ? 'auto' : 'smooth'
});
};
/**
* 选择当前时间，如果设置了timeConstraints，则选择最接近的时间
*/
_this.selectNowTime = function () {
var _a = _this.props, setDateTimeState = _a.setDateTimeState, timeFormat = _a.timeFormat;
var useClosetDate = _this.shoudExtractTimeConstraintsList();
if (useClosetDate) {
var timeList = _this.timeList;
var now_1 = (0, moment_1.default)().clone();
var closetDate_1 = now_1.clone();
var minDiff_1 = Infinity;
/** 遍历时间列表，找出最接近此刻的时间 */
timeList.forEach(function (item, index) {
var date = (0, moment_1.default)(item, timeFormat);
var diff = Math.abs(now_1.diff(date));
if (diff < minDiff_1) {
minDiff_1 = diff;
closetDate_1 = date;
}
});
setDateTimeState({ viewDate: closetDate_1, selectedDate: closetDate_1 }, function () {
return _this.confirm();
});
}
else {
setDateTimeState({ viewDate: (0, moment_1.default)().clone(), selectedDate: (0, moment_1.default)().clone() }, function () { return _this.confirm(); });
}
};
_this.confirm = function () {
var _a, _b, _c, _d;
var date = (_this.props.selectedDate || _this.props.viewDate).clone();
// 如果 minDate 是可用的，且比当前日期晚，则用 minDate
if (((_a = _this.props.minDate) === null || _a === void 0 ? void 0 : _a.isValid()) && ((_b = _this.props.minDate) === null || _b === void 0 ? void 0 : _b.isAfter(date))) {
date = _this.props.minDate.clone();
}
_this.props.setDateTimeState({
selectedDate: date
});
(_d = (_c = _this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, date);
_this.props.onClose && _this.props.onClose();
};
_this.cancel = function () {
_this.props.onClose && _this.props.onClose();
};
_this.computedTimeOptions = function (timeScale) {
var _a;
var _b = (_a = _this.timeConstraints) === null || _a === void 0 ? void 0 : _a[timeScale], min = _b.min, max = _b.max, step = _b.step;
return Array.from({ length: max - min + 1 }, function (item, index) {
var value = (index + min)
.toString()
.padStart(timeScale !== 'milliseconds' ? 2 : 3, '0');
return index % step === 0 ? { label: value, value: value } : undefined;
}).filter(function (item) { return !!item; });
};
return _this;
}
CustomTimeView.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.viewDate !== this.props.viewDate
|| nextProps.selectedDate !== this.props.selectedDate
|| nextProps.timeFormat !== this.props.timeFormat) {
this.setState(this.calculateState(nextProps));
}
};
CustomTimeView.prototype.componentDidMount = function () {
var _a = this.props, timeFormat = _a.timeFormat, selectedDate = _a.selectedDate, viewDate = _a.viewDate, isEndDate = _a.isEndDate;
var date = selectedDate || (isEndDate ? viewDate.endOf('day') : viewDate);
this.setupTime(date, timeFormat, 'init');
};
CustomTimeView.prototype.render = function () {
var _this = this;
var _a = this.props, cx = _a.classnames, timeFormat = _a.timeFormat, selectedDate = _a.selectedDate, viewDate = _a.viewDate, timeRangeHeader = _a.timeRangeHeader, __ = _a.translate, isEndDate = _a.isEndDate, requiredConfirm = _a.requiredConfirm;
var date = selectedDate || (isEndDate ? viewDate.endOf('day') : viewDate);
var inputs = [];
if ((0, helper_1.isMobile)()) {
return (react_1.default.createElement("div", { className: cx('CalendarTime') }, this.renderTimeViewPicker()));
}
timeFormat.split(':').forEach(function (format, i) {
var type = /h/i.test(format)
? 'hours'
: /m/.test(format)
? 'minutes'
: /s/.test(format)
? 'seconds'
: '';
if (type) {
var options_1 = _this.computedTimeOptions(type);
var formatMap_1 = {
hours: 'HH',
minutes: 'mm',
seconds: 'ss'
};
inputs.push(react_1.default.createElement(downshift_1.default, { key: i + 'input', inputValue: date.format(formatMap_1[type]) }, function (_a) {
var closeMenu = _a.closeMenu;
return (react_1.default.createElement("div", { className: cx('CalendarInputWrapper') },
react_1.default.createElement("div", { className: cx('CalendarInput-sugs', type === 'hours'
? 'CalendarInput-sugsHours'
: 'CalendarInput-sugsTimes'), id: _this.state.uniqueTag + "-" + i + "-input" }, options_1.map(function (option) {
return (react_1.default.createElement("div", { key: option.value, className: cx('CalendarInput-sugsItem', {
'is-mobile': (0, helper_1.isMobile)(),
'is-highlight': option.value === date.format(formatMap_1[type])
}), onClick: function () {
_this.setTime(type, parseInt(option.value, 10));
_this.scrollToTop(type, parseInt(option.value, 10), i);
closeMenu();
} }, option.value));
}))));
}));
inputs.push(react_1.default.createElement("span", { key: i + 'divider' }));
}
});
inputs.length && inputs.pop();
var quickLists = [
react_1.default.createElement("a", { key: "select-now", onClick: this.selectNowTime }, __('TimeNow'))
];
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: cx(timeRangeHeader ? 'TimeRangeHeaderWrapper' : null) }, timeRangeHeader),
react_1.default.createElement("div", { className: cx('TimeContentWrapper') }, inputs),
requiredConfirm && react_1.default.createElement("div", { className: cx('TimeFooterWrapper') },
react_1.default.createElement("div", { className: cx('QuickWrapper') }, quickLists),
react_1.default.createElement("a", { className: cx('Button', 'Button--primary', 'Button--size-sm'), onClick: this.confirm }, __('confirm')))));
};
CustomTimeView.defaultProps = {
showToolbar: true
};
return CustomTimeView;
}(TimeView_1.default));
exports.CustomTimeView = CustomTimeView;
exports.default = (0, locale_1.localeable)(CustomTimeView);
//# sourceMappingURL=./components/calendar/TimeView.js.map