index.js 7.5 KB

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