UNPKG

@hitachivantara/uikit-react-core

Version:
64 lines (63 loc) 2.05 kB
import { useClasses } from "./BaseRadio.styles.js"; import { HvRadioIcon } from "./RadioIcon.js"; import { useDefaultProps } from "@hitachivantara/uikit-react-utils"; import { forwardRef, useCallback, useState } from "react"; import { jsx } from "react/jsx-runtime"; import MuiRadio from "@mui/material/Radio"; //#region src/BaseRadio/BaseRadio.tsx /** * A Radio Button is a mechanism that allows user to select one or more options. * * The Base Radio Button is a building block of the Radio Button form element. Don't * use unless implementing a custom use case not covered by the Radio Button form element. */ var HvBaseRadio = forwardRef(function HvBaseRadio(props, ref) { const { classes: classesProp, className, value = "on", required, readOnly, disabled, checked, defaultChecked, onChange, semantic, inputProps, color, onFocusVisible, onBlur, ...others } = useDefaultProps("HvBaseRadio", props); const { classes, cx } = 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(MuiRadio, { ref, className: cx(classes.root, { [classes.focusVisible]: focusVisible, [classes.checked]: checked, [classes.semantic]: semantic, [classes.disabled]: disabled }, className), icon: /* @__PURE__ */ jsx(HvRadioIcon, { disabled }), checkedIcon: /* @__PURE__ */ jsx(HvRadioIcon, { checked: true, disabled, color }), color: "default", disabled, required, readOnly, onChange: onLocalChange, value, checked, defaultChecked, inputProps, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others }); }); //#endregion export { HvBaseRadio };