deer-ui/lib/codeview/index.js

React.js UI components for PC Web

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

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

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

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

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

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

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

var _reactLowlight = _interopRequireDefault(require("react-lowlight"));

var _javascript = _interopRequireDefault(require("highlight.js/lib/languages/javascript"));

var _message = _interopRequireDefault(require("../message"));

require("highlight.js/styles/color-brewer.css");

var _icon = require("../icon");

function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

// 主题预览 https://highlightjs.org/static/demo/
_reactLowlight.default.registerLanguage("js", _javascript.default);
/**
 * 显示code组件，切换展示
 * react-markdown 和 react-lowlight 一起使用 实现代码高亮
 */


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

  var _super = _createSuper(CodeView);

  function CodeView() {
    var _this;

    (0, _classCallCheck2.default)(this, CodeView);

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

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      isShow: false
    });
    return _this;
  }

  (0, _createClass2.default)(CodeView, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          language = _this$props.language,
          prefixCls = _this$props.prefixCls,
          value = _this$props.value,
          inline = _this$props.inline;
      return /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls)
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "toggle",
        onClick: function onClick() {
          _this2.showCode();
        }
      }, !this.state.isShow ? /*#__PURE__*/_react.default.createElement("div", null, "\u663E\u793A\u4EE3\u7801", /*#__PURE__*/_react.default.createElement(_icon.DownIcon, {
        className: "codeView-icon"
      })) : /*#__PURE__*/_react.default.createElement("div", null, "\u9690\u85CF\u4EE3\u7801 ", /*#__PURE__*/_react.default.createElement("span", {
        className: "copy",
        onClick: function onClick(e) {
          _this2.copy(e);
        }
      }, "\u590D\u5236\u4EE3\u7801"), /*#__PURE__*/_react.default.createElement(_icon.UpIcon, {
        style: {
          fontSize: '24px',
          verticalAlign: '-7px',
          marginLeft: "10px"
        }
      }))), this.state.isShow ? /*#__PURE__*/_react.default.createElement(_reactLowlight.default, {
        language: language,
        value: value,
        inline: inline
      }) : null);
    }
  }, {
    key: "showCode",
    value: function showCode() {
      var isShow = this.state.isShow;
      this.setState({
        isShow: !isShow
      });
    }
  }, {
    key: "copy",
    value: function copy(e) {
      e.stopPropagation();
      var el = document.createElement('textarea');
      el.value = this.props.value;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);

      _message.default.success('复制成功');
    }
  }]);
  return CodeView;
}(_react.default.PureComponent);

exports.default = CodeView;
(0, _defineProperty2.default)(CodeView, "propTypes", {
  value: _propTypes.default.string,
  language: _propTypes.default.string,
  inline: _propTypes.default.bool,
  prefixCls: _propTypes.default.string.isRequired
});
(0, _defineProperty2.default)(CodeView, "defaultProps", {
  prefixCls: "deer-ui-code-view",
  language: "js"
});