@helpscout/hsds-react/components/CopyCode/CopyCode.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 _CopyCode = require("./CopyCode.css");

var _Keys = _interopRequireDefault(require("../../constants/Keys"));

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

var Prism = require('prismjs');

require('prismjs/components/prism-java');

require('prismjs/components/prism-swift');

require('prismjs/components/prism-c');

require('prismjs/components/prism-objectivec');

require('prismjs/components/prism-markup');

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

  function CopyCode() {
    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.node = void 0;

    _this.handleOnKeyDown = function (event) {
      if (event.ctrlKey || event.metaKey) {
        return true;
      }

      if (event.keyCode === _Keys.default.TAB) {
        return true;
      }

      return _this.preventEventDefault(event);
    };

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

      _this.copyToClipboard();

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

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

    _this.getCodeValue = function () {
      return _this.props.code;
    };

    _this.preventEventDefault = function (event) {
      event && event.preventDefault();
      return false;
    };

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

      _this.props.innerRef(node);
    };

    return _this;
  }

  var _proto = CopyCode.prototype;

  _proto.componentDidMount = function componentDidMount() {
    if (this.props.autoFocus) {
      this.selectText();
    }
  };

  _proto.selectText = function selectText() {
    this.node && (0, _clipboard.selectText)(this.node);
  };

  _proto.getCodeMarkup = function getCodeMarkup() {
    var code = this.props.code;
    var language = this.props.language === 'html' ? 'markup' : this.props.language;

    function createMarkup() {
      var html = Prism.highlight(code, Prism.languages[language], language);
      return {
        __html: html
      };
    }

    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyCode.SyntaxHighlight, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        dangerouslySetInnerHTML: createMarkup()
      })
    });
  };

  _proto.render = function render() {
    var _this$props = this.props,
        buttonSize = _this$props.buttonSize,
        className = _this$props.className,
        code = _this$props.code,
        maxWidth = _this$props.maxWidth,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["buttonSize", "className", "code", "maxWidth"]);
    var componentClassName = (0, _classnames.default)('c-CopyCode', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CopyCode.WrapperUI, {
      className: componentClassName,
      maxWidth: maxWidth,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyCode.CopyCodeUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
        contentEditable: true,
        onCut: this.preventEventDefault,
        onPaste: this.preventEventDefault,
        onKeyDown: this.handleOnKeyDown,
        ref: this.setNodeRef,
        spellCheck: false,
        suppressContentEditableWarning: true,
        children: this.getCodeMarkup()
      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyCode.CopyButtonUI, {
        size: buttonSize,
        onClick: this.handleCopyClick,
        children: "Copy"
      })]
    });
  };

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

function noop() {}

CopyCode.defaultProps = {
  autoFocus: false,
  buttonSize: 'sm',
  code: '',
  copyToClipboard: true,
  'data-cy': 'CopyCode',
  innerRef: noop,
  language: 'javascript',
  maxWidth: 500,
  onCopy: noop
};
CopyCode.propTypes = {
  className: _propTypes.default.string,

  /** Automatically select `code` when component mounts. */
  autoFocus: _propTypes.default.bool,

  /** Sets the size of the button. Can be one of `"sm"`, `"md"` or `"lg"`.  */
  buttonSize: _propTypes.default.string,

  /** The code to be displayed within the container. */
  code: _propTypes.default.string,

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

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

  /** Language syntax */
  language: _propTypes.default.oneOf(['c', 'java', 'javascript', 'objectivec', 'swift', 'html', 'markup']),

  /** Sets the max width of the container. */
  maxWidth: _propTypes.default.number,

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

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