@etsoo/materialui/lib/mjs/SwitchAnt.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { useAppContext } from "./app/ReactApp";
import Switch from "@mui/material/Switch";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
/**
 * Ant style switch
 * @param props Props
 * @returns Component
 */
export function SwitchAnt(props) {
    // Global app
    const app = useAppContext();
    // Labels
    const { yes = "Yes", no = "No" } = app?.getLabels("yes", "no") ?? {};
    // Destruct
    const { activeColor, checked, defaultChecked, defaultValue, endLabel = yes, startLabel = no, onChange, value = "true", ...rest } = props;
    // Checked state
    const [controlChecked, setControlChecked] = React.useState(checked ?? defaultChecked ?? defaultValue == value);
    // Ref
    const ref = React.useRef(null);
    React.useEffect(() => {
        if (checked)
            setControlChecked(checked);
    }, [checked]);
    // On change
    const onChangeLocal = (event, checked) => {
        if (onChange)
            onChange(event, checked);
        setControlChecked(checked);
    };
    // Layout
    return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { onClick: () => controlChecked && ref.current?.click(), sx: {
                    cursor: "pointer",
                    color: controlChecked
                        ? undefined
                        : (theme) => activeColor ?? theme.palette.warning.main
                }, children: startLabel }), _jsx(Switch, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }), _jsx(Typography, { onClick: () => !controlChecked && ref.current?.click(), sx: {
                    cursor: "pointer",
                    color: controlChecked
                        ? (theme) => activeColor ?? theme.palette.warning.main
                        : undefined
                }, children: endLabel })] }));
}