@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
39 lines • 3.34 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import clsx from 'clsx';
import { useMergeRefs } from '@awsui/component-toolkit/internal';
import { useSingleTabStopNavigation } from '@awsui/component-toolkit/internal';
import { copyAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from '../../../radio-group/style';
import { getBaseProps } from '../../base-component';
import AbstractSwitch from '../../components/abstract-switch';
import { fireNonCancelableEvent } from '../../events';
import WithNativeAttributes from '../../utils/with-native-attributes';
import styles from './styles.css.js';
import testUtilStyles from './test-classes/styles.css.js';
export default React.forwardRef(function RadioButton({ name, children, value, checked, description, disabled, controlId, readOnly, className, style, nativeInputAttributes, onSelect, ...rest }, ref) {
const radioButtonRef = useRef(null);
const mergedRefs = useMergeRefs(radioButtonRef, ref);
const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);
const baseProps = getBaseProps(rest);
return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(testUtilStyles.root, className), controlClassName: styles['radio-control'], outlineClassName: styles.outline, label: children, description: description, disabled: disabled, readOnly: readOnly, controlId: controlId, style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: rest.__internalRootRef, ...copyAnalyticsMetadataAttribute(rest), nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "RadioButton", nativeAttributes: nativeInputAttributes, tabIndex: tabIndex, type: "radio", ref: mergedRefs, name: name, value: value, checked: checked, "aria-disabled": readOnly && !disabled ? 'true' : undefined,
// empty handler to suppress React controllability warning
onChange: () => { } })), onClick: () => {
var _a;
(_a = radioButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
if (!checked) {
fireNonCancelableEvent(onSelect);
}
}, styledControl: React.createElement("svg", { viewBox: "0 0 100 100", focusable: "false", "aria-hidden": "true" },
React.createElement("circle", { className: clsx(styles['styled-circle-border'], {
[styles['styled-circle-disabled']]: disabled,
[styles['styled-circle-readonly']]: readOnly,
}), strokeWidth: 6.25, cx: 50, cy: 50, r: 46, style: getOuterCircleStyle(style, checked, disabled, readOnly) }),
React.createElement("circle", { className: clsx(styles['styled-circle-fill'], {
[styles['styled-circle-disabled']]: disabled,
[styles['styled-circle-checked']]: checked,
[styles['styled-circle-readonly']]: readOnly,
}), strokeWidth: 30, cx: 50, cy: 50, r: 35, style: getInnerCircleStyle(style, checked, disabled, readOnly) })) }));
});
//# sourceMappingURL=index.js.map