feat(Rate): Rate component support clearable (#3114)

* feat(rate): rate support clearable

* test(rate): fix test snapshot

* chore: update snapshot

* chore: update description

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Heising <[email protected]>

Author: 3 people

src/rate/Rate.tsx

@@ -33,13 +33,14 @@ const RateIcon: React.FC<RateIconProps> = ({ icon, ...props }) => {
 const Rate = React.forwardRef<HTMLDivElement, RateProps>((originalProps, ref) => {
   const props = useDefaultProps<RateProps>(originalProps, rateDefaultProps);
 
-  const { allowHalf, color, count, disabled, gap, showText, size, icon, className, style, onChange, texts } = props;
+  const { allowHalf, color, count, disabled, gap, showText, size, icon, className, style, onChange, texts, clearable } =
+    props;
   const [locale, t] = useLocaleReceiver('rate');
 
   const displayTexts = texts.length ? texts : t(locale.rateText);
 
   const { classPrefix } = useConfig();
-  const [starValue = 0, setStarValue] = useControlled(props, 'value', onChange);
+  const [starValue, setStarValue] = useControlled(props, 'value', onChange);
 
   const [hoverValue, setHoverValue] = useState<number | undefined>(undefined);
   const displayValue = hoverValue || starValue;
@@ -86,7 +87,14 @@ const Rate = React.forwardRef<HTMLDivElement, RateProps>((originalProps, ref) =>
     if (disabled) {
       return;
     }
-    setStarValue(getStarValue(event, index));
+
+    let value = getStarValue(event, index);
+    if (clearable && value === starValue) {
+      value = 0;
+      setHoverValue(undefined);
+    }
+
+    setStarValue(value);
   };
 
   const getStarCls = (index: number) => {

src/rate/__tests__/rate.test.tsx

@@ -78,5 +78,21 @@ describe('Rate 组件测试', () => {
       });
       expect(document.querySelector('.t-rate__item--half')).toBeTruthy();
     });
+
+    test('clearable', () => {
+      const { container } = render(<Rate defaultValue={1} clearable />);
+
+      // 默认展示
+      expect(container.querySelectorAll('.t-rate__item--full')).toHaveLength(1);
+
+      // 点击不同区域选中
+      fireEvent.click(container.querySelectorAll('.t-rate__item')[1]);
+      expect(container.querySelectorAll('.t-rate__item--full')).toHaveLength(2);
+
+      // 点击相同区域清除选中
+      fireEvent.click(container.querySelectorAll('.t-rate__item')[1]);
+
+      expect(container.querySelectorAll('.t-rate__item--full')).toHaveLength(0);
+    });
   });
 });

src/rate/_example/clearable.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Rate, Space } from 'tdesign-react';
+
+export default function BasicRate() {
+  return (
+    <Space direction="vertical">
+      <h3>clearable: true</h3>
+      <Rate defaultValue={3} clearable />
+      <h3>clearable: false</h3>
+      <Rate defaultValue={3} />
+    </Space>
+  );
+}

src/rate/defaultProps.ts

@@ -6,6 +6,7 @@ import { TdRateProps } from './type';
 
 export const rateDefaultProps: TdRateProps = {
   allowHalf: false,
+  clearable: false,
   color: '#ED7B2F',
   count: 5,
   disabled: undefined,

src/rate/rate.en-US.md

@@ -9,6 +9,7 @@ name | type | default | description | required
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 allowHalf | Boolean | false | \- | N
+clearable | Boolean | false | \- | N
 color | String / Array | '#ED7B2F' | Typescript：`string \| Array<string>` | N
 count | Number | 5 | \- | N
 disabled | Boolean | undefined | \- | N

src/rate/rate.md

@@ -9,6 +9,7 @@
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 allowHalf | Boolean | false | 是否允许半选 | N
+clearable | Boolean | false | 是否允许清除评分，如果允许，重新点击当前评分清除 | N
 color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
 count | Number | 5 | 评分的数量 | N
 disabled | Boolean | undefined | 是否禁用评分 | N

src/rate/type.ts

@@ -12,6 +12,11 @@ export interface TdRateProps {
    * @default false
    */
   allowHalf?: boolean;
+  /**
+   * 是否允许清除评分，如果允许，重新点击当前评分清除
+   * @default false
+   */
+  clearable?: boolean;
   /**
    * 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']
    * @default '#ED7B2F'