Skip to content

Commit 6facce3

Browse files
gregsaabgregsaab
committed
conditionally render the checkbox
1 parent 9e74437 commit 6facce3

File tree

1 file changed

+124
-118
lines changed

1 file changed

+124
-118
lines changed

‎client/src/components/ToolsTab.tsx‎

Lines changed: 124 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -178,145 +178,151 @@ const ToolsTab = ({
178178
htmlFor={key}
179179
className="text-sm font-medium text-gray-700 dark:text-gray-300"
180180
>
181-
Null
181+
null
182182
</label>
183183
</div>
184184
) : null}
185185
</div>
186186

187-
{prop.type === "boolean" ? (
188-
<div className="flex items-center space-x-2 mt-2">
189-
<Checkbox
187+
<div
188+
role="toolinputwrapper"
189+
className={`${prop.nullable && params[key] === null ? "pointer-events-none opacity-50" : ""}`}
190+
>
191+
{prop.type === "boolean" ? (
192+
<div className="flex items-center space-x-2 mt-2">
193+
<Checkbox
194+
id={key}
195+
name={key}
196+
checked={!!params[key]}
197+
onCheckedChange={(checked: boolean) =>
198+
setParams({
199+
...params,
200+
[key]: checked,
201+
})
202+
}
203+
/>
204+
<label
205+
htmlFor={key}
206+
className="text-sm font-medium text-gray-700 dark:text-gray-300"
207+
>
208+
{prop.description || "Toggle this option"}
209+
</label>
210+
</div>
211+
) : prop.type === "string" ? (
212+
<Textarea
190213
id={key}
191214
name={key}
192-
checked={!!params[key]}
193-
onCheckedChange={(checked: boolean) =>
194-
setParams({
195-
...params,
196-
[key]: checked,
197-
})
198-
}
199-
/>
200-
<label
201-
htmlFor={key}
202-
className="text-sm font-medium text-gray-700 dark:text-gray-300"
203-
>
204-
{prop.description || "Toggle this option"}
205-
</label>
206-
</div>
207-
) : prop.type === "string" ? (
208-
<Textarea
209-
id={key}
210-
name={key}
211-
placeholder={prop.description}
212-
value={
213-
params[key] === undefined
214-
? ""
215-
: String(params[key])
216-
}
217-
onChange={(e) => {
218-
const value = e.target.value;
219-
if (value === "") {
220-
// Field cleared - set to undefined
221-
setParams({
222-
...params,
223-
[key]: undefined,
224-
});
225-
} else {
226-
// Field has value - keep as string
227-
setParams({
228-
...params,
229-
[key]: value,
230-
});
231-
}
232-
}}
233-
className="mt-1"
234-
/>
235-
) : prop.type === "object" || prop.type === "array" ? (
236-
<div className="mt-1">
237-
<DynamicJsonForm
238-
ref={(ref) => (formRefs.current[key] = ref)}
239-
schema={{
240-
type: prop.type,
241-
properties: prop.properties,
242-
description: prop.description,
243-
items: prop.items,
244-
}}
215+
placeholder={prop.description}
245216
value={
246-
(params[key] as JsonValue) ??
247-
generateDefaultValue(prop)
217+
params[key] === undefined
218+
? ""
219+
: String(params[key])
248220
}
249-
onChange={(newValue: JsonValue) => {
250-
setParams({
251-
...params,
252-
[key]: newValue,
253-
});
254-
// Check validation after a short delay to allow form to update
255-
setTimeout(checkValidationErrors, 100);
256-
}}
257-
/>
258-
</div>
259-
) : prop.type === "number" ||
260-
prop.type === "integer" ? (
261-
<Input
262-
type="number"
263-
id={key}
264-
name={key}
265-
placeholder={prop.description}
266-
value={
267-
params[key] === undefined
268-
? ""
269-
: String(params[key])
270-
}
271-
onChange={(e) => {
272-
const value = e.target.value;
273-
if (value === "") {
274-
// Field cleared - set to undefined
275-
setParams({
276-
...params,
277-
[key]: undefined,
278-
});
279-
} else {
280-
// Field has value - try to convert to number, but store input either way
281-
const num = Number(value);
282-
if (!isNaN(num)) {
221+
onChange={(e) => {
222+
const value = e.target.value;
223+
if (value === "") {
224+
// Field cleared - set to undefined
283225
setParams({
284226
...params,
285-
[key]: num,
227+
[key]: undefined,
286228
});
287229
} else {
288-
// Store invalid input as string - let server validate
230+
// Field has value - keep as string
289231
setParams({
290232
...params,
291233
[key]: value,
292234
});
293235
}
294-
}
295-
}}
296-
className="mt-1"
297-
/>
298-
) : (
299-
<div className="mt-1">
300-
<DynamicJsonForm
301-
ref={(ref) => (formRefs.current[key] = ref)}
302-
schema={{
303-
type: prop.type,
304-
properties: prop.properties,
305-
description: prop.description,
306-
items: prop.items,
307236
}}
308-
value={params[key] as JsonValue}
309-
onChange={(newValue: JsonValue) => {
310-
setParams({
311-
...params,
312-
[key]: newValue,
313-
});
314-
// Check validation after a short delay to allow form to update
315-
setTimeout(checkValidationErrors, 100);
237+
className="mt-1"
238+
/>
239+
) : prop.type === "object" ||
240+
prop.type === "array" ? (
241+
<div className="mt-1">
242+
<DynamicJsonForm
243+
ref={(ref) => (formRefs.current[key] = ref)}
244+
schema={{
245+
type: prop.type,
246+
properties: prop.properties,
247+
description: prop.description,
248+
items: prop.items,
249+
}}
250+
value={
251+
(params[key] as JsonValue) ??
252+
generateDefaultValue(prop)
253+
}
254+
onChange={(newValue: JsonValue) => {
255+
setParams({
256+
...params,
257+
[key]: newValue,
258+
});
259+
// Check validation after a short delay to allow form to update
260+
setTimeout(checkValidationErrors, 100);
261+
}}
262+
/>
263+
</div>
264+
) : prop.type === "number" ||
265+
prop.type === "integer" ? (
266+
<Input
267+
type="number"
268+
id={key}
269+
name={key}
270+
placeholder={prop.description}
271+
value={
272+
params[key] === undefined
273+
? ""
274+
: String(params[key])
275+
}
276+
onChange={(e) => {
277+
const value = e.target.value;
278+
if (value === "") {
279+
// Field cleared - set to undefined
280+
setParams({
281+
...params,
282+
[key]: undefined,
283+
});
284+
} else {
285+
// Field has value - try to convert to number, but store input either way
286+
const num = Number(value);
287+
if (!isNaN(num)) {
288+
setParams({
289+
...params,
290+
[key]: num,
291+
});
292+
} else {
293+
// Store invalid input as string - let server validate
294+
setParams({
295+
...params,
296+
[key]: value,
297+
});
298+
}
299+
}
316300
}}
301+
className="mt-1"
317302
/>
318-
</div>
319-
)}
303+
) : (
304+
<div className="mt-1">
305+
<DynamicJsonForm
306+
ref={(ref) => (formRefs.current[key] = ref)}
307+
schema={{
308+
type: prop.type,
309+
properties: prop.properties,
310+
description: prop.description,
311+
items: prop.items,
312+
}}
313+
value={params[key] as JsonValue}
314+
onChange={(newValue: JsonValue) => {
315+
setParams({
316+
...params,
317+
[key]: newValue,
318+
});
319+
// Check validation after a short delay to allow form to update
320+
setTimeout(checkValidationErrors, 100);
321+
}}
322+
/>
323+
</div>
324+
)}
325+
</div>
320326
</div>
321327
);
322328
},

0 commit comments

Comments
 (0)