@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 • 3.71 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 { getAnalyticsMetadataAttribute, } from '@awsui/component-toolkit/internal/analytics-metadata';
import { getBaseProps } from '../internal/base-component';
import AbstractSwitch from '../internal/components/abstract-switch';
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, getStyledControlStyle } from './style';
import styles from './styles.css.js';
const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, nativeInputAttributes, __internalRootRef, style, __injectAnalyticsComponentMetadata, ...rest }, ref) => {
const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
const baseProps = getBaseProps(rest);
const checkboxRef = useRef(null);
const analyticsMetadata = {};
const analyticsComponentMetadata = {
name: 'awsui.Toggle',
label: { root: 'self' },
properties: {
checked: `${!!checked}`,
},
};
if (__injectAnalyticsComponentMetadata) {
analyticsMetadata.component = analyticsComponentMetadata;
}
if (!disabled && !readOnly) {
analyticsMetadata.action = !checked ? 'select' : 'deselect';
}
useForwardFocus(ref, checkboxRef);
return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], {
[styles['toggle-control-checked']]: checked,
[styles['toggle-control-disabled']]: disabled,
[styles['toggle-control-readonly']]: readOnly,
}), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "Toggle", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-disabled": readOnly && !disabled ? 'true' : undefined, 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, { checked: !checked });
}, styledControl:
/*Using span, not div for HTML validity*/
React.createElement("span", { className: clsx(styles['toggle-handle'], {
[styles['toggle-handle-checked']]: checked,
[styles['toggle-handle-disabled']]: disabled,
[styles['toggle-handle-readonly']]: readOnly,
}), style: getStyledControlStyle(style, checked, disabled, readOnly) }), style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: __internalRootRef, ...getAnalyticsMetadataAttribute(analyticsMetadata) }));
});
export default InternalToggle;
//# sourceMappingURL=internal.js.map