@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
49 lines • 2.9 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { 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(_a) {
var { variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, popoverRenderWithPortal, __internalRootRef = null } = _a, restProps = __rest(_a, ["variant", "copyButtonAriaLabel", "copyButtonText", "copySuccessText", "copyErrorText", "textToCopy", "popoverRenderWithPortal", "__internalRootRef"]);
const [status, setStatus] = useState('pending');
const [statusText, setStatusText] = useState('');
const baseProps = getBaseProps(restProps);
const onClick = () => {
if (!navigator.clipboard) {
// The clipboard API is not available in insecure contexts.
setStatus('error');
setStatusText(copyErrorText);
return;
}
setStatus('pending');
setStatusText('');
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 trigger = (React.createElement(InternalPopover, { isInline: isInline, size: "medium", position: "top", triggerType: "custom", dismissButton: false, renderWithPortal: popoverRenderWithPortal, content: React.createElement(InternalStatusIndicator, { type: status }, statusText), __onOpen: onClick },
React.createElement(InternalButton, { ariaLabel: copyButtonAriaLabel !== null && copyButtonAriaLabel !== void 0 ? copyButtonAriaLabel : copyButtonText, iconName: "copy", variant: triggerVariant, wrapText: false, formAction: "none" }, copyButtonText)));
return (React.createElement("span", Object.assign({}, 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: testStyles['text-to-copy'] }, textToCopy))) : (trigger)));
}
//# sourceMappingURL=internal.js.map