@antdp/layout-tabs/esm/index.js

用于主框架选项卡组件。

import _extends from "@babel/runtime/helpers/extends";
import React, { useEffect, useState, Fragment, useMemo } from 'react';
// @ts-ignore
import { history } from '@umijs/max';
import { Tabs, Result } from 'antd';
import { useLocation, matchPath } from 'react-router-dom';
import Iframe from './Iframe';
import RenderContent from './RenderContent';
import './index.css';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default props => {
  var {
    dataSource = [],
    bodyPadding = ''
  } = props;
  var location = useLocation();
  var [tabAll, setTabAll] = useState([]);
  var match = matchPath(location.pathname, location.pathname);
  useEffect(() => {
    var urlData = null;
    dataSource.forEach(item => {
      var match = matchPath(item.path, location.pathname);
      if (match) {
        urlData = _extends({}, item, {
          path: location.pathname,
          match
        });
      }
    });
    if (location.search && urlData) {
      urlData.location = location;
    }
    var findActiveTab = tabAll.find(item => item.path === location.pathname);
    if (tabAll.length === 0 || !findActiveTab) {
      if (urlData) {
        setTabAll([...tabAll, urlData]);
      }
    } else if (findActiveTab && findActiveTab.location && findActiveTab.location.search !== location.search) {
      var updataTabs = [...tabAll].map(item => {
        if (item.path === location.pathname) {
          item.location = location;
        }
        return item;
      });
      setTabAll([...updataTabs]);
    }
  }, [location.pathname]);
  useMemo(() => {
    var tabData = [...tabAll].map(item => {
      var match = matchPath(location.pathname, item);
      if (match) {
        item.location = location;
      }
      return item;
    });
    setTabAll([...tabData]);
  }, [location.search]);
  var renderOutlet = () => {
    if (ANTD_IS_IFRAME_RENDER) {
      var {
        element
      } = tabAll.find(item => item.path === location.pathname) || {};
      var Comp = element || /*#__PURE__*/_jsx(Result, {
        status: "404",
        title: "404",
        subTitle: "\u62B1\u6B49\uFF0C\u4F60\u8BBF\u95EE\u7684\u9875\u9762\u4E0D\u5B58\u5728"
      });
      return /*#__PURE__*/_jsx(Iframe, {
        bodyPadding: bodyPadding,
        isShowView: !!match,
        match: match,
        child: Comp
      }, location.pathname);
    }
    if (ANTD_IS_TABS) {
      return /*#__PURE__*/_jsx(RenderContent, {
        bodyPadding: bodyPadding,
        isShowView: !!match
      });
    }
    if (!!match) {
      return /*#__PURE__*/_jsx(RenderContent, {
        bodyPadding: bodyPadding,
        isShowView: true
      });
    }
    return null;
  };
  return /*#__PURE__*/_jsxs(Fragment, {
    children: [ANTD_IS_TABS && /*#__PURE__*/_jsx(Tabs, {
      type: "editable-card",
      className: "antdps-global-tabs",
      hideAdd: true,
      activeKey: location.pathname,
      onTabClick: targetKey => {
        var opts = {
          pathname: targetKey,
          query: null,
          state: ''
        };
        var tab = tabAll.find(item => item.path === targetKey);
        if (tab && tab.location) {
          opts.query = tab.location.query;
          opts.state = tab.location.state;
        } else if (targetKey === location.pathname) {
          opts.query = location.query;
          opts.state = location.state;
        }
        history.push(opts);
      },
      onEdit: (targetKey, action) => {
        var index = 0;
        var dataKeys = tabAll.filter((item, idx) => {
          if (item.path === targetKey) {
            index = idx;
          }
          return item.path !== targetKey;
        });
        if (location.pathname === targetKey) {
          var opts = {
            exact: true,
            pathname: null,
            query: null,
            state: null
          };
          if (dataKeys && dataKeys.length > 0) {
            var tab = dataKeys[index === 0 ? 0 : index - 1];
            opts.pathname = tab.path;
            if (tab && tab.location) {
              opts.query = tab.location.query;
              opts.state = tab.location.state;
            }
            history.push(opts);
          }
        }
        setTabAll([...dataKeys]);
      },
      items: tabAll.map(pane => {
        return {
          label: pane.name,
          tab: pane.name,
          key: pane.path,
          closable: tabAll.length !== 1
        };
      })
    }), renderOutlet()]
  });
};