@helpscout/hsds-react/components/CopyButton/CopyButton.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _classnames = _interopRequireDefault(require("classnames"));

var _CopyButton = require("./CopyButton.utils");

var _CopyButton2 = require("./CopyButton.css");

var _jsxRuntime = require("react/jsx-runtime");

var WrappedCopybutton = /*#__PURE__*/_react.default.forwardRef(function CopyButton(props, ref) {
  var className = props.className,
      icon = props.icon,
      label = props.label,
      onClick = props.onClick,
      outlined = props.outlined,
      size = props.size,
      theme = props.theme,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "icon", "label", "onClick", "outlined", "size", "theme"]);

  var _useCopyConfirmation = (0, _CopyButton.useCopyConfirmation)(props),
      shouldRenderConfirmation = _useCopyConfirmation[0],
      handleClick = _useCopyConfirmation[1];

  var componentClassName = (0, _classnames.default)('c-CopyButton', shouldRenderConfirmation && 'is-copyConfirmed', icon && 'is-with-icon', className);
  var iconSize = size === 'sm' ? '20' : '24';
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CopyButton2.CopyButtonUI, (0, _extends2.default)({
    size: size,
    theme: theme,
    outlined: outlined
  }, (0, _getValidProps.default)(rest), {
    onClick: handleClick,
    className: componentClassName,
    ref: ref,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton2.ConfirmationIconWrapperUI, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        className: "c-CopyButton__iconConfirmation",
        name: "checkmark",
        size: iconSize
      })
    }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton2.IconUI, {
      size: iconSize,
      name: icon
    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton2.TextUI, {
      children: label
    })]
  }));
});

function noop() {}

WrappedCopybutton.defaultProps = {
  'data-cy': 'CopyButton',
  theme: 'blue',
  label: 'Copy',
  onClick: noop,
  onReset: noop,
  resetTimeout: 2000,
  size: 'sm',
  outlined: true
};
WrappedCopybutton.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,
  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
  onClick: _propTypes.default.func,
  onReset: _propTypes.default.func,
  resetTimeout: _propTypes.default.number,

  /** Sets the button size. */
  size: _propTypes.default.string,

  /** Sets the button theme. */
  theme: _propTypes.default.string,
  title: _propTypes.default.string,

  /** Set the outlined style to the button. */
  outlined: _propTypes.default.bool
};
var _default = WrappedCopybutton;
exports.default = _default;