refactor(Rate): 重构评分组件 #826 (#843)

uiwjs · May 20, 2022 · cace406 · cace406
1 parent aeeb02f
commit cace406
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',
   // 最小高度