index.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  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 THRESHOLD = 0.3;
  7. var ARRAY = [];
  8. (0, component_1.VantComponent)({
  9. props: {
  10. disabled: Boolean,
  11. leftWidth: {
  12. type: Number,
  13. value: 0,
  14. observer: function (leftWidth) {
  15. if (leftWidth === void 0) { leftWidth = 0; }
  16. if (this.offset > 0) {
  17. this.swipeMove(leftWidth);
  18. }
  19. },
  20. },
  21. rightWidth: {
  22. type: Number,
  23. value: 0,
  24. observer: function (rightWidth) {
  25. if (rightWidth === void 0) { rightWidth = 0; }
  26. if (this.offset < 0) {
  27. this.swipeMove(-rightWidth);
  28. }
  29. },
  30. },
  31. asyncClose: Boolean,
  32. name: {
  33. type: null,
  34. value: '',
  35. },
  36. },
  37. mixins: [touch_1.touch],
  38. data: {
  39. catchMove: false,
  40. wrapperStyle: '',
  41. },
  42. created: function () {
  43. this.offset = 0;
  44. ARRAY.push(this);
  45. },
  46. destroyed: function () {
  47. var _this = this;
  48. ARRAY = ARRAY.filter(function (item) { return item !== _this; });
  49. },
  50. methods: {
  51. open: function (position) {
  52. var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
  53. var offset = position === 'left' ? leftWidth : -rightWidth;
  54. this.swipeMove(offset);
  55. this.$emit('open', {
  56. position: position,
  57. name: this.data.name,
  58. });
  59. },
  60. close: function () {
  61. this.swipeMove(0);
  62. },
  63. swipeMove: function (offset) {
  64. if (offset === void 0) { offset = 0; }
  65. this.offset = (0, utils_1.range)(offset, -this.data.rightWidth, this.data.leftWidth);
  66. var transform = "translate3d(".concat(this.offset, "px, 0, 0)");
  67. var transition = this.dragging
  68. ? 'none'
  69. : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
  70. this.setData({
  71. wrapperStyle: "\n -webkit-transform: ".concat(transform, ";\n -webkit-transition: ").concat(transition, ";\n transform: ").concat(transform, ";\n transition: ").concat(transition, ";\n "),
  72. });
  73. },
  74. swipeLeaveTransition: function () {
  75. var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
  76. var offset = this.offset;
  77. if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
  78. this.open('right');
  79. }
  80. else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
  81. this.open('left');
  82. }
  83. else {
  84. this.swipeMove(0);
  85. }
  86. this.setData({ catchMove: false });
  87. },
  88. startDrag: function (event) {
  89. if (this.data.disabled) {
  90. return;
  91. }
  92. this.startOffset = this.offset;
  93. this.touchStart(event);
  94. },
  95. noop: function () { },
  96. onDrag: function (event) {
  97. var _this = this;
  98. if (this.data.disabled) {
  99. return;
  100. }
  101. this.touchMove(event);
  102. if (this.direction !== 'horizontal') {
  103. return;
  104. }
  105. this.dragging = true;
  106. ARRAY.filter(function (item) { return item !== _this && item.offset !== 0; }).forEach(function (item) { return item.close(); });
  107. this.setData({ catchMove: true });
  108. this.swipeMove(this.startOffset + this.deltaX);
  109. },
  110. endDrag: function () {
  111. if (this.data.disabled) {
  112. return;
  113. }
  114. this.dragging = false;
  115. this.swipeLeaveTransition();
  116. },
  117. onClick: function (event) {
  118. var _a = event.currentTarget.dataset.key, position = _a === void 0 ? 'outside' : _a;
  119. this.$emit('click', position);
  120. if (!this.offset) {
  121. return;
  122. }
  123. if (this.data.asyncClose) {
  124. this.$emit('close', {
  125. position: position,
  126. instance: this,
  127. name: this.data.name,
  128. });
  129. }
  130. else {
  131. this.swipeMove(0);
  132. }
  133. },
  134. },
  135. });