@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
JavaScript
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;