[improvement] SwipeCell: jsx (#2632)

2019-01-27 08:50:20 +08:00
parent 874d2f79ca
commit ccdfc7124a
3 changed files with 76 additions and 103 deletions
@@ -0,0 +1,169 @@
+import { use } from '../utils';
+import Touch from '../mixins/touch';
+import ClickOutside from '../mixins/click-outside';
+
+const [sfc, bem] = use('swipe-cell');
+const THRESHOLD = 0.15;
+
+export default sfc({
+  mixins: [Touch, ClickOutside({
+    event: 'touchstart',
+    method: 'onClick'
+  })],
+
+  props: {
+    onClose: Function,
+    disabled: Boolean,
+    leftWidth: Number,
+    rightWidth: Number
+  },
+
+  data() {
+    return {
+      offset: 0,
+      draging: false
+    };
+  },
+
+  methods: {
+    open(position) {
+      const offset = position === 'left' ? this.leftWidth : -this.rightWidth;
+      this.swipeMove(offset);
+      this.resetSwipeStatus();
+    },
+
+    close() {
+      this.offset = 0;
+    },
+
+    resetSwipeStatus() {
+      this.swiping = false;
+      this.opened = true;
+    },
+
+    swipeMove(offset = 0) {
+      this.offset = offset;
+      offset && (this.swiping = true);
+      !offset && (this.opened = false);
+    },
+
+    swipeLeaveTransition(direction) {
+      const { offset, leftWidth, rightWidth } = this;
+      const threshold = this.opened ? 1 - THRESHOLD : THRESHOLD;
+
+      // right
+      if (direction > 0 && -offset > rightWidth * threshold && rightWidth > 0) {
+        this.open('right');
+        // left
+      } else if (direction < 0 && offset > leftWidth * threshold && leftWidth > 0) {
+        this.open('left');
+      } else {
+        this.swipeMove();
+      }
+    },
+
+    startDrag(event) {
+      if (this.disabled) {
+        return;
+      }
+
+      this.draging = true;
+      this.touchStart(event);
+
+      if (this.opened) {
+        this.startX -= this.offset;
+      }
+    },
+
+    onDrag(event) {
+      if (this.disabled) {
+        return;
+      }
+
+      this.touchMove(event);
+      const { deltaX } = this;
+
+      if (
+        (deltaX < 0 && (-deltaX > this.rightWidth || !this.rightWidth)) ||
+        (deltaX > 0 && ((deltaX > this.leftWidth || deltaX > 0) && !this.leftWidth))
+      ) {
+        return;
+      }
+
+      if (this.direction === 'horizontal') {
+        event.preventDefault();
+        this.swipeMove(deltaX);
+      }
+    },
+
+    endDrag() {
+      if (this.disabled) {
+        return;
+      }
+
+      this.draging = false;
+      if (this.swiping) {
+        this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);
+      }
+    },
+
+    onClick(position = 'outside') {
+      this.$emit('click', position);
+
+      if (!this.offset) {
+        return;
+      }
+
+      if (this.onClose) {
+        this.onClose(position, this);
+      } else {
+        this.swipeMove(0);
+      }
+    }
+  },
+
+  render(h) {
+    const onClick = (position, stop) => event => {
+      if (stop) {
+        event.stopPropagation();
+      }
+      this.onClick(position);
+    };
+
+    const wrapperStyle = {
+      transform: `translate3d(${this.offset}px, 0, 0)`,
+      transition: this.draging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
+    };
+
+    return (
+      <div
+        class={bem()}
+        onClick={onClick('cell')}
+        onTouchstart={this.startDrag}
+        onTouchmove={this.onDrag}
+        onTouchend={this.endDrag}
+        onTouchcancel={this.endDrag}
+      >
+        <div
+          class={bem('wrapper')}
+          style={wrapperStyle}
+          onTransitionend={() => {
+            this.swipe = false;
+          }}
+        >
+          {this.leftWidth && (
+            <div class={bem('left')} onClick={onClick('left', true)}>
+              {this.$slots.left}
+            </div>
+          )}
+          {this.$slots.default}
+          {this.rightWidth && (
+            <div class={bem('right')} onClick={onClick('right', true)}>
+              {this.$slots.right}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+});