179 lines
7.1 KiB
JavaScript
179 lines
7.1 KiB
JavaScript
|
import { __awaiter, __generator, __spreadArray } from "tslib";
|
||
|
|
import { Component, triggerEvent, getValueFromProps } from '../_util/simply';
|
||
|
|
import { CollapseDefaultProps } from './props';
|
||
|
|
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
|
||
|
|
import createValue from '../mixins/value';
|
||
|
|
Component(CollapseDefaultProps, {
|
||
|
|
getInstance: function () {
|
||
|
|
if (this.$id) {
|
||
|
|
return my;
|
||
|
|
}
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
getBoundingClientRectWithBuilder: function (builder) {
|
||
|
|
return __awaiter(this, void 0, void 0, function () {
|
||
|
|
return __generator(this, function (_a) {
|
||
|
|
switch (_a.label) {
|
||
|
|
case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), builder(this.$id ? "-".concat(this.$id) : ''))];
|
||
|
|
case 1: return [2 /*return*/, _a.sent()];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
formatCurrent: function (val, props) {
|
||
|
|
var current = __spreadArray([], (val || []), true);
|
||
|
|
var items = props.items;
|
||
|
|
current = current.filter(function (item) {
|
||
|
|
if (!items[item] || items[item].disabled) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
});
|
||
|
|
if (props.accordion) {
|
||
|
|
current = current.length > 0 ? [current[0]] : [];
|
||
|
|
}
|
||
|
|
return __spreadArray([], current, true);
|
||
|
|
},
|
||
|
|
onChange: function (e) {
|
||
|
|
var itemIndex = parseInt(e.currentTarget.dataset.index, 10);
|
||
|
|
var _a = getValueFromProps(this, [
|
||
|
|
'items',
|
||
|
|
'accordion',
|
||
|
|
]), items = _a[0], accordion = _a[1];
|
||
|
|
if (items[itemIndex] && items[itemIndex].disabled) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var arr = this.getValue();
|
||
|
|
var current = __spreadArray([], arr, true);
|
||
|
|
var index = current.indexOf(itemIndex);
|
||
|
|
if (index >= 0) {
|
||
|
|
current.splice(index, 1);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (accordion) {
|
||
|
|
current = [itemIndex];
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
current.push(itemIndex);
|
||
|
|
current.sort();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!this.isControlled()) {
|
||
|
|
this.update(current);
|
||
|
|
}
|
||
|
|
triggerEvent(this, 'change', current, e);
|
||
|
|
},
|
||
|
|
updateContentHeight: function (prevCurrent, nextCurrent) {
|
||
|
|
return __awaiter(this, void 0, void 0, function () {
|
||
|
|
var prevCurrentArray, nextCurrentArray, expandArray, closeArray, items, contentHeight;
|
||
|
|
var _this = this;
|
||
|
|
return __generator(this, function (_a) {
|
||
|
|
switch (_a.label) {
|
||
|
|
case 0:
|
||
|
|
prevCurrentArray = prevCurrent;
|
||
|
|
nextCurrentArray = nextCurrent;
|
||
|
|
expandArray = [];
|
||
|
|
closeArray = [];
|
||
|
|
nextCurrentArray.forEach(function (item) {
|
||
|
|
if (prevCurrentArray.indexOf(item) < 0) {
|
||
|
|
expandArray.push(item);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
prevCurrentArray.forEach(function (item) {
|
||
|
|
if (nextCurrentArray.indexOf(item) < 0) {
|
||
|
|
closeArray.push(item);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
items = getValueFromProps(this, 'items');
|
||
|
|
return [4 /*yield*/, Promise.all(items.map(function (item, index) { return __awaiter(_this, void 0, void 0, function () {
|
||
|
|
var height;
|
||
|
|
return __generator(this, function (_a) {
|
||
|
|
switch (_a.label) {
|
||
|
|
case 0:
|
||
|
|
if (!(expandArray.indexOf(index) >= 0 ||
|
||
|
|
closeArray.indexOf(index) >= 0)) return [3 /*break*/, 2];
|
||
|
|
return [4 /*yield*/, this.getBoundingClientRectWithBuilder(function (id) { return ".ant-collapse-item-content".concat(id, "-").concat(index); })];
|
||
|
|
case 1:
|
||
|
|
height = (_a.sent()).height;
|
||
|
|
return [2 /*return*/, "".concat(height, "px")];
|
||
|
|
case 2: return [2 /*return*/, this.data.contentHeight[index]];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}); }))];
|
||
|
|
case 1:
|
||
|
|
contentHeight = _a.sent();
|
||
|
|
if (closeArray.length === 0) {
|
||
|
|
this.setData({
|
||
|
|
contentHeight: contentHeight,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.setData({
|
||
|
|
contentHeight: contentHeight,
|
||
|
|
});
|
||
|
|
setTimeout(function () {
|
||
|
|
contentHeight = contentHeight.map(function (item, index) {
|
||
|
|
if (closeArray.indexOf(index) >= 0) {
|
||
|
|
return '0px';
|
||
|
|
}
|
||
|
|
return item;
|
||
|
|
});
|
||
|
|
_this.setData({
|
||
|
|
contentHeight: contentHeight,
|
||
|
|
});
|
||
|
|
}, 10);
|
||
|
|
}
|
||
|
|
return [2 /*return*/];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
resetContentHeight: function (e) {
|
||
|
|
var index = parseInt(e.currentTarget.dataset.index, 10);
|
||
|
|
if (this.getValue().indexOf(index) < 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var contentHeight = __spreadArray([], this.data.contentHeight, true);
|
||
|
|
contentHeight[index] = '';
|
||
|
|
this.setData({
|
||
|
|
contentHeight: contentHeight,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
}, {
|
||
|
|
contentHeight: [],
|
||
|
|
hasChange: false,
|
||
|
|
}, [
|
||
|
|
createValue({
|
||
|
|
valueKey: 'current',
|
||
|
|
defaultValueKey: 'defaultCurrent',
|
||
|
|
transformValue: function (current, extra) {
|
||
|
|
var value = this.formatCurrent(current, extra ? extra.nextProps : getValueFromProps(this));
|
||
|
|
return {
|
||
|
|
needUpdate: true,
|
||
|
|
value: value,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
], {
|
||
|
|
didUpdate: function (prevProps, prevData) {
|
||
|
|
console.log(prevProps.items !== this.props.items, !this.isEqualValue(prevData));
|
||
|
|
if (prevProps.items !== this.props.items ||
|
||
|
|
!this.isEqualValue(prevData)) {
|
||
|
|
this.updateContentHeight(this.getValue(prevData), this.getValue());
|
||
|
|
}
|
||
|
|
},
|
||
|
|
didMount: function () {
|
||
|
|
var current = this.getValue();
|
||
|
|
var contentHeight = this.props.items.map(function (item, index) {
|
||
|
|
if (current.indexOf(index) >= 0) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
return '0px';
|
||
|
|
});
|
||
|
|
this.setData({
|
||
|
|
hasChange: true,
|
||
|
|
contentHeight: contentHeight,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
});
|