@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
194 lines (185 loc) • 6.84 kB
JavaScript
/**
* MSKCC 2021, 2024
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var cx = require('classnames');
var usePrefix = require('../../internal/usePrefix.js');
var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
const getInstanceId = setupGetInstanceId["default"]();
const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
let {
className,
helperText,
id,
labelText,
onChange = () => {},
onClick,
indeterminate = false,
invalid,
invalidText,
hideLabel,
readOnly,
title = '',
warn,
warnText,
disableFocus,
...other
} = _ref;
const prefix = usePrefix.usePrefix();
const showWarning = !readOnly && !invalid && warn;
const showHelper = !invalid && !warn;
const checkboxGroupInstanceId = getInstanceId();
const helperId = !helperText ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
id: helperId,
className: `${prefix}--form__helper-text`
}, helperText) : null;
const wrapperClasses = cx__default["default"](`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, className, {
[`${prefix}--checkbox-wrapper--readonly`]: readOnly,
[`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
[`${prefix}--checkbox-wrapper--warning`]: showWarning,
['msk-checkbox--disable-focus']: disableFocus
});
const innerLabelClasses = cx__default["default"](`${prefix}--checkbox-label-text`, {
[`${prefix}--visually-hidden`]: hideLabel
});
return /*#__PURE__*/React__default["default"].createElement("div", {
className: wrapperClasses
}, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
type: "checkbox",
"data-invalid": invalid ? true : undefined,
onChange: evt => {
if (!readOnly && onChange) {
onChange(evt, {
checked: evt.target.checked,
id
});
}
},
className: `${prefix}--checkbox`,
id: id,
ref: el => {
if (el) {
el.indeterminate = indeterminate ?? false;
}
if (typeof ref === 'function') {
ref(el);
} else if (ref && Object(ref) === ref) {
ref.current = el;
}
}
// readonly attribute not applicable to type="checkbox"
// see - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
,
"aria-readonly": readOnly,
onClick: evt => {
if (readOnly) {
// prevent default stops the checkbox being updated
evt.preventDefault();
}
// pass onClick event on to the user even if readonly
if (onClick) {
onClick(evt);
}
}
})), /*#__PURE__*/React__default["default"].createElement("label", {
htmlFor: id,
className: `${prefix}--checkbox-label`,
title: title
}, /*#__PURE__*/React__default["default"].createElement("span", {
className: innerLabelClasses
}, labelText)), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--checkbox__validation-msg`
}, !readOnly && invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
className: `${prefix}--checkbox__invalid-icon msk-icon`
}, "error"), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--form-requirement`
}, invalidText)), showWarning && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
className: `${prefix}--checkbox__invalid-icon ${prefix}--checkbox__invalid-icon--warning msk-icon`
}, "warning"), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--form-requirement`
}, warnText))), showHelper && helper);
});
Checkbox.propTypes = {
/**
* Specify whether the underlying input should be checked
*/
checked: PropTypes__default["default"].bool,
/**
* Specify an optional className to be applied to the <label> node
*/
className: PropTypes__default["default"].string,
/**
* Specify whether the underlying input should be checked by default
*/
defaultChecked: PropTypes__default["default"].bool,
/**
* Specify whether the Checkbox is currently in warning state
*/
// warn: PropTypes.bool,
/**
* Provide the text that is displayed when the Checkbox is in warning state
*/
// warnText: PropTypes.node,
/**
* Specify whether the Checkbox should be disabled from focus
*/
disableFocus: PropTypes__default["default"].bool,
/**
* Specify whether the Checkbox should be disabled
*/
disabled: PropTypes__default["default"].bool,
/**
* Provide text for the form group for additional help
*/
helperText: PropTypes__default["default"].node,
/**
* Specify whether the label should be hidden, or not
*/
hideLabel: PropTypes__default["default"].bool,
/**
* Provide an `id` to uniquely identify the Checkbox input
*/
id: PropTypes__default["default"].string.isRequired,
/**
* Specify whether the Checkbox is in an indeterminate state
*/
indeterminate: PropTypes__default["default"].bool,
/**
* Specify whether the Checkbox is currently invalid
*/
invalid: PropTypes__default["default"].bool,
/**
* Provide the text that is displayed when the Checkbox is in an invalid state
*/
invalidText: PropTypes__default["default"].node,
/**
* Provide a label to provide a description of the Checkbox input that you are
* exposing to the user
*/
labelText: PropTypes__default["default"].node.isRequired,
/**
* Provide an optional handler that is called when the internal state of
* Checkbox changes. This handler is called with event and state info.
* `(event, { checked, id }) => void`
*/
onChange: PropTypes__default["default"].func,
/**
* Specify whether the Checkbox is read-only
*/
readOnly: PropTypes__default["default"].bool,
/**
* Specify a title for the <label> node for the Checkbox
*/
title: PropTypes__default["default"].string
};
Checkbox.displayName = 'Checkbox';
exports["default"] = Checkbox;