@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
30 lines • 1.87 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useCallback } from 'react';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { useInternalI18n } from '../../../i18n/context';
import InternalIcon from '../../../icon/internal';
import { fireNonCancelableEvent } from '../../events';
import styles from './styles.css.js';
export default function TokenLimitToggle({ controlId, allHidden, expanded, numberOfHiddenOptions, onClick, i18nStrings = {}, limitShowFewerAriaLabel, limitShowMoreAriaLabel, }) {
const i18n = useInternalI18n('token-group');
const numberOfHiddenOptionLabel = allHidden ? numberOfHiddenOptions : `+${numberOfHiddenOptions}`;
const description = expanded
? i18n('i18nStrings.limitShowFewer', i18nStrings.limitShowFewer)
: `${i18n('i18nStrings.limitShowMore', i18nStrings.limitShowMore) || ''} (${numberOfHiddenOptionLabel})`;
const ariaLabel = expanded ? limitShowFewerAriaLabel : limitShowMoreAriaLabel;
const handleClick = useCallback(() => {
fireNonCancelableEvent(onClick, null);
}, [onClick]);
const analyticsMetadata = {
action: 'showMore',
detail: {
label: { root: 'self' },
expanded: `${!expanded}`,
},
};
return (React.createElement("button", Object.assign({ type: "button", className: styles.toggle, onClick: handleClick, "aria-controls": controlId, "aria-expanded": expanded, "aria-label": ariaLabel }, getAnalyticsMetadataAttribute(analyticsMetadata)),
React.createElement(InternalIcon, { name: expanded ? 'treeview-collapse' : 'treeview-expand' }),
React.createElement("span", { className: styles.description }, description)));
}
//# sourceMappingURL=token-limit-toggle.js.map