feat/fix: 优化 Input 在 type='number' 开启 coin 下输入溢出内容时的交互逻辑、修复 `In…

…put` 开启 `coin` 情况下初始化数据不展示千分号的问题 (#919) * fix: 修复 `Input` 开启 `coin` 情况下初始化数据不展示千分号的问题 * feat: 优化 `Input` 在 `type='number'` 开启 `coin` 下输入溢出内容时的交互逻辑 --------- Co-authored-by: 颜宇浩 <[email protected]>
sheinsight · Jan 10, 2025 · ef76054 · ef76054
1 parent 5ea9529
commit ef76054
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.7-beta.6",
+  "version": "3.5.7-beta.7",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/base/src/input/input.tsx b/packages/base/src/input/input.tsx
@@ -19,7 +19,7 @@ const Input = (props: InputProps) => {
     numType: commonProps.numType,
     trim: commonProps.trim ?? config.trim ?? false,
     // 移除 formName，避免渲染到原生 input 上
-    formName: undefined
+    formName: undefined,
   };
   const inputFormatProps = useInputFormat({
     value: commonProps.value,
@@ -30,14 +30,14 @@ const Input = (props: InputProps) => {
   const forwardProps = util.removeProps(commonProps, {
     ...inputFormatParams,
   });
-
+  
   return (
     <SimpleInputInput
       {...forwardProps}
       {...inputFormatProps}
       value={inputFormatProps.value ?? ''}
       hasSuffix={!!props.suffix}
-      onKeyDown={e => {
+      onKeyDown={(e) => {
         if (e.key === 'Enter' && !e.defaultPrevented) {
           const value = (e.target as HTMLInputElement).value;
           props.onChange?.(value);

diff --git a/packages/hooks/src/components/use-input/use-input-format.ts b/packages/hooks/src/components/use-input/use-input-format.ts
@@ -20,7 +20,7 @@ const useInputFormat = (props: InputFormatProps) => {
     coin,
     cancelBlurChange,
   } = props;
-  const [showCoin, setShowCoin] = React.useState(false);
+  const [showCoin, setShowCoin] = React.useState(coin);
   function isValidNumber(val: string) {
     const { numType } = props;
     const noNeg = numType === 'non-negative' || numType === 'positive';
@@ -44,6 +44,7 @@ const useInputFormat = (props: InputFormatProps) => {
       }
 
       const noNeg = numType === 'non-negative' || numType === 'positive';
+
       const regExp = new RegExp(
         `^(${noNeg ? '' : '-'})?(\\d${regLength(integerLimit)})(${
           digits !== 0 ? `\\.\\d${regLength(digits)}` : ''
@@ -52,6 +53,13 @@ const useInputFormat = (props: InputFormatProps) => {
       );
 
       value = value.replace(regExp, '$1$2$3');
+
+      // 修正小数位数
+      const _value = v.split('.');
+      const __value = value.split('.');
+      if (_value[1] !== undefined && __value[1] === undefined) {
+        value = `${value}.${_value[1]}`;
+      }
     }
     onChange(value);
   });

diff --git a/packages/shineout/src/input/__doc__/changelog.cn.md b/packages/shineout/src/input/__doc__/changelog.cn.md
@@ -1,3 +1,14 @@
+## 3.5.7-beta.7
+2025-01-10
+
+### 🐞 BugFix
+
+- 修复 `Input` 开启 `coin` 情况下初始化数据不展示千分号的问题 ([#919](https://github.com/sheinsight/shineout-next/pull/919))
+
+### 💎 Enhancement
+
+- 优化 `Input` 在 `type='number'` 开启 `coin` 下输入溢出内容时的交互逻辑 ([#919](https://github.com/sheinsight/shineout-next/pull/919))
+
 ## 3.5.7-beta.5
 2025-01-09
 

diff --git a/packages/shineout/src/input/__test__/input.spec.tsx b/packages/shineout/src/input/__test__/input.spec.tsx
@@ -181,7 +181,7 @@ describe('input number', () => {
       }
       const result =
         v.indexOf('.') >= 0
-          ? `${v.split('.')[0].substring(0, integerLimit)}`
+          ? `${v.split('.')[0].substring(0, integerLimit)}.${v.split('.')[1]}`
           : v.substring(0, integerLimit);
       expect(input?.getAttribute('value')).toBe(result);
     });