feat: support show exact value

Author: dogledogle

README.md

@@ -79,6 +79,7 @@ Then open `http://localhost:8000`.
 | `id` | string | - | Root element id. |
 | `keyboard` | boolean | true | Enable keyboard control. |
 | `prefixCls` | string | `'rc-rate'` | Prefix class name. |
+| `showExactValue` | boolean | false | Display the value exactly instead of rounding to whole or half items. Only works when `disabled` is enabled. |
 | `style` | React.CSSProperties | - | Root style. |
 | `tabIndex` | number | 0 | Root tab index. |
 | `value` | number | - | Controlled value. |

README.zh-CN.md

@@ -79,6 +79,7 @@ npm start
 | `id` | string | - | 根元素 ID。 |
 | `keyboard` | boolean | true | 启用键盘控制。 |
 | `prefixCls` | string | `'rc-rate'` | className 前缀。 |
+| `showExactValue` | boolean | false | 按传入值精确展示，而不是取整星或半星，仅在开启 `disabled` 时生效。 |
 | `style` | React.CSSProperties | - | 根样式。 |
 | `tabIndex` | number | 0 | 根选项卡索引。 |
 | `value` | number | - | 受控值。 |

docs/examples/simple.tsx

@@ -50,6 +50,14 @@ export default () => (
       style={{ fontSize: 50, marginTop: 24 }}
       character={<i className="anticon anticon-star" />}
     />
+    <br />
+    <Rate
+      value={3.8}
+      disabled
+      showExactValue
+      style={{ fontSize: 50, marginTop: 24 }}
+      character={<i className="anticon anticon-star" />}
+    />
     <h2>RTL</h2>
     <Rate
       defaultValue={1}

src/Rate.tsx

@@ -6,8 +6,10 @@ import Star from './Star';
 import useRefs from './useRefs';
 import { getOffsetLeft } from './util';
 
-export interface RateProps
-  extends Pick<StarProps, 'count' | 'character' | 'characterRender' | 'allowHalf' | 'disabled'> {
+export interface RateProps extends Pick<
+  StarProps,
+  'count' | 'character' | 'characterRender' | 'allowHalf' | 'showExactValue' | 'disabled'
+> {
   value?: number;
   defaultValue?: number;
   allowClear?: boolean;
@@ -52,6 +54,7 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
     keyboard = true,
 
     // Display
+    showExactValue = false,
     character = '★',
     characterRender,
 
@@ -209,6 +212,7 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
         disabled={disabled}
         prefixCls={`${prefixCls}-star`}
         allowHalf={allowHalf}
+        showExactValue={disabled && showExactValue}
         value={hoverValue === null ? value : hoverValue}
         onClick={onClick}
         onHover={onHover}

src/Star.tsx

@@ -7,6 +7,7 @@ export interface StarProps {
   index?: number;
   prefixCls?: string;
   allowHalf?: boolean;
+  showExactValue?: boolean;
   disabled?: boolean;
   onHover?: (e: React.MouseEvent<HTMLDivElement>, index: number) => void;
   onClick?: (
@@ -29,6 +30,7 @@ function Star(props: StarProps, ref: React.Ref<HTMLLIElement>) {
     count,
     value,
     allowHalf,
+    showExactValue,
     focused,
     onHover,
     onClick,
@@ -53,10 +55,19 @@ function Star(props: StarProps, ref: React.Ref<HTMLLIElement>) {
   // >>>>> ClassName
   const starValue = index + 1;
   const classNameList = new Set([prefixCls]);
+  const fraction = value - index;
+  let firstStyle: React.CSSProperties | undefined;
 
   // TODO: Current we just refactor from CC to FC. This logic seems can be optimized.
   if (value === 0 && index === 0 && focused) {
     classNameList.add(`${prefixCls}-focused`);
+  } else if (showExactValue && fraction > 0 && fraction < 1) {
+    // Reuse the half state so existing themes only need the dynamic width override.
+    classNameList.add(`${prefixCls}-half`);
+    classNameList.add(`${prefixCls}-active`);
+    firstStyle = {
+      width: `${Number((fraction * 100).toFixed(10))}%`,
+    };
   } else if (allowHalf && value + 0.5 >= starValue && value < starValue) {
     classNameList.add(`${prefixCls}-half`);
     classNameList.add(`${prefixCls}-active`);
@@ -89,7 +100,9 @@ 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={firstStyle}>
+          {characterNode}
+        </div>
         <div className={`${prefixCls}-second`}>{characterNode}</div>
       </div>
     </li>

tests/simple.spec.js

@@ -237,6 +237,52 @@ describe('rate', () => {
     });
   });
 
+  describe('showExactValue', () => {
+    it.each([
+      [3.8, 3, '80%'],
+      [4.9, 4, '90%'],
+    ])('renders %s in disabled mode', (value, index, width) => {
+      const { container } = render(<Rate value={value} disabled showExactValue />);
+      const star = getStar(container, index);
+
+      expect(star.classList.contains('rc-rate-star-half')).toBe(true);
+      expect(star.querySelector('.rc-rate-star-first')).toHaveStyle({ width });
+    });
+
+    it('renders fraction in RTL', () => {
+      const { container } = render(<Rate value={3.8} disabled showExactValue direction="rtl" />);
+      const star = getStar(container, 3);
+
+      expect(star.classList.contains('rc-rate-star-half')).toBe(true);
+      expect(star.querySelector('.rc-rate-star-first')).toHaveStyle({ width: '80%' });
+    });
+
+    it('only works in disabled mode', () => {
+      const { container } = render(<Rate value={3.8} showExactValue />);
+      const star = getStar(container, 3);
+
+      expect(star.classList.contains('rc-rate-star-half')).toBe(false);
+      expect(star.classList.contains('rc-rate-star-zero')).toBe(true);
+      expect(star.querySelector('.rc-rate-star-first')).not.toHaveAttribute('style');
+    });
+
+    it('does not override allowHalf in interactive mode', () => {
+      const { container } = render(<Rate value={3.8} allowHalf showExactValue />);
+      const star = getStar(container, 3);
+
+      expect(star.classList.contains('rc-rate-star-half')).toBe(true);
+      expect(star.querySelector('.rc-rate-star-first')).not.toHaveAttribute('style');
+    });
+
+    it('takes precedence over allowHalf in disabled mode', () => {
+      const { container } = render(<Rate value={3.8} disabled allowHalf showExactValue />);
+      const star = getStar(container, 3);
+
+      expect(star.classList.contains('rc-rate-star-half')).toBe(true);
+      expect(star.querySelector('.rc-rate-star-first')).toHaveStyle({ width: '80%' });
+    });
+  });
+
   describe('allowClear', () => {
     it('allowClear is false', () => {
       const handleChange = jest.fn();