From cace40617e2e174e02feac1ed334a5ec1295da4e Mon Sep 17 00:00:00 2001
From: WmW <zhouzheng0646@qq.com>
Date: Fri, 20 May 2022 15:52:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Rate):=20=E9=87=8D=E6=9E=84=E8=AF=84?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E4=BB=B6=20#826=20(#843)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-rate/package.json       |  3 +-
 packages/react-rate/src/index.tsx      | 20 +++---
 packages/react-rate/src/style/index.ts | 84 ++++++++++++++++++++++++++
 theme/themeVariant.json5               | 10 +++
 4 files changed, 107 insertions(+), 10 deletions(-)
 create mode 100644 packages/react-rate/src/style/index.ts

diff --git a/packages/react-rate/package.json b/packages/react-rate/package.json
index 0221929880..b3105f4587 100644
--- a/packages/react-rate/package.json
+++ b/packages/react-rate/package.json
@@ -41,7 +41,8 @@
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "styled-components": "~5.3.5"
   },
   "dependencies": {
     "@uiw/utils": "^4.21.2"
diff --git a/packages/react-rate/src/index.tsx b/packages/react-rate/src/index.tsx
index 14a6417b57..e19b674211 100644
--- a/packages/react-rate/src/index.tsx
+++ b/packages/react-rate/src/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { IProps, HTMLDivProps, HTMLSpanProps, noop } from '@uiw/utils';
-import './style/index.less';
-
+// import './style/index.less';
+import RateWarp, { RateActive, RateBg } from './style';
 export interface RateProps extends IProps, Omit<HTMLDivProps, 'onChange'> {
   value?: number;
   readOnly?: boolean;
@@ -75,14 +75,16 @@ export default function Rate(props: RateProps = {}) {
     onChange(currentValue);
   }
   return (
-    <div {...other} className={cls} onMouseLeave={() => onMouseLeave()}>
+    <RateWarp {...other} className={cls} onMouseLeave={() => onMouseLeave()}>
       {[...Array(count)].map((_, idx) => {
         const halfon =
           (value <= idx + 0.5 && Math.ceil(value) - 1 === idx && hoverCount === -1) || hoverCount === idx + 0.5;
+        const starOn = idx + 1 <= value && hoverCount === -1;
+        const hoverOn = idx + 1 <= hoverCount;
         const activeCls = [
           `${prefixCls}-hight`,
-          idx + 1 <= value && hoverCount === -1 ? 'star-on' : null,
-          idx + 1 <= hoverCount ? 'hover-on' : null,
+          starOn ? 'star-on' : null,
+          hoverOn ? 'hover-on' : null,
           halfon ? 'half-on' : null,
         ]
           .filter(Boolean)
@@ -95,13 +97,13 @@ export default function Rate(props: RateProps = {}) {
         }
         return (
           <span key={idx} {...props}>
-            <span style={{ color }} className={activeCls}>
+            <RateActive style={{ color }} className={activeCls} starOn={starOn} hoverOn={hoverOn} halfon={halfon}>
               {character}
-            </span>
-            <span className={`${prefixCls}-bg`}>{character}</span>
+            </RateActive>
+            <RateBg className={`${prefixCls}-bg`}>{character}</RateBg>
           </span>
         );
       })}
-    </div>
+    </RateWarp>
   );
 }
diff --git a/packages/react-rate/src/style/index.ts b/packages/react-rate/src/style/index.ts
new file mode 100644
index 0000000000..54194364fe
--- /dev/null
+++ b/packages/react-rate/src/style/index.ts
@@ -0,0 +1,84 @@
+import styled, { css } from 'styled-components';
+import { ThemeVariantValueOptions, getThemeVariantValue } from '@uiw/utils';
+import { RateProps } from 'src';
+
+interface RateWarpProps extends ThemeVariantValueOptions, Pick<RateProps, 'disabled'> {}
+interface RateActiveProps extends ThemeVariantValueOptions, Pick<RateProps, 'disabled'> {
+  starOn: boolean;
+  hoverOn: boolean;
+  halfon: boolean;
+}
+interface RateBgProps extends ThemeVariantValueOptions, Pick<RateProps, 'disabled'> {}
+
+export const RateBg = styled.div<RateBgProps>`
+  color: ${(props) => getThemeVariantValue(props, 'colorRateBgBase')};
+`;
+export const RateActive = styled.div<RateActiveProps>`
+  z-index: 3;
+  line-height: ${(props) => getThemeVariantValue(props, 'lineHeightRateActiveDefault')};
+  position: absolute;
+  transition: color 0.3s, width 0.3s;
+  color: ${(props) => getThemeVariantValue(props, 'colorRateActiveBase')};
+  display: none;
+
+  ${(props) =>
+    props.hoverOn &&
+    css`
+      cursor: pointer;
+    `}
+  ${(props) =>
+    (props.starOn || props.hoverOn || props.halfon) &&
+    css`
+      display: inline-block;
+      color: ${(props) => getThemeVariantValue(props, 'colorRateActiveOn')};
+    `}
+  ${(props) =>
+    props.halfon &&
+    !props.hoverOn &&
+    css`
+      overflow: hidden;
+      width: 50%;
+    `}
+`;
+
+const RateWarp = styled.div<RateWarpProps>`
+  position: relative;
+  line-height: ${(props) => getThemeVariantValue(props, 'lineHeightRateDefault')};
+  font-size: ${(props) => getThemeVariantValue(props, 'fontSizeRateDefault')};
+  font-family: auto;
+  display: inline-block;
+  vertical-align: middle;
+  > span + span {
+    margin-left: 3px;
+  }
+
+  > span,
+  ${RateBg} {
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+  }
+`;
+
+RateBg.defaultProps = {
+  defaultTheme: {
+    colorRateBgBase: '#e9e9e9',
+  },
+};
+
+RateActive.defaultProps = {
+  defaultTheme: {
+    colorRateActiveBase: '#e9e9e9',
+    lineHeightRateActiveDefault: '12px',
+    colorRateActiveOn: '#f5a623',
+  },
+};
+
+RateWarp.defaultProps = {
+  defaultTheme: {
+    lineHeightRateDefault: '12px',
+    fontSizeRateDefault: '20px',
+  },
+};
+
+export default RateWarp;
diff --git a/theme/themeVariant.json5 b/theme/themeVariant.json5
index a21070dc19..8358313b04 100644
--- a/theme/themeVariant.json5
+++ b/theme/themeVariant.json5
@@ -151,6 +151,16 @@
   // -------------------------- empty 空状态 ----------------------------------
   colorEmptyBase: '#c7c7c7',
 
+  // -------------------------- rate 评分 ----------------------------------
+  lineHeightRateDefault: '12px',
+  fontSizeRateDefault: '20px',
+  // active
+  colorRateActiveBase: '#e9e9e9',
+  lineHeightRateActiveDefault: '12px',
+  colorRateActiveOn: '#f5a623',
+  // activeBs
+  colorRateBgBase: '#e9e9e9',
+
   // ---------------------------button 按钮部分 ------------------------------------
   colorButtonBase: '#fff',
   // 最小高度