[fix](BasicInputNumber): Add integer parameter to restrict numerical input

Author: zzyangh

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(

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>

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

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');
+  });
 });

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>
   );

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;
+}

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>
+`;

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>