@carbon/react
Version:
React components for the Carbon Design System
107 lines (105 loc) • 3.15 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import { noopFn } from "../../internal/noopFn.js";
import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
import { IconButton } from "../IconButton/index.js";
import { composeEventHandlers } from "../../tools/events.js";
import classNames from "classnames";
import { useCallback, useEffect, useState } from "react";
import PropTypes from "prop-types";
import { jsx } from "react/jsx-runtime";
import { debounce } from "es-toolkit/compat";
//#region src/components/Copy/Copy.tsx
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
function Copy({ align = "bottom", autoAlign = false, children, className, feedback = "Copied!", feedbackTimeout = 2e3, onAnimationEnd, onClick = noopFn, ...other }) {
const [animation, setAnimation] = useState("");
const prefix = usePrefix();
const classNames$1 = classNames(className, `${prefix}--copy`, {
[`${prefix}--copy-btn--animating`]: animation,
[`${prefix}--copy-btn--${animation}`]: animation
});
const handleFadeOut = useCallback(debounce(() => {
setAnimation("fade-out");
}, feedbackTimeout), [feedbackTimeout]);
const handleClick = useCallback(() => {
setAnimation("fade-in");
handleFadeOut();
}, [handleFadeOut]);
const handleAnimationEnd = (event) => {
if (event.animationName === `${prefix}--hide-feedback`) setAnimation("");
};
useEffect(() => () => {
handleFadeOut.cancel();
}, [handleFadeOut]);
const initialLabel = other["aria-label"] ?? "";
return /* @__PURE__ */ jsx(IconButton, {
closeOnActivation: false,
align,
autoAlign,
className: classNames$1,
label: animation ? feedback : initialLabel,
leaveDelayMs: animation ? feedbackTimeout : void 0,
onClick: composeEventHandlers([onClick, handleClick]),
onAnimationEnd: composeEventHandlers([onAnimationEnd, handleAnimationEnd]),
...other,
"aria-label": !children && (animation ? feedback : other["aria-label"]) || void 0,
children
});
}
Copy.propTypes = {
align: deprecateValuesWithin(PropTypes.oneOf([
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"left-bottom",
"left-top",
"right",
"right-bottom",
"right-top",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-end",
"left-start",
"right-end",
"right-start"
]), [
"top",
"top-start",
"top-end",
"bottom",
"bottom-start",
"bottom-end",
"left",
"left-start",
"left-end",
"right",
"right-start",
"right-end"
], mapPopoverAlign),
autoAlign: PropTypes.bool,
children: PropTypes.node,
className: PropTypes.string,
feedback: PropTypes.string,
feedbackTimeout: PropTypes.number,
onAnimationEnd: PropTypes.func,
onClick: PropTypes.func
};
//#endregion
export { Copy as default };