index.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var component_1 = require('../common/component');
  4. var utils_1 = require('../common/utils');
  5. var validator_1 = require('../common/validator');
  6. var DEFAULT_DURATION = 200;
  7. component_1.VantComponent({
  8. classes: ['active-class'],
  9. props: {
  10. valueKey: String,
  11. className: String,
  12. itemHeight: Number,
  13. visibleItemCount: Number,
  14. initialOptions: {
  15. type: Array,
  16. value: [],
  17. },
  18. defaultIndex: {
  19. type: Number,
  20. value: 0,
  21. observer: function (value) {
  22. this.setIndex(value);
  23. },
  24. },
  25. },
  26. data: {
  27. startY: 0,
  28. offset: 0,
  29. duration: 0,
  30. startOffset: 0,
  31. options: [],
  32. currentIndex: 0,
  33. },
  34. created: function () {
  35. var _this = this;
  36. var _a = this.data,
  37. defaultIndex = _a.defaultIndex,
  38. initialOptions = _a.initialOptions;
  39. this.set({
  40. currentIndex: defaultIndex,
  41. options: initialOptions,
  42. }).then(function () {
  43. _this.setIndex(defaultIndex);
  44. });
  45. },
  46. methods: {
  47. getCount: function () {
  48. return this.data.options.length;
  49. },
  50. onTouchStart: function (event) {
  51. this.setData({
  52. startY: event.touches[0].clientY,
  53. startOffset: this.data.offset,
  54. duration: 0,
  55. });
  56. },
  57. onTouchMove: function (event) {
  58. var data = this.data;
  59. var deltaY = event.touches[0].clientY - data.startY;
  60. this.setData({
  61. offset: utils_1.range(
  62. data.startOffset + deltaY,
  63. -(this.getCount() * data.itemHeight),
  64. data.itemHeight
  65. ),
  66. });
  67. },
  68. onTouchEnd: function () {
  69. var data = this.data;
  70. if (data.offset !== data.startOffset) {
  71. this.setData({ duration: DEFAULT_DURATION });
  72. var index = utils_1.range(
  73. Math.round(-data.offset / data.itemHeight),
  74. 0,
  75. this.getCount() - 1
  76. );
  77. this.setIndex(index, true);
  78. }
  79. },
  80. onClickItem: function (event) {
  81. var index = event.currentTarget.dataset.index;
  82. this.setIndex(index, true);
  83. },
  84. adjustIndex: function (index) {
  85. var data = this.data;
  86. var count = this.getCount();
  87. index = utils_1.range(index, 0, count);
  88. for (var i = index; i < count; i++) {
  89. if (!this.isDisabled(data.options[i])) return i;
  90. }
  91. for (var i = index - 1; i >= 0; i--) {
  92. if (!this.isDisabled(data.options[i])) return i;
  93. }
  94. },
  95. isDisabled: function (option) {
  96. return validator_1.isObj(option) && option.disabled;
  97. },
  98. getOptionText: function (option) {
  99. var data = this.data;
  100. return validator_1.isObj(option) && data.valueKey in option
  101. ? option[data.valueKey]
  102. : option;
  103. },
  104. setIndex: function (index, userAction) {
  105. var _this = this;
  106. var data = this.data;
  107. index = this.adjustIndex(index) || 0;
  108. var offset = -index * data.itemHeight;
  109. if (index !== data.currentIndex) {
  110. return this.set({ offset: offset, currentIndex: index }).then(
  111. function () {
  112. userAction && _this.$emit('change', index);
  113. }
  114. );
  115. }
  116. return this.set({ offset: offset });
  117. },
  118. setValue: function (value) {
  119. var options = this.data.options;
  120. for (var i = 0; i < options.length; i++) {
  121. if (this.getOptionText(options[i]) === value) {
  122. return this.setIndex(i);
  123. }
  124. }
  125. return Promise.resolve();
  126. },
  127. getValue: function () {
  128. var data = this.data;
  129. return data.options[data.currentIndex];
  130. },
  131. },
  132. });