@massds/mayflower-react/dist/ButtonCopy/index.mjs

React versions of Mayflower design system UI components

/**
 * ButtonCopy module.
 * @module @massds/mayflower-react/ButtonCopy
 * @requires module:@massds/mayflower-assets/scss/00-base/mixins/ma-button-reset
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-copy
 */
import React from "react";
import PropTypes from "prop-types"; // eslint-disable-next-line import/no-unresolved

import IconCopy from "../Icon/IconCopy.mjs"; // eslint-disable-next-line import/no-unresolved

import IconInputsuccess from "../Icon/IconInputsuccess.mjs";

const ButtonCopy = (_ref) => {
  let content = _ref.content;

  const _React$useState = React.useState(false),
        copied = _React$useState[0],
        setCopied = _React$useState[1];

  const copyAction = () => {
    navigator.clipboard.writeText(content).then(() => setCopied(true));
  };

  const copyButtonTitle = copied ? 'copied' : 'copy hex code';
  React.useEffect(() => {
    if (copied) {
      setTimeout(() => {
        setCopied(false);
      }, 1000);
    }
  }, [copied]);
  return /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "ma__button-copy",
    onClick: copyAction,
    title: copyButtonTitle,
    "aria-label": copyButtonTitle
  }, copied ? /*#__PURE__*/React.createElement(IconInputsuccess, {
    width: 16,
    height: 16
  }) : /*#__PURE__*/React.createElement(IconCopy, {
    width: 16,
    height: 16
  }));
};

ButtonCopy.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Copied content string. */
  content: PropTypes.string
} : {};
export default ButtonCopy;