190 lines
7.8 KiB
JavaScript
190 lines
7.8 KiB
JavaScript
import { __awaiter, __generator } from "tslib";
|
||
import { Component, getValueFromProps, triggerEvent, triggerEventOnly, triggerEventValues, } from '../../_util/simply';
|
||
import { resolveEventValue, resolveEventValues } from '../../_util/platform';
|
||
import { CascaderDefaultProps } from './props';
|
||
import equal from 'fast-deep-equal';
|
||
import mixinValue from '../../mixins/value';
|
||
Component(CascaderDefaultProps, {
|
||
// visible受控判断
|
||
isVisibleControlled: function () {
|
||
return 'visible' in getValueFromProps(this);
|
||
},
|
||
initColumns: function () {
|
||
var _a = getValueFromProps(this, [
|
||
'options',
|
||
'visible',
|
||
'defaultVisible',
|
||
'value',
|
||
'defaultValue',
|
||
]), options = _a[0], visible = _a[1], defaultVisible = _a[2], value = _a[3], defaultValue = _a[4];
|
||
var realValue = value || defaultValue || [];
|
||
var columns = this.getterColumns(realValue, options);
|
||
// 首次无需校验value有效性，onOk时会校验
|
||
this.setData({
|
||
columns: columns,
|
||
visible: this.isVisibleControlled() ? visible : defaultVisible,
|
||
currentValue: realValue,
|
||
formattedValueText: this.onFormat(),
|
||
});
|
||
},
|
||
getterColumns: function (value, options) {
|
||
var getColumns = function (options, value, columns) {
|
||
var _a;
|
||
if (columns === void 0) { columns = []; }
|
||
columns.push(options.map(function (v) { return ({ value: v.value, label: v.label }); }));
|
||
var currentOption = options.find(function (v) { return v.value === (value === null || value === void 0 ? void 0 : value[columns.length - 1]); }) ||
|
||
options[0];
|
||
if (((_a = currentOption === null || currentOption === void 0 ? void 0 : currentOption.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
||
return getColumns(currentOption.children, value, columns);
|
||
}
|
||
return columns;
|
||
};
|
||
return getColumns(options, value);
|
||
},
|
||
// 获取有效value，若从x项开始在columns里找不到，则从此项开始都选第一条
|
||
getValidValue: function (value, columns) {
|
||
var result = [];
|
||
var _loop_1 = function (i) {
|
||
if (!columns[i].some(function (v) { return (v === null || v === void 0 ? void 0 : v.value) === (value === null || value === void 0 ? void 0 : value[i]); })) {
|
||
result.push.apply(result, columns.slice(i).map(function (v) { var _a; return (_a = v === null || v === void 0 ? void 0 : v[0]) === null || _a === void 0 ? void 0 : _a.value; }));
|
||
return "break";
|
||
}
|
||
else {
|
||
result[i] = value[i];
|
||
}
|
||
};
|
||
for (var i = 0; i < columns.length; i++) {
|
||
var state_1 = _loop_1(i);
|
||
if (state_1 === "break")
|
||
break;
|
||
}
|
||
return result;
|
||
},
|
||
getOptionByValue: function (value) {
|
||
var _a;
|
||
var options = getValueFromProps(this, 'options');
|
||
if (!((value === null || value === void 0 ? void 0 : value.length) > 0))
|
||
return null;
|
||
var result = [];
|
||
var item = options.find(function (v) { return v.value === value[0]; });
|
||
var _loop_2 = function (i) {
|
||
if (!item) {
|
||
return { value: null };
|
||
}
|
||
result.push({
|
||
value: item.value,
|
||
label: item.label,
|
||
});
|
||
item = (_a = item.children) === null || _a === void 0 ? void 0 : _a.find(function (v) { return v.value === value[i + 1]; });
|
||
};
|
||
for (var i = 0; i < value.length; i++) {
|
||
var state_2 = _loop_2(i);
|
||
if (typeof state_2 === "object")
|
||
return state_2.value;
|
||
}
|
||
return result;
|
||
},
|
||
onChange: function (selectedVal) {
|
||
var selectedValue = resolveEventValues(selectedVal)[0];
|
||
var options = getValueFromProps(this, 'options');
|
||
var columns = this.data.columns;
|
||
var newColumns = this.getterColumns(selectedValue, options);
|
||
// columns没变化说明selectedValue在范围内，无需重置
|
||
var newData = {};
|
||
if (!equal(columns, newColumns)) {
|
||
selectedValue = this.getValidValue(selectedValue, newColumns);
|
||
newData.columns = newColumns;
|
||
}
|
||
newData.currentValue = selectedValue;
|
||
this.setData(newData);
|
||
triggerEventValues(this, 'change', [
|
||
selectedValue,
|
||
this.getOptionByValue(selectedValue),
|
||
]);
|
||
},
|
||
onOk: function () {
|
||
return __awaiter(this, void 0, void 0, function () {
|
||
var currentValue, options, newColumns, validValue;
|
||
return __generator(this, function (_a) {
|
||
currentValue = this.data.currentValue;
|
||
options = getValueFromProps(this, 'options');
|
||
newColumns = this.getterColumns(currentValue, options);
|
||
validValue = this.getValidValue(currentValue, newColumns);
|
||
if (!this.isControlled()) {
|
||
this.update(validValue);
|
||
}
|
||
triggerEventValues(this, 'ok', [
|
||
validValue,
|
||
this.getOptionByValue(validValue),
|
||
]);
|
||
return [2 /*return*/];
|
||
});
|
||
});
|
||
},
|
||
onVisibleChange: function (visible) {
|
||
var _this = this;
|
||
var options = getValueFromProps(this, 'options');
|
||
var columns = this.data.columns;
|
||
var realValue = this.getValue();
|
||
if (!this.isVisibleControlled() && visible) {
|
||
var newColumns_1 = this.getterColumns(realValue, options);
|
||
if (!equal(columns, newColumns_1)) {
|
||
this.setData({ columns: newColumns_1 }, function () {
|
||
_this.setData({
|
||
currentValue: _this.getValidValue(realValue, newColumns_1),
|
||
formattedValueText: _this.onFormat(),
|
||
});
|
||
});
|
||
}
|
||
}
|
||
triggerEvent(this, 'visibleChange', resolveEventValue(visible));
|
||
},
|
||
defaultFormat: function (value, options) {
|
||
if (options) {
|
||
return options.map(function (v) { return v.label; }).join('');
|
||
}
|
||
return '';
|
||
},
|
||
onFormat: function () {
|
||
var realValue = this.getValue();
|
||
var onFormat = getValueFromProps(this, 'onFormat');
|
||
var formatValueByProps = onFormat && onFormat(realValue, this.getOptionByValue(realValue));
|
||
if (formatValueByProps !== undefined && formatValueByProps !== null) {
|
||
return formatValueByProps;
|
||
}
|
||
return this.defaultFormat(realValue, this.getOptionByValue(realValue));
|
||
},
|
||
onCancel: function (e) {
|
||
triggerEventOnly(this, 'cancel', e);
|
||
},
|
||
}, {
|
||
currentValue: [],
|
||
columns: [],
|
||
formattedValueText: '',
|
||
visible: false,
|
||
}, [mixinValue()], {
|
||
onInit: function () {
|
||
this.initColumns();
|
||
},
|
||
didUpdate: function (prevProps, prevData) {
|
||
var options = getValueFromProps(this, 'options');
|
||
if (!equal(options, prevProps.options)) {
|
||
var currentValue = this.data.currentValue;
|
||
var newColumns = this.getterColumns(currentValue, options);
|
||
this.setData({
|
||
columns: newColumns,
|
||
});
|
||
}
|
||
if (!this.isEqualValue(prevData)) {
|
||
var realValue = this.getValue();
|
||
var newColumns = this.getterColumns(realValue, options);
|
||
var currentValue = this.getValidValue(realValue, newColumns);
|
||
this.setData({ currentValue: currentValue, formattedValueText: this.onFormat() });
|
||
}
|
||
var visible = getValueFromProps(this, 'visible');
|
||
if (this.isVisibleControlled() && !equal(prevProps.visible, visible)) {
|
||
this.setData({ visible: visible });
|
||
}
|
||
},
|
||
});
|