index.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var component_1 = require("../common/component");
  4. var touch_1 = require("../mixins/touch");
  5. var utils_1 = require("../common/utils");
  6. var validator_1 = require("../common/validator");
  7. var relation_1 = require("../common/relation");
  8. (0, component_1.VantComponent)({
  9. mixins: [touch_1.touch],
  10. classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
  11. relation: (0, relation_1.useChildren)('tab', function () {
  12. this.updateTabs();
  13. }),
  14. props: {
  15. sticky: Boolean,
  16. border: Boolean,
  17. swipeable: Boolean,
  18. titleActiveColor: String,
  19. titleInactiveColor: String,
  20. color: String,
  21. animated: {
  22. type: Boolean,
  23. observer: function () {
  24. var _this = this;
  25. this.children.forEach(function (child, index) {
  26. return child.updateRender(index === _this.data.currentIndex, _this);
  27. });
  28. },
  29. },
  30. lineWidth: {
  31. type: null,
  32. value: 40,
  33. observer: 'resize',
  34. },
  35. lineHeight: {
  36. type: null,
  37. value: -1,
  38. },
  39. active: {
  40. type: null,
  41. value: 0,
  42. observer: function (name) {
  43. if (name !== this.getCurrentName()) {
  44. this.setCurrentIndexByName(name);
  45. }
  46. },
  47. },
  48. type: {
  49. type: String,
  50. value: 'line',
  51. },
  52. ellipsis: {
  53. type: Boolean,
  54. value: true,
  55. },
  56. duration: {
  57. type: Number,
  58. value: 0.3,
  59. },
  60. zIndex: {
  61. type: Number,
  62. value: 1,
  63. },
  64. swipeThreshold: {
  65. type: Number,
  66. value: 5,
  67. observer: function (value) {
  68. this.setData({
  69. scrollable: this.children.length > value || !this.data.ellipsis,
  70. });
  71. },
  72. },
  73. offsetTop: {
  74. type: Number,
  75. value: 0,
  76. },
  77. lazyRender: {
  78. type: Boolean,
  79. value: true,
  80. },
  81. },
  82. data: {
  83. tabs: [],
  84. scrollLeft: 0,
  85. scrollable: false,
  86. currentIndex: 0,
  87. container: null,
  88. skipTransition: true,
  89. scrollWithAnimation: false,
  90. lineOffsetLeft: 0,
  91. },
  92. mounted: function () {
  93. var _this = this;
  94. (0, utils_1.requestAnimationFrame)(function () {
  95. _this.swiping = true;
  96. _this.setData({
  97. container: function () { return _this.createSelectorQuery().select('.van-tabs'); },
  98. });
  99. _this.resize();
  100. _this.scrollIntoView();
  101. });
  102. },
  103. methods: {
  104. updateTabs: function () {
  105. var _a = this, _b = _a.children, children = _b === void 0 ? [] : _b, data = _a.data;
  106. this.setData({
  107. tabs: children.map(function (child) { return child.data; }),
  108. scrollable: this.children.length > data.swipeThreshold || !data.ellipsis,
  109. });
  110. this.setCurrentIndexByName(data.active || this.getCurrentName());
  111. },
  112. trigger: function (eventName, child) {
  113. var currentIndex = this.data.currentIndex;
  114. var currentChild = child || this.children[currentIndex];
  115. if (!(0, validator_1.isDef)(currentChild)) {
  116. return;
  117. }
  118. this.$emit(eventName, {
  119. index: currentChild.index,
  120. name: currentChild.getComputedName(),
  121. title: currentChild.data.title,
  122. });
  123. },
  124. onTap: function (event) {
  125. var _this = this;
  126. var index = event.currentTarget.dataset.index;
  127. var child = this.children[index];
  128. if (child.data.disabled) {
  129. this.trigger('disabled', child);
  130. }
  131. else {
  132. this.setCurrentIndex(index);
  133. (0, utils_1.nextTick)(function () {
  134. _this.trigger('click');
  135. });
  136. }
  137. },
  138. // correct the index of active tab
  139. setCurrentIndexByName: function (name) {
  140. var _a = this.children, children = _a === void 0 ? [] : _a;
  141. var matched = children.filter(function (child) { return child.getComputedName() === name; });
  142. if (matched.length) {
  143. this.setCurrentIndex(matched[0].index);
  144. }
  145. },
  146. setCurrentIndex: function (currentIndex) {
  147. var _this = this;
  148. var _a = this, data = _a.data, _b = _a.children, children = _b === void 0 ? [] : _b;
  149. if (!(0, validator_1.isDef)(currentIndex) ||
  150. currentIndex >= children.length ||
  151. currentIndex < 0) {
  152. return;
  153. }
  154. (0, utils_1.groupSetData)(this, function () {
  155. children.forEach(function (item, index) {
  156. var active = index === currentIndex;
  157. if (active !== item.data.active || !item.inited) {
  158. item.updateRender(active, _this);
  159. }
  160. });
  161. });
  162. if (currentIndex === data.currentIndex) {
  163. return;
  164. }
  165. var shouldEmitChange = data.currentIndex !== null;
  166. this.setData({ currentIndex: currentIndex });
  167. (0, utils_1.requestAnimationFrame)(function () {
  168. _this.resize();
  169. _this.scrollIntoView();
  170. });
  171. (0, utils_1.nextTick)(function () {
  172. _this.trigger('input');
  173. if (shouldEmitChange) {
  174. _this.trigger('change');
  175. }
  176. });
  177. },
  178. getCurrentName: function () {
  179. var activeTab = this.children[this.data.currentIndex];
  180. if (activeTab) {
  181. return activeTab.getComputedName();
  182. }
  183. },
  184. resize: function () {
  185. var _this = this;
  186. if (this.data.type !== 'line') {
  187. return;
  188. }
  189. var _a = this.data, currentIndex = _a.currentIndex, ellipsis = _a.ellipsis, skipTransition = _a.skipTransition;
  190. Promise.all([
  191. (0, utils_1.getAllRect)(this, '.van-tab'),
  192. (0, utils_1.getRect)(this, '.van-tabs__line'),
  193. ]).then(function (_a) {
  194. var _b = _a[0], rects = _b === void 0 ? [] : _b, lineRect = _a[1];
  195. var rect = rects[currentIndex];
  196. if (rect == null) {
  197. return;
  198. }
  199. var lineOffsetLeft = rects
  200. .slice(0, currentIndex)
  201. .reduce(function (prev, curr) { return prev + curr.width; }, 0);
  202. lineOffsetLeft +=
  203. (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
  204. _this.setData({ lineOffsetLeft: lineOffsetLeft });
  205. _this.swiping = true;
  206. if (skipTransition) {
  207. (0, utils_1.nextTick)(function () {
  208. _this.setData({ skipTransition: false });
  209. });
  210. }
  211. });
  212. },
  213. // scroll active tab into view
  214. scrollIntoView: function () {
  215. var _this = this;
  216. var _a = this.data, currentIndex = _a.currentIndex, scrollable = _a.scrollable, scrollWithAnimation = _a.scrollWithAnimation;
  217. if (!scrollable) {
  218. return;
  219. }
  220. Promise.all([
  221. (0, utils_1.getAllRect)(this, '.van-tab'),
  222. (0, utils_1.getRect)(this, '.van-tabs__nav'),
  223. ]).then(function (_a) {
  224. var tabRects = _a[0], navRect = _a[1];
  225. var tabRect = tabRects[currentIndex];
  226. var offsetLeft = tabRects
  227. .slice(0, currentIndex)
  228. .reduce(function (prev, curr) { return prev + curr.width; }, 0);
  229. _this.setData({
  230. scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
  231. });
  232. if (!scrollWithAnimation) {
  233. (0, utils_1.nextTick)(function () {
  234. _this.setData({ scrollWithAnimation: true });
  235. });
  236. }
  237. });
  238. },
  239. onTouchScroll: function (event) {
  240. this.$emit('scroll', event.detail);
  241. },
  242. onTouchStart: function (event) {
  243. if (!this.data.swipeable)
  244. return;
  245. this.swiping = true;
  246. this.touchStart(event);
  247. },
  248. onTouchMove: function (event) {
  249. if (!this.data.swipeable || !this.swiping)
  250. return;
  251. this.touchMove(event);
  252. },
  253. // watch swipe touch end
  254. onTouchEnd: function () {
  255. if (!this.data.swipeable || !this.swiping)
  256. return;
  257. var _a = this, direction = _a.direction, deltaX = _a.deltaX, offsetX = _a.offsetX;
  258. var minSwipeDistance = 50;
  259. if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
  260. var index = this.getAvaiableTab(deltaX);
  261. if (index !== -1) {
  262. this.setCurrentIndex(index);
  263. }
  264. }
  265. this.swiping = false;
  266. },
  267. getAvaiableTab: function (direction) {
  268. var _a = this.data, tabs = _a.tabs, currentIndex = _a.currentIndex;
  269. var step = direction > 0 ? -1 : 1;
  270. for (var i = step; currentIndex + i < tabs.length && currentIndex + i >= 0; i += step) {
  271. var index = currentIndex + i;
  272. if (index >= 0 &&
  273. index < tabs.length &&
  274. tabs[index] &&
  275. !tabs[index].disabled) {
  276. return index;
  277. }
  278. }
  279. return -1;
  280. },
  281. },
  282. });