@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
52 lines • 4.11 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import { useSingleTabStopNavigation } from '@awsui/component-toolkit/internal';
import { getAnalyticsMetadataAttribute, } from '@awsui/component-toolkit/internal/analytics-metadata';
import { getBaseProps } from '../internal/base-component';
import AbstractSwitch from '../internal/components/abstract-switch';
import CheckboxIcon from '../internal/components/checkbox-icon';
import { useFormFieldContext } from '../internal/context/form-field-context';
import { fireNonCancelableEvent } from '../internal/events';
import useForwardFocus from '../internal/hooks/forward-focus';
import WithNativeAttributes from '../internal/utils/with-native-attributes';
import { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';
import styles from './styles.css.js';
const InternalCheckbox = React.forwardRef(({ controlId, name, checked, disabled, readOnly, ariaRequired, indeterminate, children, description, ariaLabel, onFocus, onBlur, onChange, tabIndex: explicitTabIndex, showOutline, ariaControls, style, nativeInputAttributes, __internalRootRef, __injectAnalyticsComponentMetadata = false, ...rest }, ref) => {
const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
const baseProps = getBaseProps(rest);
const checkboxRef = useRef(null);
useForwardFocus(ref, checkboxRef);
useEffect(() => {
if (checkboxRef.current) {
checkboxRef.current.indeterminate = Boolean(indeterminate);
}
});
const { tabIndex } = useSingleTabStopNavigation(checkboxRef, { tabIndex: explicitTabIndex });
const analyticsMetadata = {};
const analyticsComponentMetadata = {
name: 'awsui.Checkbox',
label: { root: 'self' },
properties: {
checked: `${!!checked}`,
},
};
if (__injectAnalyticsComponentMetadata) {
analyticsMetadata.component = analyticsComponentMetadata;
}
if (!disabled && !readOnly) {
analyticsMetadata.action = !checked ? 'select' : 'deselect';
}
return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, showOutline: showOutline, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "Checkbox", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-required": ariaRequired ? 'true' : undefined, "aria-disabled": readOnly && !disabled ? 'true' : undefined, tabIndex: tabIndex, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
// empty handler to suppress React controllability warning
onChange: () => { } })), onClick: () => {
var _a;
(_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
fireNonCancelableEvent(onChange,
// for deterministic transitions "indeterminate" -> "checked" -> "unchecked"
indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false });
}, styledControl: React.createElement(CheckboxIcon, { checked: checked, indeterminate: indeterminate, disabled: disabled, readOnly: readOnly, style: getCheckboxIconStyles(style, checked, disabled, readOnly, indeterminate) }), style: getAbstractSwitchStyles(style, checked, disabled, readOnly, indeterminate), __internalRootRef: __internalRootRef, ...getAnalyticsMetadataAttribute(analyticsMetadata) }));
});
export default InternalCheckbox;
//# sourceMappingURL=internal.js.map