60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { NotDerivate, useBox } from "@common/shared/utils/ui/vide";
|
|
import { Atom } from "@rbxts/charm";
|
|
import Vide, { Derivable, source } from "@rbxts/vide";
|
|
|
|
/**
|
|
* Props of a toggle.
|
|
*/
|
|
interface ToggleProps {
|
|
/**
|
|
* A charm atom linked to the toggle.
|
|
*/
|
|
Atom?: Atom<boolean>;
|
|
/**
|
|
* The position of the toggle in roblox ui.
|
|
*/
|
|
Position?: Derivable<UDim2>;
|
|
/**
|
|
* The size of the toggle
|
|
*/
|
|
Size?: Derivable<UDim2>;
|
|
}
|
|
|
|
/**
|
|
* A toggle is a UI component linked to an boolean.
|
|
* @param props Props of the toggle.
|
|
* @returns A Vide node with the toggle.
|
|
*/
|
|
export function Toggle(props: ToggleProps = {}) {
|
|
const [enable, setEnable] = useBox(props.Atom, false);
|
|
const sphereSize = source(0);
|
|
return (
|
|
<imagebutton
|
|
BackgroundColor3={new Color3(1, 1, 1)}
|
|
MouseButton1Click={() => setEnable(!enable())}
|
|
Position={props?.Position}
|
|
Size={props?.Size ?? UDim2.fromOffset(90, 30)}
|
|
>
|
|
<uicorner CornerRadius={new UDim(1, 0)} />
|
|
<uiaspectratioconstraint AspectRatio={1.8} />
|
|
<frame
|
|
BackgroundColor3={new Color3(0.5, 0.5, 0.5)}
|
|
Position={new UDim2(0, 2, 0, 2)}
|
|
Size={new UDim2(1, -4, 1, -4)}
|
|
Visible={NotDerivate(enable)}
|
|
>
|
|
<uicorner CornerRadius={new UDim(1, 0)} />
|
|
</frame>
|
|
<frame
|
|
AbsoluteSizeChanged={(value) => sphereSize(value.X)}
|
|
BackgroundColor3={new Color3(0, 0, 0)}
|
|
Position={() => (enable() ? new UDim2(1, -sphereSize() - 2, 0, 2) : new UDim2(0, 2, 0, 2))}
|
|
Size={new UDim2(1, -4, 1, -4)}
|
|
>
|
|
<uicorner CornerRadius={new UDim(1, 0)} />
|
|
<uiaspectratioconstraint AspectRatio={1} />
|
|
</frame>
|
|
</imagebutton>
|
|
);
|
|
}
|