@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
47 lines • 2.44 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useLayoutEffect, useState } from 'react';
import clsx from 'clsx';
import { getIsRtl } from '@awsui/component-toolkit/internal';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import InternalButton from '../../button/internal';
import styles from './styles.css.js';
function createActionButton(testUtilClasses, action, buttonText, onButtonClick) {
if (!action && buttonText) {
action = (React.createElement("span", { ...getAnalyticsMetadataAttribute({
action: 'buttonClick',
}) },
React.createElement(InternalButton, { className: testUtilClasses.actionButton, onClick: onButtonClick, formAction: "none" }, buttonText)));
}
return action ? React.createElement("div", { className: testUtilClasses.actionSlot }, action) : null;
}
export const ActionsWrapper = ({ className, testUtilClasses, action, discoveredActions, buttonText, wrappedClass, containerWidth, onButtonClick, }) => {
const [wrapped, setWrapped] = useState(false);
const ref = React.useRef(null);
useLayoutEffect(() => {
if (!ref.current || !containerWidth || !wrappedClass) {
return;
}
function check() {
const isRtl = getIsRtl(ref.current);
const { offsetWidth, offsetLeft } = ref.current;
const start = isRtl ? containerWidth - offsetWidth - offsetLeft : offsetLeft;
// if the action slot is towards the left (right in RTL) of its container
setWrapped(start < 100);
}
// Discovered actions are rendered by their plugin, so don't cause a
// re-render of our React tree. So we observe for changes.
const observer = new MutationObserver(check);
observer.observe(ref.current, { attributes: false, childList: true, subtree: true });
check();
return () => observer.disconnect();
});
const actionButton = createActionButton(testUtilClasses, action, buttonText, onButtonClick);
if (!actionButton && discoveredActions.length === 0) {
return null;
}
return (React.createElement("div", { ref: ref, className: clsx(styles.root, className, wrapped && wrappedClass) },
actionButton,
discoveredActions));
};
//# sourceMappingURL=index.js.map