@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
68 lines • 4.68 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { useUniqueId } from '@awsui/component-toolkit/internal';
import { getAnalyticsLabelAttribute, getAnalyticsMetadataAttribute, } from '@awsui/component-toolkit/internal/analytics-metadata';
import customCssProps from '../../../internal/generated/custom-css-properties';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
function joinString(values) {
return values.filter((value) => !!value).join(' ');
}
export default function AbstractSwitch({ controlId, controlClassName, outlineClassName, showOutline, disabled, readOnly, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onClick, style, __internalRootRef, ...rest }) {
var _a, _b, _c, _d, _e, _f;
const uniqueId = useUniqueId();
const id = controlId || uniqueId;
const labelId = `${id}-label`;
const descriptionId = `${id}-description`;
const ariaLabelledByIds = [];
if (label && !ariaLabel) {
ariaLabelledByIds.push(labelId);
}
if (ariaLabelledby) {
ariaLabelledByIds.push(ariaLabelledby);
}
const ariaDescriptions = [];
if (ariaDescribedby) {
ariaDescriptions.push(ariaDescribedby);
}
if (description) {
ariaDescriptions.push(descriptionId);
}
return (React.createElement("span", { ...rest, className: clsx(styles.wrapper, rest.className), ref: __internalRootRef, ...getAnalyticsLabelAttribute(label ? `.${analyticsSelectors.label}` : `.${analyticsSelectors['native-input']}`) },
React.createElement("span", { className: styles['label-wrapper'], "aria-disabled": disabled ? 'true' : undefined, onClick: disabled || readOnly ? undefined : onClick, ...getAnalyticsMetadataAttribute(disabled || readOnly
? {}
: {
action: 'select',
detail: {
label: label ? `.${analyticsSelectors.label}` : `.${analyticsSelectors['native-input']}`,
},
}) },
React.createElement("span", { className: clsx(styles.control, controlClassName), style: {
background: (_a = style === null || style === void 0 ? void 0 : style.control) === null || _a === void 0 ? void 0 : _a.background,
...((style === null || style === void 0 ? void 0 : style.focusRing) && {
[customCssProps.styleFocusRingBorderColor]: (_b = style.focusRing) === null || _b === void 0 ? void 0 : _b.borderColor,
[customCssProps.styleFocusRingBorderRadius]: (_c = style.focusRing) === null || _c === void 0 ? void 0 : _c.borderRadius,
[customCssProps.styleFocusRingBorderWidth]: (_d = style.focusRing) === null || _d === void 0 ? void 0 : _d.borderWidth,
}),
} },
styledControl,
nativeControl({
id,
disabled,
className: clsx(styles['native-input'], analyticsSelectors['native-input']),
'aria-describedby': ariaDescriptions.length ? joinString(ariaDescriptions) : undefined,
'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined,
'aria-label': ariaLabel,
'aria-controls': ariaControls,
}),
React.createElement("span", { className: clsx(styles.outline, outlineClassName, showOutline && styles['show-outline']) })),
React.createElement("span", { className: clsx(styles.content, !label && !description && styles['empty-content']) },
label && (React.createElement("span", { id: labelId, className: clsx(styles.label, analyticsSelectors.label, { [styles['label-disabled']]: disabled }), style: { color: (_e = style === null || style === void 0 ? void 0 : style.label) === null || _e === void 0 ? void 0 : _e.color } }, label)),
description && (React.createElement("span", { id: descriptionId, className: clsx(styles.description, {
[styles['description-disabled']]: disabled,
[styles['description-bottom-padding']]: descriptionBottomPadding,
}), style: { color: (_f = style === null || style === void 0 ? void 0 : style.description) === null || _f === void 0 ? void 0 : _f.color } }, description))))));
}
//# sourceMappingURL=index.js.map