From 6cb7013dd7fcfe302ade9e4ea0579b96e9a69740 Mon Sep 17 00:00:00 2001
From: zzyangh <799463087@qq.com>
Date: Tue, 14 Jan 2025 15:38:08 +0800
Subject: [PATCH] [fix](BasicInputNumber): Add integer parameter to restrict
 numerical input

---
 .../AccessToken/GenerateTokenModal.tsx        |  8 +-
 .../page/DataSource/components/Form/index.tsx |  1 +
 .../WebhookSetting/components/ConfigField.tsx |  4 +-
 .../BasicInputNumber.test.tsx                 | 21 +++++
 .../BasicInputNumber/BasicInputNumber.tsx     | 22 +++++-
 .../BasicInputNumber.types.ts                 |  4 +-
 .../BasicInputNumber.test.tsx.snap            | 78 +++++++++++++++++++
 .../components/SqlBackupSwitcher.tsx          |  6 +-
 8 files changed, 131 insertions(+), 13 deletions(-)

diff --git a/packages/base/src/page/Account/components/AccessToken/GenerateTokenModal.tsx b/packages/base/src/page/Account/components/AccessToken/GenerateTokenModal.tsx
index 77f9d0d20..53c67fcf5 100644
--- a/packages/base/src/page/Account/components/AccessToken/GenerateTokenModal.tsx
+++ b/packages/base/src/page/Account/components/AccessToken/GenerateTokenModal.tsx
@@ -88,13 +88,7 @@ const GenerateTokenModal: React.FC<GenerateTokenModalProps> = ({
           ]}
         >
           <BasicInputNumber
-            formatter={(value) => {
-              if (!value) {
-                return '';
-              }
-
-              return `${Math.floor(value as number)}`;
-            }}
+            integer
             min={1}
             placeholder={t('common.form.placeholder.input', {
               name: t(
diff --git a/packages/base/src/page/DataSource/components/Form/index.tsx b/packages/base/src/page/DataSource/components/Form/index.tsx
index 5f057a60e..f6f172c03 100644
--- a/packages/base/src/page/DataSource/components/Form/index.tsx
+++ b/packages/base/src/page/DataSource/components/Form/index.tsx
@@ -571,6 +571,7 @@ const DataSourceForm: React.FC<IDataSourceFormProps> = (props) => {
                   placeholder={t('common.form.placeholder.input', {
                     name: t('dmsDataSource.dataSourceForm.lineNumberLimit')
                   })}
+                  integer
                 />
               </FormItemLabel>
             </EmptyBox>
diff --git a/packages/base/src/page/System/PushNotification/WebhookSetting/components/ConfigField.tsx b/packages/base/src/page/System/PushNotification/WebhookSetting/components/ConfigField.tsx
index 845838d34..6764b323f 100644
--- a/packages/base/src/page/System/PushNotification/WebhookSetting/components/ConfigField.tsx
+++ b/packages/base/src/page/System/PushNotification/WebhookSetting/components/ConfigField.tsx
@@ -31,7 +31,7 @@ const ConfigField = () => {
           }
         ]}
       >
-        <BasicInputNumber min={0} max={5} />
+        <BasicInputNumber integer min={0} max={5} />
       </FormItemLabel>
       <FormItemLabel
         className="has-required-style"
@@ -43,7 +43,7 @@ const ConfigField = () => {
           }
         ]}
       >
-        <BasicInputNumber min={1} max={5} />
+        <BasicInputNumber integer min={1} max={5} />
       </FormItemLabel>
       <FormItemLabel label="token" name="token">
         <BasicInput
diff --git a/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.test.tsx b/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.test.tsx
index 25c7dd621..14b66ddbd 100644
--- a/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.test.tsx
+++ b/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.test.tsx
@@ -1,6 +1,8 @@
 import { renderWithTheme } from '../../testUtil/customRender';
 import BasicInputNumber from './BasicInputNumber';
 import { BasicInputNumberProps } from './BasicInputNumber.types';
+import { act, fireEvent } from '@testing-library/react';
+import { getBySelector } from '../../testUtil/customQuery';
 
 describe('lib/BasicInputNumber', () => {
   const customRender = (params: BasicInputNumberProps) => {
@@ -28,4 +30,23 @@ describe('lib/BasicInputNumber', () => {
     });
     expect(container3).toMatchSnapshot();
   });
+
+  it('render integer input', async () => {
+    const { container } = customRender({
+      integer: true
+    });
+    expect(container).toMatchSnapshot();
+
+    const inputElement = getBySelector('input');
+
+    fireEvent.change(inputElement, {
+      target: { value: 1.1111 }
+    });
+
+    await act(async () => {
+      fireEvent.blur(inputElement);
+    });
+
+    expect(inputElement).toHaveValue('1');
+  });
 });
diff --git a/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.tsx b/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.tsx
index 05ff3c917..4ec819efa 100644
--- a/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.tsx
+++ b/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.tsx
@@ -3,9 +3,27 @@ import { BasicInputNumberStyleWrapper } from './style';
 import { ComponentControlHeight } from '../../data/common';
 import { BasicInputNumberProps } from './BasicInputNumber.types';
 import { ConfigProvider } from 'antd';
+import { useMemo } from 'react';
+import { InputNumberProps } from 'antd';
 
 const BasicInputNumber: React.FC<BasicInputNumberProps> = (props) => {
-  const { className, ...params } = props;
+  const { className, integer, ...params } = props;
+
+  const inputNumberProps: InputNumberProps = useMemo(() => {
+    if (integer) {
+      return {
+        formatter: (value) => {
+          if (!value) {
+            return '';
+          }
+
+          return `${Math.floor(value as number)}`;
+        },
+        ...params
+      };
+    }
+    return params;
+  }, [integer, params]);
 
   return (
     <ConfigProvider
@@ -22,7 +40,7 @@ const BasicInputNumber: React.FC<BasicInputNumberProps> = (props) => {
       <BasicInputNumberStyleWrapper
         size="large"
         className={classnames('basic-inputNumber-wrapper', className)}
-        {...params}
+        {...inputNumberProps}
       />
     </ConfigProvider>
   );
diff --git a/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.types.ts b/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.types.ts
index 9461f95ab..08a4764e5 100644
--- a/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.types.ts
+++ b/packages/shared/lib/components/BasicInputNumber/BasicInputNumber.types.ts
@@ -1,3 +1,5 @@
 import { InputNumberProps } from 'antd';
 
-export interface BasicInputNumberProps extends InputNumberProps {}
+export interface BasicInputNumberProps extends InputNumberProps {
+  integer?: boolean;
+}
diff --git a/packages/shared/lib/components/BasicInputNumber/__snapshots__/BasicInputNumber.test.tsx.snap b/packages/shared/lib/components/BasicInputNumber/__snapshots__/BasicInputNumber.test.tsx.snap
index f733ab13f..c037b1a65 100644
--- a/packages/shared/lib/components/BasicInputNumber/__snapshots__/BasicInputNumber.test.tsx.snap
+++ b/packages/shared/lib/components/BasicInputNumber/__snapshots__/BasicInputNumber.test.tsx.snap
@@ -311,3 +311,81 @@ exports[`lib/BasicInputNumber render diff size input number 4`] = `
   </div>
 </div>
 `;
+
+exports[`lib/BasicInputNumber render integer input 1`] = `
+<div>
+  <div
+    class="ant-input-number ant-input-number-lg css-dev-only-do-not-override-ezmdel basic-inputNumber-wrapper css-1fd5hnt"
+  >
+    <div
+      class="ant-input-number-handler-wrap"
+    >
+      <span
+        aria-disabled="false"
+        aria-label="Increase Value"
+        class="ant-input-number-handler ant-input-number-handler-up"
+        role="button"
+        unselectable="on"
+      >
+        <span
+          aria-label="up"
+          class="anticon anticon-up ant-input-number-handler-up-inner"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="up"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        aria-disabled="false"
+        aria-label="Decrease Value"
+        class="ant-input-number-handler ant-input-number-handler-down"
+        role="button"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-input-number-handler-down-inner"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-input-number-input-wrap"
+    >
+      <input
+        autocomplete="off"
+        class="ant-input-number-input"
+        role="spinbutton"
+        step="1"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/components/SqlBackupSwitcher.tsx b/packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/components/SqlBackupSwitcher.tsx
index 301e7c35a..59ddea231 100644
--- a/packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/components/SqlBackupSwitcher.tsx
+++ b/packages/sqle/src/page/SqlExecWorkflow/Common/SqlStatementFormController/SqlStatementFormItem/components/SqlBackupSwitcher.tsx
@@ -154,7 +154,11 @@ const SqlBackupSwitcher: React.FC<SqlBackupSwitcherProps> = ({
           name={[fieldPrefixPath, 'backupMaxRows']}
           initialValue={1000}
         >
-          <BasicInputNumber min={0} disabled={getInstanceEnableBackup()} />
+          <BasicInputNumber
+            integer
+            min={0}
+            disabled={getInstanceEnableBackup()}
+          />
         </FormItemLabel>
       </EmptyBox>
     </EmptyBox>