| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- "use strict";
- exports.__esModule = true;
- exports["default"] = void 0;
- var _utils = require("../utils");
- var _event = require("../utils/event");
- var _touch = require("../mixins/touch");
- var _clickOutside = require("../mixins/click-outside");
- var _use = (0, _utils.use)('swipe-cell'),
- sfc = _use[0],
- bem = _use[1];
- var THRESHOLD = 0.15;
- var _default = sfc({
- mixins: [_touch.TouchMixin, (0, _clickOutside.ClickOutsideMixin)({
- event: 'touchstart',
- method: 'onClick'
- })],
- props: {
- onClose: Function,
- disabled: Boolean,
- leftWidth: Number,
- rightWidth: Number
- },
- data: function data() {
- return {
- offset: 0,
- dragging: false
- };
- },
- methods: {
- open: function open(position) {
- var offset = position === 'left' ? this.leftWidth : -this.rightWidth;
- this.swipeMove(offset);
- this.resetSwipeStatus();
- },
- close: function close() {
- this.offset = 0;
- },
- resetSwipeStatus: function resetSwipeStatus() {
- this.swiping = false;
- this.opened = true;
- },
- swipeMove: function swipeMove(offset) {
- if (offset === void 0) {
- offset = 0;
- }
- this.offset = (0, _utils.range)(offset, -this.rightWidth, this.leftWidth);
- if (this.offset) {
- this.swiping = true;
- } else {
- this.opened = false;
- }
- },
- swipeLeaveTransition: function swipeLeaveTransition(direction) {
- var offset = this.offset,
- leftWidth = this.leftWidth,
- rightWidth = this.rightWidth;
- var threshold = this.opened ? 1 - THRESHOLD : THRESHOLD; // right
- if (direction === 'right' && -offset > rightWidth * threshold && rightWidth > 0) {
- this.open('right'); // left
- } else if (direction === 'left' && offset > leftWidth * threshold && leftWidth > 0) {
- this.open('left'); // reset
- } else {
- this.swipeMove(0);
- }
- },
- startDrag: function startDrag(event) {
- if (this.disabled) {
- return;
- }
- this.dragging = true;
- this.startOffset = this.offset;
- this.touchStart(event);
- },
- onDrag: function onDrag(event) {
- if (this.disabled) {
- return;
- }
- this.touchMove(event);
- if (this.direction === 'horizontal') {
- (0, _event.preventDefault)(event);
- this.swipeMove(this.deltaX + this.startOffset);
- }
- },
- endDrag: function endDrag() {
- if (this.disabled) {
- return;
- }
- this.dragging = false;
- if (this.swiping) {
- this.swipeLeaveTransition(this.offset > 0 ? 'left' : 'right');
- }
- },
- onClick: function onClick(position) {
- if (position === void 0) {
- position = 'outside';
- }
- this.$emit('click', position);
- if (!this.offset) {
- return;
- }
- if (this.onClose) {
- this.onClose(position, this);
- } else {
- this.swipeMove(0);
- }
- }
- },
- render: function render(h) {
- var _this = this;
- var onClick = function onClick(position, stop) {
- return function (event) {
- if (stop) {
- event.stopPropagation();
- }
- _this.onClick(position);
- };
- };
- var wrapperStyle = {
- transform: "translate3d(" + this.offset + "px, 0, 0)",
- transition: this.dragging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
- };
- return h("div", {
- "class": bem(),
- "on": {
- "click": onClick('cell'),
- "touchstart": this.startDrag,
- "touchmove": this.onDrag,
- "touchend": this.endDrag,
- "touchcancel": this.endDrag
- }
- }, [h("div", {
- "class": bem('wrapper'),
- "style": wrapperStyle,
- "on": {
- "transitionend": function transitionend() {
- _this.swiping = false;
- }
- }
- }, [this.leftWidth ? h("div", {
- "class": bem('left'),
- "on": {
- "click": onClick('left', true)
- }
- }, [this.slots('left')]) : null, this.slots(), this.rightWidth ? h("div", {
- "class": bem('right'),
- "on": {
- "click": onClick('right', true)
- }
- }, [this.slots('right')]) : null])]);
- }
- });
- exports["default"] = _default;
|