[new feature] Rate: add allow-half prop (#3134)

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