AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-14 03:06:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve InputNumber component step behavior and disabled state (#16044)

Browse Source
This commit is contained in:
诗浓 2025-03-18 10:42:29 +08:00 committed by GitHub
parent 5e52d4d6b3
commit 947c9f70fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/app/components/base/input-number/index.tsx
View File

@ -12,10 +12,11 @@ export type InputNumberProps = {
max?: number max?: number
min?: number min?: number
defaultValue?: number defaultValue?: number
disabled?: boolean
} & Omit<InputProps, 'value' | 'onChange' | 'size' | 'min' | 'max' | 'defaultValue'> } & Omit<InputProps, 'value' | 'onChange' | 'size' | 'min' | 'max' | 'defaultValue'>
export const InputNumber: FC<InputNumberProps> = (props) => { export const InputNumber: FC<InputNumberProps> = (props) => {
const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, ...rest } = props const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, disabled, ...rest } = props
const isValidValue = (v: number) => { const isValidValue = (v: number) => {
if (max && v > max) if (max && v > max)
@ -26,6 +27,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
} }
const inc = () => { const inc = () => {
if (disabled) return
if (value === undefined) { if (value === undefined) {
onChange(defaultValue) onChange(defaultValue)
return return
@ -36,6 +39,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
onChange(newValue) onChange(newValue)
} }
const dec = () => { const dec = () => {
if (disabled) return
if (value === undefined) { if (value === undefined) {
onChange(defaultValue) onChange(defaultValue)
return return
@ -54,6 +59,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
value={value} value={value}
max={max} max={max}
min={min} min={min}
disabled={disabled}
onChange={(e) => { onChange={(e) => {
if (e.target.value === '') if (e.target.value === '')
onChange(undefined) onChange(undefined)
@ -68,17 +74,30 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
}} }}
unit={unit} unit={unit}
/> />
<div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs'> <div className={classNames(
<button onClick={inc} className={classNames( 'flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs',
disabled && 'opacity-50 cursor-not-allowed',
)}>
<button
onClick={inc}
disabled={disabled}
className={classNames(
size === 'sm' ? 'pt-1' : 'pt-1.5', size === 'sm' ? 'pt-1' : 'pt-1.5',
'px-1.5 hover:bg-components-input-bg-hover', 'px-1.5 hover:bg-components-input-bg-hover',
)}> disabled && 'cursor-not-allowed hover:bg-transparent',
)}
>
<RiArrowUpSLine className='size-3' /> <RiArrowUpSLine className='size-3' />
</button> </button>
<button onClick={dec} className={classNames( <button
onClick={dec}
disabled={disabled}
className={classNames(
size === 'sm' ? 'pb-1' : 'pb-1.5', size === 'sm' ? 'pb-1' : 'pb-1.5',
'px-1.5 hover:bg-components-input-bg-hover', 'px-1.5 hover:bg-components-input-bg-hover',
)}> disabled && 'cursor-not-allowed hover:bg-transparent',
)}
>
<RiArrowDownSLine className='size-3' /> <RiArrowDownSLine className='size-3' />
</button> </button>
</div> </div>

1
web/app/components/base/param-item/index.tsx
View File

@ -53,6 +53,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
min={min} min={min}
max={max} max={max}
step={step} step={step}
amount={step}
size='sm' size='sm'
value={value} value={value}
onChange={(value) => { onChange={(value) => {