import { Component, triggerEvent, triggerEventValues, triggerEventOnly, getValueFromProps, } from '../../_util/simply'; import { resolveEventValue, resolveEventValues } from '../../_util/platform'; import { DateRangePickerDefaultProps } from './props'; import dayjs from 'dayjs'; import equal from 'fast-deep-equal'; import { getRangeData, getDateByValue, getValueByDate, getValidValue, } from '../util'; import computed from '../../mixins/computed'; import mixinValue from '../../mixins/value'; Component(DateRangePickerDefaultProps, { // visible受控判断 isVisibleControlled: function () { return 'visible' in getValueFromProps(this); }, computed: function () { var _a = this.data, currentStartDate = _a.currentStartDate, currentEndDate = _a.currentEndDate, pickerType = _a.pickerType; var format = getValueFromProps(this, 'format'); if (pickerType) return { currentStartValueStr: currentStartDate ? dayjs(currentStartDate).format(format) : '', currentEndValueStr: currentEndDate ? dayjs(currentEndDate).format(format) : '', }; }, getMin: function (min) { return min ? dayjs(min) : dayjs().subtract(10, 'year'); }, getMax: function (max) { return max ? dayjs(max) : dayjs().add(10, 'year'); }, // didUpdate、弹窗打开、切换pickerType触发 setCurrentValue: function (currentProps) { var _this = this; var pickerVisible = this.pickerVisible; // 隐藏状态下从CValue触发,展开状态使用当前数据 var precision = currentProps.precision; var _a = this.data, pickerType = _a.pickerType, columns = _a.columns; var realValue = this.getValue(); var _b = this.data, currentStartDate = _b.currentStartDate, currentEndDate = _b.currentEndDate; var currentStartDateByCValue = (realValue === null || realValue === void 0 ? void 0 : realValue[0]) || null; var currentEndDateByCValue = (realValue === null || realValue === void 0 ? void 0 : realValue[1]) || null; // 展开状态,说明在切换pickerType if (pickerVisible) { if (pickerType === 'start') { if (!currentStartDate) { currentStartDate = currentEndDate; } } else { // pickerType=end start已存在 // 结束时间默认选中开始 if (!currentEndDate) { currentEndDate = currentStartDate; } } } else { // 否则是在从cValue初始化 currentStartDate = currentStartDateByCValue; currentEndDate = currentEndDateByCValue; // 开始默认取优先取当前时间,不在时间范围内取开始时间 if (!currentStartDate) { var min = this.getMin(currentProps.min).toDate(); var max = currentProps.max; currentStartDate = new Date(); if ((min && dayjs(currentStartDate).isBefore(min, precision)) || (max && dayjs(currentStartDate).isAfter(max, precision)) || (currentEndDateByCValue && currentStartDate > currentEndDateByCValue)) { currentStartDate = min; } } } var currentValue = getValueByDate(pickerType === 'start' ? currentStartDate : currentEndDate, precision); var newColumns = this.generateData(currentValue, currentProps); if (!equal(newColumns, columns)) { this.setData({ columns: newColumns }, function () { _this.setData({ currentStartDate: currentStartDate, currentEndDate: currentEndDate, currentValue: currentValue, formattedValueText: _this.onFormat(), }); }); } else { this.setData({ currentStartDate: currentStartDate, currentEndDate: currentEndDate, currentValue: currentValue, formattedValueText: this.onFormat(), }); } }, /** * 生成选项数据,didmound、picker change、打开弹窗、切换picker type触发 */ generateData: function (currentValue, currentProps) { var precision = currentProps.precision, propsMin = currentProps.min, propsMax = currentProps.max; var min = this.getMin(propsMin); var max = this.getMax(propsMax); if (max < min) { return []; } var currentPickerDay = dayjs(); if (currentValue.length > 0) { currentPickerDay = dayjs(getDateByValue(currentValue)); } if (currentPickerDay < min || currentPickerDay > max) { currentPickerDay = min; } var newColumns = getRangeData(precision, min, max, currentPickerDay, this.onFormatLabel.bind(this)); return newColumns; }, onChange: function (selectedIdx) { var _this = this; var selectedIndex = resolveEventValues(getValidValue(selectedIdx))[0]; var _a = getValueFromProps(this, [ 'format', 'precision', 'max', 'min', ]), format = _a[0], precision = _a[1], pmax = _a[2], pmin = _a[3]; var date = getDateByValue(selectedIndex); var min = this.getMin(pmin); var max = this.getMax(pmax); if (dayjs(date).isBefore(min)) { date = min.toDate(); selectedIndex = getValueByDate(date, precision); } if (dayjs(date).isAfter(max)) { date = max.toDate(); selectedIndex = getValueByDate(date, precision); } var _b = this.data, pickerType = _b.pickerType, columns = _b.columns, currentEndDate = _b.currentEndDate, currentStartDate = _b.currentStartDate; var newData = { currentValue: selectedIndex, formattedValueText: this.onFormat(), }; if (pickerType === 'start') { newData.currentStartDate = date; if (currentEndDate && dayjs(date).isAfter(currentEndDate)) { newData.currentEndDate = null; } } else { newData.currentEndDate = date; if (currentStartDate && dayjs(date).isBefore(currentStartDate)) { newData.currentStartDate = null; } } var newColumns = this.generateData(selectedIndex, getValueFromProps(this)); if (!equal(newColumns, columns)) { this.setData({ columns: newColumns, }, function () { _this.setData(newData); triggerEventValues(_this, 'pickerChange', [ pickerType, date, dayjs(date).format(format), ]); }); } else { this.setData(newData); triggerEventValues(this, 'pickerChange', [ pickerType, date, dayjs(date).format(format), ]); } }, onCancel: function (e) { triggerEventOnly(this, 'cancel', e); }, onOk: function () { var format = getValueFromProps(this, 'format'); var _a = this.data, currentStartDate = _a.currentStartDate, currentEndDate = _a.currentEndDate; var realValue = [currentStartDate, currentEndDate]; if (!this.isControlled()) { this.update(realValue); } triggerEventValues(this, 'ok', [ realValue, realValue.map(function (v) { return dayjs(v).format(format); }), ]); }, onFormatLabel: function (type, value) { var onFormatLabel = getValueFromProps(this, 'onFormatLabel'); var formatValueByProps = onFormatLabel && onFormatLabel(type, value); if (formatValueByProps !== undefined && formatValueByProps !== null) { return String(formatValueByProps); } return this.defaultFormatLabel(type, value); }, defaultFormatLabel: function (type, value) { var suffixMap = { year: '年', month: '月', day: '日', hour: '时', minute: '分', second: '秒', }; return "".concat(value).concat(suffixMap[type]); }, defaultFormat: function (date, valueStrs) { var _a = getValueFromProps(this, [ 'format', 'splitCharacter', ]), format = _a[0], splitCharacter = _a[1]; if (format && valueStrs && valueStrs[0] && valueStrs[1]) { return valueStrs.join("".concat(splitCharacter)); } return ''; }, onFormat: function () { var _a = getValueFromProps(this, [ 'onFormat', 'format', ]), onFormat = _a[0], format = _a[1]; var realValue = this.getValue(); var formatValueByProps = onFormat && onFormat(realValue, realValue ? realValue.map(function (v) { return (v ? dayjs(v).format(format) : null); }) : null); if (formatValueByProps !== undefined && formatValueByProps !== null) { return formatValueByProps; } return this.defaultFormat(realValue, realValue ? realValue.map(function (v) { return (v ? dayjs(v).format(format) : null); }) : null); }, /** * 显示/隐藏切换 * @param visible */ onVisibleChange: function (visible) { if (!this.isVisibleControlled() && visible) { this.setData({ pickerType: 'start' }); this.setCurrentValue(getValueFromProps(this)); this.pickerVisible = visible; } triggerEvent(this, 'visibleChange', resolveEventValue(visible)); }, onChangeCurrentPickerType: function (e) { var type = e.currentTarget.dataset.type; var pickerType = this.data.pickerType; if (type !== pickerType) { this.setData({ pickerType: type, }); this.setCurrentValue(getValueFromProps(this)); } }, }, { currentValue: [], columns: [], pickerType: 'start', currentStartDate: null, currentEndDate: null, forceUpdate: 0, formattedValueText: '', }, [ mixinValue({ transformValue: function (value) { return { value: value && value[0] && value[1] ? [dayjs(value[0]).toDate(), dayjs(value[1]).toDate()] : undefined, needUpdate: true, }; }, }), computed(), ], { pickerVisible: false, didMount: function () { this.pickerVisible = false; var _a = getValueFromProps(this, [ 'visible', 'defaultVisible', ]), visible = _a[0], defaultVisible = _a[1]; this.setData({ visible: this.isVisibleControlled() ? visible : defaultVisible, formattedValueText: this.onFormat(), }); }, didUpdate: function (prevProps, prevData) { var currentProps = getValueFromProps(this); var visible = getValueFromProps(this, 'visible'); if (this.isVisibleControlled() && !equal(prevProps.visible, visible)) { this.setData({ visible: visible }); this.setCurrentValue(currentProps); this.pickerVisible = visible; } if (!this.isEqualValue(prevData)) { this.setData({ forceUpdate: this.data.forceUpdate + 1, formattedValueText: this.onFormat(), }); if (this.pickerVisible) { // 展开状态才更新picker的数据,否则下次triggerVisible触发 this.setCurrentValue(currentProps); } } }, });