From 9ecbcae725e9c46311db1d9c6013676043dac1f0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 11 Apr 2019 17:14:34 +0800
Subject: [PATCH] [new feature] Rate: add allow-half prop (#3134)

---
 packages/rate/demo/index.vue                  |  49 ++++++-
 packages/rate/en-US.md                        |  40 +++++-
 packages/rate/index.less                      |  16 ++-
 packages/rate/index.tsx                       |  95 +++++++++-----
 .../rate/test/__snapshots__/demo.spec.js.snap | 122 ++++++++++++++----
 packages/rate/test/index.spec.js              |  24 +++-
 packages/rate/zh-CN.md                        |  42 +++++-
 7 files changed, 314 insertions(+), 74 deletions(-)

diff --git a/packages/rate/demo/index.vue b/packages/rate/demo/index.vue
index c75b56811..b3b880ef8 100644
--- a/packages/rate/demo/index.vue
+++ b/packages/rate/demo/index.vue
@@ -16,18 +16,42 @@
       <van-rate
         v-model="value3"
         :size="25"
+        color="#f44"
+        void-icon="star"
+        void-color="#eee"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('halfStar')">
+      <van-rate
+        v-model="value4"
+        :size="25"
+        allow-half
+        void-icon="star"
+        void-color="#eee"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('customCount')">
+      <van-rate
+        v-model="value5"
         :count="6"
-        color="#07c160"
-        void-color="#ceefe8"
       />
     </demo-block>
 
     <demo-block :title="$t('disabled')">
       <van-rate
-        v-model="value4"
+        v-model="value6"
         disabled
       />
     </demo-block>
+
+    <demo-block :title="$t('readonly')">
+      <van-rate
+        v-model="value6"
+        readonly
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -35,14 +59,20 @@
 export default {
   i18n: {
     'zh-CN': {
+      halfStar: '半星',
       disabled: '禁用状态',
       customIcon: '自定义图标',
-      customStyle: '自定义样式'
+      customStyle: '自定义样式',
+      customCount: '自定义数量',
+      readonly: '只读状态'
     },
     'en-US': {
+      halfStar: 'Half Star',
       disabled: 'Disabled',
       customIcon: 'Custom Icon',
-      customStyle: 'Custom Style'
+      customStyle: 'Custom Style',
+      customCount: 'Custom Count',
+      readonly: 'Readonly'
     }
   },
 
@@ -50,8 +80,10 @@ export default {
     return {
       value1: 3,
       value2: 3,
-      value3: 4,
-      value4: 2
+      value3: 3,
+      value4: 2.5,
+      value5: 4,
+      value6: 3
     };
   }
 };
@@ -59,6 +91,9 @@ export default {
 
 <style lang="less">
 .demo-rate {
+  padding-bottom: 20px;
+  background-color: #fff;
+
   .van-rate {
     margin-left: 15px;
   }
diff --git a/packages/rate/en-US.md b/packages/rate/en-US.md
index 22cf1173c..e6bf638c4 100644
--- a/packages/rate/en-US.md
+++ b/packages/rate/en-US.md
@@ -41,18 +41,51 @@ export default {
 <van-rate
   v-model="value"
   :size="25"
-  :count="6"
-  color="#07c160"
-  void-color="#ceefe8"
+  color="#f44"
+  void-icon="star"
+  void-color="#eee"
 />
 ```
 
+#### Half Star
+
+```html
+<van-rate
+  v-model="value"
+  allow-half
+  void-icon="star"
+  void-color="#eee"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 2.5
+    };
+  }
+}
+```
+
+#### Custom Count
+
+```html
+<van-rate v-model="value" :count="6" />
+```
+
 #### Disabled
 
 ```html
  <van-rate v-model="value" disabled />
 ```
 
+#### Readonly
+
+```html
+<van-rate v-model="value" readonly />
+```
+
 ### API
 
 | Attribute | Description | Type | Default |
@@ -64,6 +97,7 @@ export default {
 | void-color | Void color | `String` | `#c7c7c7` |
 | icon | Selected icon | `String` | `star` |
 | void-icon | Void icon | `String` | `star-o` |
+| allow-half | Whether to allow half star | `Boolean` | `false` |
 | readonly | Whether to be readonly | `Boolean` | `false` |
 | disabled | Whether to disable rate | `Boolean` | `false` |
 | disabled-color | Disabled color | `String` | `#bdbdbd` | 
diff --git a/packages/rate/index.less b/packages/rate/index.less
index e01cbd56b..f0cc0202f 100644
--- a/packages/rate/index.less
+++ b/packages/rate/index.less
@@ -4,8 +4,20 @@
   user-select: none;
 
   &__item {
-    width: 1em;
+    display: inline-block;
+    position: relative;
     padding: 0 2px;
-    box-sizing: content-box;
+  }
+
+  &__icon {
+    width: 1em;
+
+    &--half {
+      position: absolute;
+      top: 0;
+      left: 2px;
+      width: .5em;;
+      overflow: hidden;
+    }
   }
 }
diff --git a/packages/rate/index.tsx b/packages/rate/index.tsx
index eec10630d..c834cc426 100644
--- a/packages/rate/index.tsx
+++ b/packages/rate/index.tsx
@@ -19,12 +19,25 @@ export type RateProps = {
   voidColor: string;
   readonly?: boolean;
   disabled?: boolean;
+  allowHalf?: boolean;
   disabledColor: string;
 };
 
 export type RateEvents = {
   input(index: number): void;
   change(index: number): void;
+};
+
+type RateStatus = 'full' | 'half' | 'void';
+
+function getRateStatus(value: number, index: number, allowHalf?: boolean): RateStatus {
+  if (value >= index) {
+    return 'full';
+  }
+  if (value + 0.5 >= index && allowHalf) {
+    return 'half';
+  }
+  return 'void';
 }
 
 function Rate(
@@ -33,19 +46,21 @@ function Rate(
   slots: DefaultSlots,
   ctx: RenderContext<RateProps>
 ) {
-  const list = [];
-  for (let i = 0; i < props.count; i++) {
-    list.push(i < props.value);
+  const { size, icon, voidIcon, color, voidColor, disabled, disabledColor } = props;
+
+  const list: RateStatus[] = [];
+  for (let i = 1; i <= props.count; i++) {
+    list.push(getRateStatus(props.value, i, props.allowHalf));
   }
 
-  const onSelect = (index: number) => {
-    if (!props.disabled && !props.readonly) {
-      emit(ctx, 'input', index + 1);
-      emit(ctx, 'change', index + 1);
+  function onSelect(index: number) {
+    if (!disabled && !props.readonly) {
+      emit(ctx, 'input', index);
+      emit(ctx, 'change', index);
     }
-  };
+  }
 
-  const onTouchMove = (event: TouchEvent) => {
+  function onTouchMove(event: TouchEvent) {
     if (!document.elementFromPoint) {
       return;
     }
@@ -53,37 +68,52 @@ function Rate(
     event.preventDefault();
     const { clientX, clientY } = event.touches[0];
     const target = document.elementFromPoint(clientX, clientY) as HTMLElement;
+
     if (target && target.dataset) {
-      const { index } = target.dataset;
+      const { score } = target.dataset;
 
       /* istanbul ignore else */
-      if (index) {
-        onSelect(+index);
+      if (score) {
+        onSelect(+score);
       }
     }
-  };
+  }
+
+  function renderStar(status: RateStatus, index: number) {
+    const isFull = status === 'full';
+    const isVoid = status === 'void';
+
+    return (
+      <div key={index} class={bem('item')}>
+        <Icon
+          name={isFull ? icon : voidIcon}
+          size={`${size}px`}
+          class={bem('icon')}
+          data-score={index + 1}
+          color={disabled ? disabledColor : isFull ? color : voidColor}
+          onClick={() => {
+            onSelect(index + 1);
+          }}
+        />
+        {props.allowHalf && (
+          <Icon
+            name={isVoid ? voidIcon : icon}
+            size={`${size}px`}
+            class={bem('icon', 'half')}
+            data-score={index + 0.5}
+            color={disabled ? disabledColor : isVoid ? voidColor : color}
+            onClick={() => {
+              onSelect(index + 0.5);
+            }}
+          />
+        )}
+      </div>
+    );
+  }
 
   return (
     <div class={bem()} {...inherit(ctx)} onTouchmove={onTouchMove}>
-      {list.map((full, index) => (
-        <Icon
-          key={index}
-          class={bem('item')}
-          size={`${props.size}px`}
-          data-index={index}
-          name={full ? props.icon : props.voidIcon}
-          color={
-            props.disabled
-              ? props.disabledColor
-              : full
-                ? props.color
-                : props.voidColor
-          }
-          onClick={() => {
-            onSelect(index);
-          }}
-        />
-      ))}
+      {list.map((status, index) => renderStar(status, index))}
     </div>
   );
 }
@@ -92,6 +122,7 @@ Rate.props = {
   value: Number,
   readonly: Boolean,
   disabled: Boolean,
+  allowHalf: Boolean,
   size: {
     type: Number,
     default: 20
diff --git a/packages/rate/test/__snapshots__/demo.spec.js.snap b/packages/rate/test/__snapshots__/demo.spec.js.snap
index 859c0c903..e51c3a07c 100644
--- a/packages/rate/test/__snapshots__/demo.spec.js.snap
+++ b/packages/rate/test/__snapshots__/demo.spec.js.snap
@@ -3,37 +3,109 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-rate"><i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
-        <!----></i><i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
-        <!----></i><i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
-        <!----></i><i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
-        <!----></i><i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
-        <!----></i></div>
+    <div class="van-rate">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+          <!----></i></div>
+    </div>
   </div>
   <div>
-    <div class="van-rate"><i data-index="0" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
-        <!----></i><i data-index="1" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
-        <!----></i><i data-index="2" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
-        <!----></i><i data-index="3" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
-        <!----></i><i data-index="4" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
-        <!----></i></div>
+    <div class="van-rate">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+          <!----></i></div>
+    </div>
   </div>
   <div>
-    <div class="van-rate"><i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
-        <!----></i><i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
-        <!----></i><i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
-        <!----></i><i data-index="3" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
-        <!----></i><i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
-        <!----></i><i data-index="5" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
-        <!----></i></div>
+    <div class="van-rate">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
+          <!----></i></div>
+    </div>
   </div>
   <div>
-    <div class="van-rate"><i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
-        <!----></i><i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
-        <!----></i><i data-index="2" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
-        <!----></i><i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
-        <!----></i><i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
-        <!----></i></div>
+    <div class="van-rate">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:25px;">
+          <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:25px;">
+          <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
+          <!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
+          <!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#eee;font-size:25px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
+          <!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#eee;font-size:25px;">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div class="van-rate">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div class="van-rate">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div class="van-rate">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+          <!----></i></div>
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+          <!----></i></div>
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/rate/test/index.spec.js b/packages/rate/test/index.spec.js
index f0d5b379b..657a6299b 100644
--- a/packages/rate/test/index.spec.js
+++ b/packages/rate/test/index.spec.js
@@ -13,13 +13,35 @@ test('change event', () => {
       }
     }
   });
-  const item4 = wrapper.findAll('.van-rate__item').at(3);
+  const item4 = wrapper.findAll('.van-rate__icon').at(3);
 
   item4.trigger('click');
   expect(onInput).toHaveBeenCalledWith(4);
   expect(onChange).toHaveBeenCalledWith(4);
 });
 
+test('allow half', () => {
+  const onInput = jest.fn();
+  const onChange = jest.fn();
+
+  const wrapper = mount(Rate, {
+    propsData: {
+      allowHalf: true
+    },
+    context: {
+      on: {
+        input: onInput,
+        change: onChange
+      }
+    }
+  });
+  const item4 = wrapper.findAll('.van-rate__icon--half').at(3);
+
+  item4.trigger('click');
+  expect(onInput).toHaveBeenCalledWith(3.5);
+  expect(onChange).toHaveBeenCalledWith(3.5);
+});
+
 test('disabled', () => {
   const onInput = jest.fn();
   const onChange = jest.fn();
diff --git a/packages/rate/zh-CN.md b/packages/rate/zh-CN.md
index d62416385..282651d7e 100644
--- a/packages/rate/zh-CN.md
+++ b/packages/rate/zh-CN.md
@@ -41,16 +41,49 @@ export default {
 <van-rate
   v-model="value"
   :size="25"
-  :count="6"
-  color="#07c160"
-  void-color="#ceefe8"
+  color="#f44"
+  void-icon="star"
+  void-color="#eee"
 />
 ```
 
+#### 半星
+
+```html
+<van-rate
+  v-model="value"
+  allow-half
+  void-icon="star"
+  void-color="#eee"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 2.5
+    };
+  }
+}
+```
+
+#### 自定义数量
+
+```html
+<van-rate v-model="value" :count="6" />
+```
+
 #### 禁用状态
 
 ```html
- <van-rate v-model="value" disabled />
+<van-rate v-model="value" disabled />
+```
+
+#### 只读状态
+
+```html
+<van-rate v-model="value" readonly />
 ```
 
 ### API
@@ -64,6 +97,7 @@ export default {
 | void-color | 未选中时的颜色 | `String` | `#c7c7c7` | - |
 | icon | 选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star` | 1.4.7 |
 | void-icon | 未选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star-o`  | 1.4.7 |
+| allow-half | 是否允许半选 | `Boolean` | `false` | 1.6.14 |
 | readonly | 是否为只读状态 | `Boolean` | `false` | 1.3.0 |
 | disabled | 是否禁用评分 | `Boolean` | `false` | - |
 | disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` | - |