qt-public-ui/lib/DocLoader/index.js

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
var _ = require("..");
var _antd = require("antd");
var _utils = _interopRequireDefault(require("./utils"));
var _axios = _interopRequireDefault(require("axios"));
require("./style");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/* eslint-disable react/no-danger */

var DOC_TYPE = {
  detail: {
    local: '/developer/api/doc/detail',
    // 本地
    online: '//developer.umeng.com/api/doc/detail' // 线上
  },
  cate: {
    local: '/developer/api/doc/tree',
    online: '//developer.umeng.com/api/doc/tree'
  }
};
var getUrl = function getUrl(type) {
  var isLocal = /^local\./.test(window.location.host);
  var urlSet = DOC_TYPE[type] || {};
  return isLocal ? urlSet.local || '' : urlSet.online || '';
};
var renderError = function renderError(msg) {
  return /*#__PURE__*/_react["default"].createElement(_.Default, {
    type: "empty",
    description: msg
  });
};
var renderCate = function renderCate(cate) {
  var indent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  var idx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  var hasChild = cate.children && cate.children.length;
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
    key: "".concat(indent, "-").concat(idx)
  }, hasChild ? /*#__PURE__*/_react["default"].createElement("li", {
    className: "umui-cate-title umui-indent-".concat(indent)
  }, cate.title) : /*#__PURE__*/_react["default"].createElement("a", {
    href: "//developer.umeng.com/docs/143070/detail/".concat(cate.link),
    className: "umui-cate-link umui-indent-".concat(indent),
    target: location.host === 'developer.umeng.com' ? '_self' : '_blank'
  }, cate.title), hasChild && cate.children.map(function (child, index) {
    return renderCate(child, indent + 1, index);
  }));
};
var DocLoader = function DocLoader(props) {
  var docId;
  var pathname = '';
  var urlType;
  var url = /^\/\//.test(props.pageURL) ? "https:".concat(props.pageURL) : props.pageURL;
  try {
    pathname = new URL(url).pathname;
    var pathname_arr = pathname.split('/');
    docId = pathname_arr.pop() || '';
    urlType = pathname_arr.pop() === 'cate' ? 'cate' : 'detail';
  } catch (e) {
    docId = '';
    urlType = 'detail';
  }
  var _useState = (0, _react.useState)(''),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    docContent = _useState2[0],
    setDoc = _useState2[1];
  var _useState3 = (0, _react.useState)({}),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    cate = _useState4[0],
    setCate = _useState4[1];
  var _useState5 = (0, _react.useState)(true),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    loading = _useState6[0],
    setLoading = _useState6[1];
  var _useState7 = (0, _react.useState)(''),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    docError = _useState8[0],
    setDocError = _useState8[1];
  (0, _react.useEffect)(function () {
    setLoading(true);
    docId && (0, _axios["default"])({
      url: getUrl(urlType),
      method: 'GET',
      params: urlType === 'detail' ? {
        docId: docId
      } : {
        rootId: docId
      }
    }).then(function (_ref) {
      var resp = _ref.data;
      setLoading(false);
      if (resp.code === 200) {
        if (urlType === 'detail') {
          var originalDoc = resp.data.contentHtml || '';
          var content = (0, _utils["default"])(originalDoc, props.sections || [], pathname);
          setDoc(content);
          setDocError(content ? '' : '不存在对应章节内容'); // 不存在content时报错
        } else {
          setCate(resp.data);
        }
      } else {
        setDocError('该文档不存在或已删除');
      }
    })["catch"](function (err) {
      setLoading(false);
      var isUmengApp = /\.umeng\.com$/.test(window.location.host);
      setDocError(isUmengApp ? err.message : '请在 *.umeng.com 下使用该组件');
    });
  }, [docId, pathname, props.sections, urlType]);
  (0, _react.useEffect)(function () {
    var listCodeCopyBtns = document.querySelectorAll('.u-code-btn-copy');
    if (listCodeCopyBtns && listCodeCopyBtns.length) {
      Array.from(listCodeCopyBtns).forEach(function (btn) {
        btn.addEventListener('click', function (e) {
          var _target$parentElement, _target$parentElement2;
          var target = e.currentTarget;
          var code = target === null || target === void 0 ? void 0 : (_target$parentElement = target.parentElement) === null || _target$parentElement === void 0 ? void 0 : (_target$parentElement2 = _target$parentElement.parentElement) === null || _target$parentElement2 === void 0 ? void 0 : _target$parentElement2.nextElementSibling;
          (0, _copyToClipboard["default"])(code === null || code === void 0 ? void 0 : code.innerText) && _antd.message.success('代码已成功复制到剪切板！');
        });
      });
    }
  }, [docContent]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-doc-loader"
  }, /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
    spinning: loading,
    style: {
      height: '100%'
    }
  }, docError ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-doc-loader-empty"
  }, renderError(docError)) : urlType === 'detail' ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-doc-loader-content",
    dangerouslySetInnerHTML: {
      __html: docContent
    }
  }) : /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-doc-loader-content umui-doc-cate"
  }, renderCate(cate))));
};
DocLoader.displayName = 'DocLoader';
var _default = exports["default"] = DocLoader;