@harvest-profit/npk
Version:
NPK UI Design System
58 lines • 3.42 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const checked_1 = __importDefault(require("./assets/checked"));
const unchecked_1 = __importDefault(require("./assets/unchecked"));
const mixed_1 = __importDefault(require("./assets/mixed"));
const Checkbox_module_css_1 = __importDefault(require("./Checkbox.module.css"));
const utils_1 = require("../utils");
let incId = 0; // note, replace with useId when we finally get to a later version of react.
const Checkbox = ({ label, labelDescription, value = false, onChange, disabled = false, className = '', toggleOnLabelClick = true, ...props }) => {
const [uniqueID] = (0, react_1.useState)(`npk-checkbox-${incId++}`);
const onChangeValue = () => {
if (disabled)
return;
if ((value || false) === false || value === 'mixed') {
onChange(true);
}
else {
onChange(false);
}
};
let labellingIds = {};
if (label) {
labellingIds['aria-labelledby'] = `${uniqueID}-label`;
if (labelDescription)
labellingIds['aria-describedby'] = `${uniqueID}-description`;
}
const input = ((0, jsx_runtime_1.jsxs)("div", { role: "checkbox", "aria-checked": value || false, onClick: onChangeValue, "aria-disabled": disabled, tabIndex: 0, onKeyDown: (event) => {
console.log(event.key);
if (event.key === ' ' || event.key === 'Enter') {
// Don't scroll the page if space is pressed
event.preventDefault();
onChangeValue();
}
}, className: Checkbox_module_css_1.default.Checkbox, ...labellingIds, ...props, children: [(0, jsx_runtime_1.jsx)("input", { name: props.name, type: "hidden", value: `${value || false}` }), value === true && ((0, jsx_runtime_1.jsx)(checked_1.default, {})), (value || false) === false && ((0, jsx_runtime_1.jsx)(unchecked_1.default, {})), value === 'mixed' && ((0, jsx_runtime_1.jsx)(mixed_1.default, {}))] }));
if (label) {
return ((0, jsx_runtime_1.jsxs)("label", { className: `${Checkbox_module_css_1.default.Label} ${className}`, onClick: (e) => {
if (e.currentTarget.contains(document.activeElement)) {
e.preventDefault();
return;
}
const nextElem = (0, utils_1.nextFocusableElement)({ parentElem: e.currentTarget });
nextElem?.focus();
if (toggleOnLabelClick)
onChangeValue();
e.preventDefault();
}, children: [input, (0, jsx_runtime_1.jsxs)("span", { "data-component": "label", children: [(0, jsx_runtime_1.jsx)("span", { "data-component": "label-contents", id: labellingIds['aria-labelledby'], children: label }), labelDescription && (0, jsx_runtime_1.jsx)("span", { "data-component": "label-description", id: labellingIds['aria-describedby'], children: labelDescription })] })] }));
}
if (!props['aria-label'] && !props['aria-labelledby'])
console.warn('Please provide an aria-label to this checkbox.');
return input;
};
exports.default = Checkbox;
//# sourceMappingURL=Checkbox.js.map