@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
46 lines (45 loc) • 3.07 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import clsx from 'clsx';
import styles from './styles.css.js';
import useFocusVisible from '../../hooks/focus-visible';
import { useUniqueId } from '../../hooks/use-unique-id';
function joinString(values) {
return values.filter(function (value) { return !!value; }).join(' ');
}
export default function AbstractSwitch(_a) {
var _b, _c;
var controlId = _a.controlId, controlClassName = _a.controlClassName, disabled = _a.disabled, nativeControl = _a.nativeControl, styledControl = _a.styledControl, label = _a.label, description = _a.description, descriptionBottomPadding = _a.descriptionBottomPadding, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, withoutLabel = _a.withoutLabel, rest = __rest(_a, ["controlId", "controlClassName", "disabled", "nativeControl", "styledControl", "label", "description", "descriptionBottomPadding", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "withoutLabel"]);
var uniqueId = useUniqueId();
var id = controlId || uniqueId;
var focusVisible = useFocusVisible();
var wrapperId = id + "-wrapper";
var labelId = id + "-label";
var descriptionId = id + "-description";
var WrapperElement = withoutLabel ? 'div' : 'label';
var wrapperAttributes = {};
if (!withoutLabel) {
wrapperAttributes.id = wrapperId;
wrapperAttributes.htmlFor = id;
}
var ariaDescriptons = [];
if (ariaDescribedby) {
ariaDescriptons.push(ariaDescribedby);
}
if (description) {
ariaDescriptons.push(descriptionId);
}
return (React.createElement("div", __assign({}, rest, { className: clsx(styles.wrapper, rest.className) }),
React.createElement(WrapperElement, __assign({}, wrapperAttributes, { className: styles['label-wrapper'], "aria-disabled": disabled ? 'true' : undefined }),
React.createElement("div", { className: clsx(styles.control, controlClassName) },
styledControl,
nativeControl(__assign(__assign({}, focusVisible), { id: id,
disabled: disabled, 'aria-describedby': ariaDescriptons.length ? joinString(ariaDescriptons) : undefined, 'aria-labelledby': ariaLabelledby ? joinString([labelId, ariaLabelledby]) : labelId, 'aria-label': ariaLabel })),
React.createElement("div", { className: styles.outline })),
React.createElement("div", { className: clsx(styles.content, !label && !description && styles['empty-content']) },
React.createElement("div", { id: labelId, className: clsx(styles.label, (_b = {}, _b[styles['label-disabled']] = disabled, _b)) }, label),
description && (React.createElement("div", { id: descriptionId, className: clsx(styles.description, (_c = {},
_c[styles['description-disabled']] = disabled,
_c[styles['description-bottom-padding']] = descriptionBottomPadding,
_c)) }, description))))));
}