@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
62 lines (61 loc) • 3.43 kB
JavaScript
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.customLabelAndNoAriaLabelWarningMessage = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const defaultImports_1 = require("../defaultImports");
const utils_1 = require("../utils");
/** Add any helper functions here. */
/**
*
*
* Component
*
*
*/
exports.customLabelAndNoAriaLabelWarningMessage = 'aria label not detected when using a custom label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI';
const RadioAndCheckboxWrapper = (props, ref) => {
const { label, isFluid, isDefaultChecked, hasLabelBefore, type = 'text', ariaLabel, isDisabled, isReadOnly, isChecked, onClick, onChange, value, className, style, htmlAttributes, } = props;
const isLabel = label !== undefined && typeof label === 'string';
const isCustomLabel = label && typeof label !== 'string';
const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;
(0, react_1.useMemo)(() => {
if (!label && !ariaLabel) {
(0, utils_1.needleWarningMessage)(`${type} without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI`);
}
if (hasCustomLabelAndNoAriaLabel) {
(0, utils_1.needleWarningMessage)(exports.customLabelAndNoAriaLabelWarningMessage);
}
}, [ariaLabel, label, type, hasCustomLabelAndNoAriaLabel]);
const containerWrappingClasses = (0, defaultImports_1.classNames)(className, `ndl-form-item ndl-type-${type}`, {
'ndl-disabled': isDisabled,
'ndl-read-only': isReadOnly,
}, className);
const labelWrappingClasses = (0, defaultImports_1.classNames)(`ndl-form-item-label`, {
'ndl-fluid': isFluid,
'ndl-label-before': hasLabelBefore,
});
return ((0, jsx_runtime_1.jsx)("div", { className: containerWrappingClasses, style: style, children: (0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ "aria-label": ariaLabel, ref: ref, type: type, disabled: isDisabled, readOnly: isReadOnly, checked: isChecked, defaultChecked: isDefaultChecked, onClick: onClick, onChange: onChange, value: value }, htmlAttributes)), isLabel ? ((0, jsx_runtime_1.jsx)("span", { title: label, className: "ndl-form-label-text", children: label })) : (label)] }) }));
};
exports.default = (0, react_1.forwardRef)(RadioAndCheckboxWrapper);
//# sourceMappingURL=RadioAndCheckboxWrapper.js.map