226 lines
8.6 KiB
JavaScript
226 lines
8.6 KiB
JavaScript
|
"use strict";
|
|||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|||
|
|
var tslib_1 = require("tslib");
|
|||
|
|
var fast_deep_equal_1 = tslib_1.__importDefault(require("fast-deep-equal"));
|
|||
|
|
var props_1 = require("./props");
|
|||
|
|
var utils_1 = require("./utils");
|
|||
|
|
var fmtEvent_1 = tslib_1.__importDefault(require("../_util/fmtEvent"));
|
|||
|
|
var value_1 = tslib_1.__importDefault(require("../mixins/value"));
|
|||
|
|
var component2 = my.canIUse('component2');
|
|||
|
|
Component({
|
|||
|
|
props: props_1.PickerDefaultProps,
|
|||
|
|
data: {
|
|||
|
|
formatValue: '',
|
|||
|
|
columns: [],
|
|||
|
|
visible: false,
|
|||
|
|
selectedIndex: [],
|
|||
|
|
},
|
|||
|
|
mixins: [(0, value_1.default)()],
|
|||
|
|
tempSelectedIndex: null,
|
|||
|
|
single: false,
|
|||
|
|
isChangingPickerView: false,
|
|||
|
|
onInit: function () {
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
didMount: function () {
|
|||
|
|
if (!component2) {
|
|||
|
|
this.initData();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
deriveDataFromProps: function (nextProps) {
|
|||
|
|
this.updateValue(this.props, nextProps);
|
|||
|
|
},
|
|||
|
|
didUpdate: function (prevProps) {
|
|||
|
|
if (!component2) {
|
|||
|
|
this.updateValue(prevProps, this.props);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initData: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
var columns = this.getterColumns(this.props.options);
|
|||
|
|
this.setData({
|
|||
|
|
columns: columns,
|
|||
|
|
}, function () {
|
|||
|
|
var formatValue = _this.getterFormatText();
|
|||
|
|
var selectedIndex = _this.getterSelectedIndex();
|
|||
|
|
_this.setData({
|
|||
|
|
formatValue: formatValue,
|
|||
|
|
selectedIndex: selectedIndex,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
updateValue: function (prevProps, currentProps) {
|
|||
|
|
var _this = this;
|
|||
|
|
if (!(0, fast_deep_equal_1.default)(prevProps.options, currentProps.options)) {
|
|||
|
|
var newColums = this.getterColumns(currentProps.options);
|
|||
|
|
this.setData({
|
|||
|
|
columns: newColums,
|
|||
|
|
}, function () {
|
|||
|
|
// 如果是在滚动过程中columns发生变化，以onChange里抛出的selectedIndex为准
|
|||
|
|
if (!_this.isChangingPickerView) {
|
|||
|
|
_this.tempSelectedIndex = null;
|
|||
|
|
var selectedIndex = _this.getterSelectedIndex();
|
|||
|
|
_this.setData({
|
|||
|
|
selectedIndex: selectedIndex,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
_this.isChangingPickerView = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (!(0, fast_deep_equal_1.default)(currentProps.value, prevProps.value)) {
|
|||
|
|
var selectedIndex = this.getterSelectedIndex();
|
|||
|
|
this.tempSelectedIndex = null;
|
|||
|
|
this.setData({
|
|||
|
|
selectedIndex: selectedIndex,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
var formatValue = this.getterFormatText();
|
|||
|
|
if (formatValue !== this.data.formatValue) {
|
|||
|
|
this.setData({
|
|||
|
|
formatValue: formatValue,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getterColumns: function (options) {
|
|||
|
|
var columns = [];
|
|||
|
|
if (options.length > 0) {
|
|||
|
|
if (options.every(function (item) { return item instanceof Array; })) {
|
|||
|
|
this.single = false;
|
|||
|
|
columns = options.slice();
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.single = true;
|
|||
|
|
columns = [options];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return columns;
|
|||
|
|
},
|
|||
|
|
defaultFormat: function (value, column) {
|
|||
|
|
if (column instanceof Array) {
|
|||
|
|
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 onFormat = this.props.onFormat;
|
|||
|
|
var columns = this.data.columns;
|
|||
|
|
var realValue = this.getValue();
|
|||
|
|
var matchedColumn = (0, utils_1.getStrictMatchedItemByValue)(columns, realValue, this.single).matchedColumn;
|
|||
|
|
var formatValueByProps = onFormat && onFormat(realValue, matchedColumn);
|
|||
|
|
if (typeof formatValueByProps !== 'undefined') {
|
|||
|
|
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 = this.props.disabled;
|
|||
|
|
if (!disabled) {
|
|||
|
|
this.tempSelectedIndex = null;
|
|||
|
|
this.setData({
|
|||
|
|
visible: true,
|
|||
|
|
});
|
|||
|
|
this.triggerPicker(true);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
triggerPicker: function (visible) {
|
|||
|
|
var onVisibleChange = this.props.onVisibleChange;
|
|||
|
|
if (onVisibleChange) {
|
|||
|
|
onVisibleChange(visible, (0, fmtEvent_1.default)(this.props));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onMaskDismiss: function () {
|
|||
|
|
var onCancel = this.props.onCancel;
|
|||
|
|
this.setData({
|
|||
|
|
visible: false,
|
|||
|
|
});
|
|||
|
|
this.triggerPicker(false);
|
|||
|
|
if (onCancel) {
|
|||
|
|
return onCancel((0, fmtEvent_1.default)(this.props, { detail: { type: 'mask' } }));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onCancel: function () {
|
|||
|
|
var onCancel = this.props.onCancel;
|
|||
|
|
this.setData({
|
|||
|
|
visible: false,
|
|||
|
|
});
|
|||
|
|
this.triggerPicker(false);
|
|||
|
|
if (onCancel) {
|
|||
|
|
return onCancel((0, fmtEvent_1.default)(this.props, { detail: { type: 'cancel' } }));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onChange: function (e) {
|
|||
|
|
var onChange = this.props.onChange;
|
|||
|
|
var selectedIndex = e.detail.value;
|
|||
|
|
this.tempSelectedIndex = selectedIndex;
|
|||
|
|
this.isChangingPickerView = true;
|
|||
|
|
var _a = (0, utils_1.getMatchedItemByIndex)(this.data.columns, this.tempSelectedIndex, this.single), matchedColumn = _a.matchedColumn, matchedValues = _a.matchedValues;
|
|||
|
|
this.setData({
|
|||
|
|
selectedIndex: selectedIndex,
|
|||
|
|
});
|
|||
|
|
if (onChange) {
|
|||
|
|
onChange.call(this, matchedValues, matchedColumn, (0, fmtEvent_1.default)(this.props, e));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onOk: function () {
|
|||
|
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
|||
|
|
var result, matchedColumn, matchedValues;
|
|||
|
|
return tslib_1.__generator(this, function (_a) {
|
|||
|
|
if (this.tempSelectedIndex) {
|
|||
|
|
result = (0, utils_1.getMatchedItemByIndex)(this.data.columns, this.tempSelectedIndex, this.single);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
result = (0, utils_1.getMatchedItemByValue)(this.data.columns, this.getValue(), this.single);
|
|||
|
|
}
|
|||
|
|
matchedColumn = result.matchedColumn, matchedValues = result.matchedValues;
|
|||
|
|
this.setData({
|
|||
|
|
visible: false,
|
|||
|
|
});
|
|||
|
|
this.triggerPicker(false);
|
|||
|
|
if (!this.isControlled()) {
|
|||
|
|
this.update(matchedValues);
|
|||
|
|
}
|
|||
|
|
if (this.props.onOk) {
|
|||
|
|
this.props.onOk.call(this, matchedValues, matchedColumn, (0, fmtEvent_1.default)(this.props));
|
|||
|
|
}
|
|||
|
|
return [2 /*return*/];
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|