@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
59 lines (58 loc) • 3.15 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/>.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo, } from 'react';
import { classNames } from '../defaultImports';
import { needleWarningMessage } from '../utils';
/** Add any helper functions here. */
/**
*
*
* Component
*
*
*/
export const 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;
useMemo(() => {
if (!label && !ariaLabel) {
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) {
needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);
}
}, [ariaLabel, label, type, hasCustomLabelAndNoAriaLabel]);
const containerWrappingClasses = classNames(className, `ndl-form-item ndl-type-${type}`, {
'ndl-disabled': isDisabled,
'ndl-read-only': isReadOnly,
}, className);
const labelWrappingClasses = classNames(`ndl-form-item-label`, {
'ndl-fluid': isFluid,
'ndl-label-before': hasLabelBefore,
});
return (_jsx("div", { className: containerWrappingClasses, style: style, children: _jsxs("label", { className: labelWrappingClasses, children: [_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 ? (_jsx("span", { title: label, className: "ndl-form-label-text", children: label })) : (label)] }) }));
};
export default forwardRef(RadioAndCheckboxWrapper);
//# sourceMappingURL=RadioAndCheckboxWrapper.js.map