nudge-components-library
Version:
A library of nudge UI components
71 lines (68 loc) • 4 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useContext, useState, useEffect, useRef } from 'react';
import { FiCheck } from '../../node_modules/react-icons/fi/index.js';
import '../../styles/tokens.css.js';
import '../../styles/globals.css.js';
import { ThemeContext } from '../../theme/ThemeContext.js';
function Checkbox({ checkboxLabel, label, checked, defaultChecked = false, onChange, disabled = false, nudgeText, id, ariaLabel, onFocus, onBlur, nudgeVisible = true, nudgePosition = "bottom", renderNudge, }) {
const theme = useContext(ThemeContext);
const [isChecked, setIsChecked] = useState(defaultChecked);
useEffect(() => {
if (checked !== undefined) {
setIsChecked(checked);
}
}, [checked]);
const handleChange = () => {
if (disabled)
return;
const newChecked = !isChecked;
setIsChecked(newChecked);
onChange?.(newChecked);
};
const nudgeId = id ? `${id}-nudge` : undefined;
const nudgeElement = renderNudge && nudgeVisible ? (jsx("div", { id: nudgeId, style: theme.checkbox.nudgeText, children: renderNudge(isChecked) })) : nudgeVisible && nudgeText ? (jsx("div", { id: nudgeId, style: theme.checkbox.nudgeText, children: jsx("span", { children: nudgeText }) })) : null;
// Touch handler to simulate focus events on mobile
const handleTouchStart = (e) => {
if (onFocus) {
onFocus(e);
}
};
const containerRef = useRef(null);
useEffect(() => {
const handleTouchOutside = (event) => {
if (containerRef.current &&
!containerRef.current.contains(event.target)) {
if (onBlur) {
const dummyEvent = {
target: containerRef.current,
};
onBlur(dummyEvent);
}
}
};
document.addEventListener("touchstart", handleTouchOutside);
return () => {
document.removeEventListener("touchstart", handleTouchOutside);
};
}, [onBlur]);
const checkboxInput = (jsxs("label", { htmlFor: id, style: theme.checkbox.container, role: "checkbox", "aria-checked": isChecked, onKeyDown: (e) => {
if (!disabled && e.key === "Enter")
handleChange();
}, children: [jsx("input", { id: id, type: "checkbox", checked: isChecked, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onTouchStart: handleTouchStart, "aria-label": ariaLabel ?? label, style: theme.checkbox.input, disabled: disabled }), jsx("span", { style: {
...theme.checkbox.checkBox,
...(isChecked ? theme.checkbox.checked : {}),
}, children: isChecked && jsx(FiCheck, { style: theme.checkbox.checkIcon }) }), jsx("span", { style: theme.checkbox.label, children: label })] }));
let content;
if (nudgeVisible && (nudgePosition === "left" || nudgePosition === "right")) {
content = (jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [nudgePosition === "left" && (jsx("div", { style: theme.checkbox.nudgeLeft, children: nudgeElement })), checkboxInput, nudgePosition === "right" && (jsx("div", { style: theme.checkbox.nudgeRight, children: nudgeElement }))] }));
}
else {
content = (jsxs(Fragment, { children: [nudgeVisible && nudgePosition === "top" && (jsx("div", { style: theme.checkbox.nudgeTop, children: nudgeElement })), checkboxInput, nudgeVisible && nudgePosition === "bottom" && (jsx("div", { style: theme.checkbox.nudgeBottom, children: nudgeElement }))] }));
}
return (jsxs("div", { style: {
...theme.checkbox.wrapper,
...(disabled ? theme.checkbox.disabled : {}),
}, ref: containerRef, children: [checkboxLabel && (jsx("div", { style: theme.checkbox.checkboxLabel, children: checkboxLabel })), content] }));
}
export { Checkbox };
//# sourceMappingURL=Checkbox.js.map