@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
96 lines (95 loc) • 3.69 kB
JavaScript
import { setId } from "../utils/setId.js";
import { useUniqueId } from "../hooks/useUniqueId.js";
import { isInvalid } from "../FormElement/utils.js";
import { HvFormElement } from "../FormElement/FormElement.js";
import { HvLabel } from "../FormElement/Label/Label.js";
import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
import { useControlled } from "../hooks/useControlled.js";
import { HvBaseSwitch } from "../BaseSwitch/BaseSwitch.js";
import { useClasses } from "./Switch.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useCallback } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Switch/Switch.tsx
/**
* A Switch is **binary** and works as a digital on/off button.
*
* Use when two states are **opposite** and to trigger immediate changes in the system.
*/
var HvSwitch = forwardRef(function HvSwitch(props, ref) {
const { classes: classesProp, className, id, name, value = "on", required, readOnly, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labelProps, labelPosition = "top", checked, defaultChecked = false, onChange, status, statusMessage, "aria-errormessage": ariaErrorMessage, inputProps, ...others } = useDefaultProps("HvSwitch", props);
const { classes, cx } = useClasses(classesProp);
const elementId = useUniqueId(id);
const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);
const [validationState, setValidationState] = useControlled(status, "standBy");
const [validationMessage] = useControlled(statusMessage, "Required");
const onLocalChange = useCallback((evt, newChecked) => {
setIsChecked(() => {
if (required && !newChecked) setValidationState("invalid");
else setValidationState("valid");
return newChecked;
});
onChange?.(evt, newChecked, value);
}, [
onChange,
required,
setIsChecked,
setValidationState,
value
]);
const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
const isStateInvalid = isInvalid(validationState);
let errorMessageId;
if (isStateInvalid) errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
return /* @__PURE__ */ jsxs(HvFormElement, {
id,
name,
status: validationState,
disabled,
required,
readOnly,
className: cx(classes.root, className),
children: [/* @__PURE__ */ jsxs("div", {
className: cx(classes.container, classes[labelPosition]),
children: [label && /* @__PURE__ */ jsx(HvLabel, {
showGutter: true,
id: setId(elementId, "label"),
htmlFor: setId(elementId, "input"),
label,
className: classes.label,
...labelProps
}), /* @__PURE__ */ jsx("div", {
className: cx(classes.switchContainer, { [classes.invalidSwitch]: isStateInvalid }),
children: /* @__PURE__ */ jsx(HvBaseSwitch, {
ref,
id: label ? setId(elementId, "input") : setId(id, "input"),
name,
disabled,
readOnly,
required,
onChange: onLocalChange,
value,
checked: isChecked,
inputProps: {
"aria-invalid": isStateInvalid ? true : void 0,
"aria-errormessage": errorMessageId,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
...inputProps
},
...others
})
})]
}), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
id: setId(elementId, "error"),
className: classes.error,
disableBorder: true,
disableAdornment: true,
hideText: true,
children: validationMessage
})]
});
});
//#endregion
export { HvSwitch };