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