index.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = void 0;
  4. var _utils = require("../utils");
  5. var _event = require("../utils/event");
  6. var _touch = require("../mixins/touch");
  7. var _clickOutside = require("../mixins/click-outside");
  8. var _use = (0, _utils.use)('swipe-cell'),
  9. sfc = _use[0],
  10. bem = _use[1];
  11. var THRESHOLD = 0.15;
  12. var _default = sfc({
  13. mixins: [_touch.TouchMixin, (0, _clickOutside.ClickOutsideMixin)({
  14. event: 'touchstart',
  15. method: 'onClick'
  16. })],
  17. props: {
  18. onClose: Function,
  19. disabled: Boolean,
  20. leftWidth: Number,
  21. rightWidth: Number
  22. },
  23. data: function data() {
  24. return {
  25. offset: 0,
  26. dragging: false
  27. };
  28. },
  29. methods: {
  30. open: function open(position) {
  31. var offset = position === 'left' ? this.leftWidth : -this.rightWidth;
  32. this.swipeMove(offset);
  33. this.resetSwipeStatus();
  34. },
  35. close: function close() {
  36. this.offset = 0;
  37. },
  38. resetSwipeStatus: function resetSwipeStatus() {
  39. this.swiping = false;
  40. this.opened = true;
  41. },
  42. swipeMove: function swipeMove(offset) {
  43. if (offset === void 0) {
  44. offset = 0;
  45. }
  46. this.offset = (0, _utils.range)(offset, -this.rightWidth, this.leftWidth);
  47. if (this.offset) {
  48. this.swiping = true;
  49. } else {
  50. this.opened = false;
  51. }
  52. },
  53. swipeLeaveTransition: function swipeLeaveTransition(direction) {
  54. var offset = this.offset,
  55. leftWidth = this.leftWidth,
  56. rightWidth = this.rightWidth;
  57. var threshold = this.opened ? 1 - THRESHOLD : THRESHOLD; // right
  58. if (direction === 'right' && -offset > rightWidth * threshold && rightWidth > 0) {
  59. this.open('right'); // left
  60. } else if (direction === 'left' && offset > leftWidth * threshold && leftWidth > 0) {
  61. this.open('left'); // reset
  62. } else {
  63. this.swipeMove(0);
  64. }
  65. },
  66. startDrag: function startDrag(event) {
  67. if (this.disabled) {
  68. return;
  69. }
  70. this.dragging = true;
  71. this.startOffset = this.offset;
  72. this.touchStart(event);
  73. },
  74. onDrag: function onDrag(event) {
  75. if (this.disabled) {
  76. return;
  77. }
  78. this.touchMove(event);
  79. if (this.direction === 'horizontal') {
  80. (0, _event.preventDefault)(event);
  81. this.swipeMove(this.deltaX + this.startOffset);
  82. }
  83. },
  84. endDrag: function endDrag() {
  85. if (this.disabled) {
  86. return;
  87. }
  88. this.dragging = false;
  89. if (this.swiping) {
  90. this.swipeLeaveTransition(this.offset > 0 ? 'left' : 'right');
  91. }
  92. },
  93. onClick: function onClick(position) {
  94. if (position === void 0) {
  95. position = 'outside';
  96. }
  97. this.$emit('click', position);
  98. if (!this.offset) {
  99. return;
  100. }
  101. if (this.onClose) {
  102. this.onClose(position, this);
  103. } else {
  104. this.swipeMove(0);
  105. }
  106. }
  107. },
  108. render: function render(h) {
  109. var _this = this;
  110. var onClick = function onClick(position, stop) {
  111. return function (event) {
  112. if (stop) {
  113. event.stopPropagation();
  114. }
  115. _this.onClick(position);
  116. };
  117. };
  118. var wrapperStyle = {
  119. transform: "translate3d(" + this.offset + "px, 0, 0)",
  120. transition: this.dragging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
  121. };
  122. return h("div", {
  123. "class": bem(),
  124. "on": {
  125. "click": onClick('cell'),
  126. "touchstart": this.startDrag,
  127. "touchmove": this.onDrag,
  128. "touchend": this.endDrag,
  129. "touchcancel": this.endDrag
  130. }
  131. }, [h("div", {
  132. "class": bem('wrapper'),
  133. "style": wrapperStyle,
  134. "on": {
  135. "transitionend": function transitionend() {
  136. _this.swiping = false;
  137. }
  138. }
  139. }, [this.leftWidth ? h("div", {
  140. "class": bem('left'),
  141. "on": {
  142. "click": onClick('left', true)
  143. }
  144. }, [this.slots('left')]) : null, this.slots(), this.rightWidth ? h("div", {
  145. "class": bem('right'),
  146. "on": {
  147. "click": onClick('right', true)
  148. }
  149. }, [this.slots('right')]) : null])]);
  150. }
  151. });
  152. exports["default"] = _default;