Skip to content

Commit 4ddf310

Browse files
nicosammitonicosammito
authored
Merge pull request #238 from code0-tech/feat/instant-value-setting-deboucing-update
Correct debounce of inputs
2 parents 2c6fb0e + 2e13b51 commit 4ddf310

10 files changed

Lines changed: 243 additions & 242 deletions

‎package-lock.json‎

Lines changed: 71 additions & 158 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"dependencies": {
1717
"@apollo/client": "^4.0.9",
18-
"@code0-tech/pictor": "^0.10.4",
18+
"@code0-tech/pictor": "^0.10.6",
1919
"@code0-tech/triangulum": "^0.25.2",
2020
"@codemirror/lang-javascript": "^6.2.5",
2121
"@codemirror/lint": "^6.9.5",

‎src/packages/ce/src/datatype/components/inputs/boolean/DataTypeBooleanInputComponent.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,31 @@ export const DataTypeBooleanInputComponent: React.FC<DataTypeBooleanInputCompone
3131
return React.useMemo(() => <>
3232
<InputLabel>{title}</InputLabel>
3333
<InputDescription>{description}</InputDescription>
34-
<DataTypeInputValueComponent inside initialValue={initialValue} onChange={onChangeDebounced}
34+
<DataTypeInputValueComponent inside initialValue={initialValue} onChange={value => {
35+
formValidation?.setValue?.(value)
36+
onChangeDebounced(value)
37+
}}
3538
suggestions={suggestions} formValidation={formValidation}>
3639
<SegmentedControl type={"single"}
3740
h={"100%"}
3841
ml={-0.35}
3942
bg={"transparent"}
4043
style={{boxShadow: "none"}}
4144
value={(initialValue as LiteralValue)?.value?.toString() ?? ""}
42-
onValueChange={onChangeDebounced}>
45+
onValueChange={value => {
46+
if (typeof value === "string") {
47+
const boolValue: LiteralValue | null = value && ["true", "false"].includes(value) ? {
48+
__typename: "LiteralValue",
49+
value: value === "true"
50+
} : null
51+
52+
formValidation?.setValue?.(boolValue)
53+
onChangeDebounced(boolValue)
54+
} else {
55+
formValidation?.setValue?.(value)
56+
onChangeDebounced?.(value)
57+
}
58+
}}>
4359
<SegmentedControlItem w={"100%"} value={"true"}>
4460
True
4561
</SegmentedControlItem>

‎src/packages/ce/src/datatype/components/inputs/generic/DataTypeGenericInputComponent.tsx‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,61 @@ export const DataTypeGenericInputComponent: React.FC<DataTypeGenericInputCompone
1212
const {title, description, onChange, formValidation} = props
1313

1414
const onChangeDebounced = useDebouncedCallback((value: LiteralValue | NodeFunction | ReferenceValue | null) => {
15-
formValidation?.setValue?.(value)
1615
onChange?.(value)
1716
}, 200)
1817

1918
return <>
2019
<InputLabel>{title}</InputLabel>
2120
<InputDescription>{description}</InputDescription>
2221
<ButtonGroup color={"secondary"}>
23-
<Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: 0})}>
22+
<Button color={"tertiary"} onClick={() => {
23+
formValidation?.setValue?.({
24+
__typename: "LiteralValue", value: 0
25+
})
26+
onChangeDebounced({
27+
__typename: "LiteralValue", value: 0
28+
})
29+
}}>
2430
Number Value
2531
</Button>
26-
<Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: false})}>
32+
<Button color={"tertiary"} onClick={() => {
33+
formValidation?.setValue?.({
34+
__typename: "LiteralValue", value: false
35+
})
36+
onChangeDebounced({
37+
__typename: "LiteralValue", value: false
38+
})
39+
}}>
2740
Boolean Value
2841
</Button>
29-
<Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: ""})}>
42+
<Button color={"tertiary"} onClick={() => {
43+
formValidation?.setValue?.({
44+
__typename: "LiteralValue", value: ""
45+
})
46+
onChangeDebounced({
47+
__typename: "LiteralValue", value: ""
48+
})
49+
}}>
3050
Text Value
3151
</Button>
32-
<Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: []})}>
52+
<Button color={"tertiary"} onClick={() => {
53+
formValidation?.setValue?.({
54+
__typename: "LiteralValue", value: []
55+
})
56+
onChangeDebounced({
57+
__typename: "LiteralValue", value: []
58+
})
59+
}}>
3360
List Value
3461
</Button>
35-
<Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: {}})}>
62+
<Button color={"tertiary"} onClick={() => {
63+
formValidation?.setValue?.({
64+
__typename: "LiteralValue", value: {}
65+
})
66+
onChangeDebounced({
67+
__typename: "LiteralValue", value: {}
68+
})
69+
}}>
3670
Data Value
3771
</Button>
3872
</ButtonGroup>

‎src/packages/ce/src/datatype/components/inputs/json/DataTypeJSONInputComponent.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,8 @@ export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProp
2929
const [collapsedState, setCollapsedStateRaw] = React.useState<Record<string, boolean>>({})
3030

3131
const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | NodeFunction | ReferenceValue | null) => {
32-
formValidation?.setValue?.(value)
3332
onChange?.(value)
34-
}, 400)
33+
}, 200)
3534

3635
const value = React.useMemo(
3736
() => initialValue ?? (("functionSchema" in schema ? schema.functionSchema.input === "list" : schema.input === "list") ? {
@@ -59,14 +58,20 @@ export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProp
5958
entry={editEntry}
6059
value={value as LiteralValue}
6160
onOpenChange={open => setEditDialogOpen(open)}
62-
onObjectChange={onChangeDebounced}
61+
onObjectChange={(value) => {
62+
formValidation?.setValue?.(value)
63+
onChangeDebounced(value)
64+
}}
6365
/>
6466
)}
6567
<InputLabel>{title}</InputLabel>
6668
<InputDescription>{description}</InputDescription>
6769
<DataTypeInputValueComponent inside
6870
initialValue={value}
69-
onChange={onChangeDebounced}
71+
onChange={(value) => {
72+
formValidation?.setValue?.(value)
73+
onChangeDebounced(value)
74+
}}
7075
suggestions={suggestions}
7176
formValidation={formValidation}>
7277
<DataTypeJSONInputTreeComponent

‎src/packages/ce/src/datatype/components/inputs/number/DataTypeNumberInputComponent.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,36 @@ export const DataTypeNumberInputComponent: React.FC<DataTypeNumberInputComponent
2222

2323
const defaultValue: NodeParameterValue | NodeFunction | undefined = React.useMemo(() => initialValue ?? undefined, [initialValue])
2424
const onChangeDebounced = useDebouncedCallback((value: string | LiteralValue | SubFlowValue | NodeFunction | ReferenceValue | null) => {
25-
2625
if (typeof value === "string") {
27-
formValidation?.setValue?.(value ? {__typename: "LiteralValue", value: !Number.isNaN(Number(value)) ? Number(value) : value} : null)
28-
onChange?.(value ? {__typename: "LiteralValue", value: !Number.isNaN(Number(value)) ? Number(value) : value} : null)
26+
onChange?.(value ? {
27+
__typename: "LiteralValue",
28+
value: !Number.isNaN(Number(value)) ? Number(value) : value
29+
} : null)
2930
} else {
30-
formValidation?.setValue?.(value)
3131
onChange?.(value)
3232
}
3333
}, 400)
3434

3535
return React.useMemo(() => <>
3636
<InputLabel>{title}</InputLabel>
3737
<InputDescription>{description}</InputDescription>
38-
<DataTypeInputValueComponent initialValue={initialValue} onChange={onChangeDebounced} suggestions={suggestions}
38+
<DataTypeInputValueComponent initialValue={initialValue} onChange={value => {
39+
formValidation?.setValue?.(value)
40+
onChangeDebounced(value)
41+
}} suggestions={suggestions}
3942
formValidation={formValidation}>
4043
<EditorInput value={(defaultValue as LiteralValue)?.value?.toString()}
41-
onChange={onChangeDebounced}
44+
onChange={(value) => {
45+
if (typeof value === "string") {
46+
formValidation?.setValue?.(value ? {
47+
__typename: "LiteralValue",
48+
value: !Number.isNaN(Number(value)) ? Number(value) : value
49+
} : null)
50+
} else {
51+
formValidation?.setValue?.(value)
52+
}
53+
onChangeDebounced(value)
54+
}}
4255
formValidation={{...formValidation, setValue: undefined}}
4356
maw={"100%"}
4457
placeholder={String(title) ?? ""}
@@ -52,7 +65,10 @@ export const DataTypeNumberInputComponent: React.FC<DataTypeNumberInputComponent
5265
{tag: tags.keyword, color: hashToColor("bracket")},
5366
]}
5467
right={
55-
<DataTypeInputControlsComponent suggestions={suggestions} onSelect={onChangeDebounced}/>
68+
<DataTypeInputControlsComponent suggestions={suggestions} onSelect={value => {
69+
formValidation?.setValue?.(value)
70+
onChangeDebounced(value)
71+
}}/>
5672
}
5773
rightType={"action"}/>
5874
</DataTypeInputValueComponent>

‎src/packages/ce/src/datatype/components/inputs/select/DataTypeSelectInputComponent.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ export const DataTypeSelectInputComponent: React.FC<DataTypeSelectInputComponent
3333
}), [suggestions])!
3434

3535
const onChangeDebounced = useDebouncedCallback((value: string | null) => {
36-
formValidation?.setValue?.((!!value ? suggestions?.[Number(value)] : null) ?? null)
3736
onChange?.((!!value ? suggestions?.[Number(value)] : null) ?? null)
3837
}, 200)
3938

@@ -44,9 +43,13 @@ export const DataTypeSelectInputComponent: React.FC<DataTypeSelectInputComponent
4443
formValidation={{...formValidation, setValue: undefined}}
4544
maw={"100%"}
4645
key={defaultValue}
47-
onValueChange={onChangeDebounced}
46+
onValueChange={(value) => {
47+
formValidation?.setValue?.((!!value ? suggestions?.[Number(value)] : null) ?? null)
48+
onChangeDebounced?.(value)
49+
}}
4850
right={
4951
<Button color={"primary"} onClick={() => {
52+
formValidation?.setValue?.(null)
5053
onChangeDebounced(null)
5154
}} paddingSize={"xxs"}>
5255
<IconX size={13}/>

‎src/packages/ce/src/datatype/components/inputs/sub-flow/DataTypeSubFlowInputComponent.tsx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,22 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
3232
const result = useFunctionSuggestions()
3333

3434
const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | ReferenceValue | NodeFunction | null) => {
35-
36-
if (value?.__typename === "NodeFunction") {
37-
const nodeId = flowService.addNodeById(flowId, value)
38-
value = {
39-
__typename: "SubFlowValue",
40-
startingNodeId: nodeId
41-
}
42-
}
43-
44-
formValidation?.setValue?.(value ?? null)
4535
onChange?.(value ?? null)
4636
}, 200)
4737

4838
return React.useMemo(() => <>
4939
<SuggestionDialogComponent suggestions={[...suggestions!, ...result]}
5040
open={suggestionDialogOpen}
51-
onSuggestionSelect={suggestion => {
52-
onChangeDebounced(suggestion as NodeFunction)
41+
onSuggestionSelect={value => {
42+
if (value?.__typename === "NodeFunction") {
43+
const nodeId = flowService.addNodeById(flowId, value)
44+
value = {
45+
__typename: "SubFlowValue",
46+
startingNodeId: nodeId
47+
}
48+
}
49+
formValidation?.setValue?.(value ?? null)
50+
onChangeDebounced(value as NodeFunction)
5351
}}
5452
onOpenChange={setSuggestionDialogOpen}/>
5553
<InputLabel>{title}</InputLabel>
@@ -62,7 +60,17 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
6260
}
6361
}}
6462
initialValue={initialValue}
65-
onChange={onChangeDebounced}
63+
onChange={(value) => {
64+
if (value?.__typename === "NodeFunction") {
65+
const nodeId = flowService.addNodeById(flowId, value)
66+
value = {
67+
__typename: "SubFlowValue",
68+
startingNodeId: nodeId
69+
}
70+
}
71+
formValidation?.setValue?.(value ?? null)
72+
onChangeDebounced(value ?? null)
73+
}}
6674
suggestions={suggestions}
6775
formValidation={formValidation}>
6876
<Text>Select next node</Text>

‎src/packages/ce/src/datatype/components/inputs/text/DataTypeTextInputComponent.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,29 @@ export const DataTypeTextInputComponent: React.FC<DataTypeTextInputComponentProp
2222

2323
const defaultValue: NodeParameterValue | NodeFunction | undefined = React.useMemo(() => initialValue ?? undefined, [initialValue])
2424
const onChangeDebounced = useDebouncedCallback((value: string | LiteralValue | SubFlowValue | NodeFunction | ReferenceValue | null) => {
25-
2625
if (typeof value === "string") {
27-
formValidation?.setValue?.(value ? {__typename: "LiteralValue", value: value} : null)
2826
onChange?.(value ? {__typename: "LiteralValue", value: value} : null)
2927
} else {
30-
formValidation?.setValue?.(value)
3128
onChange?.(value)
3229
}
3330
}, 400)
3431

3532
return React.useMemo(() => <>
3633
<InputLabel>{title}</InputLabel>
3734
<InputDescription>{description}</InputDescription>
38-
<DataTypeInputValueComponent initialValue={initialValue} onChange={onChangeDebounced} suggestions={suggestions}
39-
formValidation={formValidation}>
35+
<DataTypeInputValueComponent initialValue={initialValue} onChange={value => {
36+
formValidation?.setValue?.(value)
37+
onChangeDebounced(value)
38+
}} suggestions={suggestions} formValidation={formValidation}>
4039
<EditorInput value={(defaultValue as LiteralValue)?.value?.toString()}
41-
onChange={onChangeDebounced}
40+
onChange={value => {
41+
if (typeof value === "string") {
42+
formValidation?.setValue?.(value ? {__typename: "LiteralValue", value: value} : null)
43+
} else {
44+
formValidation?.setValue?.(value)
45+
}
46+
onChangeDebounced(value)
47+
}}
4248
formValidation={{...formValidation, setValue: undefined}}
4349
maw={"100%"}
4450
placeholder={String(title) ?? ""}
@@ -52,7 +58,10 @@ export const DataTypeTextInputComponent: React.FC<DataTypeTextInputComponentProp
5258
{tag: tags.keyword, color: hashToColor("bracket")},
5359
]}
5460
right={
55-
<DataTypeInputControlsComponent suggestions={suggestions} onSelect={onChangeDebounced}/>
61+
<DataTypeInputControlsComponent suggestions={suggestions} onSelect={value => {
62+
formValidation?.setValue?.(value)
63+
onChangeDebounced(value)
64+
}}/>
5665
}
5766
rightType={"action"}/>
5867
</DataTypeInputValueComponent>

0 commit comments

Comments
 (0)