@uiw-admin/layout-tabs/esm/index.js

layout tabs

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { Tabs, Icon } from 'uiw';
import { useNavigate, useLocation } from 'react-router-dom';
import { getRoutesList, getMatch, getMatchRender } from './utils';
import { matchPath } from 'react-router';
import { Outlet } from 'react-router-dom';
import './styles/index.css';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var LayoutTabs = props => {
  var {
    routes
  } = props;
  var location = useLocation();
  var navigate = useNavigate();
  var [pathArr, setPathArr] = React.useState([]);
  var routeListData = React.useMemo(() => getRoutesList(routes), [routes]);
  var Current = getMatch(routeListData, location);
  React.useEffect(() => {
    // if (!Current.current) {
    //   // 没找到跳转
    //   navigate('/404');
    //   return;
    // }
    if (Current.current && Current.current.redirect) {
      navigate(Current.current.redirect);
      return;
    }
    var curr = getMatchRender(pathArr, location, Current.isMatch);
    // 还有一种可能  /dom/:id 中的 id 值不一样，这种情况下需要替换

    if (!curr) {
      setPathArr(pre => pre.concat([_extends({}, Current.current, {
        isMatch: Current.isMatch,
        location
      })]).filter(item => !!item));
    } else if (curr && Current.isMatch && (curr.location.pathname !== location.pathname || curr.location.search !== location.search)) {
      setPathArr(pre => {
        return pre.map(item => {
          if (curr.location.pathname === item.location.pathname) {
            return _extends({}, item, {
              location
            });
          }
          return item;
        });
      });
    }
  }, [location.pathname]);
  React.useMemo(() => {
    var tabData = [...pathArr].map(item => {
      //  /dom/1?a=2  a 是变量，替换
      if (item.location.pathname === location.pathname && location.search !== item.location.search) {
        item.location = location;
      }
      return item;
    });
    setPathArr(() => [...tabData]);
  }, [location.search]);
  var onDelete = (event, index, item) => {
    event.stopPropagation();
    event.preventDefault();
    var lg = pathArr.length - 1;
    // 判断当前是第几个 index
    // 默认删除当前项 展示后一项
    // 当后一项不存在时 取前一项
    // 当前后项都不存在则不进行删除
    // 如果删除的项不是当前打开项，不做跳转
    var match = matchPath({
      path: item.path
    }, location.pathname);
    if (!match) {
      setPathArr(arr => arr.filter((_, ind) => ind !== index));
      return;
    }
    var isUpdate = false;
    var tabs;
    if (lg > index && match) {
      // 后一项存在
      tabs = pathArr.find((_, ind) => ind === index + 1);
      isUpdate = true;
    } else if (lg === index && index > 0 && match) {
      // 前一项存在
      tabs = pathArr.find((_, ind) => ind === index - 1);
      isUpdate = true;
    } else if (match) {
      isUpdate = true;
    }
    if (isUpdate) {
      setPathArr(arr => arr.filter((_, ind) => ind !== index));
    }
    if (tabs) {
      navigate("" + tabs.path + tabs.location.search, {
        state: tabs.location.state,
        replace: true
      });
    }
  };
  return /*#__PURE__*/_jsxs("div", {
    className: "uiw-layout-tabs-warp",
    children: [/*#__PURE__*/_jsx(Tabs, {
      className: "uiw-tabs-warp",
      type: "card",
      activeKey: location.pathname,
      onTabClick: keys => {
        var tabs = pathArr.find(item => item.location.pathname === keys);
        if (tabs && location.pathname !== keys) {
          navigate("" + keys + tabs.location.search, {
            state: tabs.location.state,
            replace: true
          });
        }
      },
      children: pathArr.map((item, index) => {
        return /*#__PURE__*/_jsx(Tabs.Pane, {
          label: /*#__PURE__*/_jsxs("div", {
            style: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            },
            children: [item.name, pathArr.length > 1 ? /*#__PURE__*/_jsx(Icon, {
              type: "close",
              tagName: "span",
              style: {
                marginLeft: 10
              },
              onClick: event => onDelete(event, index, item)
            }) : /*#__PURE__*/_jsx(React.Fragment, {})]
          })
        }, item.location.pathname);
      })
    }), /*#__PURE__*/_jsx("div", {
      className: "uiw-layout-tabs-body",
      children: /*#__PURE__*/_jsx(Outlet, {})
    })]
  });
};
export default LayoutTabs;