123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- 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);
- }
- }
- },
- });
|