123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232 |
- "use strict";
- exports.__esModule = true;
- exports.default = void 0;
- var _utils = require("../utils");
- var _number = require("../utils/format/number");
- var _event = require("../utils/dom/event");
- var _touch = require("../mixins/touch");
- var _clickOutside = require("../mixins/click-outside");
- // Utils
- // Mixins
- var _createNamespace = (0, _utils.createNamespace)('swipe-cell'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1];
- var THRESHOLD = 0.15;
- var _default = createComponent({
- mixins: [_touch.TouchMixin, (0, _clickOutside.ClickOutsideMixin)({
- event: 'touchstart',
- method: 'onClick'
- })],
- props: {
- // @deprecated
- // should be removed in next major version, use beforeClose instead
- onClose: Function,
- disabled: Boolean,
- leftWidth: [Number, String],
- rightWidth: [Number, String],
- beforeClose: Function,
- stopPropagation: Boolean,
- name: {
- type: [Number, String],
- default: ''
- }
- },
- data: function data() {
- return {
- offset: 0,
- dragging: false
- };
- },
- computed: {
- computedLeftWidth: function computedLeftWidth() {
- return +this.leftWidth || this.getWidthByRef('left');
- },
- computedRightWidth: function computedRightWidth() {
- return +this.rightWidth || this.getWidthByRef('right');
- }
- },
- mounted: function mounted() {
- this.bindTouchEvent(this.$el);
- },
- methods: {
- getWidthByRef: function getWidthByRef(ref) {
- if (this.$refs[ref]) {
- var rect = this.$refs[ref].getBoundingClientRect();
- return rect.width;
- }
- return 0;
- },
- // @exposed-api
- open: function open(position) {
- var offset = position === 'left' ? this.computedLeftWidth : -this.computedRightWidth;
- this.opened = true;
- this.offset = offset;
- this.$emit('open', {
- position: position,
- name: this.name,
- // @deprecated
- // should be removed in next major version
- detail: this.name
- });
- },
- // @exposed-api
- close: function close(position) {
- this.offset = 0;
- if (this.opened) {
- this.opened = false;
- this.$emit('close', {
- position: position,
- name: this.name
- });
- }
- },
- onTouchStart: function onTouchStart(event) {
- if (this.disabled) {
- return;
- }
- this.startOffset = this.offset;
- this.touchStart(event);
- },
- onTouchMove: function onTouchMove(event) {
- if (this.disabled) {
- return;
- }
- this.touchMove(event);
- if (this.direction === 'horizontal') {
- this.dragging = true;
- this.lockClick = true;
- var isPrevent = !this.opened || this.deltaX * this.startOffset < 0;
- if (isPrevent) {
- (0, _event.preventDefault)(event, this.stopPropagation);
- }
- this.offset = (0, _number.range)(this.deltaX + this.startOffset, -this.computedRightWidth, this.computedLeftWidth);
- }
- },
- onTouchEnd: function onTouchEnd() {
- var _this = this;
- if (this.disabled) {
- return;
- }
- if (this.dragging) {
- this.toggle(this.offset > 0 ? 'left' : 'right');
- this.dragging = false; // compatible with desktop scenario
- setTimeout(function () {
- _this.lockClick = false;
- }, 0);
- }
- },
- toggle: function toggle(direction) {
- var offset = Math.abs(this.offset);
- var threshold = this.opened ? 1 - THRESHOLD : THRESHOLD;
- var computedLeftWidth = this.computedLeftWidth,
- computedRightWidth = this.computedRightWidth;
- if (computedRightWidth && direction === 'right' && offset > computedRightWidth * threshold) {
- this.open('right');
- } else if (computedLeftWidth && direction === 'left' && offset > computedLeftWidth * threshold) {
- this.open('left');
- } else {
- this.close();
- }
- },
- onClick: function onClick(position) {
- if (position === void 0) {
- position = 'outside';
- }
- this.$emit('click', position);
- if (this.opened && !this.lockClick) {
- if (this.beforeClose) {
- this.beforeClose({
- position: position,
- name: this.name,
- instance: this
- });
- } else if (this.onClose) {
- this.onClose(position, this, {
- name: this.name
- });
- } else {
- this.close(position);
- }
- }
- },
- getClickHandler: function getClickHandler(position, stop) {
- var _this2 = this;
- return function (event) {
- if (stop) {
- event.stopPropagation();
- }
- _this2.onClick(position);
- };
- },
- genLeftPart: function genLeftPart() {
- var h = this.$createElement;
- var content = this.slots('left');
- if (content) {
- return h("div", {
- "ref": "left",
- "class": bem('left'),
- "on": {
- "click": this.getClickHandler('left', true)
- }
- }, [content]);
- }
- },
- genRightPart: function genRightPart() {
- var h = this.$createElement;
- var content = this.slots('right');
- if (content) {
- return h("div", {
- "ref": "right",
- "class": bem('right'),
- "on": {
- "click": this.getClickHandler('right', true)
- }
- }, [content]);
- }
- }
- },
- render: function render() {
- var h = arguments[0];
- var wrapperStyle = {
- transform: "translate3d(" + this.offset + "px, 0, 0)",
- transitionDuration: this.dragging ? '0s' : '.6s'
- };
- return h("div", {
- "class": bem(),
- "on": {
- "click": this.getClickHandler('cell')
- }
- }, [h("div", {
- "class": bem('wrapper'),
- "style": wrapperStyle
- }, [this.genLeftPart(), this.slots(), this.genRightPart()])]);
- }
- });
- exports.default = _default;
|