From f7271b4aecc66eb359aeea4b483810110566c811 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 17 Oct 2018 16:36:13 +0800
Subject: [PATCH] [improvement] Rate: support touch move select (#1951)

---
 packages/rate/index.vue                       | 21 +++++++++++-
 .../rate/test/__snapshots__/demo.spec.js.snap | 32 +++++++++----------
 packages/rate/test/index.spec.js              | 17 +++++++++-
 3 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/packages/rate/index.vue b/packages/rate/index.vue
index b7e2e58f5..f3fafdcf7 100644
--- a/packages/rate/index.vue
+++ b/packages/rate/index.vue
@@ -1,11 +1,12 @@
 <template>
-  <div :class="b()">
+  <div :class="b()" @touchmove="onTouchMove">
     <svg
       v-for="(isFull, index) in list"
       :fill="disabled ? disabledColor : isFull ? color : voidColor"
       viewBox="0 0 32 32"
       :style="style"
       :class="b('item')"
+      :data-index="index"
       @click="onSelect(index)"
     >
       <path :d="isFull ? 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z' : 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z'" />
@@ -66,6 +67,24 @@ export default create({
         this.$emit('input', index + 1);
         this.$emit('change', index + 1);
       }
+    },
+
+    onTouchMove(event) {
+      if (!document.elementFromPoint) {
+        return;
+      }
+
+      event.preventDefault();
+      const { clientX, clientY } = event.touches[0];
+      const target = document.elementFromPoint(clientX, clientY);
+      if (target && target.dataset) {
+        const { index } = target.dataset;
+
+        /* istanbul ignore else */
+        if (index) {
+          this.onSelect(+index);
+        }
+      }
     }
   }
 });
diff --git a/packages/rate/test/__snapshots__/demo.spec.js.snap b/packages/rate/test/__snapshots__/demo.spec.js.snap
index 8dd6f7cf8..43bc0e24f 100644
--- a/packages/rate/test/__snapshots__/demo.spec.js.snap
+++ b/packages/rate/test/__snapshots__/demo.spec.js.snap
@@ -4,60 +4,60 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-rate">
-      <svg fill="#ffd21e" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#ffd21e" viewBox="0 0 32 32" data-index="0" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
       </svg>
-      <svg fill="#ffd21e" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#ffd21e" viewBox="0 0 32 32" data-index="1" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
       </svg>
-      <svg fill="#ffd21e" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#ffd21e" viewBox="0 0 32 32" data-index="2" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
       </svg>
-      <svg fill="#c7c7c7" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#c7c7c7" viewBox="0 0 32 32" data-index="3" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
       </svg>
-      <svg fill="#c7c7c7" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#c7c7c7" viewBox="0 0 32 32" data-index="4" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
       </svg>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <svg fill="#2ba" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
+      <svg fill="#2ba" viewBox="0 0 32 32" data-index="0" class="van-rate__item" style="width:25px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
       </svg>
-      <svg fill="#2ba" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
+      <svg fill="#2ba" viewBox="0 0 32 32" data-index="1" class="van-rate__item" style="width:25px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
       </svg>
-      <svg fill="#2ba" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
+      <svg fill="#2ba" viewBox="0 0 32 32" data-index="2" class="van-rate__item" style="width:25px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
       </svg>
-      <svg fill="#2ba" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
+      <svg fill="#2ba" viewBox="0 0 32 32" data-index="3" class="van-rate__item" style="width:25px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
       </svg>
-      <svg fill="#ceefe8" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
+      <svg fill="#ceefe8" viewBox="0 0 32 32" data-index="4" class="van-rate__item" style="width:25px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
       </svg>
-      <svg fill="#ceefe8" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
+      <svg fill="#ceefe8" viewBox="0 0 32 32" data-index="5" class="van-rate__item" style="width:25px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
       </svg>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="0" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
       </svg>
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="1" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
       </svg>
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="2" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
       </svg>
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="3" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
       </svg>
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
+      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="4" class="van-rate__item" style="width:20px;">
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
       </svg>
     </div>
diff --git a/packages/rate/test/index.spec.js b/packages/rate/test/index.spec.js
index 92c4fa3a5..1cb672a17 100644
--- a/packages/rate/test/index.spec.js
+++ b/packages/rate/test/index.spec.js
@@ -1,5 +1,5 @@
 import Rate from '../';
-import { mount } from '../../../test/utils';
+import { mount, triggerDrag } from '../../../test/utils';
 
 test('change event', () => {
   const wrapper = mount(Rate, {
@@ -17,3 +17,18 @@ test('change event', () => {
   expect(wrapper.emitted('input')[0][0]).toEqual(4);
   expect(wrapper.emitted('change')[0][0]).toEqual(4);
 });
+
+test('touchmove', () => {
+  const wrapper = mount(Rate);
+  triggerDrag(wrapper, 100, 0);
+
+  const icons = wrapper.findAll('svg');
+  document.elementFromPoint = function(x, y) {
+    const index = Math.round(x / 20);
+    if (index < icons.length) {
+      return icons.at(index).element;
+    }
+  };
+  triggerDrag(wrapper, 100, 0);
+  expect(wrapper.emitted('change')).toEqual([[2], [3], [4]]);
+});