@@ -77,14 +77,14 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
77
77
/>
78
78
< div className = "max-w-lg" >
79
79
{ parameter . form_type === "input" ||
80
- parameter . form_type === "textarea" ? (
80
+ parameter . form_type === "textarea" ||
81
+ parameter . form_type === "slider" ? (
81
82
< DebouncedParameterField
82
83
id = { id }
83
84
parameter = { parameter }
84
85
value = { value }
85
86
onChange = { onChange }
86
87
disabled = { disabled }
87
- isPreset = { isPreset }
88
88
/>
89
89
) : (
90
90
< ParameterField
@@ -250,7 +250,6 @@ interface DebouncedParameterFieldProps {
250
250
onChange : ( value : string ) => void ;
251
251
disabled ?: boolean ;
252
252
id : string ;
253
- isPreset ?: boolean ;
254
253
}
255
254
256
255
const DebouncedParameterField : FC < DebouncedParameterFieldProps > = ( {
@@ -259,7 +258,6 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
259
258
onChange,
260
259
disabled,
261
260
id,
262
- isPreset,
263
261
} ) => {
264
262
const [ localValue , setLocalValue ] = useState (
265
263
value !== undefined ? value : validValue ( parameter . value ) ,
@@ -271,13 +269,13 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
271
269
const prevDebouncedValueRef = useRef < string | undefined > ( ) ;
272
270
const prevValueRef = useRef ( value ) ;
273
271
274
- // This is necessary in the case of fields being set by preset parameters
272
+ // Necessary for dynamic defaults or fields being set by preset parameters
275
273
useEffect ( ( ) => {
276
- if ( isPreset && value !== undefined && value !== prevValueRef . current ) {
274
+ if ( value !== undefined && value !== prevValueRef . current ) {
277
275
setLocalValue ( value ) ;
278
276
prevValueRef . current = value ;
279
277
}
280
- } , [ value , isPreset ] ) ;
278
+ } , [ value ] ) ;
281
279
282
280
useEffect ( ( ) => {
283
281
// Only call onChangeEvent if debouncedLocalValue is different from the previously committed value
@@ -408,6 +406,31 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
408
406
</ Stack >
409
407
) ;
410
408
}
409
+
410
+ case "slider" : {
411
+ const numericValue = Number . isFinite ( Number ( localValue ) )
412
+ ? Number ( localValue )
413
+ : 0 ;
414
+ const { validation_min : min = 0 , validation_max : max = 100 } =
415
+ parameter . validations [ 0 ] ?? { } ;
416
+
417
+ return (
418
+ < div className = "flex flex-row items-baseline gap-3" >
419
+ < Slider
420
+ id = { id }
421
+ className = "mt-2"
422
+ value = { [ numericValue ] }
423
+ onValueChange = { ( [ value ] ) => {
424
+ setLocalValue ( value . toString ( ) ) ;
425
+ } }
426
+ min = { min ?? undefined }
427
+ max = { max ?? undefined }
428
+ disabled = { disabled }
429
+ />
430
+ < span className = "w-4 font-medium" > { numericValue } </ span >
431
+ </ div >
432
+ ) ;
433
+ }
411
434
}
412
435
} ;
413
436
@@ -564,25 +587,6 @@ const ParameterField: FC<ParameterFieldProps> = ({
564
587
</ div >
565
588
) ;
566
589
567
- case "slider" :
568
- return (
569
- < div className = "flex flex-row items-baseline gap-3" >
570
- < Slider
571
- id = { id }
572
- className = "mt-2"
573
- value = { [ Number . isFinite ( Number ( value ) ) ? Number ( value ) : 0 ] }
574
- onValueChange = { ( [ value ] ) => {
575
- onChange ( value . toString ( ) ) ;
576
- } }
577
- min = { parameter . validations [ 0 ] ?. validation_min ?? 0 }
578
- max = { parameter . validations [ 0 ] ?. validation_max ?? 100 }
579
- disabled = { disabled }
580
- />
581
- < span className = "w-4 font-medium" >
582
- { Number . isFinite ( Number ( value ) ) ? value : "0" }
583
- </ span >
584
- </ div >
585
- ) ;
586
590
case "error" :
587
591
return < Diagnostics diagnostics = { parameter . diagnostics } /> ;
588
592
}
0 commit comments