fix(inputnumber): icon 适配 && 修改icon宽度和设定的--nut-icon-width一致 (#2707)

* fix: update icons-react-taro version * chore: update pnpm-lock.yaml * fix: 修改icon * fix: icon 适配 && 修改icon 默认宽度和样式中--nut-icon-width保持一致
jdf2e · Nov 9, 2024 · 9338353 · 9338353
1 parent beb9fcd
commit 9338353
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 58 deletions.
diff --git a/src/packages/inputnumber/doc.en-US.md b/src/packages/inputnumber/doc.en-US.md
@@ -147,7 +147,7 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-inputnumber-input-border | The border value of the input in the number input box | `0` |
 | \--nutui-inputnumber-input-border-radius | The rounded corners of the input in the number input box | `6px` |
 | \--nutui-inputnumber-input-margin | The rounded corners of the input in the number input box | `0` |
-| \--nutui-inputnumber-button-width | The width of the left and right buttons of the number input box | `14px` |
+| \--nutui-inputnumber-button-width | The width of the left and right buttons of the number input box | `16px` |
 | \--nutui-inputnumber-button-height | The height of the left and right buttons of the number input box | `16px` |
 | \--nutui-inputnumber-button-border-radius | The rounded corners of the left and right buttons of the number input box | `30px` |
 | \--nutui-inputnumber-button-background-color | The background color of the left and right buttons of the number input box | `transparent` |

diff --git a/src/packages/inputnumber/doc.md b/src/packages/inputnumber/doc.md
@@ -147,7 +147,7 @@ import { InputNumber } from '@nutui/nutui-react'
 | \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
 | \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `6px` |
 | \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `0` |
-| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `14px` |
+| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `16px` |
 | \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `16px` |
 | \--nutui-inputnumber-button-border-radius | 数字输入框左右按钮的圆角 | `30px` |
 | \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |

diff --git a/src/packages/inputnumber/doc.taro.md b/src/packages/inputnumber/doc.taro.md
@@ -139,7 +139,7 @@ import { InputNumber } from '@nutui/nutui-react-taro'
 | \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
 | \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `6px` |
 | \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `0` |
-| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `14px` |
+| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `16px` |
 | \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `16px` |
 | \--nutui-inputnumber-button-border-radius | 数字输入框左右按钮的圆角 | `30px` |
 | \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |

diff --git a/src/packages/inputnumber/doc.zh-TW.md b/src/packages/inputnumber/doc.zh-TW.md
@@ -138,7 +138,7 @@ import { InputNumber } from '@nutui/nutui-react'
 | \--nutui-inputnumber-input-border | 數字輸入框中input的border值 | `0` |
 | \--nutui-inputnumber-input-border-radius | 數字輸入框中input的圓角 | `6px` |
 | \--nutui-inputnumber-input-margin | 數字輸入框中input的margin值 | `0` |
-| \--nutui-inputnumber-button-width | 數字輸入框左右按鈕的寬度 | `14px` |
+| \--nutui-inputnumber-button-width | 數字輸入框左右按鈕的寬度 | `16px` |
 | \--nutui-inputnumber-button-height | 數字輸入框左右按鈕的高度 | `16px` |
 | \--nutui-inputnumber-button-border-radius | 數字輸入框左右按鈕的圓角 | `30px` |
 | \--nutui-inputnumber-button-background-color | 數字輸入框左右按鈕的背景色 | `transparent` |

diff --git a/src/packages/inputnumber/inputnumber.harmony.css b/src/packages/inputnumber/inputnumber.harmony.css
@@ -7,7 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 14px;
+  width: 16px;
   height: 24px;
   background-color: transparent;
   border-radius: 16px;
@@ -16,7 +16,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 14px;
+  width: 16px;
   height: 24px;
   background-color: transparent;
   border-radius: 16px;

diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx
@@ -11,12 +11,11 @@ import {
   Input as TaroInput,
   InputProps,
   View,
-  Text,
 } from '@tarojs/components'
 import { Minus, Plus } from '@nutui/icons-react-taro'
 import { usePropsValue } from '@/utils/use-props-value'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import { harmony, harmonyAndRn, rn } from '@/utils/platform-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 export interface InputNumberProps extends BasicComponent {
   value: number | string
@@ -91,8 +90,6 @@ export const InputNumber: FunctionComponent<
     ...props,
   }
   const isRnAndHarmony = harmonyAndRn()
-  const isRn = rn()
-  const isHarmony = harmony()
   const classes = classNames(classPrefix, className)
   const [focused, setFocused] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -253,31 +250,16 @@ export const InputNumber: FunctionComponent<
   return (
     <View className={classes} style={style}>
       <View className={`${classPrefix}-minus`} onClick={handleReduce}>
-        {isRnAndHarmony ? (
-          <Text
-            className={classNames(
-              `${classPrefix}-icon ${classPrefix}-icon-minus`,
-              {
-                [`${classPrefix}-icon-disabled`]:
-                  shadowValue === min || disabled,
-              }
-            )}
-          >
-            -
-          </Text>
-        ) : (
-          <Minus
-            className={classNames(
-              `${classPrefix}-icon ${classPrefix}-icon-minus`,
-              {
-                [`${classPrefix}-icon-disabled`]:
-                  shadowValue === min || disabled,
-              }
-            )}
-          />
-        )}
+        <Minus
+          className={classNames(
+            `${classPrefix}-icon ${classPrefix}-icon-minus`,
+            {
+              [`${classPrefix}-icon-disabled`]: shadowValue === min || disabled,
+            }
+          )}
+        />
       </View>
-      {isRn ? (
+      {isRnAndHarmony ? (
         <TaroInput
           className={classNames(`${classPrefix}-input`, {
             [`${classPrefix}-input-disabled`]: disabled,
@@ -308,29 +290,14 @@ export const InputNumber: FunctionComponent<
       )}
 
       <View className={`${classPrefix}-add`} onClick={handlePlus}>
-        {isRnAndHarmony ? (
-          <Text
-            className={classNames(
-              `${classPrefix}-icon ${classPrefix}-icon-plus`,
-              {
-                [`${classPrefix}-icon-disabled`]:
-                  shadowValue === max || disabled,
-              }
-            )}
-          >
-            +
-          </Text>
-        ) : (
-          <Plus
-            className={classNames(
-              `${classPrefix}-icon ${classPrefix}-icon-plus`,
-              {
-                [`${classPrefix}-icon-disabled`]:
-                  shadowValue === max || disabled,
-              }
-            )}
-          />
-        )}
+        <Plus
+          className={classNames(
+            `${classPrefix}-icon ${classPrefix}-icon-plus`,
+            {
+              [`${classPrefix}-icon-disabled`]: shadowValue === max || disabled,
+            }
+          )}
+        />
       </View>
     </View>
   )

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -629,7 +629,7 @@ $inputnumber-input-border-radius: var(
   6px
 ) !default;
 $inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0) !default;
-$inputnumber-button-width: var(--nutui-inputnumber-button-width, 14px) !default;
+$inputnumber-button-width: var(--nutui-inputnumber-button-width, 16px) !default;
 $inputnumber-button-height: var(
   --nutui-inputnumber-button-height,
   24px