@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
152 lines (151 loc) • 5.39 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const useControlled = require("../hooks/useControlled.cjs");
const useUniqueId = require("../hooks/useUniqueId.cjs");
const setId = require("../utils/setId.cjs");
const Switch_styles = require("./Switch.styles.cjs");
const BaseSwitch = require("../BaseSwitch/BaseSwitch.cjs");
const FormElement = require("../FormElement/FormElement.cjs");
const Label = require("../FormElement/Label/Label.cjs");
const utils = require("../FormElement/utils.cjs");
const WarningText = require("../FormElement/WarningText/WarningText.cjs");
const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
const HvSwitch = React.forwardRef(
function HvSwitch2(props, ref) {
const {
classes: classesProp,
className,
id,
name,
value = "on",
required,
readOnly,
disabled,
label,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
labelProps,
checked,
defaultChecked = false,
onChange,
status,
statusMessage,
"aria-errormessage": ariaErrorMessage,
inputProps,
color,
...others
} = uikitReactUtils.useDefaultProps("HvSwitch", props);
const { classes, cx, css } = Switch_styles.useClasses(classesProp);
const elementId = useUniqueId.useUniqueId(id);
const [isChecked, setIsChecked] = useControlled.useControlled(checked, defaultChecked);
const [validationState, setValidationState] = useControlled.useControlled(
status,
"standBy"
);
const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
const onLocalChange = React.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 = utils.isInvalid(validationState);
let errorMessageId;
if (isStateInvalid) {
errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
}
return /* @__PURE__ */ jsxRuntime.jsxs(
FormElement.HvFormElement,
{
id,
name,
status: validationState,
disabled,
required,
readOnly,
className: cx(classes.root, className),
children: [
label && /* @__PURE__ */ jsxRuntime.jsx(
Label.HvLabel,
{
showGutter: true,
id: setId.setId(elementId, "label"),
htmlFor: setId.setId(elementId, "input"),
label,
className: classes.label,
...labelProps
}
),
/* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: cx(classes.switchContainer, {
[classes.invalidSwitch]: isStateInvalid
}),
children: /* @__PURE__ */ jsxRuntime.jsx(
BaseSwitch.HvBaseSwitch,
{
ref,
id: label ? setId.setId(elementId, "input") : setId.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
},
...color && {
classes: {
switchBase: css({
"&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
backgroundColor: uikitStyles.getColor(color),
borderColor: isSemantical(color) ? uikitStyles.getColor(`${color}_120`) : "#00000032"
}
})
}
},
...others
}
)
}
),
canShowError && /* @__PURE__ */ jsxRuntime.jsx(
WarningText.HvWarningText,
{
id: setId.setId(elementId, "error"),
className: classes.error,
disableBorder: true,
disableAdornment: true,
hideText: true,
children: validationMessage
}
)
]
}
);
}
);
exports.switchClasses = Switch_styles.staticClasses;
exports.HvSwitch = HvSwitch;