Skip to content

Commit 4e78bd6

Browse files
Miles-hxyMiles-hxy
committed
feat: cancel auto compute input-width
1 parent 4f1ca2d commit 4e78bd6

File tree

10 files changed

+22
-58
lines changed

10 files changed

+22
-58
lines changed

‎src/packages/inputnumber/demos/h5/demo9.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ const Demo9 = () => {
1212
<ConfigProvider theme={customTheme3}>
1313
<InputNumber
1414
className="format-width"
15-
defaultValue={5}
16-
min={1}
17-
max={10}
15+
defaultValue={1000}
16+
min={10}
17+
max={15020}
1818
formatter={(value) =>
1919
`$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
2020
}
@@ -25,9 +25,9 @@ const Demo9 = () => {
2525
<ConfigProvider theme={customTheme3}>
2626
<InputNumber
2727
className="format-width"
28-
defaultValue={5}
28+
defaultValue={100}
2929
min={0}
30-
max={10}
30+
max={100}
3131
formatter={(value) => `${value}%`}
3232
/>
3333
</ConfigProvider>

‎src/packages/inputnumber/demos/taro/demo9.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import React, { useState } from 'react'
2-
import {
3-
Cell,
4-
ConfigProvider,
5-
InputNumber,
6-
Toast,
7-
} from '@nutui/nutui-react-taro'
2+
import { Cell, InputNumber, Toast } from '@nutui/nutui-react-taro'
3+
import ConfigProvider from '@/packages/configprovider'
84

95
const Demo9 = () => {
106
const customTheme3 = {
@@ -13,15 +9,16 @@ const Demo9 = () => {
139
const [toastType, SetToastType] = useState('text')
1410
const [show, SetShow] = useState(false)
1511
const [toastMsg, SetToastMsg] = useState('')
12+
1613
return (
1714
<>
1815
<Cell>
1916
<ConfigProvider theme={customTheme3}>
2017
<InputNumber
2118
className="format-width"
22-
defaultValue={5}
23-
min={1}
24-
max={10}
19+
defaultValue={1000}
20+
min={10}
21+
max={15020}
2522
formatter={(value) =>
2623
`$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
2724
}
@@ -32,9 +29,9 @@ const Demo9 = () => {
3229
<ConfigProvider theme={customTheme3}>
3330
<InputNumber
3431
className="format-width"
35-
defaultValue={1}
32+
defaultValue={100}
3633
min={0}
37-
max={10}
34+
max={100}
3835
formatter={(value) => `${value}%`}
3936
/>
4037
</ConfigProvider>

‎src/packages/inputnumber/doc.en-US.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,7 @@ The component provides the following CSS variables, which can be used to customi
139139

140140
| Name | Description | Default Value |
141141
| --- | --- | --- |
142-
| \--nutui-inputnumber-input-max-width | The maximum width of the input in the number input box | `23px` |
143-
| \--nutui-inputnumber-input-min-width | The minimum width of input in the number input box | `12px` |
142+
| \--nutui-inputnumber-input-width | The width of the input in the number input box | `23px` |
144143
| \--nutui-inputnumber-input-height | The height of the input in the number input box | `20px` |
145144
| \--nutui-inputnumber-input-background-color | The background color of the input in the number input box | `$color-background` |
146145
| \--nutui-inputnumber-input-font-color | The font size color of the input in the number input box | `$color-title` |

‎src/packages/inputnumber/doc.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,7 @@ import { InputNumber } from '@nutui/nutui-react'
139139

140140
| 名称 | 说明 | 默认值 |
141141
| --- | --- | --- |
142-
| \--nutui-inputnumber-input-max-width | 数字输入框中input的最大宽度 | `23px` |
143-
| \--nutui-inputnumber-input-min-width | 数字输入框中input的最小宽度 | `12px` |
142+
| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `23px` |
144143
| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
145144
| \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
146145
| \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |

‎src/packages/inputnumber/doc.taro.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,7 @@ import { InputNumber } from '@nutui/nutui-react-taro'
131131

132132
| 名称 | 说明 | 默认值 |
133133
| --- | --- | --- |
134-
| \--nutui-inputnumber-input-max-width | 数字输入框中input的最大宽度 | `23px` |
135-
| \--nutui-inputnumber-input-min-width | 数字输入框中input的最小宽度 | `12px` |
134+
| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `23px` |
136135
| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
137136
| \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
138137
| \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |

‎src/packages/inputnumber/doc.zh-TW.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,7 @@ import { InputNumber } from '@nutui/nutui-react'
130130

131131
| 名稱 | 說明 | 默認值 |
132132
| --- | --- | --- |
133-
| \--nutui-inputnumber-input-max-width | 數字輸入框中input的最大寬度 | `23px` |
134-
| \--nutui-inputnumber-input-min-width | 數字輸入框中input的最小寬度 | `12px` |
133+
| \--nutui-inputnumber-input-width | 數字輸入框中input的寬度 | `23px` |
135134
| \--nutui-inputnumber-input-height | 數字輸入框中input的高度 | `20px` |
136135
| \--nutui-inputnumber-input-background-color | 數字輸入框中input的背景顏色 | `$color-background` |
137136
| \--nutui-inputnumber-input-font-color | 數字輸入框中input的字號顏色 | `$color-title` |

‎src/packages/inputnumber/inputnumber.scss‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.nut-inputnumber {
22
display: inline-flex;
3-
max-width: calc(
4-
2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + #{$inputnumber-input-max-width}
3+
width: calc(
4+
2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + #{$inputnumber-input-width}
55
);
66
flex-direction: row;
77
align-items: center;
@@ -36,8 +36,7 @@
3636
display: flex;
3737
justify-content: center;
3838
align-items: center;
39-
max-width: $inputnumber-input-max-width;
40-
min-width: $inputnumber-input-min-width;
39+
width: $inputnumber-input-width;
4140
font-size: $inputnumber-input-font-size;
4241
height: $inputnumber-input-height;
4342
text-align: center;

‎src/packages/inputnumber/inputnumber.taro.tsx‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
Text,
1515
} from '@tarojs/components'
1616
import { Minus, Plus } from '@nutui/icons-react-taro'
17-
import { createSelectorQuery } from '@tarojs/taro'
1817
import { usePropsValue } from '@/utils/use-props-value'
1918
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
2019
import { harmonyAndRn, rn } from '@/utils/platform-taro'
@@ -143,22 +142,7 @@ export const InputNumber: FunctionComponent<
143142
setInputValue(format(shadowValue))
144143
}
145144
}, [focused, shadowValue])
146-
useEffect(() => {
147-
createSelectorQuery()
148-
.select(`#root${refRandomId.current} .nut-inputnumber-input`)
149-
.fields(
150-
{
151-
computedStyle: ['fontSize'],
152-
},
153-
(res) => {
154-
if (!res) return
155-
if (inputRef.current) {
156-
inputRef.current.style.width = `${inputValue.length * parseInt(res.fontSize)}px`
157-
}
158-
}
159-
)
160-
.exec()
161-
}, [inputValue])
145+
162146
useEffect(() => {
163147
if (async) {
164148
setShadowValue(bound(Number(value), Number(min), Number(max)))

‎src/packages/inputnumber/inputnumber.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,11 +136,6 @@ export const InputNumber: FunctionComponent<
136136
setInputValue(format(value))
137137
}
138138
}, [value])
139-
useEffect(() => {
140-
if (inputRef.current) {
141-
inputRef.current.style.width = `${inputValue.length * parseInt(window.getComputedStyle(inputRef.current).fontSize)}px`
142-
}
143-
}, [inputValue])
144139
const calcNextValue = (current: any, step: any, symbol: number) => {
145140
const dig = digits + 1
146141
return (

‎src/styles/variables.scss‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -612,14 +612,7 @@ $textarea-disabled-color: var(
612612
) !default;
613613

614614
// inputnumber（✅）
615-
$inputnumber-input-max-width: var(
616-
--nutui-inputnumber-input-max-width,
617-
23px
618-
) !default;
619-
$inputnumber-input-min-width: var(
620-
--nutui-inputnumber-input-min-width,
621-
12px
622-
) !default;
615+
$inputnumber-input-width: var(--nutui-inputnumber-input-width, 23px) !default;
623616
$inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default;
624617
$inputnumber-input-background-color: var(
625618
--nutui-inputnumber-input-background-color,

0 commit comments

Comments
 (0)