tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
300 lines (298 loc) • 12.7 kB
JavaScript
"use strict";
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _classnames = _interopRequireDefault(require("classnames"));
var _layout = _interopRequireDefault(require("../layout"));
var _tntdIcon = _interopRequireDefault(require("../tntd-icon"));
var _Header = _interopRequireDefault(require("./Header"));
var _Logo = _interopRequireDefault(require("./Logo"));
var _SideMenu = _interopRequireDefault(require("./SideMenu"));
var _storage = require("./storage");
var _templateObject;
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;
}
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
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(r) {
if (Array.isArray(r)) return r;
}
function _taggedTemplateLiteral(e, t) {
return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
raw: {
value: Object.freeze(t)
}
}));
}
var Content = _layout["default"].Content,
Sider = _layout["default"].Sider;
var TNTLayout = (0, _styledComponents["default"])(_layout["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n .tnt-layout-sider {\n overflow-x: hidden;\n background: #191d29;\n }\n .tnt-layout-menu-collapse {\n position: absolute;\n bottom: 0;\n left: 0;\n line-height: 36px;\n background: #191d29;\n box-shadow: 0 0 6px 0 rgb(0 0 0 / 10%);\n color: #fff;\n width: 100%;\n padding-left: 24px;\n font-size: 14px;\n cursor: pointer;\n }\n &.isInIframe,\n &.isEmptyLayout {\n .tnt-layout-sider {\n display: none;\n }\n }\n &.compatible .tnt-layout-sider {\n background: linear-gradient(#213f83, #0f75d6) !important;\n }\n &.tnt-themeS1 {\n .tnt-layout-sider {\n background: #fff !important;\n overflow-x: unset;\n }\n .tnt-layout-menu-collapse {\n z-index: 3;\n background: #fff;\n color: ", ";\n }\n }\n // \u84DD\u8272\u7CFB\u5217\n &.tnt-themeS3 {\n .tnt-layout-sider {\n background-image: linear-gradient(180deg, #213f83 0%, #0f75d6 100%) !important;\n overflow-x: unset;\n }\n .tnt-layout-menu-collapse {\n background: #207ad4;\n color: #fff;\n }\n }\n & > .ant-layout-content {\n background-color: ", ";\n & > div:nth-child(2) {\n height: calc(100vh - 50px);\n overflow: auto;\n }\n }\n &.large-size > .ant-layout-content {\n & > div:nth-child(2) {\n height: calc(100vh - 60px);\n }\n }\n"])), function (props) {
return props.theme.primaryTextColor;
}, function (props) {
return props.theme.lightBgColor;
});
var _default = exports["default"] = (0, _styledComponents.withTheme)(function (props) {
var type = props.type,
logo = props.logo,
name = props.name,
enName = props.enName,
selectedOrgKey = props.selectedOrgKey,
orgAppShow = props.orgAppShow,
orgList = props.orgList,
orgAppList = props.orgAppList,
onOrgChange = props.onOrgChange,
selectedAppKey = props.selectedAppKey,
appList = props.appList,
selectedMenuKey = props.selectedMenuKey,
_props$menuAlignMode = props.menuAlignMode,
menuAlignMode = _props$menuAlignMode === void 0 ? 'side' : _props$menuAlignMode,
_props$collapseIconPl = props.collapseIconPlacement,
collapseIconPlacement = _props$collapseIconPl === void 0 ? 'right' : _props$collapseIconPl,
_props$menus = props.menus,
menus = _props$menus === void 0 ? [] : _props$menus,
formatMenuPath = props.formatMenuPath,
changeRouter = props.changeRouter,
headerTabs = props.headerTabs,
orgTreeConfig = props.orgTreeConfig,
headerNavs = props.headerNavs,
extraHeaderActions = props.extraHeaderActions,
isInIframe = props.isInIframe,
isEmptyLayout = props.isEmptyLayout,
_props$onLogoClick = props.onLogoClick,
onLogoClick = _props$onLogoClick === void 0 ? function () {
return null;
} : _props$onLogoClick,
onCollapseChange = props.onCollapseChange,
_onThemeChange = props.onThemeChange,
_onLanguageChange = props.onLanguageChange,
onBeforeMenuChange = props.onBeforeMenuChange,
onMenuChange = props.onMenuChange,
onMenuSelect = props.onMenuSelect,
onAppChange = props.onAppChange,
onPersonalSetting = props.onPersonalSetting,
onChangePassword = props.onChangePassword,
onLogout = props.onLogout,
config = props.config,
_props$extendMap = props.extendMap,
extendMap = _props$extendMap === void 0 ? {} : _props$extendMap,
AvatarCustom = props.AvatarCustom;
var _getSideMenuStore = (0, _storage.getSideMenuStore)(),
storeCollapsed = _getSideMenuStore.collapsed,
_getSideMenuStore$ope = _getSideMenuStore.openKeys,
openKeys = _getSideMenuStore$ope === void 0 ? [] : _getSideMenuStore$ope;
var _useState = (0, _react.useState)((0, _isUndefined2["default"])(storeCollapsed) ? props.collapsed : storeCollapsed),
_useState2 = _slicedToArray(_useState, 2),
collapsed = _useState2[0],
setCollapsed = _useState2[1];
var _useState3 = (0, _react.useState)(function () {
openKeys = collapsed ? [] : openKeys;
openKeys = openKeys instanceof Array ? openKeys : [];
return openKeys;
}(openKeys)),
_useState4 = _slicedToArray(_useState3, 2),
openMenuKeys = _useState4[0],
setOpenMenuKeys = _useState4[1];
var _useState5 = (0, _react.useState)(props.userInfo || {}),
_useState6 = _slicedToArray(_useState5, 2),
userInfo = _useState6[0],
setUserInfo = _useState6[1];
var theme = (0, _storage.getThemeStore)() || (extendMap === null || extendMap === void 0 ? void 0 : extendMap.defaultTheme) || userInfo.theme || 'themeS2';
var language = (0, _storage.getLanguageStore)() || userInfo.lang || 'cn';
theme = theme === 'default' ? 'themeS2' : theme;
var collapseChangeHandle = function collapseChangeHandle() {
var _getSideMenuStore2 = (0, _storage.getSideMenuStore)(),
_getSideMenuStore2$be = _getSideMenuStore2.beforeOpenKeys,
beforeOpenKeys = _getSideMenuStore2$be === void 0 ? [] : _getSideMenuStore2$be;
var newCollapsed = !collapsed;
// 菜单收起：记住当前展开子菜单到store，并收起子菜单
if (newCollapsed) {
(0, _storage.setSideMenuStore)({
collapsed: newCollapsed,
beforeOpenKeys: openMenuKeys
});
setOpenMenuKeys([]);
} else {
// 菜单展开：恢复子菜单展开项，并更新到store
(0, _storage.setSideMenuStore)({
collapsed: newCollapsed,
openKeys: beforeOpenKeys
});
setOpenMenuKeys(beforeOpenKeys);
}
setCollapsed(newCollapsed);
onCollapseChange && onCollapseChange(newCollapsed);
};
(0, _react.useEffect)(function () {
setUserInfo(props.userInfo);
}, [props.userInfo]);
return _react["default"].createElement(TNTLayout, {
className: (0, _classnames["default"])("tnt-layout tnt-".concat(theme, " ").concat(props.className || ''), {
'large-size': props.theme.size === 'large',
compatible: props.theme.compatible,
isInIframe: isInIframe,
isEmptyLayout: isEmptyLayout,
noAppList: !appList,
hasHeaderTabs: !!headerTabs,
layoutMenusCollapsed: collapsed,
collapseIconPlacementBottom: collapseIconPlacement === 'bottom'
})
}, _react["default"].createElement(Sider, {
collapsible: true,
breakpoint: "md",
className: "tnt-layout-sider",
collapsed: collapsed,
width: 220,
trigger: null
}, _react["default"].createElement(_Logo["default"], {
language: language,
logo: logo,
name: name,
enName: enName,
collapsed: collapsed,
onClick: onLogoClick
}), _react["default"].createElement(_SideMenu["default"], {
language: language,
selectedKey: selectedMenuKey,
menuAlignMode: menuAlignMode,
menus: menus,
collapsed: collapsed,
openKeys: openMenuKeys,
onOpenChange: function onOpenChange(keys) {
if (!collapsed) {
(0, _storage.setSideMenuStore)({
openKeys: keys,
beforeOpenKeys: keys
});
}
setOpenMenuKeys(keys);
},
formatMenuPath: formatMenuPath,
changeRouter: changeRouter,
onBeforeChange: onBeforeMenuChange,
onChange: onMenuChange,
onSelect: onMenuSelect
}), collapseIconPlacement === 'bottom' && _react["default"].createElement("div", {
className: "tnt-layout-menu-collapse",
onClick: collapseChangeHandle
}, _react["default"].createElement(_tntdIcon["default"], {
type: "menu-".concat(collapsed ? 'unfold' : 'fold')
}))), _react["default"].createElement(Content, null, _react["default"].createElement(_Header["default"], {
type: type,
userInfo: userInfo,
config: config,
collapsed: collapsed,
collapseIconPlacement: collapseIconPlacement,
orgAppShow: orgAppShow,
orgList: orgList,
orgTreeConfig: orgTreeConfig,
orgAppList: orgAppList,
onOrgChange: onOrgChange,
selectedOrgKey: selectedOrgKey,
selectedAppKey: selectedAppKey,
appList: appList,
menus: menus,
headerTabs: headerTabs,
extraActions: extraHeaderActions,
onAppChange: onAppChange,
onCollapseChange: collapseChangeHandle,
AvatarCustom: AvatarCustom,
onThemeChange: function onThemeChange(theme) {
setUserInfo(Object.assign(Object.assign({}, userInfo), {
theme: theme
}));
_onThemeChange && _onThemeChange(theme);
},
onLanguageChange: function onLanguageChange(lang) {
setUserInfo(Object.assign(Object.assign({}, userInfo), {
lang: lang
}));
_onLanguageChange && _onLanguageChange(lang);
},
onPersonalSetting: onPersonalSetting,
onChangePassword: onChangePassword,
onLogout: onLogout
}, headerNavs), props.children));
});