@fishx/module-renderer/lib/FishModuleRenderer/FishModuleRenderer.js

Support render Fish, Fishx module

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/**
 * Fish Module Renderer
 *
 * @description 渲染 Fish 模块
 * @param {string} url - Fish Module Url
 * @param {string} id - Fish Module Name
 * @param {React.ReactNode | string} fallback - Fish Module Fallback
 * @param {boolean} showLoading - Fish Module Loading Flag
 * @param {React.ReactNode | string} loadingContent - Fish Module Loading Content
 * @param {() => void} onLoaded - Fish Module Loaded Callback
 * @param {(error: any) => void} onError - Fish Module Error Callback
 */

import React, { useState, useEffect, useCallback, useMemo } from 'react';
export default function FishModuleRenderer(props) {
  var url = props.url,
    _props$id = props.id,
    id = _props$id === void 0 ? '' : _props$id,
    moduleProps = props.moduleProps,
    _props$fallback = props.fallback,
    fallback = _props$fallback === void 0 ? '404' : _props$fallback,
    _props$showLoading = props.showLoading,
    showLoading = _props$showLoading === void 0 ? true : _props$showLoading,
    _props$loadingContent = props.loadingContent,
    loadingContent = _props$loadingContent === void 0 ? 'Loading...' : _props$loadingContent,
    _props$debug = props.debug,
    debug = _props$debug === void 0 ? false : _props$debug,
    onLoaded = props.onLoaded,
    onError = props.onError;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    errorFlag = _useState2[0],
    setErrorFlag = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isLoading = _useState4[0],
    setIsLoading = _useState4[1];
  var containerId = useMemo(function () {
    return "fish-".concat(id.replace(' ', ''));
  }, [id]);
  var handleError = useCallback(function (error) {
    setErrorFlag(true);
    setIsLoading(false);
    // eslint-disable-next-line no-console
    console.error(error);
    if (typeof onError === 'function') onError(error);
  }, []);
  var renderFish = useCallback(function () {
    if (!url && !id) {
      throw new Error('Invalid Params');
    }
    try {
      renderFishModule(url, "#".concat(containerId), moduleProps, function () {
        setIsLoading(false);
        if (typeof onLoaded === 'function') onLoaded();
      }, function (error) {
        handleError(error);
      }, debug);
    } catch (error) {
      handleError(error);
    }
  }, [containerId, url, moduleProps, handleError]);
  useEffect(function () {
    setIsLoading(true);
    try {
      renderFish();
    } catch (e) {
      handleError(e);
    }
  }, [containerId, url, moduleProps]);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      height: '100%'
    },
    className: "module-container"
  }, showLoading && isLoading && /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      height: '100%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }
  }, loadingContent), /*#__PURE__*/React.createElement("div", {
    key: containerId,
    id: containerId
  }, errorFlag && fallback));
}
var renderFishModule = function renderFishModule(url, containerId, moduleProps, callback, errorCb, debug) {
  if (!window.require || !window.fish) {
    throw new Error('Fish Not Found');
  }
  if (debug) console.log('[FishModule] info:', {
    url: url,
    containerId: containerId,
    moduleProps: moduleProps,
    callback: callback,
    errorCb: errorCb
  });
  window.require([url], function (View) {
    try {
      var viewObj;
      if (window.portalView) {
        viewObj = new View(moduleProps);
        $(containerId).css({
          'height': 'calc(100% - 1px)',
          'overflow': 'hidden auto'
        }); // 解决菜单高度问题
        window.portalView.setView(containerId, viewObj);
        window.portalView.renderViews(containerId);
      } else {
        viewObj = new View(window.fish.extend({
          el: $(containerId)
        }, moduleProps)).render();
      }
      var _viewObj = viewObj,
        $el = _viewObj.$el;
      var delta = $el.parent().height() - $el.outerHeight();
      var height = $el.parent().innerHeight();
      $el.outerHeight(Math.floor(height)); // 解决样式问题
      if (delta > 10) {
        viewObj.resize(delta);
      }
      if (typeof callback === 'function') {
        callback(viewObj);
      }
    } catch (error) {
      errorCb(error);
    }
  }, function (error) {
    if (typeof errorCb === 'function') {
      errorCb(error);
    }
  });
};