137 lines
5.5 KiB
JavaScript
137 lines
5.5 KiB
JavaScript
![]() |
"use strict";
|
||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
var tslib_1 = require("tslib");
|
||
|
var props_1 = require("./props");
|
||
|
var fmtEvent_1 = tslib_1.__importDefault(require("../_util/fmtEvent"));
|
||
|
var value_1 = tslib_1.__importDefault(require("../mixins/value"));
|
||
|
function getBoundingClientRect(selector) {
|
||
|
return new Promise(function (resolve, reject) {
|
||
|
my.createSelectorQuery()
|
||
|
.select(selector)
|
||
|
.boundingClientRect()
|
||
|
.exec(function (ret) {
|
||
|
if (ret && ret[0]) {
|
||
|
resolve(ret[0]);
|
||
|
return;
|
||
|
}
|
||
|
reject();
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
Component({
|
||
|
props: props_1.TabsDefaultProps,
|
||
|
data: {
|
||
|
scrollLeft: 0,
|
||
|
leftFade: false,
|
||
|
rightFade: false,
|
||
|
},
|
||
|
mixins: [(0, value_1.default)({
|
||
|
valueKey: 'current',
|
||
|
defaultValueKey: 'defaultCurrent',
|
||
|
})],
|
||
|
scrollLeft: 0,
|
||
|
didMount: function () {
|
||
|
this.updateScrollLeft();
|
||
|
},
|
||
|
didUpdate: function (prevProps, prevData) {
|
||
|
if (prevProps.items !== this.props.items || !this.isEqualValue(prevData)) {
|
||
|
this.updateScrollLeft();
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
onScroll: function (e) {
|
||
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||
|
return tslib_1.__generator(this, function (_a) {
|
||
|
this.scrollLeft = e.detail.scrollLeft;
|
||
|
this.updateFade();
|
||
|
return [2 /*return*/];
|
||
|
});
|
||
|
});
|
||
|
},
|
||
|
updateFade: function () {
|
||
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||
|
var _a, view, item;
|
||
|
return tslib_1.__generator(this, function (_b) {
|
||
|
switch (_b.label) {
|
||
|
case 0:
|
||
|
this.setData({
|
||
|
leftFade: !!this.scrollLeft,
|
||
|
});
|
||
|
return [4 /*yield*/, Promise.all([
|
||
|
getBoundingClientRect("#ant-tabs-bar-scroll-view-".concat(this.$id)),
|
||
|
getBoundingClientRect("#ant-tabs-bar-item-".concat(this.$id, "-").concat(this.props.items.length - 1)),
|
||
|
])];
|
||
|
case 1:
|
||
|
_a = _b.sent(), view = _a[0], item = _a[1];
|
||
|
this.setData({
|
||
|
rightFade: item.left + item.width / 2 > view.width,
|
||
|
});
|
||
|
return [2 /*return*/];
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
},
|
||
|
updateScrollLeft: function () {
|
||
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||
|
var current, _a, view, item, scrollLeft, needScroll, distance;
|
||
|
return tslib_1.__generator(this, function (_b) {
|
||
|
switch (_b.label) {
|
||
|
case 0:
|
||
|
if (this.props.direction === 'vertical') {
|
||
|
return [2 /*return*/];
|
||
|
}
|
||
|
current = this.getValue();
|
||
|
return [4 /*yield*/, Promise.all([
|
||
|
getBoundingClientRect("#ant-tabs-bar-scroll-view-".concat(this.$id)),
|
||
|
getBoundingClientRect("#ant-tabs-bar-item-".concat(this.$id, "-").concat(current)),
|
||
|
])];
|
||
|
case 1:
|
||
|
_a = _b.sent(), view = _a[0], item = _a[1];
|
||
|
scrollLeft = this.scrollLeft || 0;
|
||
|
needScroll = false;
|
||
|
distance = item.left - view.left;
|
||
|
if (distance < 0) {
|
||
|
scrollLeft = (this.scrollLeft || 0) + distance;
|
||
|
needScroll = true;
|
||
|
}
|
||
|
else if (distance + item.width > view.width) {
|
||
|
scrollLeft = (this.scrollLeft || 0) + 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*/];
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
},
|
||
|
scroll: function (scrollLeft) {
|
||
|
this.setData({
|
||
|
scrollLeft: this.data.scrollLeft === scrollLeft ? scrollLeft - Math.random() : scrollLeft,
|
||
|
});
|
||
|
},
|
||
|
onChange: function (e) {
|
||
|
var onChange = this.props.onChange;
|
||
|
var index = parseInt(e.currentTarget.dataset.index, 10);
|
||
|
if (this.props.items[index].disabled) {
|
||
|
return;
|
||
|
}
|
||
|
if (this.getValue() === index) {
|
||
|
return;
|
||
|
}
|
||
|
if (!this.isControlled()) {
|
||
|
this.update(index);
|
||
|
}
|
||
|
if (onChange) {
|
||
|
onChange(index, (0, fmtEvent_1.default)(this.props, e));
|
||
|
}
|
||
|
},
|
||
|
}
|
||
|
});
|