2024-12-01 11:56:54 +00:00
|
|
|
|
import { __awaiter, __generator } from "tslib";
|
|
|
|
|
import { Component, triggerEvent, triggerEventOnly, triggerEventValues, getValueFromProps, } from '../_util/simply';
|
|
|
|
|
import equal from 'fast-deep-equal';
|
|
|
|
|
import { PickerDefaultProps } from './props';
|
|
|
|
|
import { getMatchedItemByValue, getMatchedItemByIndex, getStrictMatchedItemByValue, } from './utils';
|
|
|
|
|
import mixinValue from '../mixins/value';
|
|
|
|
|
Component(PickerDefaultProps, {
|
|
|
|
|
// visible受控判断
|
|
|
|
|
isVisibleControlled: function () {
|
|
|
|
|
return 'visible' in getValueFromProps(this);
|
2024-11-10 07:01:22 +00:00
|
|
|
|
},
|
2024-12-01 11:56:54 +00:00
|
|
|
|
initData: function () {
|
|
|
|
|
var _this = this;
|
|
|
|
|
var _a = getValueFromProps(this, [
|
|
|
|
|
'options',
|
|
|
|
|
'visible',
|
|
|
|
|
'defaultVisible',
|
|
|
|
|
]), options = _a[0], visible = _a[1], defaultVisible = _a[2];
|
|
|
|
|
var columns = this.getterColumns(options);
|
|
|
|
|
this.setData({
|
|
|
|
|
columns: columns,
|
|
|
|
|
}, function () {
|
|
|
|
|
var formatValue = _this.getterFormatText();
|
|
|
|
|
var selectedIndex = _this.getterSelectedIndex();
|
|
|
|
|
_this.setData({
|
|
|
|
|
formatValue: formatValue,
|
|
|
|
|
selectedIndex: selectedIndex,
|
|
|
|
|
visible: _this.isVisibleControlled() ? visible : defaultVisible,
|
|
|
|
|
});
|
|
|
|
|
});
|
2024-11-10 07:01:22 +00:00
|
|
|
|
},
|
2024-12-01 11:56:54 +00:00
|
|
|
|
getterColumns: function (options) {
|
|
|
|
|
var columns = [];
|
|
|
|
|
if (options.length > 0) {
|
|
|
|
|
if (options.every(function (item) { return Array.isArray(item); })) {
|
|
|
|
|
this.single = false;
|
|
|
|
|
columns = options.slice();
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
this.single = true;
|
|
|
|
|
columns = [options];
|
|
|
|
|
}
|
2024-11-10 07:01:22 +00:00
|
|
|
|
}
|
2024-12-01 11:56:54 +00:00
|
|
|
|
return columns;
|
2024-11-10 07:01:22 +00:00
|
|
|
|
},
|
2024-12-01 11:56:54 +00:00
|
|
|
|
defaultFormat: function (value, column) {
|
|
|
|
|
if (Array.isArray(column)) {
|
|
|
|
|
return column
|
|
|
|
|
.filter(function (c) { return c !== undefined; })
|
|
|
|
|
.map(function (c) {
|
|
|
|
|
if (typeof c === 'object') {
|
|
|
|
|
return c.label;
|
|
|
|
|
}
|
|
|
|
|
return c;
|
|
|
|
|
})
|
|
|
|
|
.join('-');
|
|
|
|
|
}
|
|
|
|
|
return (column && column.label) || column || '';
|
2024-11-10 07:01:22 +00:00
|
|
|
|
},
|
2024-12-01 11:56:54 +00:00
|
|
|
|
getterFormatText: function () {
|
|
|
|
|
var _a = getValueFromProps(this, [
|
|
|
|
|
'onFormat',
|
|
|
|
|
'formattedValueText',
|
|
|
|
|
]), onFormat = _a[0], formattedValueText = _a[1];
|
|
|
|
|
if (typeof formattedValueText === 'string') {
|
|
|
|
|
return formattedValueText;
|
|
|
|
|
}
|
|
|
|
|
var columns = this.data.columns;
|
|
|
|
|
var realValue = this.getValue();
|
|
|
|
|
var matchedColumn = getStrictMatchedItemByValue(columns, realValue, this.single).matchedColumn;
|
|
|
|
|
var formatValueByProps = onFormat && onFormat(realValue, matchedColumn);
|
|
|
|
|
if (formatValueByProps !== undefined && formatValueByProps !== null) {
|
|
|
|
|
return formatValueByProps;
|
2024-11-10 07:01:22 +00:00
|
|
|
|
}
|
2024-12-01 11:56:54 +00:00
|
|
|
|
return this.defaultFormat(realValue, matchedColumn);
|
2024-11-10 07:01:22 +00:00
|
|
|
|
},
|
2024-12-01 11:56:54 +00:00
|
|
|
|
getterSelectedIndex: function () {
|
|
|
|
|
var selectedIndex = [];
|
|
|
|
|
var columns = this.data.columns;
|
|
|
|
|
var realValue = this.getValue();
|
|
|
|
|
var value = realValue || [];
|
|
|
|
|
if (this.single) {
|
|
|
|
|
value = [realValue];
|
|
|
|
|
}
|
|
|
|
|
var _loop_1 = function (i) {
|
|
|
|
|
var column = columns[i];
|
|
|
|
|
var compareValue = value[i];
|
|
|
|
|
if (compareValue === undefined || compareValue === null) {
|
|
|
|
|
selectedIndex[i] = 0;
|
2024-11-10 07:01:22 +00:00
|
|
|
|
}
|
2024-12-01 11:56:54 +00:00
|
|
|
|
var index = column.findIndex(function (c) {
|
|
|
|
|
return c === compareValue || c.value === compareValue;
|
|
|
|
|
});
|
|
|
|
|
if (index === -1) {
|
|
|
|
|
index = 0;
|
2024-11-10 07:01:22 +00:00
|
|
|
|
}
|
2024-12-01 11:56:54 +00:00
|
|
|
|
selectedIndex[i] = index;
|
|
|
|
|
};
|
|
|
|
|
for (var i = 0; i < columns.length; i++) {
|
|
|
|
|
_loop_1(i);
|
|
|
|
|
}
|
|
|
|
|
return selectedIndex;
|
|
|
|
|
},
|
|
|
|
|
onOpen: function () {
|
|
|
|
|
var disabled = getValueFromProps(this, 'disabled');
|
|
|
|
|
if (!disabled) {
|
|
|
|
|
this.tempSelectedIndex = null;
|
|
|
|
|
var selectedIndex = this.getterSelectedIndex();
|
|
|
|
|
this.setData({
|
|
|
|
|
selectedIndex: selectedIndex,
|
|
|
|
|
});
|
|
|
|
|
this.triggerPicker(true);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
triggerPicker: function (visible) {
|
|
|
|
|
this.setData({
|
|
|
|
|
visible: visible,
|
|
|
|
|
});
|
|
|
|
|
triggerEvent(this, 'visibleChange', visible);
|
|
|
|
|
},
|
|
|
|
|
onMaskDismiss: function () {
|
|
|
|
|
var maskClosable = getValueFromProps(this, 'maskClosable');
|
|
|
|
|
if (!maskClosable) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.triggerPicker(false);
|
|
|
|
|
triggerEventOnly(this, 'cancel', { detail: { type: 'mask' } });
|
|
|
|
|
},
|
|
|
|
|
onCancel: function () {
|
|
|
|
|
this.triggerPicker(false);
|
|
|
|
|
triggerEventOnly(this, 'cancel', { detail: { type: 'cancel' } });
|
|
|
|
|
},
|
|
|
|
|
onChange: function (e) {
|
|
|
|
|
var selectedIndex = e.detail.value;
|
|
|
|
|
this.tempSelectedIndex = selectedIndex;
|
|
|
|
|
this.isChangingPickerView = true;
|
|
|
|
|
var _a = getMatchedItemByIndex(this.data.columns, this.tempSelectedIndex, this.single), matchedColumn = _a.matchedColumn, matchedValues = _a.matchedValues;
|
|
|
|
|
this.setData({
|
|
|
|
|
selectedIndex: selectedIndex,
|
|
|
|
|
});
|
|
|
|
|
triggerEventValues(this, 'change', [matchedValues, matchedColumn], e);
|
|
|
|
|
},
|
|
|
|
|
onOk: function () {
|
|
|
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
|
|
|
var result, matchedColumn, matchedValues;
|
|
|
|
|
return __generator(this, function (_a) {
|
|
|
|
|
if (this.tempSelectedIndex) {
|
|
|
|
|
result = getMatchedItemByIndex(this.data.columns, this.tempSelectedIndex, this.single);
|
2024-11-10 07:01:22 +00:00
|
|
|
|
}
|
|
|
|
|
else {
|
2024-12-01 11:56:54 +00:00
|
|
|
|
result = getMatchedItemByValue(this.data.columns, this.getValue(), this.single);
|
2024-11-10 07:01:22 +00:00
|
|
|
|
}
|
2024-12-01 11:56:54 +00:00
|
|
|
|
matchedColumn = result.matchedColumn, matchedValues = result.matchedValues;
|
|
|
|
|
this.triggerPicker(false);
|
|
|
|
|
if (!this.isControlled()) {
|
|
|
|
|
this.update(matchedValues);
|
2024-11-10 07:01:22 +00:00
|
|
|
|
}
|
2024-12-01 11:56:54 +00:00
|
|
|
|
triggerEventValues(this, 'ok', [matchedValues, matchedColumn]);
|
|
|
|
|
return [2 /*return*/];
|
2024-11-10 07:01:22 +00:00
|
|
|
|
});
|
2024-12-01 11:56:54 +00:00
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
}, {
|
|
|
|
|
formatValue: '',
|
|
|
|
|
columns: [],
|
|
|
|
|
visible: false,
|
|
|
|
|
selectedIndex: [],
|
|
|
|
|
}, [
|
|
|
|
|
mixinValue({
|
|
|
|
|
transformValue: function (value) {
|
|
|
|
|
return {
|
|
|
|
|
needUpdate: true,
|
|
|
|
|
value: value === undefined ? [] : value,
|
|
|
|
|
};
|
2024-11-10 07:01:22 +00:00
|
|
|
|
},
|
2024-12-01 11:56:54 +00:00
|
|
|
|
}),
|
|
|
|
|
], {
|
|
|
|
|
tempSelectedIndex: null,
|
|
|
|
|
single: false,
|
|
|
|
|
isChangingPickerView: false,
|
|
|
|
|
onInit: function () {
|
|
|
|
|
this.initData();
|
|
|
|
|
},
|
|
|
|
|
didUpdate: function (prevProps) {
|
|
|
|
|
var _this = this;
|
|
|
|
|
var options = getValueFromProps(this, 'options');
|
|
|
|
|
if (!equal(options, prevProps.options)) {
|
|
|
|
|
var newColums = this.getterColumns(options);
|
2024-11-10 07:01:22 +00:00
|
|
|
|
this.setData({
|
2024-12-01 11:56:54 +00:00
|
|
|
|
columns: newColums,
|
|
|
|
|
}, function () {
|
|
|
|
|
// 如果是在滚动过程中columns发生变化,以onChange里抛出的selectedIndex为准
|
|
|
|
|
if (!_this.isChangingPickerView) {
|
|
|
|
|
_this.tempSelectedIndex = null;
|
|
|
|
|
var selectedIndex = _this.getterSelectedIndex();
|
|
|
|
|
_this.setData({
|
|
|
|
|
selectedIndex: selectedIndex,
|
|
|
|
|
});
|
|
|
|
|
}
|
2024-11-10 07:01:22 +00:00
|
|
|
|
});
|
2024-12-01 11:56:54 +00:00
|
|
|
|
}
|
|
|
|
|
var value = getValueFromProps(this, 'value');
|
|
|
|
|
if (!equal(prevProps.value, value)) {
|
|
|
|
|
var selectedIndex = this.getterSelectedIndex();
|
|
|
|
|
this.tempSelectedIndex = null;
|
2024-11-10 07:01:22 +00:00
|
|
|
|
this.setData({
|
|
|
|
|
selectedIndex: selectedIndex,
|
|
|
|
|
});
|
2024-12-01 11:56:54 +00:00
|
|
|
|
}
|
|
|
|
|
var visible = getValueFromProps(this, 'visible');
|
|
|
|
|
if (!equal(prevProps.visible, visible)) {
|
|
|
|
|
this.setData({ visible: visible });
|
|
|
|
|
}
|
|
|
|
|
var formatValue = this.getterFormatText();
|
|
|
|
|
var formattedValueText = getValueFromProps(this, 'formattedValueText');
|
|
|
|
|
if (formatValue !== this.data.formatValue ||
|
|
|
|
|
prevProps.formattedValueText !== formattedValueText) {
|
|
|
|
|
this.setData({
|
|
|
|
|
formatValue: formatValue,
|
2024-11-10 07:01:22 +00:00
|
|
|
|
});
|
2024-12-01 11:56:54 +00:00
|
|
|
|
}
|
|
|
|
|
this.isChangingPickerView = false;
|
2024-11-10 07:01:22 +00:00
|
|
|
|
},
|
2024-12-01 11:56:54 +00:00
|
|
|
|
});
|