baseui
Version:
A React Component library implementing the Base design language
202 lines (199 loc) • 8.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _overrides = require("../helpers/overrides");
var _styledComponents = require("./styled-components");
var _focusVisible = require("../utils/focusVisible");
var _constants = require("./constants");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const stopPropagation = e => e.stopPropagation();
const Checkbox = props => {
const {
overrides = {},
checked = false,
containsInteractiveElement = false,
disabled = false,
autoFocus = false,
isIndeterminate = false,
error = false,
labelPlacement = _constants.LABEL_PLACEMENT.right,
onChange = () => {},
onMouseEnter = () => {},
onMouseLeave = () => {},
onMouseDown = () => {},
onMouseUp = () => {},
onFocus = () => {},
onBlur = () => {},
onKeyDown,
// don't add fallback no-op to allow native keydown behavior if not customized.
onKeyUp,
// don't add fallback no-op to allow native keyup behavior if not customized.
value,
id,
name,
children,
required,
title,
inputRef
} = props;
const [isFocused, setIsFocused] = React.useState(autoFocus);
const [isFocusVisible, setIsFocusVisible] = React.useState(false);
const [isHovered, setIsHovered] = React.useState(false);
const [isActive, setIsActive] = React.useState(false);
const fallbackInputRef = React.useRef(null);
const internalInputRef = inputRef || fallbackInputRef;
React.useEffect(() => {
if (autoFocus) {
internalInputRef.current?.focus();
}
}, [autoFocus, internalInputRef]);
React.useEffect(() => {
if (internalInputRef.current) {
// Have to disable eslint for this case since indeterminate can only be set via JS
// We don't need to explicitly add aria-checked because the checked attribute and this indeterminate property have the same effect
// eslint-disable-next-line react-compiler/react-compiler
internalInputRef.current.indeterminate = isIndeterminate;
}
}, [isIndeterminate, internalInputRef]);
const onMouseEnterHandler = React.useCallback(e => {
setIsHovered(true);
onMouseEnter(e);
}, [onMouseEnter]);
const onMouseLeaveHandler = React.useCallback(e => {
setIsHovered(false);
setIsActive(false);
onMouseLeave(e);
}, [onMouseLeave]);
const onMouseDownHandler = React.useCallback(e => {
setIsActive(true);
onMouseDown(e);
}, [onMouseDown]);
const onMouseUpHandler = React.useCallback(e => {
setIsActive(false);
onMouseUp(e);
}, [onMouseUp]);
const onFocusHandler = React.useCallback(e => {
setIsFocused(true);
onFocus(e);
if ((0, _focusVisible.isFocusVisible)(e)) {
setIsFocusVisible(true);
}
}, [onFocus]);
const onBlurHandler = React.useCallback(e => {
setIsFocused(false);
onBlur(e);
if (!(0, _focusVisible.isFocusVisible)(e)) {
setIsFocusVisible(false);
}
}, [onBlur]);
const onKeyUpHandler = React.useCallback(event => {
/**
* Handles 'Enter' key press to toggle the checkbox.
*/
if (event.key === ' ') {
setIsActive(false);
}
if (event.key === 'Enter') {
setIsActive(false);
onChange?.({
...event,
currentTarget: {
...event.currentTarget,
checked: !checked
},
target: {
...event.target,
checked: !checked
}
});
}
onKeyUp?.(event);
}, [onKeyUp, onChange, checked]);
const onKeyDownHandler = React.useCallback(event => {
if (event.key === 'Enter' || event.key === ' ') {
setIsActive(true);
}
onKeyDown?.(event);
}, [onKeyDown]);
const {
Root: RootOverride,
Checkmark: CheckmarkOverride,
Label: LabelOverride,
Input: InputOverride,
CheckmarkContainer: CheckmarkContainerOverride
} = overrides;
const Root = (0, _overrides.getOverride)(RootOverride) || _styledComponents.Root;
const CheckmarkContainer = (0, _overrides.getOverride)(CheckmarkContainerOverride) || _styledComponents.CheckmarkContainer;
const Checkmark = (0, _overrides.getOverride)(CheckmarkOverride) || _styledComponents.Checkmark;
const Label = (0, _overrides.getOverride)(LabelOverride) || _styledComponents.Label;
const Input = (0, _overrides.getOverride)(InputOverride) || _styledComponents.Input;
const inputEvents = {
onChange,
onFocus: onFocusHandler,
onBlur: onBlurHandler,
onKeyDown: onKeyDownHandler,
onKeyUp: onKeyUpHandler
};
const mouseEvents = {
onMouseEnter: onMouseEnterHandler,
onMouseLeave: onMouseLeaveHandler,
onMouseDown: onMouseDownHandler,
onMouseUp: onMouseUpHandler
};
const sharedProps = {
$isFocused: isFocused,
$isFocusVisible: isFocusVisible,
$isHovered: isHovered,
$isActive: isActive,
$error: error,
$checked: checked,
$isIndeterminate: isIndeterminate,
$required: required,
$disabled: disabled,
$value: value
};
const labelComp = children && /*#__PURE__*/React.createElement(Label, _extends({
$labelPlacement: labelPlacement
}, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), containsInteractiveElement ?
/*#__PURE__*/
// Prevents the event from bubbling up to the label and moving focus to the radio button
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
React.createElement("div", {
onClick: e => e.preventDefault()
}, children) : children);
return /*#__PURE__*/React.createElement(Root, _extends({
"data-baseweb": "checkbox-v2",
title: title || null,
$labelPlacement: labelPlacement
}, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), labelPlacement === _constants.LABEL_PLACEMENT.left && labelComp, /*#__PURE__*/React.createElement(CheckmarkContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkContainerOverride)), /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkOverride)))), /*#__PURE__*/React.createElement(Input, _extends({
value: value,
id: id,
name: name,
checked: checked,
required: required,
"aria-label": props['aria-label'] || props.ariaLabel,
"aria-describedby": props['aria-describedby'],
"aria-errormessage": props['aria-errormessage'],
"aria-invalid": error || null,
"aria-required": required || null,
"aria-controls": props['aria-controls'] || null,
disabled: disabled,
type: "checkbox",
ref: internalInputRef
// Prevent a second click event from firing when label is clicked.
// See https://github.com/uber/baseweb/issues/3847
,
onClick: stopPropagation
}, sharedProps, inputEvents, (0, _overrides.getOverrideProps)(InputOverride))), labelPlacement === _constants.LABEL_PLACEMENT.right && labelComp);
};
Checkbox.displayName = 'Checkbox';
var _default = exports.default = Checkbox;