@carbon/react
Version:
React components for the Carbon Design System
111 lines (109 loc) • 3.69 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_noopFn = require("../../internal/noopFn.js");
const require_deprecateValuesWithin = require("../../prop-types/deprecateValuesWithin.js");
const require_mapPopoverAlign = require("../../tools/mapPopoverAlign.js");
const require_index = require("../IconButton/index.js");
const require_events = require("../../tools/events.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let es_toolkit_compat = require("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 = require_noopFn.noopFn, ...other }) {
const [animation, setAnimation] = (0, react.useState)("");
const prefix = require_usePrefix.usePrefix();
const classNames = (0, classnames.default)(className, `${prefix}--copy`, {
[`${prefix}--copy-btn--animating`]: animation,
[`${prefix}--copy-btn--${animation}`]: animation
});
const handleFadeOut = (0, react.useCallback)((0, es_toolkit_compat.debounce)(() => {
setAnimation("fade-out");
}, feedbackTimeout), [feedbackTimeout]);
const handleClick = (0, react.useCallback)(() => {
setAnimation("fade-in");
handleFadeOut();
}, [handleFadeOut]);
const handleAnimationEnd = (event) => {
if (event.animationName === `${prefix}--hide-feedback`) setAnimation("");
};
(0, react.useEffect)(() => () => {
handleFadeOut.cancel();
}, [handleFadeOut]);
const initialLabel = other["aria-label"] ?? "";
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
closeOnActivation: false,
align,
autoAlign,
className: classNames,
label: animation ? feedback : initialLabel,
leaveDelayMs: animation ? feedbackTimeout : void 0,
onClick: require_events.composeEventHandlers([onClick, handleClick]),
onAnimationEnd: require_events.composeEventHandlers([onAnimationEnd, handleAnimationEnd]),
...other,
"aria-label": !children && (animation ? feedback : other["aria-label"]) || void 0,
children
});
}
Copy.propTypes = {
align: require_deprecateValuesWithin.deprecateValuesWithin(prop_types.default.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"
], require_mapPopoverAlign.mapPopoverAlign),
autoAlign: prop_types.default.bool,
children: prop_types.default.node,
className: prop_types.default.string,
feedback: prop_types.default.string,
feedbackTimeout: prop_types.default.number,
onAnimationEnd: prop_types.default.func,
onClick: prop_types.default.func
};
//#endregion
exports.default = Copy;