UNPKG

@awsui/components-react

Version:

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

26 lines (25 loc) 2.65 kB
import { __assign, __rest } from "tslib"; import clsx from 'clsx'; import React, { useEffect, useRef } from 'react'; import { fireNonCancelableEvent } from '../internal/events'; import useForwardFocus from '../internal/hooks/forward-focus'; import { getBaseProps } from '../internal/base-component'; import AbstractSwitch from '../internal/components/abstract-switch'; import styles from './styles.css.js'; import CheckboxIcon from '../internal/components/checkbox-icon'; var InternalCheckbox = React.forwardRef(function (_a, ref) { var controlId = _a.controlId, name = _a.name, checked = _a.checked, disabled = _a.disabled, indeterminate = _a.indeterminate, children = _a.children, description = _a.description, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, withoutLabel = _a.withoutLabel, tabIndex = _a.tabIndex, rest = __rest(_a, ["controlId", "name", "checked", "disabled", "indeterminate", "children", "description", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "onFocus", "onBlur", "onChange", "withoutLabel", "tabIndex"]); var baseProps = getBaseProps(rest); var checkboxRef = useRef(null); useForwardFocus(ref, checkboxRef); useEffect(function () { if (checkboxRef.current) { checkboxRef.current.indeterminate = Boolean(indeterminate); } }); return (React.createElement(AbstractSwitch, __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef, className: styles.input, type: "checkbox", checked: checked, name: name, tabIndex: tabIndex, onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }), onBlur: onBlur && (function () { return fireNonCancelableEvent(onBlur); }), onChange: function () { }, onClick: onChange && (function () { return fireNonCancelableEvent(onChange, indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }); }) }))); }, styledControl: React.createElement(CheckboxIcon, { checked: checked, indeterminate: indeterminate, disabled: disabled }), withoutLabel: withoutLabel }))); }); export default InternalCheckbox;