@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
73 lines (72 loc) • 2.32 kB
JavaScript
import { useClasses } from "./BaseSwitch.styles.js";
import { getColor } from "@hitachivantara/uikit-styles";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useCallback, useState } from "react";
import { jsx } from "react/jsx-runtime";
import MuiSwitch from "@mui/material/Switch";
//#region src/BaseSwitch/BaseSwitch.tsx
/**
* A Switch is <b>binary</b> and work as a digital on/off button.
*
* The Base Switch is a building block of the Switch form element. Don't use unless
* implementing a custom use case not covered by the Switch form element.
*/
var HvBaseSwitch = forwardRef(function HvBaseSwitch(props, ref) {
const { classes: classesProp, className, id, name, value = "on", required = false, readOnly = false, disabled = false, checked, defaultChecked, onChange, inputProps, onFocusVisible, onBlur, size = "sm", color, ...others } = useDefaultProps("HvBaseSwitch", props);
const { classes, cx, css } = useClasses(classesProp);
const [focusVisible, setFocusVisible] = useState(false);
const onFocusVisibleCallback = useCallback((evt) => {
setFocusVisible(true);
onFocusVisible?.(evt);
}, [onFocusVisible]);
const onBlurCallback = useCallback((evt) => {
setFocusVisible(false);
onBlur?.(evt);
}, [onBlur]);
const onLocalChange = useCallback((evt) => {
if (readOnly) return;
onChange?.(evt, evt.target.checked, value);
}, [
onChange,
readOnly,
value
]);
return /* @__PURE__ */ jsx(MuiSwitch, {
ref,
id,
name,
className: cx(classes.root, {
[classes.focusVisible]: focusVisible,
[classes.readOnly]: readOnly,
[classes.disabled]: disabled
}, className),
disabled,
required,
readOnly,
onChange: onLocalChange,
value,
checked,
defaultChecked,
classes: {
root: classes.switch,
switchBase: classes.switchBase,
checked: classes.checked,
track: cx(classes.track, color ? css({
backgroundColor: `${getColor(color, "transparent")}!important`,
border: "none"
}) : void 0),
thumb: cx(classes.thumb, color ? css({ border: "none" }) : void 0),
disabled: classes.disabled
},
slotProps: { input: {
role: "switch",
...inputProps
} },
onFocusVisible: onFocusVisibleCallback,
onBlur: onBlurCallback,
"data-size": size,
...others
});
});
//#endregion
export { HvBaseSwitch };