tntd 2.8.0-beta.3 → 3.0.0-beta.1

package/es/tntd-layout/Layout.js

@@ -1,18 +1,15 @@
-import _isUndefined from "lodash/isUndefined";
 import React, { useState, useEffect } from 'react';
 import styled, { withTheme } from 'styled-components';
 import cn from 'classnames';
+import { isUndefined } from 'lodash';
 import Layout from '../layout';
 import Icon from '../tntd-icon';
 import Header from './Header';
 import Logo from './Logo';
 import SideMenu from './SideMenu';
 import { getSideMenuStore, setSideMenuStore, getLanguageStore, getThemeStore } from './storage';
-const {
-  Content,
-  Sider
-} = Layout;
-const TNTLayout = styled(Layout)`
+const { Content, Sider } = Layout;
+const TNTLayout = styled(Layout) `
   position: relative;
   .tnt-layout-sider {
     overflow-x: hidden;
@@ -48,7 +45,7 @@ const TNTLayout = styled(Layout)`
     .tnt-layout-menu-collapse {
       z-index: 3;
       background: #fff;
-      color: ${props => props.theme.primaryTextColor};
+      color: ${(props) => props.theme.primaryTextColor};
     }
   }
   // 蓝色系列
@@ -63,7 +60,7 @@ const TNTLayout = styled(Layout)`
     }
   }
   & > .ant-layout-content {
-    background-color: ${props => props.theme.lightBgColor};
+    background-color: ${(props) => props.theme.lightBgColor};
     & > div:nth-child(2) {
       height: calc(100vh - 50px);
       overflow: auto;
@@ -75,171 +72,76 @@ const TNTLayout = styled(Layout)`
     }
   }
 `;
-export default withTheme(props => {
-  const {
-    type,
-    logo,
-    name,
-    enName,
-    selectedOrgKey,
-    orgAppShow,
-    orgList,
-    orgAppList,
-    onOrgChange,
-    selectedAppKey,
-    appList,
-    selectedMenuKey,
-    menuAlignMode = 'side',
-    collapseIconPlacement = 'right',
-    menus = [],
-    formatMenuPath,
-    changeRouter,
-    headerTabs,
-    orgTreeConfig,
-    headerNavs,
-    extraHeaderActions,
-    isInIframe,
-    isEmptyLayout,
-    onLogoClick = () => null,
-    onCollapseChange,
-    onThemeChange,
-    onLanguageChange,
-    onBeforeMenuChange,
-    onMenuChange,
-    onMenuSelect,
-    onAppChange,
-    onPersonalSetting,
-    onChangePassword,
-    onLogout,
-    config,
-    extendMap = {},
-    AvatarCustom // 右上角用户信息自定义
-  } = props;
-  let {
-    collapsed: storeCollapsed,
-    openKeys = []
-  } = getSideMenuStore();
-  const [collapsed, setCollapsed] = useState(_isUndefined(storeCollapsed) ? props.collapsed : storeCollapsed);
-  const [openMenuKeys, setOpenMenuKeys] = useState((() => {
-    openKeys = collapsed ? [] : openKeys;
-    openKeys = openKeys instanceof Array ? openKeys : [];
-    return openKeys;
-  })(openKeys));
-  const [userInfo, setUserInfo] = useState(props.userInfo || {});
-  let theme = getThemeStore() || (extendMap === null || extendMap === void 0 ? void 0 : extendMap.defaultTheme) || userInfo.theme || 'themeS2';
-  const language = getLanguageStore() || userInfo.lang || 'cn';
-  theme = theme === 'default' ? 'themeS2' : theme;
-  const collapseChangeHandle = () => {
-    const {
-      beforeOpenKeys = []
-    } = getSideMenuStore();
-    const newCollapsed = !collapsed;
-    // 菜单收起：记住当前展开子菜单到store，并收起子菜单
-    if (newCollapsed) {
-      setSideMenuStore({
-        collapsed: newCollapsed,
-        beforeOpenKeys: openMenuKeys
-      });
-      setOpenMenuKeys([]);
-    } else {
-      // 菜单展开：恢复子菜单展开项，并更新到store
-      setSideMenuStore({
-        collapsed: newCollapsed,
-        openKeys: beforeOpenKeys
-      });
-      setOpenMenuKeys(beforeOpenKeys);
-    }
-    setCollapsed(newCollapsed);
-    onCollapseChange && onCollapseChange(newCollapsed);
-  };
-  useEffect(() => {
-    setUserInfo(props.userInfo);
-  }, [props.userInfo]);
-  return React.createElement(TNTLayout, {
-    className: cn(`tnt-layout tnt-${theme} ${props.className || ''}`, {
-      'large-size': props.theme.size === 'large',
-      compatible: props.theme.compatible,
-      isInIframe,
-      isEmptyLayout,
-      noAppList: !appList,
-      hasHeaderTabs: !!headerTabs,
-      layoutMenusCollapsed: collapsed,
-      collapseIconPlacementBottom: collapseIconPlacement === 'bottom'
-    })
-  }, React.createElement(Sider, {
-    collapsible: true,
-    breakpoint: "md",
-    className: "tnt-layout-sider",
-    collapsed: collapsed,
-    width: 220,
-    trigger: null
-  }, React.createElement(Logo, {
-    language: language,
-    logo: logo,
-    name: name,
-    enName: enName,
-    collapsed: collapsed,
-    onClick: onLogoClick
-  }), React.createElement(SideMenu, {
-    language: language,
-    selectedKey: selectedMenuKey,
-    menuAlignMode: menuAlignMode,
-    menus: menus,
-    collapsed: collapsed,
-    openKeys: openMenuKeys,
-    onOpenChange: keys => {
-      if (!collapsed) {
-        setSideMenuStore({
-          openKeys: keys,
-          beforeOpenKeys: keys
-        });
-      }
-      setOpenMenuKeys(keys);
-    },
-    formatMenuPath: formatMenuPath,
-    changeRouter: changeRouter,
-    onBeforeChange: onBeforeMenuChange,
-    onChange: onMenuChange,
-    onSelect: onMenuSelect
-  }), collapseIconPlacement === 'bottom' && React.createElement("div", {
-    className: "tnt-layout-menu-collapse",
-    onClick: collapseChangeHandle
-  }, React.createElement(Icon, {
-    type: `menu-${collapsed ? 'unfold' : 'fold'}`
-  }))), React.createElement(Content, null, React.createElement(Header, {
-    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: theme => {
-      setUserInfo(Object.assign(Object.assign({}, userInfo), {
-        theme
-      }));
-      onThemeChange && onThemeChange(theme);
-    },
-    onLanguageChange: lang => {
-      setUserInfo(Object.assign(Object.assign({}, userInfo), {
-        lang
-      }));
-      onLanguageChange && onLanguageChange(lang);
-    },
-    onPersonalSetting: onPersonalSetting,
-    onChangePassword: onChangePassword,
-    onLogout: onLogout
-  }, headerNavs), props.children));
-});
+export default withTheme((props) => {
+    const { type, logo, name, enName, selectedOrgKey, orgAppShow, orgList, orgAppList, onOrgChange, selectedAppKey, appList, selectedMenuKey, menuAlignMode = 'side', collapseIconPlacement = 'right', menus = [], formatMenuPath, changeRouter, headerTabs, orgTreeConfig, headerNavs, extraHeaderActions, isInIframe, isEmptyLayout, onLogoClick = () => null, onCollapseChange, onThemeChange, onLanguageChange, onBeforeMenuChange, onMenuChange, onMenuSelect, onAppChange, onPersonalSetting, onChangePassword, onLogout, config, extendMap = {}, AvatarCustom, // 右上角用户信息自定义
+     } = props;
+    let { collapsed: storeCollapsed, openKeys = [] } = getSideMenuStore();
+    const [collapsed, setCollapsed] = useState(isUndefined(storeCollapsed) ? props.collapsed : storeCollapsed);
+    const [openMenuKeys, setOpenMenuKeys] = useState((() => {
+        openKeys = collapsed ? [] : openKeys;
+        openKeys = openKeys instanceof Array ? openKeys : [];
+        return openKeys;
+    })(openKeys));
+    const [userInfo, setUserInfo] = useState(props.userInfo || {});
+    let theme = getThemeStore() || (extendMap === null || extendMap === void 0 ? void 0 : extendMap.defaultTheme) || userInfo.theme || 'themeS2';
+    const language = getLanguageStore() || userInfo.lang || 'cn';
+    theme = theme === 'default' ? 'themeS2' : theme;
+    const collapseChangeHandle = () => {
+        const { beforeOpenKeys = [] } = getSideMenuStore();
+        const newCollapsed = !collapsed;
+        // 菜单收起：记住当前展开子菜单到store，并收起子菜单
+        if (newCollapsed) {
+            setSideMenuStore({
+                collapsed: newCollapsed,
+                beforeOpenKeys: openMenuKeys,
+            });
+            setOpenMenuKeys([]);
+        }
+        else {
+            // 菜单展开：恢复子菜单展开项，并更新到store
+            setSideMenuStore({
+                collapsed: newCollapsed,
+                openKeys: beforeOpenKeys,
+            });
+            setOpenMenuKeys(beforeOpenKeys);
+        }
+        setCollapsed(newCollapsed);
+        onCollapseChange && onCollapseChange(newCollapsed);
+    };
+    useEffect(() => {
+        setUserInfo(props.userInfo);
+    }, [props.userInfo]);
+    return (React.createElement(TNTLayout, { className: cn(`tnt-layout tnt-${theme} ${props.className || ''}`, {
+            'large-size': props.theme.size === 'large',
+            compatible: props.theme.compatible,
+            isInIframe,
+            isEmptyLayout,
+            noAppList: !appList,
+            hasHeaderTabs: !!headerTabs,
+            layoutMenusCollapsed: collapsed,
+            collapseIconPlacementBottom: collapseIconPlacement === 'bottom',
+        }) },
+        React.createElement(Sider, { collapsible: true, breakpoint: "md", className: "tnt-layout-sider", collapsed: collapsed, width: 220, trigger: null },
+            React.createElement(Logo, { language: language, logo: logo, name: name, enName: enName, collapsed: collapsed, onClick: onLogoClick }),
+            React.createElement(SideMenu, { language: language, selectedKey: selectedMenuKey, menuAlignMode: menuAlignMode, menus: menus, collapsed: collapsed, openKeys: openMenuKeys, onOpenChange: (keys) => {
+                    if (!collapsed) {
+                        setSideMenuStore({
+                            openKeys: keys,
+                            beforeOpenKeys: keys,
+                        });
+                    }
+                    setOpenMenuKeys(keys);
+                }, formatMenuPath: formatMenuPath, changeRouter: changeRouter, onBeforeChange: onBeforeMenuChange, onChange: onMenuChange, onSelect: onMenuSelect }),
+            collapseIconPlacement === 'bottom' && (React.createElement("div", { className: "tnt-layout-menu-collapse", onClick: collapseChangeHandle },
+                React.createElement(Icon, { type: `menu-${collapsed ? 'unfold' : 'fold'}` })))),
+        React.createElement(Content, null,
+            React.createElement(Header, { 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: (theme) => {
+                    setUserInfo(Object.assign(Object.assign({}, userInfo), { theme }));
+                    onThemeChange && onThemeChange(theme);
+                }, onLanguageChange: (lang) => {
+                    setUserInfo(Object.assign(Object.assign({}, userInfo), { lang }));
+                    onLanguageChange && onLanguageChange(lang);
+                }, onPersonalSetting: onPersonalSetting, onChangePassword: onChangePassword, onLogout: onLogout }, headerNavs),
+            props.children)));
+});
+//# sourceMappingURL=Layout.js.map

package/es/tntd-layout/Logo.js

@@ -5,13 +5,13 @@
 import React from 'react';
 import styled, { withTheme } from 'styled-components';
 import { logoImgMap } from './images';
-const Logo = styled.div`
-  height: ${props => `${props.theme.headerHeight}px`};
-  line-height: ${props => `${props.theme.headerHeight}px`};
+const Logo = styled.div `
+  height: ${(props) => `${props.theme.headerHeight}px`};
+  line-height: ${(props) => `${props.theme.headerHeight}px`};
   padding-left: 15px;
   width: 220px;
   background: #191d29;
-  font-size: ${props => `${props.fontSize}px`};
+  font-size: ${(props) => `${props.fontSize}px`};
   color: rgba(226, 237, 255, 0.9);
   letter-spacing: 0;
   position: relative;
@@ -61,7 +61,7 @@ const Logo = styled.div`
 
   // 蓝色主题
   .tnt-themeS3 & {
-    background: ${props => `${props.theme.blueBgColor} !important`}; //#1D4295 !important;
+    background: ${(props) => `${props.theme.blueBgColor} !important`}; //#1D4295 !important;
     box-shadow: 2px 3px 8px -1px rgba(0, 0, 0, 0.15);
     color: #ffffff;
     &:after {
@@ -83,52 +83,40 @@ const Logo = styled.div`
 `;
 // JS判断字符串长度（英文占1个字符，中文汉字占2个字符）
 const getStrLen = (str = '') => {
-  let len = 0;
-  for (let i = 0; i < str.length; i++) {
-    let c = str.charCodeAt(i);
-    let chartLength = 2;
-    //单字节加1
-    if (c >= 0x0001 && c <= 0x007e || 0xff60 <= c && c <= 0xff9f) {
-      chartLength = 1;
+    let len = 0;
+    for (let i = 0; i < str.length; i++) {
+        let c = str.charCodeAt(i);
+        let chartLength = 2;
+        //单字节加1
+        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
+            chartLength = 1;
+        }
+        len += chartLength;
     }
-    len += chartLength;
-  }
-  return len;
+    return len;
 };
-export default withTheme(props => {
-  var _a;
-  const {
-    logo,
-    name,
-    enName,
-    language,
-    collapsed,
-    theme: {
-      size
-    }
-  } = props;
-  const productNameLen = getStrLen(language === 'cn' ? name : enName);
-  const fontSize = {
-    12: 19,
-    13: 18,
-    14: 17,
-    15: 16,
-    16: 15
-  }[Math.max(12, Math.min(productNameLen, 16))] + (size === 'large' ? 1 : 0);
-  const LogoImg = props => React.createElement("img", Object.assign({
-    onError: e => {
-      e.target.onerror = null;
-      e.target.src = logoImgMap.default;
-    }
-  }, props));
-  return React.createElement(Logo, Object.assign({}, props, {
-    fontSize: fontSize
-  }), typeof logo === 'string' ? React.createElement(LogoImg, {
-    src: logoImgMap[logo] || logoImgMap.default
-  }) : logo && logo.type === 'img' ? React.createElement(LogoImg, Object.assign({}, logo.props, {
-    src: ((_a = logo.props) === null || _a === void 0 ? void 0 : _a.src) || logoImgMap.default
-  })) : logo, collapsed ? '' : {
-    cn: name,
-    en: enName
-  }[language]);
-});
+export default withTheme((props) => {
+    var _a;
+    const { logo, name, enName, language, collapsed, theme: { size }, } = props;
+    const productNameLen = getStrLen(language === 'cn' ? name : enName);
+    const fontSize = {
+        12: 19,
+        13: 18,
+        14: 17,
+        15: 16,
+        16: 15,
+    }[Math.max(12, Math.min(productNameLen, 16))] + (size === 'large' ? 1 : 0);
+    const LogoImg = (props) => (React.createElement("img", Object.assign({ onError: (e) => {
+            e.target.onerror = null;
+            e.target.src = logoImgMap.default;
+        } }, props)));
+    return (React.createElement(Logo, Object.assign({}, props, { fontSize: fontSize }),
+        typeof logo === 'string' ? (React.createElement(LogoImg, { src: logoImgMap[logo] || logoImgMap.default })) : logo && logo.type === 'img' ? (React.createElement(LogoImg, Object.assign({}, logo.props, { src: ((_a = logo.props) === null || _a === void 0 ? void 0 : _a.src) || logoImgMap.default }))) : (logo),
+        collapsed
+            ? ''
+            : {
+                cn: name,
+                en: enName,
+            }[language]));
+});
+//# sourceMappingURL=Logo.js.map