Merge pull request #761 from thundersdata-frontend/scroll-number

fix: 修复无法自定义样式的问题
thundersdata-frontend · Nov 10, 2023 · 10905c2 · 10905c2
2 parents a8ac8ce + a9315c2
commit 10905c2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/.changeset/nasty-dolphins-wonder.md b/.changeset/nasty-dolphins-wonder.md
@@ -0,0 +1,5 @@
+---
+'@td-design/lego': patch
+---
+
+fix: 修复无法自定义样式的问题
diff --git a/packages/lego/src/scroll-number/index.less b/packages/lego/src/scroll-number/index.less
@@ -1,13 +1,13 @@
 .container {
-  color: #8dceff;
+  color: #fff;
 
   .boxItem {
     position: relative;
     display: inline-block;
     width: 18px;
     height: 32px;
     overflow: hidden;
-    color: #8dceff;
+    color: #fff;
     font-weight: bold;
     font-size: 28px;
     font-family: Roboto-Bold, Roboto;
@@ -19,19 +19,12 @@
     align-items: center;
     justify-content: center;
     transition: transform 0.5s ease-in-out;
+
     & > div {
-      width: 18px;
-      height: 32px;
-      line-height: 32px;
       text-align: center;
     }
   }
 
-  .sign {
-    position: relative;
-    bottom: 5px;
-  }
-
   .boxItem:last-child {
     margin-right: 0;
   }

diff --git a/packages/lego/src/scroll-number/index.md b/packages/lego/src/scroll-number/index.md
@@ -11,11 +11,12 @@ group:
 
 ## API
 
-| 属性           | 必填    | 说明           | 类型               | 默认值 |
-| -------------- | ------- | -------------- | ------------------ | ------ |
-| value          | `true`  | 数字           | `string \| number` |        |
-| containerStyle | `false` | 容器自定义样式 | `CSSProperties`    |        |
-| itemStyle      | `false` | 数字自定义样式 | `CSSProperties`    |        |
+| 属性           | 必填    | 说明             | 类型               | 默认值 |
+| -------------- | ------- | ---------------- | ------------------ | ------ |
+| value          | `true`  | 数字             | `string \| number` |        |
+| containerStyle | `false` | 容器自定义样式   | `CSSProperties`    |        |
+| itemStyle      | `false` | 数字自定义样式   | `CSSProperties`    |        |
+| separatorStyle | `false` | 分隔符自定义样式 | `CSSProperties`    |        |
 
 ## 1 常规
 

diff --git a/packages/lego/src/scroll-number/index.tsx b/packages/lego/src/scroll-number/index.tsx
@@ -4,15 +4,19 @@ import './index.less';
 
 export interface ScrollNumberProps {
   value: string | number;
+  separatorStyle?: React.CSSProperties;
   containerStyle?: React.CSSProperties;
   itemStyle?: React.CSSProperties;
 }
 
-const ScrollNumber: FC<ScrollNumberProps> = ({ value, containerStyle, itemStyle }) => {
+const ScrollNumber: FC<ScrollNumberProps> = ({ value, containerStyle, itemStyle, separatorStyle }) => {
   const numberItem = useRef<HTMLDivElement>(null);
 
   const [numStr, setNumStr] = useState(String(value));
 
+  const width = itemStyle?.width || 18;
+  const height = itemStyle?.height || 32;
+
   // 设置每一位数字的偏移
   const setNumberTransform = useCallback(() => {
     if (numberItem) {
@@ -44,7 +48,7 @@ const ScrollNumber: FC<ScrollNumberProps> = ({ value, containerStyle, itemStyle
         numStr.split('').map((item, index) => {
           if (item && isNaN(parseInt(item))) {
             return (
-              <span className="sign" key={numStr + index}>
+              <span style={separatorStyle} key={numStr + index}>
                 {item}
               </span>
             );
@@ -53,7 +57,11 @@ const ScrollNumber: FC<ScrollNumberProps> = ({ value, containerStyle, itemStyle
             <div key={numStr + index} className="boxItem" style={itemStyle}>
               <div className="boxList">
                 {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => {
-                  return <div key={item}>{item}</div>;
+                  return (
+                    <div key={item} style={{ width, height, lineHeight: `${height}px` }}>
+                      {item}
+                    </div>
+                  );
                 })}
               </div>
             </div>