tntd 1.4.17 → 2.0.0-beta-1

package/components/Layout/index.js

@@ -1,113 +0,0 @@
-import { ThemeProvider } from 'styled-components';
-import Layout from './Layout';
-import EnterpriseLayout from './EnterpriseLayout';
-import PaasLayout from './paaslayout';
-import HeaderNavs from './HeaderNavs';
-import HeaderTabs from './HeaderTabs';
-import AuthContext from '../AuthContext';
-import { safeParseJSON, findMenuInfoByPath, getCheckAuth } from '../utils';
-import ActionsContext from './ActionsContext';
-import createActions from './createActions';
-import { getLanguageStore } from './storage';
-
-export const HeaderActionItem = props => (
-    <li {...props}>
-        {props.children}
-    </li>
-);
-
-export * from './HeaderNavs';
-
-
-const TNTLayout = ({ type, config, showMenuInIframe = false, ...props }) => {
-    const headerHeight = props.size === 'large' ? 60 : 50;
-    const theme = {
-        size: props.size,
-        compatible: props.compatible,
-        headerHeight,
-        primaryColor: '#126BFB',
-        secondaryColor: '#005df4',
-        primaryTextColor: '#17233D', // 1
-        secondaryTextColor: 'rgba(23,35,61,.8)', // .8
-        lightIconColor: 'rgba(23,35,61,.7)', // .7
-        headerActionsColor: 'rgba(23,35,61,.6)', // .6
-        borderColor: '#B2BECD',
-        dividerColor: '#E1E6EE',
-        lightBgColor: '#F1F2F5',
-        blueBgColor: '#1D4295' // 默认的蓝色主题
-    };
-    const isInIframe = showMenuInIframe ? false : (self !== top && !window.navigator.userAgent.includes('mo-fang-app'));
-    // 前期拼写错误，导致需要兼容处理
-    const extraHeaderActions = props.extraHeaderActions || props.extralHeaderActions;
-    const extendMap = typeof props.extendMap === 'string' ? safeParseJSON(props.extendMap, {}) : props.extendMap;
-    const { displayType = 'default', menuAlignMode, globalNavigation = false, language = ['cn'], themeSwitch = true } = extendMap || {};
-    const userInfo = props.userInfo || {};
-    const actionsContextValue = createActions({ language: getLanguageStore() || userInfo.lang || 'cn' });
-    const onLanguageChange = language => {
-        actionsContextValue.setLanguage(language);
-        props?.onLanguageChange(language);
-    };
-
-    // layout上的指定的属性优先级会高于extendMap中的属性
-    type = type || displayType;
-    config = Object.assign({
-        language: language?.length > 1,
-        theme: themeSwitch,
-        avatar: true,
-        globalNavigation
-    }, config);
-
-    return (
-        <ThemeProvider theme={theme}>
-            <AuthContext.Provider value={getCheckAuth(props.menus)}>
-                <ActionsContext.Provider value={actionsContextValue}>
-                    {
-                        type === 'paas' &&
-                        <PaasLayout
-                            menuAlignMode={menuAlignMode}
-                            config={config}
-                            {...props}
-                            extraHeaderActions={extraHeaderActions}
-                            isInIframe={isInIframe}
-                            userInfo={userInfo}
-                            onLanguageChange={onLanguageChange}
-                        />
-                    }
-                    {
-                        type === 'enterprise' &&
-                        <EnterpriseLayout
-                            menuAlignMode={menuAlignMode}
-                            config={config}
-                            {...props}
-                            extraHeaderActions={extraHeaderActions}
-                            isInIframe={isInIframe}
-                            userInfo={userInfo}
-                            onLanguageChange={onLanguageChange}
-                        />
-                    }
-                    {
-                        (!type || !['paas', 'enterprise'].includes(type)) &&
-                        <Layout
-                            menuAlignMode={menuAlignMode}
-                            config={config}
-                            {...props}
-                            extraHeaderActions={extraHeaderActions}
-                            isInIframe={isInIframe}
-                            userInfo={userInfo}
-                            onLanguageChange={onLanguageChange}
-                        />
-                    }
-                </ActionsContext.Provider>
-            </AuthContext.Provider>
-        </ThemeProvider>
-    );
-};
-
-TNTLayout.HeaderActionItem = HeaderActionItem;
-TNTLayout.HeaderNavs = HeaderNavs;
-TNTLayout.HeaderTabs = HeaderTabs;
-TNTLayout.AuthContext = AuthContext;
-
-TNTLayout.findMenuInfoByPath = findMenuInfoByPath;
-
-export default TNTLayout;

package/components/Layout/paaslayout/CompactSideMenu.js

@@ -1,207 +0,0 @@
-import { useState, useEffect, Component } from 'react';
-import styled from 'styled-components';
-import cn from 'classnames';
-import { isNewTabMenu, openInNewTab } from '../../utils';
-import Iconfont from '../Iconfont';
-
-const SideMenu = styled.ul`
-    background: #fff;
-    list-style: none;
-    margin: 0;
-    padding: 30px 0 20px;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    .isInIframe & {
-        display: none;
-    }
-    
-    & > li {
-        position: relative;
-        cursor: pointer;
-        line-height: 38px;
-        font-size: 14px;
-        color: #17233D;
-        letter-spacing: 0;
-
-        &.group-menu-item {
-            & > span {
-                opacity: 0.4;
-            }
-        }
-
-        &.active {
-            &:before {
-                position: absolute;
-                content: "";
-                left: 0;
-                top: 0;
-                width: 3px;
-                height: 100%;
-                background: #126bfb;
-            }
-
-            span {
-                background: rgba(18,107,251,0.10);
-                color: #126bfb;
-                opacity: 1;
-            }
-        }
-
-        & > span {
-            display: inline-block;
-            width: 100%;
-            color: #17233D;
-            padding-left: 20px;
-
-            &:hover {
-                color: #323232;
-                background: #f5f5f5;
-            }
-
-            & > .tnt-icon {
-                margin-right: 7px;
-            }
-        }
-    }
-`;
-
-const SubMenu = styled.ul`
-    background: #fff;
-    list-style: none;
-    font-size: 14px;
-    color: #17233D;
-    margin: 10px 0 0;
-    padding: 0;
-    li {
-        position: relative;
-        line-height: 38px;
-        cursor: pointer;
-        padding-left: 20px;
-        & > a {
-            color: #17233D;
-            & > span {
-                padding-left: 10px;
-            }
-        }
-        &.active {
-            background: #EAEDF8;
-            &:before {
-                position: absolute;
-                left: 0;
-                top: 0;
-                content: '';
-                width: 4px;
-                height: 100%;
-                background-color: #4C79FF;
-            }
-        }
-    }
-`;
-
-export default props => {
-    const { language, menus = [], formatMenuPath, selectedKey, onBeforeChange, onChange, onSelect } = props;
-    const [activeMenu, setActiveMenu] = useState(selectedKey);
-    const defaultBeforeChange = ({ data }) => !isNewTabMenu(data);
-    const defaultSelect = ({ data }) => {
-        const { path } = data || {};
-        const formatPath = formatMenuPath || (path => path);
-
-        if (isNewTabMenu(data)) {
-            openInNewTab(formatPath(data?.path, data));
-            return;
-        }
-
-        const routerPrefix = window.location.pathname.match(/(^\/[^\/]+)/i)?.[1];
-
-        if (window.location.pathname.startsWith(routerPrefix)) {
-            const forwardPath = formatPath(path, data);
-            changeRouter ? changeRouter(forwardPath, data) : window.history.pushState(data, data?.name, forwardPath);
-        } else {
-            window.location.href = formatPath(path, data);
-        }
-    };
-    const selectMenu = (param = {}) => {
-        const finalBeforeChange = onBeforeChange || defaultBeforeChange;
-        const finalSelect = onSelect || defaultSelect;
-
-        if (param.key !== activeMenu) {
-            if (finalBeforeChange(param, activeMenu)) {
-                setActiveMenu(param.key);
-                onChange && onChange(param);
-            }
-        }
-
-        finalSelect(param);
-    };
-
-    const MenuItem = ({ item }) => {
-        const { code, groupName, enName, children = [] } = item;
-        const SubMenuItem = ({ menu }) => {
-            const { code, menuName, enName, icon } = menu;
-
-            return (
-                <li
-                    key={code}
-                    onClick={evt => selectMenu({ key: code, data: menu, domEvent: evt })}
-                    className={cn({ active: code === activeMenu })}
-                >
-                    <span>
-                        {
-                            typeof (icon || '') === 'string' ? (
-                                <Iconfont type={icon} />
-                            ) : icon
-                        }
-                        {
-                            {
-                                cn: menuName,
-                                en: enName
-                            }[language]
-                        }
-                    </span>
-                </li>
-            );
-        };
-
-        if (groupName && children.length) {
-            return (
-                <li key={code} className="group-menu-item">
-                    <span>
-                        {
-                            icon instanceof Component ? icon : (
-                                <Iconfont type={icon} />
-                            )
-                        }
-                        {
-                            {
-                                cn: groupName,
-                                en: enName
-                            }[language]
-                        }
-                    </span>
-                    <SubMenu>
-                        {
-                            children.map(subItem => <SubMenuItem menu={subItem} key={subItem?.code} />)
-                        }
-                    </SubMenu>
-                </li>
-            );
-        }
-
-        return <SubMenuItem menu={item} />;
-    };
-
-    useEffect(() => {
-        setActiveMenu(selectedKey);
-    }, [selectedKey]);
-
-    return (
-        <SideMenu className="tnt-compact-sidemenu">
-            {
-                menus.map(menu => (
-                    <MenuItem item={menu} key={menu.code} />
-                ))
-            }
-        </SideMenu>
-    );
-};

package/components/Layout/paaslayout/Header.js

@@ -1,85 +0,0 @@
-/**
- * @file Layout header
- * @author zhangyou
- */
-import { useRef } from 'react';
-import styled from 'styled-components';
-import Actions from '../HeaderActions';
-import AppList from '../AppList';
-import Logo from './Logo';
-
-const Header = styled.div`
-    position: sticky;
-    top: 0;
-    height: ${props => `${props.theme.headerHeight}px`};
-    display: flex;
-    color: #fff;
-    background: #fff;
-    z-index: 201;
-    .isInIframe.noAppList &,
-    .isEmptyLayout & {
-        display: none;
-    }
-    .tnt-themeS1 & {
-        background: #323b4a;
-    }
-    padding-right: 20px;
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.1);
-    transition: box-shadow .2s cubic-bezier(.4,0,.2,1), -webkit-box-shadow .2s cubic-bezier(.4,0,.2,1);
-
-    .paas-header-actions {
-        li {
-            .tnt-themeS1 & {
-                color: rgba(255,255,255,.85);
-            }
-        }
-    }
-`;
-
-const Content = styled.div`
-    flex: 1;
-    .isInIframe & {
-        display: none;
-    }
-`;
-
-export default props => {
-    const { logo, name, enName, language, selectedAppKey, appList, onLogoClick, onAppChange, extraActions } = props;
-    const config = {
-        application: true,
-        ...props.config
-    };
-    const headerRef = useRef();
-
-    return (
-        <Header ref={headerRef}>
-            <Logo
-                language={language}
-                logo={logo}
-                name={name}
-                enName={enName}
-                onClick={onLogoClick}
-            />
-            {
-                appList && (
-                    <AppList
-                        items={appList}
-                        selectedKey={selectedAppKey}
-                        onChange={onAppChange}
-                    />
-                )
-            }
-            <Content>
-                {props.children}
-            </Content>
-            <Actions
-                {...props}
-                config={config}
-                headerRef={headerRef}
-                className="paas-header-actions"
-            >
-                {extraActions}
-            </Actions>
-        </Header>
-    );
-};

package/components/Layout/paaslayout/Logo.js

@@ -1,27 +0,0 @@
-/**
- * @file Logo
- * @author zhangyou
- */
-import styled from 'styled-components';
-import Logo from '../Logo';
-
-const LogoWrapper = styled(Logo)`
-    color: #17233d !important;
-    letter-spacing: 0;
-    background: #fff !important;
-    box-shadow: none !important;
-    .isInIframe & {
-        display: none;
-    }
-
-    &:after {
-        display: none;
-    }
-
-    .tnt-themeS1 & {
-        color: rgba(255,255,255,.85) !important;
-        background: #323b4a !important;
-    }
-`;
-
-export default props => <LogoWrapper {...props} />;

package/components/Layout/paaslayout/SideMenu.js

@@ -1,172 +0,0 @@
-import { useState, useEffect, Component } from 'react';
-import styled from 'styled-components';
-import cn from 'classnames';
-import Iconfont from '../Iconfont';
-
-const SideMenu = styled.ul`
-    background: #fff;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    .isInIframe & {
-        display: none;
-    }
-    
-    & > li {
-        font-size: 14px;
-        letter-spacing: 0;
-        margin-top: 20px;
-        &:first-child {
-            margin-top: 30px;
-        }
-        & > span {
-            line-height: 38px;
-            opacity: 0.4;
-            display: inline-block;
-            width: calc(100% - 20px);
-            color: #17233D;
-            border-bottom: 1px solid #B2BECD;
-            margin-left: 20px;
-        }
-    }
-`;
-
-const SubMenu = styled.ul`
-    background: #fff;
-    list-style: none;
-    font-size: 14px;
-    color: #17233D;
-    margin: 10px 0 0;
-    padding: 0;
-    li {
-        position: relative;
-        line-height: 38px;
-        cursor: pointer;
-        padding-left: 20px;
-        & > a {
-            color: #17233D;
-            & > span {
-                padding-left: 10px;
-            }
-        }
-        &.active {
-            background: #EAEDF8;
-            &:before {
-                position: absolute;
-                left: 0;
-                top: 0;
-                content: '';
-                width: 4px;
-                height: 100%;
-                background-color: #4C79FF;
-            }
-        }
-    }
-`;
-
-export default props => {
-    const { language, menus = [], formatMenuPath, changeRouter, selectedKey, onBeforeChange, onChange, onSelect } = props;
-    const [activeMenu, setActiveMenu] = useState(selectedKey);
-    const defaultBeforeChange = ({ data }) => !isNewTabMenu(data);
-    const defaultSelect = ({ data }) => {
-        const { path } = data || {};
-        const formatPath = formatMenuPath || (path => path);
-
-        if (isNewTabMenu(data)) {
-            openInNewTab(formatPath(data?.path, data));
-            return;
-        }
-
-        const routerPrefix = window.location.pathname.match(/(^\/[^\/]+)/i)?.[1];
-
-        if (window.location.pathname.startsWith(routerPrefix)) {
-            const forwardPath = formatPath(path, data);
-            changeRouter ? changeRouter(forwardPath, data) : window.history.pushState(data, data?.name, forwardPath);
-        } else {
-            window.location.href = formatPath(path, data);
-        }
-    };
-    const selectMenu = (param = {}) => {
-        const finalBeforeChange = onBeforeChange || defaultBeforeChange;
-        const finalSelect = onSelect || defaultSelect;
-
-        if (param.key !== activeMenu) {
-            if (finalBeforeChange(param, activeMenu)) {
-                setActiveMenu(param.key);
-                onChange && onChange(param);
-            }
-        }
-
-        finalSelect(param);
-    };
-
-    const MenuItem = ({ item }) => {
-        const { code, groupName, enName, children = [] } = item;
-        const SubMenuItem = ({ menu }) => {
-            const { code, menuName, enName, icon, path } = menu;
-
-            return (
-                <li
-                    key={code}
-                    onClick={evt => selectMenu({ key: code, data: menu, domEvent: evt })}
-                    className={cn({ active: code === activeMenu })}
-                >
-                    <a href={path} onClick={evt => evt.preventDefault()}>
-                        {
-                            icon instanceof Component ? icon : (
-                                <Iconfont type={icon} />
-                            )
-                        }
-                        <span>
-                            {
-                                {
-                                    cn: menuName,
-                                    en: enName
-                                }[language]
-                            }
-                        </span>
-                    </a>
-                </li>
-            );
-        };
-
-        if (groupName && children.length) {
-            return (
-                <li key={code}>
-                    <span>
-                        {
-                            {
-                                cn: groupName,
-                                en: enName
-                            }[language]
-                        }
-                    </span>
-                    <SubMenu>
-                        {
-                            children.map(subItem => <SubMenuItem menu={subItem} key={subItem?.code} />)
-                        }
-                    </SubMenu>
-                </li>
-            );
-        }
-
-        return <SubMenuItem menu={item} />;
-    };
-
-    useEffect(() => {
-        setActiveMenu(selectedKey);
-    }, [selectedKey]);
-
-    return (
-        <SideMenu>
-            {
-                menus.map(menu => (
-                    <MenuItem item={menu} key={menu.code} />
-                ))
-            }
-        </SideMenu>
-    );
-};