qt-public-ui
Version:
新设计规范下业务组件库
360 lines (350 loc) • 17.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.LayoutContext = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactRouterDom = require("react-router-dom");
var _Layout = _interopRequireDefault(require("../Layout"));
var _qtPublicHooks = require("qt-public-hooks");
var _lodash = require("lodash");
var _header = _interopRequireDefault(require("./component/header"));
var _side = _interopRequireDefault(require("./component/side"));
var _access = _interopRequireDefault(require("./component/access"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
// interface MenuConfigItemTypes {
// hideNav?: boolean;
// hideSelect?: boolean;
// hideSide?: boolean;
// }
var menuData = []; // 所有菜单项的原始信息
var accessUrlMap = {}; // 为了方便找到没个菜单项对应的权限信息，设置了权限对应关系
var AnalyzeFrame = _react["default"].forwardRef(function (props, frameRef) {
var _props$menuConfig2, _props$menuConfig3, _menuConfig$activeNav, _props$appSelectProps, _props$appSelectProps2, _menuConfig$activeNav2, _menuConfig$activeNav3, _menuConfig$activeNav4, _menuConfig$activeNav5;
var _props$menuConfig = props.menuConfig,
menuConfig = _props$menuConfig === void 0 ? {} : _props$menuConfig,
_props$appId = props.appId,
appId = _props$appId === void 0 ? '' : _props$appId,
sideConfig = props.sideConfig,
_props$navConfig = props.navConfig,
navConfig = _props$navConfig === void 0 ? {} : _props$navConfig,
allAccessible = props.allAccessible;
var _menuConfig$hideNav = menuConfig.hideNav,
hideNav = _menuConfig$hideNav === void 0 ? false : _menuConfig$hideNav;
var _navConfig$navActiveP = navConfig.navActivePatten,
navActivePatten = _navConfig$navActiveP === void 0 ? {} : _navConfig$navActiveP;
var _useState = (0, _react.useState)([]),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
navOptions = _useState2[0],
setNavOptions = _useState2[1]; // 顶部导航列表
var _useState3 = (0, _react.useState)(''),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
activeNav = _useState4[0],
setActiveNav = _useState4[1]; // 顶部高亮导航
var _useState5 = (0, _react.useState)([]),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
sideOptions = _useState6[0],
setSideOptions = _useState6[1]; // 左侧导航列表
var _useState7 = (0, _react.useState)({}),
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
matchAccess = _useState8[0],
setMatchAccess = _useState8[1]; // 匹配上菜单项的权限信息
var _useState9 = (0, _react.useState)((_props$menuConfig2 = props.menuConfig) === null || _props$menuConfig2 === void 0 ? void 0 : _props$menuConfig2.hideSide),
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
_useState10$ = _useState10[0],
hideSide = _useState10$ === void 0 ? false : _useState10$,
setSideStatus = _useState10[1];
var _useState11 = (0, _react.useState)((_props$menuConfig3 = props.menuConfig) === null || _props$menuConfig3 === void 0 ? void 0 : _props$menuConfig3.hideSelect),
_useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
_useState12$ = _useState12[0],
hideSelect = _useState12$ === void 0 ? false : _useState12$,
setSelectStatus = _useState12[1];
var _useState13 = (0, _react.useState)(false),
_useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
noLeft = _useState14[0],
setNoLeft = _useState14[1];
var _useState15 = (0, _react.useState)(true),
_useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
isFetching = _useState16[0],
setFetching = _useState16[1];
var history = (0, _reactRouterDom.useHistory)();
/**
* 找到高亮顶导对应的左侧导航列表
* @param {string} chooseNav 高亮的顶导
* @param {boolean} needReplace 在点击顶部导航的是否需要跳转到到第一个有权限的菜单项
* @return {[MenuItemTypes]}
*/
var getSideOptions = function getSideOptions(chooseNav) {
var _sideList$0$children;
var sideList = menuData.filter(function (item) {
return item.name === chooseNav;
});
if (sideList.length && (_sideList$0$children = sideList[0].children) !== null && _sideList$0$children !== void 0 && _sideList$0$children.length) {
setSideOptions(sideList[0].children);
} else {
setSideOptions([]);
}
return sideList;
};
// 格式化menu，并且每个顶导下补充首次展示的url信息
var formatMenu = function formatMenu() {
var isMathed = false;
var matchNavPatten = false;
var deepFormat = function deepFormat(options, nav) {
options.forEach(function (option) {
var _option$url;
option.title = option.name;
option.link = ((_option$url = option.url) === null || _option$url === void 0 ? void 0 : _option$url.replace('${appId}', appId)) || '';
option.disabled = !option.available;
if (option.children) {
deepFormat(option.children, nav);
} else {
option.children = [];
accessUrlMap[option.link] = option; // accessUrlMap 记录下每个url对应的权限项
if ((location.pathname.indexOf(option.link) === 0 || option.pattern && location.pathname.match(option.pattern)) && !isMathed) {
setMatchAccess(option);
isMathed = true;
}
// 找到第一个有权限项的菜单项，若都没有权限，显示第一个菜单
if (!nav.activeMenu) {
nav.activeMenu = option;
} else if (!nav.activeMenu.accessible && option.accessible) {
nav.activeMenu = option;
}
}
});
};
menuData.forEach(function (nav) {
var _navActivePatten$nav$, _navActivePatten$nav$2, _nav$children;
var realUrl = nav.url.replace('${appId}', appId);
var pattern = navActivePatten[nav.name];
nav.title = nav.name;
nav.link = realUrl;
nav.pattern = nav.pattern || pattern;
if ((_navActivePatten$nav$ = navActivePatten[nav.name]) !== null && _navActivePatten$nav$ !== void 0 && (_navActivePatten$nav$2 = _navActivePatten$nav$.test) !== null && _navActivePatten$nav$2 !== void 0 && _navActivePatten$nav$2.call(_navActivePatten$nav$, location.pathname)) {
matchNavPatten = true;
}
((_nav$children = nav.children) === null || _nav$children === void 0 ? void 0 : _nav$children.length) && deepFormat(nav.children, nav);
});
if (!isMathed && !matchNavPatten && location.pathname.match(/^\/platform\/.{14, 24}\//)) {
setMatchAccess({
noAccess: true
});
}
return isMathed;
};
var updateMenuList = function updateMenuList() {
var _sideList$, _sideList$$activeMenu;
var hasMathedMenu = formatMenu();
var sideList = [];
var navList = menuData.reduce(function (nv, item) {
var _pattern$test;
var link = item.link,
title = item.title,
pattern = item.pattern,
isNew = item.isNew;
var isMatch = pattern ? (_pattern$test = pattern.test) === null || _pattern$test === void 0 ? void 0 : _pattern$test.call(pattern, location.pathname) : (0, _reactRouterDom.matchPath)(location.pathname, {
path: link
});
if (isMatch) {
// setActiveNav(item.name);
onNavChange(item.name);
sideList = getSideOptions(item.name);
}
nv.push({
isNew: isNew,
title: title,
link: link,
pattern: pattern
});
return nv;
}, []);
navList = (navConfig === null || navConfig === void 0 ? void 0 : navConfig.getRenderNavOption) && navConfig.getRenderNavOption(navList) || navList;
setNavOptions(navList);
var _ref = props.checkJumpFirst && props.checkJumpFirst(sideOptions, hasMathedMenu) || {},
_ref$needReplace = _ref.needReplace,
needReplace = _ref$needReplace === void 0 ? false : _ref$needReplace,
_ref$replaceUrl = _ref.replaceUrl,
replaceUrl = _ref$replaceUrl === void 0 ? (_sideList$ = sideList[0]) === null || _sideList$ === void 0 ? void 0 : (_sideList$$activeMenu = _sideList$.activeMenu) === null || _sideList$$activeMenu === void 0 ? void 0 : _sideList$$activeMenu.link : _ref$replaceUrl;
needReplace && replaceUrl && history.replace(replaceUrl);
};
// app发生变化时，重新获取菜单信息，设置顶导和侧导
var fetchMenuList = /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
var res;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
setFetching(true);
_context.next = 3;
return props.fetchMenuList();
case 3:
res = _context.sent;
menuData = (0, _lodash.cloneDeep)(res.data);
accessUrlMap = {};
setFetching(false);
updateMenuList();
case 8:
case "end":
return _context.stop();
}
}, _callee);
}));
return function fetchMenuList() {
return _ref2.apply(this, arguments);
};
}();
(0, _react.useImperativeHandle)(frameRef, function () {
return {
forceUpdate: fetchMenuList
};
});
// 首次进入的时候，找到所有导航中第一个有权限访问的链接
var getFirstActiveUrl = function getFirstActiveUrl(searchMenu) {
if (searchMenu.length) {
var _sideList$2;
var index = (0, _lodash.findIndex)(searchMenu, function (item) {
var _item$activeMenu;
return item === null || item === void 0 ? void 0 : (_item$activeMenu = item.activeMenu) === null || _item$activeMenu === void 0 ? void 0 : _item$activeMenu.accessible;
});
if (index === -1) {
index = 0;
}
setActiveNav(searchMenu[index].name);
var sideList = getSideOptions(searchMenu[index].name);
((_sideList$2 = sideList[0]) === null || _sideList$2 === void 0 ? void 0 : _sideList$2.activeMenu) && history.replace(sideList[0].activeMenu.link);
return searchMenu[index].activeMenu.link;
}
};
// appId 发生变化：选中应用发生变化
var handleAppChange = /*#__PURE__*/function () {
var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
var firstUrl;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return fetchMenuList();
case 2:
// 直接输入 /platform/${appId} 将做跳转
if (appId && location.pathname === "/platform/".concat(appId)) {
firstUrl = getFirstActiveUrl(menuData);
history.replace(firstUrl);
}
case 3:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function handleAppChange() {
return _ref3.apply(this, arguments);
};
}();
(0, _react.useImperativeHandle)(frameRef, function () {
return {
forceUpdate: handleAppChange
};
});
(0, _react.useEffect)(function () {
handleAppChange();
}, [appId]);
(0, _react.useEffect)(function () {
var hideSider = (0, _lodash.get)(menuConfig[activeNav], 'hideSider');
setNoLeft(!(0, _lodash.isUndefined)(hideSider) && hideSider);
}, [activeNav]);
// pathname 变化时，判断权限
(0, _qtPublicHooks.useUpdateEffect)(function () {
Object.keys(accessUrlMap).forEach(function (item) {
if (location.pathname.indexOf(item) === 0) {
setMatchAccess(accessUrlMap[item]);
}
});
}, [location.pathname]);
var onNavChange = function onNavChange(nav) {
var activeNavItem = menuData.find(function (item) {
return item.name === nav;
});
// 需要跳转到第一个有权限的菜单项
var sideList = [];
if (nav) {
var _sideList$3, _sideList$3$activeMen, _props$navConfig2;
sideList = getSideOptions(nav);
var needReplace = activeNavItem && activeNavItem.link === location.pathname;
var replaceUrl = ((_sideList$3 = sideList[0]) === null || _sideList$3 === void 0 ? void 0 : (_sideList$3$activeMen = _sideList$3.activeMenu) === null || _sideList$3$activeMen === void 0 ? void 0 : _sideList$3$activeMen.link) || '';
(replaceUrl === null || replaceUrl === void 0 ? void 0 : replaceUrl.indexOf('//')) === -1 && needReplace && replaceUrl && history.replace(replaceUrl);
((_props$navConfig2 = props.navConfig) === null || _props$navConfig2 === void 0 ? void 0 : _props$navConfig2.onNavChange) && props.navConfig.onNavChange(nav, sideList);
setActiveNav(nav);
}
};
return /*#__PURE__*/_react["default"].createElement(LayoutContext.Provider, {
value: {
menuHook: {
toogleSiderNav: function toogleSiderNav(status) {
setSideStatus(status);
},
toogleSelect: function toogleSelect(status) {
setSelectStatus(status);
},
toogleSider: function toogleSider(status) {
setNoLeft(status);
},
forceUpdate: handleAppChange
}
}
}, /*#__PURE__*/_react["default"].createElement(_Layout["default"], {
className: props.className,
headerProps: props.headerProps,
nav: /*#__PURE__*/_react["default"].createElement("div", {
style: {
display: 'flex',
alignItems: 'center',
height: '100%'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: 0
}
}, !hideSelect && !((_menuConfig$activeNav = menuConfig[activeNav]) !== null && _menuConfig$activeNav !== void 0 && _menuConfig$activeNav.hideSelect) && ((_props$appSelectProps = props.appSelectProps) === null || _props$appSelectProps === void 0 ? void 0 : _props$appSelectProps.type) === 'topSelect' && props.appSelectProps.component), /*#__PURE__*/_react["default"].createElement("div", {
style: {
flex: '1',
marginLeft: ((_props$appSelectProps2 = props.appSelectProps) === null || _props$appSelectProps2 === void 0 ? void 0 : _props$appSelectProps2.type) === 'topSelect' ? '150px' : '0'
}
}, hideNav || (_menuConfig$activeNav2 = menuConfig[activeNav]) !== null && _menuConfig$activeNav2 !== void 0 && _menuConfig$activeNav2.hideNav ? /*#__PURE__*/_react["default"].createElement("div", null) : /*#__PURE__*/_react["default"].createElement(_header["default"], {
options: navOptions,
onChange: onNavChange
})))
}, !noLeft && /*#__PURE__*/_react["default"].createElement(_Layout["default"].Sider, null, props.appSelectProps.type === 'leftSelect' && !hideSelect && !((_menuConfig$activeNav3 = menuConfig[activeNav]) !== null && _menuConfig$activeNav3 !== void 0 && _menuConfig$activeNav3.hideSelect) && props.appSelectProps.component, !hideSide && !((_menuConfig$activeNav4 = menuConfig[activeNav]) !== null && _menuConfig$activeNav4 !== void 0 && _menuConfig$activeNav4.hideSide) && ((_menuConfig$activeNav5 = menuConfig[activeNav]) !== null && _menuConfig$activeNav5 !== void 0 && _menuConfig$activeNav5.sideRender ? menuConfig[activeNav].sideRender(activeNav, sideOptions) : /*#__PURE__*/_react["default"].createElement(_side["default"], {
options: sideOptions,
appId: appId,
activeNav: activeNav,
sideConfig: sideConfig
}))), /*#__PURE__*/_react["default"].createElement(_access["default"], (0, _extends2["default"])({}, matchAccess, {
isFetching: isFetching,
allAccessible: allAccessible
}), props.children)));
});
var LayoutContext = exports.LayoutContext = _react["default"].createContext({
menuHook: {
toogleSiderNav: function toogleSiderNav() {
return null;
},
toogleSelect: function toogleSelect() {
return null;
},
toogleSider: function toogleSider() {
return null;
},
forceUpdate: function forceUpdate() {
return null;
}
}
});
var _default = exports["default"] = AnalyzeFrame;