index.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = void 0;
  4. var _utils = require("../utils");
  5. var _number = require("../utils/format/number");
  6. var _event = require("../utils/dom/event");
  7. var _touch = require("../mixins/touch");
  8. var _clickOutside = require("../mixins/click-outside");
  9. // Utils
  10. // Mixins
  11. var _createNamespace = (0, _utils.createNamespace)('swipe-cell'),
  12. createComponent = _createNamespace[0],
  13. bem = _createNamespace[1];
  14. var THRESHOLD = 0.15;
  15. var _default = createComponent({
  16. mixins: [_touch.TouchMixin, (0, _clickOutside.ClickOutsideMixin)({
  17. event: 'touchstart',
  18. method: 'onClick'
  19. })],
  20. props: {
  21. // @deprecated
  22. // should be removed in next major version, use beforeClose instead
  23. onClose: Function,
  24. disabled: Boolean,
  25. leftWidth: [Number, String],
  26. rightWidth: [Number, String],
  27. beforeClose: Function,
  28. stopPropagation: Boolean,
  29. name: {
  30. type: [Number, String],
  31. default: ''
  32. }
  33. },
  34. data: function data() {
  35. return {
  36. offset: 0,
  37. dragging: false
  38. };
  39. },
  40. computed: {
  41. computedLeftWidth: function computedLeftWidth() {
  42. return +this.leftWidth || this.getWidthByRef('left');
  43. },
  44. computedRightWidth: function computedRightWidth() {
  45. return +this.rightWidth || this.getWidthByRef('right');
  46. }
  47. },
  48. mounted: function mounted() {
  49. this.bindTouchEvent(this.$el);
  50. },
  51. methods: {
  52. getWidthByRef: function getWidthByRef(ref) {
  53. if (this.$refs[ref]) {
  54. var rect = this.$refs[ref].getBoundingClientRect();
  55. return rect.width;
  56. }
  57. return 0;
  58. },
  59. // @exposed-api
  60. open: function open(position) {
  61. var offset = position === 'left' ? this.computedLeftWidth : -this.computedRightWidth;
  62. this.opened = true;
  63. this.offset = offset;
  64. this.$emit('open', {
  65. position: position,
  66. name: this.name,
  67. // @deprecated
  68. // should be removed in next major version
  69. detail: this.name
  70. });
  71. },
  72. // @exposed-api
  73. close: function close(position) {
  74. this.offset = 0;
  75. if (this.opened) {
  76. this.opened = false;
  77. this.$emit('close', {
  78. position: position,
  79. name: this.name
  80. });
  81. }
  82. },
  83. onTouchStart: function onTouchStart(event) {
  84. if (this.disabled) {
  85. return;
  86. }
  87. this.startOffset = this.offset;
  88. this.touchStart(event);
  89. },
  90. onTouchMove: function onTouchMove(event) {
  91. if (this.disabled) {
  92. return;
  93. }
  94. this.touchMove(event);
  95. if (this.direction === 'horizontal') {
  96. this.dragging = true;
  97. this.lockClick = true;
  98. var isPrevent = !this.opened || this.deltaX * this.startOffset < 0;
  99. if (isPrevent) {
  100. (0, _event.preventDefault)(event, this.stopPropagation);
  101. }
  102. this.offset = (0, _number.range)(this.deltaX + this.startOffset, -this.computedRightWidth, this.computedLeftWidth);
  103. }
  104. },
  105. onTouchEnd: function onTouchEnd() {
  106. var _this = this;
  107. if (this.disabled) {
  108. return;
  109. }
  110. if (this.dragging) {
  111. this.toggle(this.offset > 0 ? 'left' : 'right');
  112. this.dragging = false; // compatible with desktop scenario
  113. setTimeout(function () {
  114. _this.lockClick = false;
  115. }, 0);
  116. }
  117. },
  118. toggle: function toggle(direction) {
  119. var offset = Math.abs(this.offset);
  120. var threshold = this.opened ? 1 - THRESHOLD : THRESHOLD;
  121. var computedLeftWidth = this.computedLeftWidth,
  122. computedRightWidth = this.computedRightWidth;
  123. if (computedRightWidth && direction === 'right' && offset > computedRightWidth * threshold) {
  124. this.open('right');
  125. } else if (computedLeftWidth && direction === 'left' && offset > computedLeftWidth * threshold) {
  126. this.open('left');
  127. } else {
  128. this.close();
  129. }
  130. },
  131. onClick: function onClick(position) {
  132. if (position === void 0) {
  133. position = 'outside';
  134. }
  135. this.$emit('click', position);
  136. if (this.opened && !this.lockClick) {
  137. if (this.beforeClose) {
  138. this.beforeClose({
  139. position: position,
  140. name: this.name,
  141. instance: this
  142. });
  143. } else if (this.onClose) {
  144. this.onClose(position, this, {
  145. name: this.name
  146. });
  147. } else {
  148. this.close(position);
  149. }
  150. }
  151. },
  152. getClickHandler: function getClickHandler(position, stop) {
  153. var _this2 = this;
  154. return function (event) {
  155. if (stop) {
  156. event.stopPropagation();
  157. }
  158. _this2.onClick(position);
  159. };
  160. },
  161. genLeftPart: function genLeftPart() {
  162. var h = this.$createElement;
  163. var content = this.slots('left');
  164. if (content) {
  165. return h("div", {
  166. "ref": "left",
  167. "class": bem('left'),
  168. "on": {
  169. "click": this.getClickHandler('left', true)
  170. }
  171. }, [content]);
  172. }
  173. },
  174. genRightPart: function genRightPart() {
  175. var h = this.$createElement;
  176. var content = this.slots('right');
  177. if (content) {
  178. return h("div", {
  179. "ref": "right",
  180. "class": bem('right'),
  181. "on": {
  182. "click": this.getClickHandler('right', true)
  183. }
  184. }, [content]);
  185. }
  186. }
  187. },
  188. render: function render() {
  189. var h = arguments[0];
  190. var wrapperStyle = {
  191. transform: "translate3d(" + this.offset + "px, 0, 0)",
  192. transitionDuration: this.dragging ? '0s' : '.6s'
  193. };
  194. return h("div", {
  195. "class": bem(),
  196. "on": {
  197. "click": this.getClickHandler('cell')
  198. }
  199. }, [h("div", {
  200. "class": bem('wrapper'),
  201. "style": wrapperStyle
  202. }, [this.genLeftPart(), this.slots(), this.genRightPart()])]);
  203. }
  204. });
  205. exports.default = _default;