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

新设计规范下业务组件库

/* eslint-disable react/no-danger */
import React, { useEffect, useState } from 'react';
import copy from 'copy-to-clipboard';
import { Default } from '..';
import { message, Spin } from 'antd';
import formatContent from './utils';
import axios from 'axios';
import './style';
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.createElement(Default, {
    type: "empty",
    description: msg
  });
};
var renderCate = function renderCate(cate, indent, idx) {
  if (indent === void 0) {
    indent = 0;
  }
  if (idx === void 0) {
    idx = 0;
  }
  var hasChild = cate.children && cate.children.length;
  return /*#__PURE__*/React.createElement(React.Fragment, {
    key: indent + "-" + idx
  }, hasChild ? /*#__PURE__*/React.createElement("li", {
    className: "umui-cate-title umui-indent-" + indent
  }, cate.title) : /*#__PURE__*/React.createElement("a", {
    href: "//developer.umeng.com/docs/143070/detail/" + cate.link,
    className: "umui-cate-link umui-indent-" + 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:" + 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 = useState(''),
    docContent = _useState[0],
    setDoc = _useState[1];
  var _useState2 = useState({}),
    cate = _useState2[0],
    setCate = _useState2[1];
  var _useState3 = useState(true),
    loading = _useState3[0],
    setLoading = _useState3[1];
  var _useState4 = useState(''),
    docError = _useState4[0],
    setDocError = _useState4[1];
  useEffect(function () {
    setLoading(true);
    docId && axios({
      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 = formatContent(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]);
  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;
          copy(code === null || code === void 0 ? void 0 : code.innerText) && message.success('代码已成功复制到剪切板！');
        });
      });
    }
  }, [docContent]);
  return /*#__PURE__*/React.createElement("div", {
    className: "umui-doc-loader"
  }, /*#__PURE__*/React.createElement(Spin, {
    spinning: loading,
    style: {
      height: '100%'
    }
  }, docError ? /*#__PURE__*/React.createElement("div", {
    className: "umui-doc-loader-empty"
  }, renderError(docError)) : urlType === 'detail' ? /*#__PURE__*/React.createElement("div", {
    className: "umui-doc-loader-content",
    dangerouslySetInnerHTML: {
      __html: docContent
    }
  }) : /*#__PURE__*/React.createElement("div", {
    className: "umui-doc-loader-content umui-doc-cate"
  }, renderCate(cate))));
};
DocLoader.displayName = 'DocLoader';
export default DocLoader;