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

layout tabs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _uiw = require("uiw");
var _reactRouterDom = require("react-router-dom");
var _utils = require("./utils");
var _reactRouter = require("react-router");
var _jsxRuntime = require("react/jsx-runtime");
var LayoutTabs = function LayoutTabs(props) {
  var routes = props.routes;
  var location = (0, _reactRouterDom.useLocation)();
  var navigate = (0, _reactRouterDom.useNavigate)();
  var _React$useState = _react["default"].useState([]),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    pathArr = _React$useState2[0],
    setPathArr = _React$useState2[1];
  var routeListData = _react["default"].useMemo(function () {
    return (0, _utils.getRoutesList)(routes);
  }, [routes]);
  var Current = (0, _utils.getMatch)(routeListData, location);
  _react["default"].useEffect(function () {
    // if (!Current.current) {
    //   // 没找到跳转
    //   navigate('/404');
    //   return;
    // }
    if (Current.current && Current.current.redirect) {
      navigate(Current.current.redirect);
      return;
    }
    var curr = (0, _utils.getMatchRender)(pathArr, location, Current.isMatch);
    // 还有一种可能  /dom/:id 中的 id 值不一样，这种情况下需要替换

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