Rate support precision

assets/index.less

@@ -45,11 +45,6 @@
       float: right;
     }
 
-    &-first,
-    &-second {
-      transition: all .3s;
-    }
-
     &-focused, &:hover {
       transform: scale(1.1);
     }
@@ -58,10 +53,11 @@
       position: absolute;
       left: 0;
       top: 0;
-      width: 50%;
+      width: 0%;
       height: 100%;
       overflow: hidden;
-      opacity: 0;
+      opacity: 1;
+      color: @rate-star-color;
 
       .@{rate-prefix-cls}-rtl & {
         right: 0;
@@ -73,16 +69,6 @@
     &-half &-second {
       opacity: 1;
     }
-
-    &-half &-first,
-    &-full &-second {
-      color: @rate-star-color;
-    }
-
-    &-half:hover &-first,
-    &-full:hover &-second {
-      color: tint(@rate-star-color,30%);
-    }
   }
 }
 

docs/examples/simple.tsx

@@ -1,6 +1,6 @@
 /* eslint no-console: 0 */
-import React from 'react';
 import Rate from 'rc-rate';
+import React from 'react';
 import '../../assets/index.less';
 
 function onChange(v: number) {
@@ -59,5 +59,14 @@ export default () => (
       style={{ fontSize: 50, marginTop: 24 }}
       character={<i className="anticon anticon-star" />}
     />
+    <h2>Precision</h2>
+    <Rate
+      defaultValue={1.2}
+      precision={0.1}
+      onChange={onChange}
+      count={10}
+      style={{ fontSize: 50, marginTop: 24 }}
+      character={<i className="anticon anticon-star" />}
+    />
   </div>
 );

src/Rate.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import type { StarProps } from './Star';
 import Star from './Star';
 import useRefs from './useRefs';
-import { getOffsetLeft } from './util';
+import { clamp, getBoundingClientRect, roundValueToPrecision } from './util';
 
 export interface RateProps
   extends Pick<StarProps, 'count' | 'character' | 'characterRender' | 'allowHalf' | 'disabled'> {
@@ -32,6 +32,10 @@ export interface RateProps
    * @default true
    */
   keyboard?: boolean;
+  /**
+   * Define the minimum increment value change
+   */
+  precision?: number;
 }
 
 export interface RateRef {
@@ -49,9 +53,14 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
     defaultValue,
     value: propValue,
     count = 5,
+    /**
+     * allow half star
+     * @deprecated Since precision has been implemented, `allowHalf` is no longer needed.
+     */
     allowHalf = false,
     allowClear = true,
     keyboard = true,
+    precision = 1,
 
     // Display
     character = '★',
@@ -76,6 +85,8 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
 
   const [getStarRef, setStarRef] = useRefs<HTMLElement>();
   const rateRef = React.useRef<HTMLUListElement>(null);
+  const mergedPrecision = allowHalf ? 0.5 : precision > 0 ? precision : 1;
+  const reverse = direction === 'rtl';
 
   // ============================ Ref =============================
   const triggerFocus = () => {
@@ -99,19 +110,36 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
   });
   const [cleanedValue, setCleanedValue] = useMergedState<number | null>(null);
 
-  const getStarValue = (index: number, x: number) => {
-    const reverse = direction === 'rtl';
-    let starValue = index + 1;
-    if (allowHalf) {
-      const starEle = getStarRef(index);
-      const leftDis = getOffsetLeft(starEle);
-      const width = starEle.clientWidth;
-      if (reverse && x - leftDis > width / 2) {
-        starValue -= 0.5;
-      } else if (!reverse && x - leftDis < width / 2) {
-        starValue -= 0.5;
-      }
+  const calculatePercentage = (delta: number, left: number, right: number) => {
+    return (reverse ? right - delta : delta - left) / (right - left);
+  };
+
+  const dealWithMergedPrecision = (delta: number) => {
+    const rootNode = rateRef.current;
+    const { right, left } = getBoundingClientRect(rootNode);
+    const percentage = calculatePercentage(delta, left, right);
+
+    let newHover = roundValueToPrecision(count * percentage + mergedPrecision / 2, mergedPrecision);
+    newHover = clamp(newHover, mergedPrecision, count);
+    return newHover;
+  };
+
+  const getStarValue = (index: number, delta: number) => {
+    let starValue = index;
+
+    const starEle = getStarRef(index);
+    const { left, right } = getBoundingClientRect(starEle);
+    if (!left || !right) return allowHalf ? starValue + 0.5 : starValue + 1;
+
+    const percentage = calculatePercentage(delta, left, right);
+    let roundedValue = roundValueToPrecision(percentage + mergedPrecision / 2, mergedPrecision);
+    roundedValue = clamp(roundedValue, mergedPrecision, 1);
+    starValue += roundedValue;
+
+    if (mergedPrecision > 1) {
+      return dealWithMergedPrecision(delta);
     }
+
     return starValue;
   };
 
@@ -138,7 +166,7 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
   const [hoverValue, setHoverValue] = React.useState<number | null>(null);
 
   const onHover = (event: React.MouseEvent<HTMLDivElement>, index: number) => {
-    const nextHoverValue = getStarValue(index, event.pageX);
+    const nextHoverValue = getStarValue(index, event.clientX);
     if (nextHoverValue !== cleanedValue) {
       setHoverValue(nextHoverValue);
       setCleanedValue(null);
@@ -159,7 +187,7 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
 
   // =========================== Click ============================
   const onClick = (event: React.MouseEvent | React.KeyboardEvent, index: number) => {
-    const newValue = getStarValue(index, (event as React.MouseEvent).pageX);
+    const newValue = getStarValue(index, (event as React.MouseEvent).clientX);
     let isReset = false;
     if (allowClear) {
       isReset = newValue === value;
@@ -171,8 +199,7 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
 
   const onInternalKeyDown: React.KeyboardEventHandler<HTMLUListElement> = (event) => {
     const { keyCode } = event;
-    const reverse = direction === 'rtl';
-    const step = allowHalf ? 0.5 : 1;
+    const step = mergedPrecision;
 
     if (keyboard) {
       if (keyCode === KeyCode.RIGHT && value < count && !reverse) {

src/Star.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
 import classNames from 'classnames';
+import KeyCode from 'rc-util/lib/KeyCode';
+import React from 'react';
 
 export interface StarProps {
   value?: number;
@@ -73,7 +73,9 @@ function Star(props: StarProps, ref: React.Ref<HTMLLIElement>) {
       classNameList.add(`${prefixCls}-focused`);
     }
   }
-
+  const memoWidth = React.useMemo(() => {
+    return Math.max(0, Math.min((value - index) * 100, 100));
+  }, [index, value]);
   // >>>>> Node
   const characterNode = typeof character === 'function' ? character(props) : character;
   let start: React.ReactNode = (
@@ -88,7 +90,14 @@ function Star(props: StarProps, ref: React.Ref<HTMLLIElement>) {
         aria-setsize={count}
         tabIndex={disabled ? -1 : 0}
       >
-        <div className={`${prefixCls}-first`}>{characterNode}</div>
+        <div
+          className={`${prefixCls}-first`}
+          style={{
+            width: `${memoWidth}%`,
+          }}
+        >
+          {characterNode}
+        </div>
         <div className={`${prefixCls}-second`}>{characterNode}</div>
       </div>
     </li>

src/util.ts

@@ -38,3 +38,29 @@ export function getOffsetLeft(el: HTMLElement) {
   pos.left += getScroll(w);
   return pos.left;
 }
+
+export const getBoundingClientRect = (element: HTMLElement) => {
+  return element.getBoundingClientRect();
+};
+
+function getDecimalPrecision(value: number) {
+  const decimalPart = value.toString().split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+
+export function roundValueToPrecision(value: number, precision: number) {
+  if (value == null) {
+    return value;
+  }
+
+  const nearest = Math.round(value / precision) * precision;
+  return Number(nearest.toFixed(getDecimalPrecision(precision)));
+}
+
+export function clamp(
+  val: number,
+  min: number = Number.MIN_SAFE_INTEGER,
+  max: number = Number.MAX_SAFE_INTEGER,
+): number {
+  return Math.max(min, Math.min(val, max));
+}