index.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. import { __awaiter, __generator } from "tslib";
  2. import { Component, triggerEvent, getValueFromProps } from '../_util/simply';
  3. import { TabsDefaultProps } from './props';
  4. import createValue from '../mixins/value';
  5. import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
  6. Component(TabsDefaultProps, {
  7. getInstance: function () {
  8. if (this.$id) {
  9. return my;
  10. }
  11. return this;
  12. },
  13. get$Id: function () {
  14. return this.$id ? "-".concat(this.$id) : '';
  15. },
  16. getBoundingClientRect: function (query) {
  17. return __awaiter(this, void 0, void 0, function () {
  18. return __generator(this, function (_a) {
  19. switch (_a.label) {
  20. case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), query)];
  21. case 1: return [2 /*return*/, _a.sent()];
  22. }
  23. });
  24. });
  25. },
  26. updateFade: function () {
  27. return __awaiter(this, void 0, void 0, function () {
  28. var items, _a, view, item;
  29. return __generator(this, function (_b) {
  30. switch (_b.label) {
  31. case 0:
  32. this.setData({
  33. leftFade: !!this.scrollLeft,
  34. });
  35. items = getValueFromProps(this, 'items');
  36. return [4 /*yield*/, Promise.all([
  37. this.getBoundingClientRect("#ant-tabs-bar-scroll-view".concat(this.get$Id())),
  38. this.getBoundingClientRect("#ant-tabs-bar-item".concat(this.get$Id(), "-").concat(items.length - 1)),
  39. ])];
  40. case 1:
  41. _a = _b.sent(), view = _a[0], item = _a[1];
  42. if (!item || !view) {
  43. return [2 /*return*/];
  44. }
  45. this.setData({
  46. rightFade: item.left + item.width / 2 > view.width,
  47. });
  48. return [2 /*return*/];
  49. }
  50. });
  51. });
  52. },
  53. updateScroll: function () {
  54. return __awaiter(this, void 0, void 0, function () {
  55. var current, _a, view, item, _b, direction, scrollMode, scrollTop, needScroll_1, distance, scrollLeft, needScroll, distance;
  56. return __generator(this, function (_c) {
  57. switch (_c.label) {
  58. case 0:
  59. current = this.getValue();
  60. return [4 /*yield*/, Promise.all([
  61. this.getBoundingClientRect("#ant-tabs-bar-scroll-view".concat(this.get$Id())),
  62. this.getBoundingClientRect("#ant-tabs-bar-item".concat(this.get$Id(), "-").concat(current)),
  63. ])];
  64. case 1:
  65. _a = _c.sent(), view = _a[0], item = _a[1];
  66. if (!view || !item) {
  67. return [2 /*return*/];
  68. }
  69. _b = getValueFromProps(this, [
  70. 'direction',
  71. 'scrollMode',
  72. ]), direction = _b[0], scrollMode = _b[1];
  73. if (direction === 'vertical') {
  74. scrollTop = this.scrollTop || 0;
  75. needScroll_1 = false;
  76. if (scrollMode === 'center') {
  77. needScroll_1 = true;
  78. scrollTop +=
  79. item.top - view.top - Math.max((view.height - item.height) / 2, 0);
  80. }
  81. else {
  82. distance = item.top - view.top;
  83. if (distance < 0) {
  84. scrollTop += distance;
  85. needScroll_1 = true;
  86. }
  87. else if (distance + item.height > view.height) {
  88. scrollTop += Math.min(distance + item.height - view.height, distance);
  89. needScroll_1 = true;
  90. }
  91. }
  92. if (needScroll_1) {
  93. if (scrollTop === this.data.scrollTop) {
  94. scrollTop += Math.random();
  95. }
  96. this.setData({
  97. scrollTop: scrollTop,
  98. });
  99. }
  100. return [2 /*return*/];
  101. }
  102. scrollLeft = this.scrollLeft || 0;
  103. needScroll = false;
  104. if (scrollMode === 'center') {
  105. needScroll = true;
  106. scrollLeft +=
  107. item.left - view.left - Math.max((view.width - item.width) / 2, 0);
  108. }
  109. else {
  110. distance = item.left - view.left;
  111. if (distance < 0) {
  112. scrollLeft += distance;
  113. needScroll = true;
  114. }
  115. else if (distance + item.width > view.width) {
  116. scrollLeft += Math.min(distance + item.width - view.width, distance);
  117. needScroll = true;
  118. }
  119. }
  120. if (needScroll) {
  121. if (scrollLeft === this.data.scrollLeft) {
  122. scrollLeft += Math.random();
  123. }
  124. this.setData({
  125. scrollLeft: scrollLeft,
  126. });
  127. this.updateFade();
  128. }
  129. return [2 /*return*/];
  130. }
  131. });
  132. });
  133. },
  134. onScroll: function (e) {
  135. return __awaiter(this, void 0, void 0, function () {
  136. var direction;
  137. return __generator(this, function (_a) {
  138. direction = getValueFromProps(this, 'direction');
  139. if (direction === 'vertical') {
  140. this.scrollTop = e.detail.scrollTop;
  141. return [2 /*return*/];
  142. }
  143. this.scrollLeft = e.detail.scrollLeft;
  144. this.updateFade();
  145. return [2 /*return*/];
  146. });
  147. });
  148. },
  149. onChange: function (e) {
  150. var index = parseInt(e.currentTarget.dataset.index, 10);
  151. var items = getValueFromProps(this, 'items');
  152. if (items[index].disabled) {
  153. return;
  154. }
  155. if (this.getValue() === index) {
  156. return;
  157. }
  158. if (!this.isControlled()) {
  159. this.update(index);
  160. }
  161. triggerEvent(this, 'change', index, e);
  162. },
  163. }, {
  164. scrollLeft: 0,
  165. scrollTop: 0,
  166. leftFade: false,
  167. rightFade: false,
  168. }, [
  169. createValue({
  170. valueKey: 'current',
  171. defaultValueKey: 'defaultCurrent',
  172. }),
  173. ], {
  174. scrollLeft: 0,
  175. scrollTop: 0,
  176. didMount: function () {
  177. this.updateScroll();
  178. },
  179. didUpdate: function (prevProps, prevData) {
  180. var items = getValueFromProps(this, 'items');
  181. if (prevProps.items !== items || !this.isEqualValue(prevData)) {
  182. this.updateScroll();
  183. }
  184. },
  185. });