186 lines
7.7 KiB
JavaScript
186 lines
7.7 KiB
JavaScript
import { __awaiter, __generator } from "tslib";
|
|
import { Component, triggerEvent, getValueFromProps } from '../_util/simply';
|
|
import { TabsDefaultProps } from './props';
|
|
import createValue from '../mixins/value';
|
|
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
|
|
Component(TabsDefaultProps, {
|
|
getInstance: function () {
|
|
if (this.$id) {
|
|
return my;
|
|
}
|
|
return this;
|
|
},
|
|
get$Id: function () {
|
|
return this.$id ? "-".concat(this.$id) : '';
|
|
},
|
|
getBoundingClientRect: function (query) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), query)];
|
|
case 1: return [2 /*return*/, _a.sent()];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
updateFade: function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var items, _a, view, item;
|
|
return __generator(this, function (_b) {
|
|
switch (_b.label) {
|
|
case 0:
|
|
this.setData({
|
|
leftFade: !!this.scrollLeft,
|
|
});
|
|
items = getValueFromProps(this, 'items');
|
|
return [4 /*yield*/, Promise.all([
|
|
this.getBoundingClientRect("#ant-tabs-bar-scroll-view".concat(this.get$Id())),
|
|
this.getBoundingClientRect("#ant-tabs-bar-item".concat(this.get$Id(), "-").concat(items.length - 1)),
|
|
])];
|
|
case 1:
|
|
_a = _b.sent(), view = _a[0], item = _a[1];
|
|
if (!item || !view) {
|
|
return [2 /*return*/];
|
|
}
|
|
this.setData({
|
|
rightFade: item.left + item.width / 2 > view.width,
|
|
});
|
|
return [2 /*return*/];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
updateScroll: function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var current, _a, view, item, _b, direction, scrollMode, scrollTop, needScroll_1, distance, scrollLeft, needScroll, distance;
|
|
return __generator(this, function (_c) {
|
|
switch (_c.label) {
|
|
case 0:
|
|
current = this.getValue();
|
|
return [4 /*yield*/, Promise.all([
|
|
this.getBoundingClientRect("#ant-tabs-bar-scroll-view".concat(this.get$Id())),
|
|
this.getBoundingClientRect("#ant-tabs-bar-item".concat(this.get$Id(), "-").concat(current)),
|
|
])];
|
|
case 1:
|
|
_a = _c.sent(), view = _a[0], item = _a[1];
|
|
if (!view || !item) {
|
|
return [2 /*return*/];
|
|
}
|
|
_b = getValueFromProps(this, [
|
|
'direction',
|
|
'scrollMode',
|
|
]), direction = _b[0], scrollMode = _b[1];
|
|
if (direction === 'vertical') {
|
|
scrollTop = this.scrollTop || 0;
|
|
needScroll_1 = false;
|
|
if (scrollMode === 'center') {
|
|
needScroll_1 = true;
|
|
scrollTop +=
|
|
item.top - view.top - Math.max((view.height - item.height) / 2, 0);
|
|
}
|
|
else {
|
|
distance = item.top - view.top;
|
|
if (distance < 0) {
|
|
scrollTop += distance;
|
|
needScroll_1 = true;
|
|
}
|
|
else if (distance + item.height > view.height) {
|
|
scrollTop += Math.min(distance + item.height - view.height, distance);
|
|
needScroll_1 = true;
|
|
}
|
|
}
|
|
if (needScroll_1) {
|
|
if (scrollTop === this.data.scrollTop) {
|
|
scrollTop += Math.random();
|
|
}
|
|
this.setData({
|
|
scrollTop: scrollTop,
|
|
});
|
|
}
|
|
return [2 /*return*/];
|
|
}
|
|
scrollLeft = this.scrollLeft || 0;
|
|
needScroll = false;
|
|
if (scrollMode === 'center') {
|
|
needScroll = true;
|
|
scrollLeft +=
|
|
item.left - view.left - Math.max((view.width - item.width) / 2, 0);
|
|
}
|
|
else {
|
|
distance = item.left - view.left;
|
|
if (distance < 0) {
|
|
scrollLeft += distance;
|
|
needScroll = true;
|
|
}
|
|
else if (distance + item.width > view.width) {
|
|
scrollLeft += Math.min(distance + item.width - view.width, distance);
|
|
needScroll = true;
|
|
}
|
|
}
|
|
if (needScroll) {
|
|
if (scrollLeft === this.data.scrollLeft) {
|
|
scrollLeft += Math.random();
|
|
}
|
|
this.setData({
|
|
scrollLeft: scrollLeft,
|
|
});
|
|
this.updateFade();
|
|
}
|
|
return [2 /*return*/];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
onScroll: function (e) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var direction;
|
|
return __generator(this, function (_a) {
|
|
direction = getValueFromProps(this, 'direction');
|
|
if (direction === 'vertical') {
|
|
this.scrollTop = e.detail.scrollTop;
|
|
return [2 /*return*/];
|
|
}
|
|
this.scrollLeft = e.detail.scrollLeft;
|
|
this.updateFade();
|
|
return [2 /*return*/];
|
|
});
|
|
});
|
|
},
|
|
onChange: function (e) {
|
|
var index = parseInt(e.currentTarget.dataset.index, 10);
|
|
var items = getValueFromProps(this, 'items');
|
|
if (items[index].disabled) {
|
|
return;
|
|
}
|
|
if (this.getValue() === index) {
|
|
return;
|
|
}
|
|
if (!this.isControlled()) {
|
|
this.update(index);
|
|
}
|
|
triggerEvent(this, 'change', index, e);
|
|
},
|
|
}, {
|
|
scrollLeft: 0,
|
|
scrollTop: 0,
|
|
leftFade: false,
|
|
rightFade: false,
|
|
}, [
|
|
createValue({
|
|
valueKey: 'current',
|
|
defaultValueKey: 'defaultCurrent',
|
|
}),
|
|
], {
|
|
scrollLeft: 0,
|
|
scrollTop: 0,
|
|
didMount: function () {
|
|
this.updateScroll();
|
|
},
|
|
didUpdate: function (prevProps, prevData) {
|
|
var items = getValueFromProps(this, 'items');
|
|
if (prevProps.items !== items || !this.isEqualValue(prevData)) {
|
|
this.updateScroll();
|
|
}
|
|
},
|
|
});
|