conditionally render the checkbox
This commit is contained in:
Greg Saab
parent
9e74437dab
commit
6facce3fc1
1 changed files with 124 additions and 118 deletions
|
|
@ -178,145 +178,151 @@ const ToolsTab = ({
|
||||||
htmlFor={key}
|
htmlFor={key}
|
||||||
className="text-sm font-medium text-gray-700 dark:text-gray-300"
|
className="text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||||
>
|
>
|
||||||
Null
|
null
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{prop.type === "boolean" ? (
|
<div
|
||||||
<div className="flex items-center space-x-2 mt-2">
|
role="toolinputwrapper"
|
||||||
<Checkbox
|
className={`${prop.nullable && params[key] === null ? "pointer-events-none opacity-50" : ""}`}
|
||||||
id={key}
|
>
|
||||||
name={key}
|
{prop.type === "boolean" ? (
|
||||||
checked={!!params[key]}
|
<div className="flex items-center space-x-2 mt-2">
|
||||||
onCheckedChange={(checked: boolean) =>
|
<Checkbox
|
||||||
setParams({
|
id={key}
|
||||||
...params,
|
name={key}
|
||||||
[key]: checked,
|
checked={!!params[key]}
|
||||||
})
|
onCheckedChange={(checked: boolean) =>
|
||||||
}
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
htmlFor={key}
|
|
||||||
className="text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{prop.description || "Toggle this option"}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
) : prop.type === "string" ? (
|
|
||||||
<Textarea
|
|
||||||
id={key}
|
|
||||||
name={key}
|
|
||||||
placeholder={prop.description}
|
|
||||||
value={
|
|
||||||
params[key] === undefined
|
|
||||||
? ""
|
|
||||||
: String(params[key])
|
|
||||||
}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.target.value;
|
|
||||||
if (value === "") {
|
|
||||||
// Field cleared - set to undefined
|
|
||||||
setParams({
|
|
||||||
...params,
|
|
||||||
[key]: undefined,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Field has value - keep as string
|
|
||||||
setParams({
|
|
||||||
...params,
|
|
||||||
[key]: value,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="mt-1"
|
|
||||||
/>
|
|
||||||
) : prop.type === "object" || prop.type === "array" ? (
|
|
||||||
<div className="mt-1">
|
|
||||||
<DynamicJsonForm
|
|
||||||
ref={(ref) => (formRefs.current[key] = ref)}
|
|
||||||
schema={{
|
|
||||||
type: prop.type,
|
|
||||||
properties: prop.properties,
|
|
||||||
description: prop.description,
|
|
||||||
items: prop.items,
|
|
||||||
}}
|
|
||||||
value={
|
|
||||||
(params[key] as JsonValue) ??
|
|
||||||
generateDefaultValue(prop)
|
|
||||||
}
|
|
||||||
onChange={(newValue: JsonValue) => {
|
|
||||||
setParams({
|
|
||||||
...params,
|
|
||||||
[key]: newValue,
|
|
||||||
});
|
|
||||||
// Check validation after a short delay to allow form to update
|
|
||||||
setTimeout(checkValidationErrors, 100);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : prop.type === "number" ||
|
|
||||||
prop.type === "integer" ? (
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
id={key}
|
|
||||||
name={key}
|
|
||||||
placeholder={prop.description}
|
|
||||||
value={
|
|
||||||
params[key] === undefined
|
|
||||||
? ""
|
|
||||||
: String(params[key])
|
|
||||||
}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.target.value;
|
|
||||||
if (value === "") {
|
|
||||||
// Field cleared - set to undefined
|
|
||||||
setParams({
|
|
||||||
...params,
|
|
||||||
[key]: undefined,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Field has value - try to convert to number, but store input either way
|
|
||||||
const num = Number(value);
|
|
||||||
if (!isNaN(num)) {
|
|
||||||
setParams({
|
setParams({
|
||||||
...params,
|
...params,
|
||||||
[key]: num,
|
[key]: checked,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor={key}
|
||||||
|
className="text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||||
|
>
|
||||||
|
{prop.description || "Toggle this option"}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
) : prop.type === "string" ? (
|
||||||
|
<Textarea
|
||||||
|
id={key}
|
||||||
|
name={key}
|
||||||
|
placeholder={prop.description}
|
||||||
|
value={
|
||||||
|
params[key] === undefined
|
||||||
|
? ""
|
||||||
|
: String(params[key])
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
if (value === "") {
|
||||||
|
// Field cleared - set to undefined
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
[key]: undefined,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// Store invalid input as string - let server validate
|
// Field has value - keep as string
|
||||||
setParams({
|
setParams({
|
||||||
...params,
|
...params,
|
||||||
[key]: value,
|
[key]: value,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="mt-1"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="mt-1">
|
|
||||||
<DynamicJsonForm
|
|
||||||
ref={(ref) => (formRefs.current[key] = ref)}
|
|
||||||
schema={{
|
|
||||||
type: prop.type,
|
|
||||||
properties: prop.properties,
|
|
||||||
description: prop.description,
|
|
||||||
items: prop.items,
|
|
||||||
}}
|
|
||||||
value={params[key] as JsonValue}
|
|
||||||
onChange={(newValue: JsonValue) => {
|
|
||||||
setParams({
|
|
||||||
...params,
|
|
||||||
[key]: newValue,
|
|
||||||
});
|
|
||||||
// Check validation after a short delay to allow form to update
|
|
||||||
setTimeout(checkValidationErrors, 100);
|
|
||||||
}}
|
}}
|
||||||
|
className="mt-1"
|
||||||
/>
|
/>
|
||||||
</div>
|
) : prop.type === "object" ||
|
||||||
)}
|
prop.type === "array" ? (
|
||||||
|
<div className="mt-1">
|
||||||
|
<DynamicJsonForm
|
||||||
|
ref={(ref) => (formRefs.current[key] = ref)}
|
||||||
|
schema={{
|
||||||
|
type: prop.type,
|
||||||
|
properties: prop.properties,
|
||||||
|
description: prop.description,
|
||||||
|
items: prop.items,
|
||||||
|
}}
|
||||||
|
value={
|
||||||
|
(params[key] as JsonValue) ??
|
||||||
|
generateDefaultValue(prop)
|
||||||
|
}
|
||||||
|
onChange={(newValue: JsonValue) => {
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
[key]: newValue,
|
||||||
|
});
|
||||||
|
// Check validation after a short delay to allow form to update
|
||||||
|
setTimeout(checkValidationErrors, 100);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : prop.type === "number" ||
|
||||||
|
prop.type === "integer" ? (
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
id={key}
|
||||||
|
name={key}
|
||||||
|
placeholder={prop.description}
|
||||||
|
value={
|
||||||
|
params[key] === undefined
|
||||||
|
? ""
|
||||||
|
: String(params[key])
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
if (value === "") {
|
||||||
|
// Field cleared - set to undefined
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
[key]: undefined,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Field has value - try to convert to number, but store input either way
|
||||||
|
const num = Number(value);
|
||||||
|
if (!isNaN(num)) {
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
[key]: num,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Store invalid input as string - let server validate
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
[key]: value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="mt-1">
|
||||||
|
<DynamicJsonForm
|
||||||
|
ref={(ref) => (formRefs.current[key] = ref)}
|
||||||
|
schema={{
|
||||||
|
type: prop.type,
|
||||||
|
properties: prop.properties,
|
||||||
|
description: prop.description,
|
||||||
|
items: prop.items,
|
||||||
|
}}
|
||||||
|
value={params[key] as JsonValue}
|
||||||
|
onChange={(newValue: JsonValue) => {
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
[key]: newValue,
|
||||||
|
});
|
||||||
|
// Check validation after a short delay to allow form to update
|
||||||
|
setTimeout(checkValidationErrors, 100);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue