Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitdd2fb89

Browse files
authored
fix: debounce slider to avoid laggy behavior (#18980)
resolves#18856resolvescoder/internal#753
1 parent99adb4a commitdd2fb89

File tree

1 file changed

+30
-26
lines changed

1 file changed

+30
-26
lines changed

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,14 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
7777
/>
7878
<divclassName="max-w-lg">
7979
{parameter.form_type==="input"||
80-
parameter.form_type==="textarea" ?(
80+
parameter.form_type==="textarea"||
81+
parameter.form_type==="slider" ?(
8182
<DebouncedParameterField
8283
id={id}
8384
parameter={parameter}
8485
value={value}
8586
onChange={onChange}
8687
disabled={disabled}
87-
isPreset={isPreset}
8888
/>
8989
) :(
9090
<ParameterField
@@ -250,7 +250,6 @@ interface DebouncedParameterFieldProps {
250250
onChange:(value:string)=>void;
251251
disabled?:boolean;
252252
id:string;
253-
isPreset?:boolean;
254253
}
255254

256255
constDebouncedParameterField:FC<DebouncedParameterFieldProps>=({
@@ -259,7 +258,6 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
259258
onChange,
260259
disabled,
261260
id,
262-
isPreset,
263261
})=>{
264262
const[localValue,setLocalValue]=useState(
265263
value!==undefined ?value :validValue(parameter.value),
@@ -271,13 +269,13 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
271269
constprevDebouncedValueRef=useRef<string|undefined>();
272270
constprevValueRef=useRef(value);
273271

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
275273
useEffect(()=>{
276-
if(isPreset&&value!==undefined&&value!==prevValueRef.current){
274+
if(value!==undefined&&value!==prevValueRef.current){
277275
setLocalValue(value);
278276
prevValueRef.current=value;
279277
}
280-
},[value,isPreset]);
278+
},[value]);
281279

282280
useEffect(()=>{
283281
// Only call onChangeEvent if debouncedLocalValue is different from the previously committed value
@@ -408,6 +406,31 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
408406
</Stack>
409407
);
410408
}
409+
410+
case"slider":{
411+
constnumericValue=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+
<divclassName="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+
<spanclassName="w-4 font-medium">{numericValue}</span>
431+
</div>
432+
);
433+
}
411434
}
412435
};
413436

@@ -564,25 +587,6 @@ const ParameterField: FC<ParameterFieldProps> = ({
564587
</div>
565588
);
566589

567-
case"slider":
568-
return(
569-
<divclassName="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-
<spanclassName="w-4 font-medium">
582-
{Number.isFinite(Number(value)) ?value :"0"}
583-
</span>
584-
</div>
585-
);
586590
case"error":
587591
return<Diagnosticsdiagnostics={parameter.diagnostics}/>;
588592
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp