feat(web): input-number 统一逻辑优化 add canInputNumber

Tencent · Aug 10, 2022 · 1d43f75 · 1d43f75
1 parent 501b947
commit 1d43f75
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 19 deletions.
diff --git a/docs/web/api/input-number.md b/docs/web/api/input-number.md
@@ -56,6 +56,6 @@ spline: form
 
 {{ auto-width }}
 
-### 支持大数的输入框
+### 大数字输入框
 
 {{ large-number }}
diff --git a/js/input-number/number.ts b/js/input-number/number.ts
@@ -11,6 +11,8 @@ import {
 } from './large-number';
 import log from '../log';
 
+export * from './large-number';
+
 export type NumberType = number | string;
 
 // 小于最大值，才允许继续添加
@@ -33,30 +35,25 @@ export function canReduceNumber(num: NumberType, min: NumberType, largeNumber =
  * 格式化数字，如：2e3 转换为 2000
  * 如果不是数字，则不允许输入
  * decimalPlaces 小数点处理
- * format 自定义格式化函数
  */
 export function formatToNumber(
   num: string,
   extra?: {
     decimalPlaces?: number,
     largeNumber?: boolean,
-    format?: (value: NumberType, context: { fixedNumber: NumberType }) => NumberType,
   }
 ): string | number {
+  if (num === undefined || num === null || num === '') return num;
   if (num === '-') return 0;
   if (num[num.length - 1] === '.') return num.slice(0, -1);
   const isLargeNumber = extra?.largeNumber && isString(num);
   let newNumber: string | number = num;
   if ((isString(num) && num.includes('e')) || isNumber(num)) {
     newNumber = isLargeNumber ? formatENumber(num) : Number(num);
   }
-  const storeNumber = newNumber;
   if (extra?.decimalPlaces) {
     newNumber = largeNumberToFixed(newNumber, extra.decimalPlaces);
   }
-  if (extra.format) {
-    newNumber = extra.format(storeNumber, { fixedNumber: newNumber });
-  }
   return isLargeNumber ? newNumber : Number(newNumber);
 }
 
@@ -160,23 +157,40 @@ export function getStepValue(p: {
   return largeNumber ? r : Number(r);
 }
 
+/**
+ * 最大值和最小值校验
+ */
 export function getMaxOrMinValidateResult(p: {
   largeNumber: boolean,
-  number: NumberType,
+  value: NumberType,
   max: NumberType,
   min: NumberType,
 }): 'exceed-maximum' | 'below-minimum' | undefined {
-  const { largeNumber, number, max, min } = p;
-  if (largeNumber && isNumber(number)) {
+  const { largeNumber, value, max, min } = p;
+  if (largeNumber === undefined) return undefined;
+  if (largeNumber && isNumber(value)) {
     log.warn('InputNumber', 'largeNumber value must be a string.');
   }
   let error;
-  if (compareLargeNumber(number, max) > 0) {
+  if (compareLargeNumber(value, max) > 0) {
     error = 'exceed-maximum';
-  } else if (compareLargeNumber(number, min) < 0) {
+  } else if (compareLargeNumber(value, min) < 0) {
     error = 'below-minimum';
   } else {
     error = undefined;
   }
   return error;
 }
+
+/**
+ * 是否允许输入当前字符，输入字符校验
+ */
+export function canInputNumber(
+  number: string,
+  largeNumber: boolean,
+) {
+  if (!number && typeof number === 'string') return true;
+  const isNumber = (largeNumber && isInputNumber(number)) || !Number.isNaN(Number(number));
+  if (!isNumber && !['-', '.', 'e', 'E'].includes(number.slice(-1))) return false;
+  return true;
+}
diff --git a/style/web/components/input-number/_index.less b/style/web/components/input-number/_index.less
@@ -38,7 +38,7 @@
     appearance: textfield;
   }
 
-  .@{prefix}-input__tips {
+  > .@{prefix}-input__tips {
     // stylelint-disable-next-line length-zero-no-unit
     margin: 0 -@input-number-button-width;
     position: absolute;

diff --git a/test/unit/input-number/compareLargeNumber.test.js b/test/unit/input-number/compareLargeNumber.test.js
@@ -1,8 +1,5 @@
 import { compareLargeNumber, isInputNumber, formatENumber } from '../../../js/input-number/large-number';
 
-/**
- * 仅支持正整数
- */
 describe('compareLargeNumber', () => {
   it('0.1, 0.2', () => {
     expect(compareLargeNumber('0.1', '0.2')).toBe(-1);

diff --git a/test/unit/input-number/largeIntNumberAdd.test.js b/test/unit/input-number/largeIntNumberAdd.test.js
@@ -1,8 +1,5 @@
 import { largeIntNumberAdd } from '../../../js/input-number/large-number';
 
-/**
- * 仅支持正整数
- */
 describe('largeIntNumberAdd', () => {
   it('0 + 0', () => {
     expect(largeIntNumberAdd('0', '0')).toBe(String(0 + 0));