index.js 4.0 KB

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