@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
60 lines • 3.37 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import InternalButton from '../button/internal';
import { getBaseProps } from '../internal/base-component';
import InternalPopover from '../popover/internal';
import InternalStatusIndicator from '../status-indicator/internal';
import styles from './styles.css.js';
import testStyles from './test-classes/styles.css.js';
export default function InternalCopyToClipboard({ variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, disabled, disabledReason, __internalRootRef, ...restProps }) {
const [status, setStatus] = useState('success');
const [statusText, setStatusText] = useState(copySuccessText);
useEffect(() => {
if (navigator.permissions) {
navigator.permissions
.query({ name: 'clipboard-write' })
.then(result => {
if (result.state === 'denied') {
setStatus('error');
setStatusText(copyErrorText);
}
})
.catch(() => {
// Permissions API not supported or failed.
});
}
}, [copyErrorText]);
const baseProps = getBaseProps(restProps);
const onClick = () => {
if (!navigator.clipboard) {
// The clipboard API is not available in insecure contexts.
setStatus('error');
setStatusText(copyErrorText);
return;
}
navigator.clipboard
.writeText(textToCopy)
.then(() => {
setStatus('success');
setStatusText(copySuccessText);
})
.catch(() => {
setStatus('error');
setStatusText(copyErrorText);
});
};
const triggerVariant = {
button: 'normal',
icon: 'icon',
inline: 'inline-icon',
}[variant];
const isInline = variant === 'inline';
const button = (React.createElement(InternalButton, { ariaLabel: copyButtonAriaLabel !== null && copyButtonAriaLabel !== void 0 ? copyButtonAriaLabel : copyButtonText, iconName: "copy", variant: triggerVariant, wrapText: false, formAction: "none", disabled: disabled, disabledReason: disabledReason }, copyButtonText));
const trigger = disabled ? (button) : (React.createElement(InternalPopover, { isInline: isInline, size: "medium", position: "top", triggerType: "custom", dismissButton: false, renderWithPortal: popoverRenderWithPortal, content: React.createElement(InternalStatusIndicator, { type: status }, statusText), __onOpen: onClick }, button));
return (React.createElement("span", { ...baseProps, ref: __internalRootRef, className: clsx(baseProps.className, styles.root, testStyles.root) }, isInline ? (React.createElement("span", { className: styles['inline-container'] },
React.createElement("span", { className: styles['inline-container-trigger'] }, trigger),
React.createElement("span", { className: clsx(testStyles['text-to-display'], testStyles['text-to-copy']) }, textToDisplay !== null && textToDisplay !== void 0 ? textToDisplay : textToCopy))) : (trigger)));
}
//# sourceMappingURL=internal.js.map