@etsoo/materialui
Version:
TypeScript Material-UI Implementation
52 lines (51 loc) • 2.47 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SwitchAnt = SwitchAnt;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const ReactApp_1 = require("./app/ReactApp");
const Switch_1 = __importDefault(require("@mui/material/Switch"));
const Stack_1 = __importDefault(require("@mui/material/Stack"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
/**
* Ant style switch
* @param props Props
* @returns Component
*/
function SwitchAnt(props) {
// Global app
const app = (0, ReactApp_1.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_1.default.useState(checked ?? defaultChecked ?? defaultValue == value);
// Ref
const ref = react_1.default.useRef(null);
react_1.default.useEffect(() => {
if (checked)
setControlChecked(checked);
}, [checked]);
// On change
const onChangeLocal = (event, checked) => {
if (onChange)
onChange(event, checked);
setControlChecked(checked);
};
// Layout
return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: () => controlChecked && ref.current?.click(), sx: {
cursor: "pointer",
color: controlChecked
? undefined
: (theme) => activeColor ?? theme.palette.warning.main
}, children: startLabel }), (0, jsx_runtime_1.jsx)(Switch_1.default, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }), (0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: () => !controlChecked && ref.current?.click(), sx: {
cursor: "pointer",
color: controlChecked
? (theme) => activeColor ?? theme.palette.warning.main
: undefined
}, children: endLabel })] }));
}