zent
Version:
一套前端设计语言和基于React的实现
106 lines (105 loc) • 4.72 kB
JavaScript
import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import formatDate from '../utils/date/formatDate';
import { getValidDate } from '../utils/date/helpers';
import isEqual from '../utils/isEqual';
import { DateRangePicker } from '../date-picker';
import { I18nReceiver as Receiver } from '../i18n';
var ONE_DAY = 1000 * 60 * 60 * 24;
var DateRangeQuickPicker = (function (_super) {
__extends(DateRangeQuickPicker, _super);
function DateRangeQuickPicker(props) {
var _a;
var _this = _super.call(this, props) || this;
_this.handleTimeChange = function (value) {
var onChange = _this.props.onChange;
onChange(value, NaN);
};
_this.handleChosenDays = function (num) {
var _a = _this.props, format = _a.format, onChange = _a.onChange, valueType = _a.valueType;
var value = calculateTime(format, num, valueType);
onChange(value, num);
};
var value = props.value, defaultSelectedPresetIndex = props.defaultSelectedPresetIndex, preset = props.preset;
if (typeof defaultSelectedPresetIndex === 'number' &&
(!value || (Array.isArray(value) && !value.length))) {
var val = (_a = preset[defaultSelectedPresetIndex]) === null || _a === void 0 ? void 0 : _a.value;
if (val !== undefined) {
_this.handleChosenDays(val);
}
}
return _this;
}
DateRangeQuickPicker.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, format = _a.format, value = _a.value, chooseDays = _a.chooseDays, chosenDays = _a.chosenDays, preset = _a.preset, min = _a.min, max = _a.max, pickerProps = __rest(_a, ["className", "format", "value", "chooseDays", "chosenDays", "preset", "min", "max"]);
var showTime = format === 'YYYY-MM-DD';
var selectedDays = chosenDays !== null && chosenDays !== void 0 ? chosenDays : chooseDays;
return (_jsxs("div", __assign({ className: cx('zent-date-range-quick-picker', className), "data-zv": '10.0.17' }, { children: [_jsx(DateRangePicker, __assign({ value: value, onChange: this.handleTimeChange, format: format, showTime: !showTime, disabledDate: { min: min, max: max } }, pickerProps), void 0), _jsx("div", __assign({ className: 'zent-date-range-quick-picker__filter', "data-zv": '10.0.17' }, { children: preset.map(function (item, index) { return (_jsx(Receiver, __assign({ componentName: "RangePicker" }, { children: function (i18n) { return (_jsx("span", __assign({ className: cx('zent-date-range-quick-picker__btn', {
active: isEqual(selectedDays, item.value),
}), onClick: _this.handleChosenDays.bind(_this, item.value), "data-zv": '10.0.17' }, { children: item.text ||
(typeof item.value === 'number' ? i18n[item.value] : 'N/A') }), index)); } }), index)); }) }), void 0)] }), void 0));
};
DateRangeQuickPicker.defaultProps = {
className: '',
value: [],
valueType: 'string',
format: 'YYYY-MM-DD',
preset: [
{
value: 7,
},
{
value: 30,
},
],
min: '',
max: '',
};
return DateRangeQuickPicker;
}(Component));
export { DateRangeQuickPicker };
function calculateTime(format, chosenItem, valueType) {
var startTime;
var endTime;
var today = getToday();
if (Array.isArray(chosenItem)) {
startTime = chosenItem[0], endTime = chosenItem[1];
}
else {
if (chosenItem > 1) {
startTime = today - (chosenItem - 1) * ONE_DAY;
}
else {
startTime = today - chosenItem * ONE_DAY;
}
if (chosenItem === 1) {
endTime = today - 1000;
}
else {
endTime = Date.now();
}
}
var startTimeDate = getValidDate(startTime);
var endTimeDate = getValidDate(endTime);
if (valueType === 'number') {
return [startTimeDate.getTime(), endTimeDate.getTime()];
}
else if (valueType === 'date') {
return [startTimeDate, endTimeDate];
}
var startTimeStr = formatDate(startTimeDate, format);
var endTimeStr = formatDate(endTimeDate, format);
return [startTimeStr, endTimeStr];
}
function getToday() {
var d = new Date();
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);
d.setMilliseconds(0);
return d.getTime();
}
export default DateRangeQuickPicker;