fix: 修复数字滚动组件bug

llq0802 · Dec 18, 2023 · c07bd4f · c07bd4f
1 parent 91806de
commit c07bd4f
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 115 deletions.
diff --git a/src/NumberRoll/components/DataChildren.tsx b/src/NumberRoll/components/DataChildren.tsx
@@ -1,5 +1,6 @@
 import classnames from 'classnames';
 import type { FC } from 'react';
+import { isNumber } from '..';
 
 export const NumberRoll_DaterArray = [
   '0',
@@ -15,30 +16,38 @@ export const NumberRoll_DaterArray = [
   ':',
   ' ',
   '-',
+  '/',
 ];
 
 interface PropsType {
   num: string;
+  index: number;
+  itemNumStyle?: React.CSSProperties;
+  itemCharStyle?: React.CSSProperties;
 }
 const prefixCls = 'lightd-number-roll';
-const DataChildren: FC<PropsType> = ({ num }) => {
-  const isDel = (item: string) => item === '-' || item === ' ' || item === ':';
+const DataChildren: FC<PropsType> = ({ num, itemNumStyle, itemCharStyle }) => {
+  const numStyle = itemNumStyle || {};
 
   return (
     <div
       className={classnames(
         `${prefixCls}-animate-dom`,
-        isDel(num) ? `${prefixCls}-animate-dom-del` : '',
+        !isNumber(num) ? `${prefixCls}-animate-dom-char` : '',
       )}
       data-num={num}
     >
       {NumberRoll_DaterArray.map((item, i) => (
         <span
+          key={i}
           className={classnames(
             `${prefixCls}-animate-dom-span`,
-            isDel(item) ? `${prefixCls}-animate-dom-span-del` : '',
+            !isNumber(item) ? `${prefixCls}-animate-dom-span-char` : '',
           )}
-          key={i}
+          style={{
+            ...numStyle,
+            ...(!isNumber(item) ? itemCharStyle : {}),
+          }}
         >
           {item}
         </span>

diff --git a/src/NumberRoll/components/ItemChildren.tsx b/src/NumberRoll/components/ItemChildren.tsx
@@ -1,29 +1,36 @@
 import classnames from 'classnames';
 import type { FC } from 'react';
+import { isNumber } from '..';
 
 export const NumberRoll_NumberArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
 
 interface PropsType {
   num: string;
+  index: number;
+  itemNumStyle?: React.CSSProperties;
+  itemCharStyle?: React.CSSProperties;
 }
 const prefixCls = 'lightd-number-roll';
-const ItemChildren: FC<PropsType> = ({ num }) => {
-  const isDel = (item: string) => item === '.';
-
+const ItemChildren: FC<PropsType> = ({ num, itemNumStyle, itemCharStyle }) => {
+  const numStyle = itemNumStyle || {};
   return (
     <div
       className={classnames(
         `${prefixCls}-animate-dom`,
-        isDel(num) ? `${prefixCls}-animate-dom-del` : '',
+        !isNumber(num) ? `${prefixCls}-animate-dom-char` : '',
       )}
       data-num={num}
     >
       {NumberRoll_NumberArray.map((item, i) => (
         <span
           className={classnames(
             `${prefixCls}-animate-dom-span`,
-            isDel(item) ? `${prefixCls}-animate-dom-span-del` : '',
+            !isNumber(item) ? `${prefixCls}-animate-dom-span-char` : '',
           )}
+          style={{
+            ...numStyle,
+            ...(!isNumber(item) ? itemCharStyle : {}),
+          }}
           key={i}
         >
           {item}

diff --git a/src/NumberRoll/demos/base.tsx b/src/NumberRoll/demos/base.tsx
@@ -1,19 +1,20 @@
+import { useInterval } from 'ahooks';
 import { LNumberRoll } from 'lighting-design';
 import type { FC } from 'react';
 import { useState } from 'react';
 
 const center = {
-  // display: 'flex',
-  // justifyContent: 'center',
+  display: 'flex',
+  justifyContent: 'center',
 };
 const Demo: FC = () => {
-  const [value, setValue] = useState(101.1);
+  const [value, setValue] = useState(10);
 
-  // useInterval(() => {
-  //   setValue((num) => (num > Number.MAX_SAFE_INTEGER ? 10 : num + 10));
-  // }, 2000);
+  useInterval(() => {
+    setValue((num) => (num > Number.MAX_SAFE_INTEGER ? 10 : num + 10));
+  }, 2000);
 
-  return <LNumberRoll style={center} value={value} />;
+  return <LNumberRoll style={center} value={value} speed={500} />;
 };
 
 export default Demo;
diff --git a/src/NumberRoll/demos/date.tsx b/src/NumberRoll/demos/date.tsx
@@ -11,13 +11,13 @@ const center = {
 const Demo: FC = () => {
   const [value, setValue] = useState<string>(dayjs().format('HH:mm:ss'));
   const [value3] = useState<string>(dayjs().format('YYYY-MM-DD'));
-  const [value2, setValue2] = useState<string>(
-    dayjs().format('YYYY-MM-DD HH:mm:ss'),
-  );
+  const [value2, setValue2] = useState<string>(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+  const [value4, setValue4] = useState<string>(dayjs().format('YYYY/MM/DD HH:mm:ss'));
 
   useInterval(() => {
     setValue(dayjs().format('HH:mm:ss'));
     setValue2(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+    setValue4(dayjs().format('YYYY/MM/DD HH:mm:ss'));
   }, 2000);
 
   return (
@@ -34,6 +34,8 @@ const Demo: FC = () => {
       <LNumberRoll style={center} value={value3} type="date" />
       <br />
       <LNumberRoll style={center} value={value2} type="date" />
+      <br />
+      <LNumberRoll style={center} value={value4} type="date" />
     </>
   );
 };

diff --git a/src/NumberRoll/demos/decimal.tsx b/src/NumberRoll/demos/decimal.tsx
@@ -9,11 +9,11 @@ const center = {
 };
 const Demo: FC = () => {
   const [value, setValue] = useState(() => {
-    return Number((Math.random() * 1000000000).toFixed(2)) as number;
+    return Number((Math.random() * 1000000000).toFixed(4)) as number;
   });
 
   useInterval(() => {
-    const random = Number((Math.random() * 1000000000).toFixed(2)) as number;
+    const random = Number((Math.random() * 1000000000).toFixed(4)) as number;
     setValue(random);
   }, 5000);
 

diff --git a/src/NumberRoll/demos/index.less b/src/NumberRoll/demos/index.less
diff --git a/src/NumberRoll/demos/style.tsx b/src/NumberRoll/demos/style.tsx
@@ -3,7 +3,6 @@ import dayjs from 'dayjs';
 import { LNumberRoll } from 'lighting-design';
 import type { FC } from 'react';
 import { useState } from 'react';
-import './index.less';
 
 const center = {
   display: 'flex',
@@ -20,9 +19,18 @@ const Demo: FC = () => {
   return (
     <LNumberRoll
       style={center}
-      className="my-number-style"
       value={value}
       type="date"
+      height={70}
+      fontSize={50}
+      itemNumStyle={{
+        backgroundColor: '#000',
+        color: '#fff',
+        fontWeight: 'bold',
+        margin: '0 2px',
+        width: 50,
+        outline: '2px solid #fff',
+      }}
     />
   );
 };

diff --git a/src/NumberRoll/index.less b/src/NumberRoll/index.less
@@ -1,44 +1,3 @@
-// @NumberRollPrefixCls: ~'lightd-number-roll';
-
-// .@{NumberRollPrefixCls} {
-//   user-select: none;
-//   font-size: 36px;
-
-//   &-animate {
-//     // display: flex;
-//     position: relative;
-//     height: var(--lightd-number-roll-height);
-//     line-height: var(--lightd-number-roll-height);
-//     overflow: hidden;
-//   }
-
-//   &-animate-dom {
-//     float: left;
-//     display: flex;
-//     flex-direction: column;
-//     align-items: center;
-//   }
-
-//   &-animate-dom-del {
-//     width: 20px;
-//   }
-
-//   &-animate-dot {
-//     width: 14px;
-//     font-size: 30px;
-//     text-align: center;
-//   }
-
-//   &-animate-dot,
-//   &-animate-dom {
-//     span {
-//       display: grid;
-//       place-items: center;
-//       height: var(--lightd-number-roll-height);
-//     }
-//   }
-// }
-
 @NumberRollPrefixCls: ~'lightd-number-roll';
 
 .@{NumberRollPrefixCls} {
@@ -52,7 +11,7 @@
     overflow: hidden;
     height: var(--lightd-number-roll-height);
     line-height: var(--lightd-number-roll-height);
-    font-size: var(--lightd-number-roll-height);
+    font-size: var(--lightd-number-roll-font-size);
   }
 
   &-animate-dot,
@@ -62,22 +21,28 @@
     float: left;
     display: flex;
     flex-direction: column;
+    align-items: center;
   }
 
   &-animate-dot-span,
   &-animate-dom-span {
     text-align: center;
     line-height: 1;
-    width: 100%;
+    width: auto;
     height: var(--lightd-number-roll-height);
-    font-size: var(--lightd-number-roll-height);
+    font-size: var(--lightd-number-roll-font-size);
+    display: grid;
+    place-items: center;
+  }
+
+  &-animate-dom-span-char {
+    // width: min-content;
+    width: auto;
   }
 
   &-animate-dot-span {
     line-height: 0.72;
     width: 16px;
+    place-items: inherit;
   }
-  // &-animate-dom-span-del {
-  //   width: min-content;
-  // }
 }
diff --git a/src/NumberRoll/index.md b/src/NumberRoll/index.md
@@ -39,24 +39,32 @@ nav:
 
 :::warning{title=注意}
 
-- 如果要设置组件的高度及字体大小 请通过 `height` 以保证滚动的计算
+- 如果要设置组件的高度请通过 `height` 以保证滚动的计算
+
+- 字体大小必须`小于等于 height`
+
+- 如果要设置字体的其余样式 请通过`className`或`style`或`itemNumStyle`
 
   :::
 
 ```ts
 import { LNumberRoll } from 'lighting-design';
 ```
 
-|   参数    |                说明                |                类型                |   默认值   |
-| :-------: | :--------------------------------: | :--------------------------------: | :--------: |
-|   type    |                类型                |         `'date'\|'number'`         | `'number'` |
-|  height   |       组件的高度及字体的大小       |          `string\|number`          |    `36`    |
-|   value   |                 值                 |          `string\|number`          |    `1`     |
-| minLength |        最小位数（个位数起）        |              `number`              |    `-`     |
-|   scale   |              缩放大小              |              `number`              |    `1`     |
-|   speed   |              速度 ms               |              `number`              |  `500ms`   |
-|    dot    |            保留几位小数            |              `number`              |    `0`     |
-|  symbol   | 分割符号（禁用 "."） 1,000,000,000 |              `string`              |    `-`     |
-| className |              容器类名              |              `string`              |    `-`     |
-|   style   |              容器样式              |          `CSSProperties`           |    `-`     |
-| onFinish  |           动画结束的回调           | `(value:string \| number) => void` |    `- `    |
+|     参数      |                              说明                              |                类型                |   默认值   |
+| :-----------: | :------------------------------------------------------------: | :--------------------------------: | :--------: |
+|     type      |                              类型                              |         `'date'\|'number'`         | `'number'` |
+|   fontSize    |                         组件的字体大小                         |          `string\|number`          |    `36`    |
+|    height     |                           组件的高度                           |          `string\|number`          |    `36`    |
+|     value     |                               值                               |          `string\|number`          |    `0`     |
+|   minLength   |                      最小位数（个位数起）                      |              `number`              |    `-`     |
+|     scale     |                            缩放大小                            |              `number`              |    `1`     |
+|     speed     |                        移动速度 单位 ms                        |              `number`              |   `600`    |
+|      dot      |                          保留几位小数                          |              `number`              |    `0`     |
+|    symbol     |             分割符号`（ 不能使用"." 建议使用","）`             |              `string`              |    `-`     |
+|   className   |                            容器类名                            |              `string`              |    `-`     |
+|     style     |                            容器样式                            |          `CSSProperties`           |    `-`     |
+| itemNumStyle  |                    每一项数值类型滚动的样式                    |          `CSSProperties`           |    `-`     |
+| itemCharStyle | 每一项不是数值类型滚动的样式 比如 value 中包函 '.' ':' '-' '/' |          `CSSProperties`           |    `-`     |
+|  symbolStyle  |                         分隔符的的样式                         |          `CSSProperties`           |    `-`     |
+|   onFinish    |                         动画结束的回调                         | `(value:string \| number) => void` |    `- `    |