Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(inputnumber): 增加 beforeChange，优化异步逻辑 #2950

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
+209 −229
Open

fix(inputnumber): 增加 beforeChange，优化异步逻辑 #2950

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
31b4667
fix(inputnumber): 增加 beforeChange，优化异步逻辑
oasis-cloud Jan 17, 2025
c91aa96
fix(inputnumber): 更新单测，因为 onChange 和 update 方法改成了 async 的
oasis-cloud Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 23 additions & 7 deletions src/packages/inputnumber/demos/h5/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,43 @@
import React, { useState } from 'react'
import React, { useRef, useState } from 'react'
import { InputNumber, Toast } from '@nutui/nutui-react'

type DebounceFunction<T extends any[]> = (...args: T) => void

function useDebounce<T extends any[]>(
func: (...args: T) => void,
delay: number
): DebounceFunction<T> {
const timeoutId: any = useRef()
return function (...args: T) {
if (timeoutId.current) {
clearTimeout(timeoutId.current)
}
timeoutId.current = setTimeout(() => {
func(...args)
}, delay)
}
}

const Demo8 = () => {
const [inputValue, setInputValue] = useState(0)
const overlimit = (e: any) => {
console.log('超出限制事件触发', e)
}
const onChange = (value: string | number) => {

const onChange = useDebounce((value: string | number) => {
Toast.show({ icon: 'loading', content: '异步演示2秒后更改' })
console.log('onChange', value)
setTimeout(() => {
setInputValue(Number(value))
Toast.clear()
}, 2000)
}
}, 300)

return (
<InputNumber
value={inputValue}
min={-6}
max={6}
min={-9999}
onChange={onChange}
onOverlimit={overlimit}
async
/>
)
}
Expand Down
29 changes: 22 additions & 7 deletions src/packages/inputnumber/demos/taro/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
import React, { useState } from 'react'
import React, { useRef, useState } from 'react'
import { InputNumber, Toast } from '@nutui/nutui-react-taro'

type DebounceFunction<T extends any[]> = (...args: T) => void

function useDebounce<T extends any[]>(
func: (...args: T) => void,
delay: number
): DebounceFunction<T> {
const timeoutId: any = useRef()
return function (...args: T) {
if (timeoutId.current) {
clearTimeout(timeoutId.current)
}
timeoutId.current = setTimeout(() => {
func(...args)
}, delay)
}
}

const Demo8 = () => {
const [inputValue, setInputValue] = useState(0)
const [show, SetShow] = useState(false)
Expand All @@ -15,23 +32,21 @@ const Demo8 = () => {
const overlimit = (e: any) => {
console.log('超出限制事件触发', e)
}
const onChange = (value: string | number) => {
const onChange = useDebounce((value: string | number) => {
toastShow('异步演示 2 秒后更改', 'loading')
console.log('onChange', value)
setTimeout(() => {
setInputValue(Number(value))
SetShow(false)
}, 2000)
}
}, 300)

return (
<>
<InputNumber
value={inputValue}
min={-6}
max={6}
min={-9999}
onChange={onChange}
onOverlimit={overlimit}
async
/>
<Toast
type={toastType}
Expand Down
5 changes: 3 additions & 2 deletions src/packages/inputnumber/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,10 @@ Asynchronous modification through `change` event and `model-value`
| digits | Set reserved decimal places | `string` \| `number` | `0` |
| disabled | Disable all features | `boolean` | `false` |
| readOnly | Read only status disables input box operation behavior | `boolean` | `false` |
| async | Support for asynchronous modification | `boolean` | `false` |
| select | Support deselect all text | `boolean` | `true` |
| ~~async~~`2.8.0` | Support for asynchronous modification | `boolean` | `false` |
| select`2.7.0` | Support deselect all text | `boolean` | `true` |
| formatter | Specifies the format of the value displayed in the input box | `function(value: number \| string): string` | `-` |
| beforeChange`2.8.0` | Callback function before the input value changes, return false to prevent input, support returning Promise | `(value: number \| string) => boolean \| Promise<boolean>` | `-` |
| onPlus | Triggered when the Add button is clicked | `(e: MouseEvent) => void` | `-` |
| onMinus | Triggered when the decrease button is clicked | `(e: MouseEvent) => void` | `-` |
| onOverlimit | Triggered when an unavailable button is clicked | `(e: MouseEvent) => void` | `-` |
Expand Down
5 changes: 3 additions & 2 deletions src/packages/inputnumber/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,10 @@ import { InputNumber } from '@nutui/nutui-react'
| digits | 设置保留的小数位 | `string` \| `number` | `0` |
| disabled | 禁用所有功能 | `boolean` | `false` |
| readOnly | 只读状态禁用输入框操作行为 | `boolean` | `false` |
| async | 支持异步修改 | `boolean` | `false` |
| select | 支持取消文本全选中 | `boolean` | `true` |
| ~~async~~`2.8.0` | 支持异步修改 | `boolean` | `false` |
| select`2.7.0` | 支持取消文本全选中 | `boolean` | `true` |
| formatter | 指定输入框展示值的格式 | `function(value: number \| string): string` | `-` |
| beforeChange`2.8.0` | 输入值变化前的回调函数，返回 false 可阻止输入，支持返回 Promise | `(value: number \| string) => boolean \| Promise<boolean>` | `-` |
| onPlus | 点击增加按钮时触发 | `(e: MouseEvent) => void` | `-` |
| onMinus | 点击减少按钮时触发 | `(e: MouseEvent) => void` | `-` |
| onOverlimit | 点击不可用的按钮时触发 | `(e: MouseEvent) => void` | `-` |
Expand Down
3 changes: 2 additions & 1 deletion src/packages/inputnumber/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,9 @@ import { InputNumber } from '@nutui/nutui-react-taro'
| digits | 设置保留的小数位 | `string` \| `number` | `0` |
| disabled | 禁用所有功能 | `boolean` | `false` |
| readOnly | 只读状态禁用输入框操作行为 | `boolean` | `false` |
| async | 支持异步修改 | `boolean` | `false` |
| ~~async~~`2.8.0` | 支持异步修改 | `boolean` | `false` |
| formatter | 指定输入框展示值的格式 | `function(value: number \| string): string` | `-` |
| beforeChange`2.8.0` | 输入值变化前的回调函数，返回 false 可阻止输入，支持返回 Promise | `(value: number \| string) => boolean \| Promise<boolean>` | `-` |
| onPlus | 点击增加按钮时触发 | `(e: MouseEvent) => void` | `-` |
| onMinus | 点击减少按钮时触发 | `(e: MouseEvent) => void` | `-` |
| onOverlimit | 点击不可用的按钮时触发 | `(e: MouseEvent) => void` | `-` |
Expand Down
4 changes: 3 additions & 1 deletion src/packages/inputnumber/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,10 @@ import { InputNumber } from '@nutui/nutui-react'
| digits | 設置保留的小數位 | `string` \| `number` | `0` |
| disabled | 禁用所有功能 | `boolean` | `false` |
| readOnly | 只讀狀態禁用輸入框操作行為 | `boolean` | `false` |
| async | 支持異步修改 | `boolean` | `false` |
| ~~async~~`2.8.0` | 支持異步修改 | `boolean` | `false` |
| select`2.7.0` | 支持取消文本全选中 | `boolean` | `true` |
| formatter | 指定輸入框展示值的格式 | `function(value: number \| string): string` | `-` |
| beforeChange`2.8.0` | 输入值变化前的回调函数，返回 false 可阻止输入，支持返回 Promise | `(value: number \| string) => boolean \| Promise<boolean>` | `-` |
| onPlus | 點擊增加按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
| onMinus | 點擊減少按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
| onOverlimit | 點擊不可用的按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
Expand Down
Loading
Loading