@helpscout/hsds-react/components/CopyInput/CopyInput.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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

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

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

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

var _clipboard = require("../../utilities/clipboard");

var _CopyInput = require("./CopyInput.css");

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

var CopyInput = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(CopyInput, _React$PureComponent);

  function CopyInput() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.inputNode = void 0;
    _this.copyButtonNode = void 0;

    _this.copyToClipboard = function () {
      (0, _clipboard.copyToClipboard)();
    };

    _this.getInputValue = function () {
      return _this.inputNode ? _this.inputNode.value : _this.props.value;
    };

    _this.selectText = function () {
      _this.inputNode && (0, _clipboard.selectText)(_this.inputNode);
    };

    _this.handleCopyClick = function () {
      _this.selectText();

      _this.copyToClipboard();

      _this.props.onCopy(_this.getInputValue());
    };

    _this.setNodeRef = function (node) {
      _this.inputNode = node;

      _this.props.innerRef(node);
    };

    return _this;
  }

  var _proto = CopyInput.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        className = _this$props.className,
        buttonLabel = _this$props.buttonLabel,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["className", "buttonLabel"]);
    var componentClassName = (0, _classnames.default)('c-CopyInput', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyInput.CopyInputUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      inputRef: this.setNodeRef,
      isSubtleReadOnly: true,
      onKeyUp: function onKeyUp(e) {
        if (e.key === 'Enter') {
          e.preventDefault();

          _this2.copyButtonNode.click();

          return false;
        }
      },
      suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyInput.CopyButtonUI, {
        size: "lg",
        theme: "grey",
        onClick: this.handleCopyClick.bind(this),
        isLast: true,
        tabIndex: '-1',
        ref: function ref(node) {
          return _this2.copyButtonNode = node;
        },
        icon: buttonLabel ? null : 'copy-small',
        label: buttonLabel
      })
    }));
  };

  return CopyInput;
}(_react.default.PureComponent);

function noop() {}

CopyInput.defaultProps = {
  buttonLabel: null,
  copyToClipboard: true,
  'data-cy': 'CopyInput',
  innerRef: noop,
  onCopy: noop,
  readOnly: true,
  value: ''
};
CopyInput.propTypes = {
  /** Button label to use in place of copy icon (default is no label) */
  buttonLabel: _propTypes.default.string,

  /** Enables copying to clipboard. */
  copyToClipboard: _propTypes.default.bool,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Retrieves the `input` DOM node. */
  innerRef: _propTypes.default.func,

  /** Callback function when the copy button is clicked. */
  onCopy: _propTypes.default.func,

  /** Whether the Input is read only. */
  readOnly: _propTypes.default.bool,

  /** The value to be displayed within the Input. */
  value: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = CopyInput;
exports.default = _default;