225 lines
8.0 KiB
JavaScript
225 lines
8.0 KiB
JavaScript
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);
|
||
},
|
||
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,
|
||
});
|
||
});
|
||
},
|
||
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];
|
||
}
|
||
}
|
||
return columns;
|
||
},
|
||
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 || '';
|
||
},
|
||
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;
|
||
}
|
||
return this.defaultFormat(realValue, matchedColumn);
|
||
},
|
||
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;
|
||
}
|
||
var index = column.findIndex(function (c) {
|
||
return c === compareValue || c.value === compareValue;
|
||
});
|
||
if (index === -1) {
|
||
index = 0;
|
||
}
|
||
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);
|
||
}
|
||
else {
|
||
result = getMatchedItemByValue(this.data.columns, this.getValue(), this.single);
|
||
}
|
||
matchedColumn = result.matchedColumn, matchedValues = result.matchedValues;
|
||
this.triggerPicker(false);
|
||
if (!this.isControlled()) {
|
||
this.update(matchedValues);
|
||
}
|
||
triggerEventValues(this, 'ok', [matchedValues, matchedColumn]);
|
||
return [2 /*return*/];
|
||
});
|
||
});
|
||
},
|
||
}, {
|
||
formatValue: '',
|
||
columns: [],
|
||
visible: false,
|
||
selectedIndex: [],
|
||
}, [
|
||
mixinValue({
|
||
transformValue: function (value) {
|
||
return {
|
||
needUpdate: true,
|
||
value: value === undefined ? [] : value,
|
||
};
|
||
},
|
||
}),
|
||
], {
|
||
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);
|
||
this.setData({
|
||
columns: newColums,
|
||
}, function () {
|
||
// 如果是在滚动过程中columns发生变化，以onChange里抛出的selectedIndex为准
|
||
if (!_this.isChangingPickerView) {
|
||
_this.tempSelectedIndex = null;
|
||
var selectedIndex = _this.getterSelectedIndex();
|
||
_this.setData({
|
||
selectedIndex: selectedIndex,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
var value = getValueFromProps(this, 'value');
|
||
if (!equal(prevProps.value, value)) {
|
||
var selectedIndex = this.getterSelectedIndex();
|
||
this.tempSelectedIndex = null;
|
||
this.setData({
|
||
selectedIndex: selectedIndex,
|
||
});
|
||
}
|
||
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,
|
||
});
|
||
}
|
||
this.isChangingPickerView = false;
|
||
},
|
||
});
|