optimizely-oui/module/js/components/CopyButton/index.js

Optimizely's Component Library.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from "react";
import PropTypes from "prop-types";
import { CopyToClipboard } from "react-copy-to-clipboard";
import Button from "../Button";
import Icon from "react-oui-icons";
/**
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 * @private
 */

var CopyButton = function CopyButton(_ref) {
  var className = _ref.className,
      onCopy = _ref.onCopy,
      style = _ref.style,
      testSection = _ref.testSection,
      textLabel = _ref.textLabel,
      textToCopy = _ref.textToCopy,
      usesTextLabel = _ref.usesTextLabel,
      props = _objectWithoutProperties(_ref, ["className", "onCopy", "style", "testSection", "textLabel", "textToCopy", "usesTextLabel"]);

  return React.createElement(CopyToClipboard, {
    text: textToCopy,
    onCopy: onCopy
  }, React.createElement(Button, _extends({
    className: className,
    style: style === "none" ? null : style,
    size: usesTextLabel ? "tiny" : null,
    ariaLabel: "Copy code snippet",
    testSection: testSection ? "".concat(testSection, "-copy-button") : null
  }, props), usesTextLabel ? textLabel : React.createElement(Icon, {
    name: "clipboard"
  })));
};

CopyButton.propTypes = {
  /** CSS class names. */
  className: PropTypes.string,

  /** Function to perform when content is copied.
    This callback is passed as onCopy prop to CopyToClipboard component.
    onCopy(text, result)
    result (bool): Returns true if copied successfully, else false.
  */
  onCopy: PropTypes.func,

  /** Style option for the button */
  style: PropTypes.oneOf(["highlight", "danger", "danger-outline", "outline", "outline-reverse", "plain", "toggle", "underline", "unstyled", "none"]),

  /** Hook for automated JavaScript tests */
  testSection: PropTypes.string,

  /** String label to use when usesTextLabel is true */
  textLabel: PropTypes.string,

  /** The text or code that will be copied */
  textToCopy: PropTypes.string.isRequired,

  /**
   * Whether or not this should use a string label
   * instead of an icon
   */
  usesTextLabel: PropTypes.bool
};
CopyButton.defaultProps = {
  style: "plain",
  usesTextLabel: false,
  textLabel: "Copy"
};
export default CopyButton;