@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.1 kB
JavaScript
import { __rest } from "tslib";
// 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 { copyAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import AbstractSwitch from '../internal/components/abstract-switch';
import { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';
import { fireNonCancelableEvent } from '../internal/events';
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import styles from './styles.css.js';
export default React.forwardRef(function RadioButton(_a, ref) {
var { name, label, value, checked, description, disabled, controlId, onChange, readOnly, className } = _a, rest = __rest(_a, ["name", "label", "value", "checked", "description", "disabled", "controlId", "onChange", "readOnly", "className"]);
const isVisualRefresh = useVisualRefresh();
const radioButtonRef = useRef(null);
const mergedRefs = useMergeRefs(radioButtonRef, ref);
const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);
return (React.createElement(AbstractSwitch, Object.assign({ className: clsx(styles.radio, description && styles['radio--has-description'], className), controlClassName: styles['radio-control'], outlineClassName: styles.outline, label: label, description: description, disabled: disabled, readOnly: readOnly, controlId: controlId }, copyAnalyticsMetadataAttribute(rest), { nativeControl: nativeControlProps => (React.createElement("input", Object.assign({}, nativeControlProps, { 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) {
return;
}
fireNonCancelableEvent(onChange, { value });
}, 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: isVisualRefresh ? 12 : 8, cx: 50, cy: 50, r: isVisualRefresh ? 44 : 46 }),
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 })) })));
});
//# sourceMappingURL=radio-button.js.map