Spaces:
Runtime error
Runtime error
File size: 1,762 Bytes
7362797 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the Chameleon License found in the
* LICENSE file in the root directory of this source tree.
*/
import { ChangeEvent, useState } from "react";
export type InputToggleProps = {
value: boolean;
optional?: boolean;
label?: string;
className?: string;
onValueChange: (n: any) => void;
};
export function InputToggle({
value,
onValueChange,
optional = false,
label,
className,
}: InputToggleProps) {
const [skipped, setSkipped] = useState<boolean>(false);
function handleOptional(evt: ChangeEvent<HTMLInputElement>) {
// if checked, skip should be false
if (evt.currentTarget.checked === skipped) {
setSkipped(!skipped);
}
}
const input = (
<div
className={`flex flex-row flex-1 items-center flex-grow-3 gap-2 ${className} ${
skipped && "hidden"
}`}
>
<input
type="checkbox"
className="toggle toggle-accent toggle-lg"
checked={value}
onChange={(evt) => onValueChange(evt.currentTarget.checked)}
/>
<span>{value ? "Yes" : "No"}</span>
</div>
);
return label ? (
<div className="form-control mt-6 flex flex-row gap-2 items-center">
<label className="label font-semibold flex flex-1 leading-5 gap-2">
{optional && (
<input
type="checkbox"
checked={!skipped}
className="checkbox checkbox-primary"
onChange={handleOptional}
/>
)}
<span className="flex-1">
{label}{" "}
{skipped && <div className="text-xs text-gray-400">(skipped)</div>}
</span>
</label>
{input}
</div>
) : (
input
);
}
|