tntd 1.4.17 → 2.0.0-beta-1

package/components/Layout/GlobalNavigation/NavigationPopup.js

@@ -1,348 +0,0 @@
-import { useState, useEffect } from 'react';
-import cn from 'classnames';
-import styled from 'styled-components';
-import { debounce } from 'lodash';
-import { traverseTree, hasLevel3 } from '../../utils';
-import Icon from '../Iconfont';
-import { getText } from '../../locale';
-
-const SearchArea = styled.div`
-    position: relative;
-    font-size: 14px;
-    margin-bottom: 20px;
-    color: ${props => props.theme.secondaryTextColor};
-    &.active {
-        color: ${props => props.theme.primaryColor};
-        input {
-            border-color: ${props => props.theme.primaryColor};
-        }
-    }
-    .tnt-icon {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        line-height: 1em;
-        &[type="close"] {
-            right: 0;
-            top: 0;
-            font-size: 18px;
-            cursor: pointer;
-        }
-    }
-    input {
-        border-width: 0 0 1px;
-        border-style: solid;
-        border-color: ${props => props.theme.borderColor};
-        width: 100%;
-        padding: 4px 20px;
-        line-height: 20px;
-        background-color: transparent;
-        outline: none;
-    }
-`;
-
-const ApplicationTabs = styled.ul`
-    border: 1px solid ${props => props.theme.borderColor};
-    color: ${props => props.theme.primaryTextColor};
-    line-height: 32px;
-    margin: 0 0 16px;
-    padding: 0;
-    display: inline-block;
-
-    & > li {
-        padding: 0 20px;
-        display: inline-block;
-        cursor: pointer;
-        &:not(:last-child) {
-            border-right: 1px solid ${props => props.theme.borderColor};
-        }
-        &.active {
-            background-color: ${props => props.theme.primaryColor};
-            color: #fff;
-        }
-    }
-`;
-
-const GroupMenus = styled.div`
-    height: ${props => props.isLevel3 ? 'calc(100% - 80px)' : 'calc(100% - 50px)'};
-    overflow: auto;
-    & > div {
-        width: 200px;
-        margin-right: 10px;
-        display: inline-block;
-        vertical-align: top;
-    }
-`;
-
-const GroupMenuItem = styled.div`
-    margin-bottom: 20px;
-    & > h5 {
-        line-height: 20px;
-        margin: 0;
-        margin-bottom: 6px;
-    }
-`;
-
-const MenuList = styled.ul`
-    list-style: none;
-    padding: 0;
-    margin: 0;
-`;
-
-const MenuItem = styled.li`
-    display: block;
-    line-height: 30px;
-    font-size: 12px;
-    cursor: pointer;
-    a {
-        color: ${props => props.theme.secondaryTextColor};
-        &:hover {
-            color: ${props => props.theme.secondaryColor} !important;
-        }
-    }
-    &.active a {
-        color: ${props => props.theme.primaryColor};
-    }
-`;
-
-const ListBox = styled.ul`
-    background: #fff;
-    max-height: 320px;
-    overflow-y: auto;
-    margin: 0;
-    padding: 6px 0;
-    list-style: none;
-    font-size: 13px;
-    position: absolute;
-    top: 29px;
-    width: 100%;
-    box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
-    li {
-        cursor: pointer;
-        line-height: 32px;
-        padding: 0 10px;
-        color: ${props => props.theme.primaryTextColor};
-        &:hover {
-            color: ${props => props.theme.secondaryColor};
-            background-color: ${props => props.theme.lightBgColor};
-        }
-    }
-`;
-
-const SearchList = ({ items, onSelectMenu, theme }) => (
-    <ListBox theme={theme}>
-        {
-            items?.map(item => (
-                <li onClick={() => onSelectMenu(item)}>
-                    {item?.menuName}
-                </li>
-            ))
-        }
-    </ListBox>
-);
-
-export default ({ theme, menus = [], close, actions, popupRef, containerRef }) => {
-    const [active, setActive] = useState(false);
-    const [searchValue, setSearchValue] = useState();
-    const language = actions?.getLanguage();
-    const isLevel3 = hasLevel3(menus);
-    const [activeTopMenu, setActiveTopMenu] = useState(isLevel3 ? menus?.[0] : null);
-    const selectedMenuKey = actions.getSelectedMenuKey();
-    const calcGroupMenus = menus => {
-        menus = menus?.reduce((acc, cur) => {
-            // 分组
-            if (cur?.children?.length) {
-                acc.push(cur);
-            } else {
-                const defaultGroup = acc.find(({ isDefaultGroup }) => isDefaultGroup);
-                if (!defaultGroup) {
-                    acc.unshift({
-                        isDefaultGroup: true,
-                        children: [cur]
-                    });
-                } else {
-                    defaultGroup.children.push(cur);
-                }
-            }
-            return acc;
-        }, []);
-
-        return menus?.reduce((acc, cur) => {
-            const column = Math.max(1, ~~((containerRef.current.clientWidth - 32) / 210));
-
-            if (!acc.length) {
-                acc.push([cur]);
-            } else {
-                const calcGroupHeight = group => 46 + (group?.children?.length || 0) * 30;
-                const calcColumnHeight = columnGroups => columnGroups?.reduce((acc, cur) => {
-                    acc += calcGroupHeight(cur);
-                    return acc;
-                }, 0);
-                const currentColumnHeight = calcColumnHeight(acc[acc.length - 1]);
-                const nextGroupHeight = calcGroupHeight(cur);
-                const findMinHeightGroup = groups => {
-                    let minHeight = Infinity;
-                    let index = 0;
-
-                    for (let i = 0; i < groups.length; i++) {
-                        const height = calcColumnHeight(groups[i]);
-                        if (height < minHeight) {
-                            index = i;
-                            minHeight = height;
-                        }
-                    }
-
-                    return groups[index];
-                };
-
-                if (acc.length >= column) {
-                    const minHeightGroup = findMinHeightGroup(acc);
-                    minHeightGroup?.push(cur);
-                } else {
-                    if (currentColumnHeight + nextGroupHeight > 440) {
-                        acc.push([cur]);
-                    } else {
-                        acc[acc?.length - 1]?.push(cur);
-                    }
-                }
-            }
-
-            return acc;
-        }, []);
-    };
-    const groupMenus = calcGroupMenus(activeTopMenu?.children || menus);
-    const [searchedMenus, setSearchedMenus] = useState([]);
-
-    const onMenuClick = menu => {
-        actions.emit('menuSelect', { key: menu.code, data: menu });
-        setSearchValue('');
-        setSearchedMenus([]);
-        close();
-    };
-    const debounceSearch = debounce(evt => {
-        const value = evt.target.value?.trim();
-        const matchedMenus = [];
-
-        if (value) {
-            traverseTree(menus, node => {
-                if (node.path && node?.menuName?.includes(value)) {
-                    matchedMenus.push(node);
-                }
-            });
-        }
-
-        setSearchedMenus(matchedMenus);
-    }, 100);
-
-    const onSearchChange = evt => {
-        evt.persist();
-        setSearchValue(evt.target.value);
-        debounceSearch(evt);
-    };
-
-    const onSelectAppTab = menu => {
-        setActiveTopMenu(menu);
-    };
-
-    useEffect(() => {
-        const clickOutside = evt => {
-            const { clientX, clientY, pageX, pageY } = evt;
-            const isOutside = (evt, popup) => {
-                if (popup?.contains) {
-                    return !popup?.contains(evt.target);
-                }
-
-                let { x, y, height, width } = popup.getBoundingClientRect();
-                console.log('clickOutside...', [x, y], [clientX, clientY], [pageX, pageY]);
-                x += window.scrollX;
-                y += window.scrollY;
-
-                return pageX < x || pageX > x + width || pageY < y || pageY > y + height;
-            };
-
-            if (isOutside(evt, popupRef.current)) {
-                setSearchValue('');
-                setSearchedMenus([]);
-                close();
-            }
-        };
-
-        document.addEventListener('click', clickOutside);
-        return () => document.removeEventListener('click', clickOutside);
-    }, []);
-
-    return (
-        <>
-            <SearchArea theme={theme} className={cn({ active })}>
-                <Icon type="search" />
-                <input
-                    placeholder={actions?.getText('menuSearch')}
-                    value={searchValue}
-                    onChange={onSearchChange}
-                    onFocus={() => setActive(true)}
-                    onBlur={() => setActive(false)}
-                />
-                <Icon type="close" onClick={close} />
-                {
-                    searchedMenus?.length > 0 && (
-                        <SearchList
-                            items={searchedMenus}
-                            theme={theme}
-                            onSelectMenu={onMenuClick}
-                        />
-                    )
-                }
-            </SearchArea>
-            {
-                isLevel3 && (
-                    <ApplicationTabs theme={theme}>
-                        {
-                            menus?.map(menu => (
-                                <li
-                                    className={cn({ active: menu.code === activeTopMenu?.code })}
-                                    onClick={() => onSelectAppTab(menu)}
-                                >
-                                    {menu?.[language === 'cn' ? 'groupName' : 'enName']}
-                                </li>
-                            ))
-                        }
-                    </ApplicationTabs>
-                )
-            }
-            <GroupMenus theme={theme} isLevel3={isLevel3}>
-                {
-                    groupMenus?.map(groups => (
-                        <div>
-                            {
-                                groups?.map(group => (
-                                    <GroupMenuItem theme={theme}>
-                                        <h5>{group?.[language === 'cn' ? 'groupName' : 'enName']}</h5>
-                                        <MenuList>
-                                            {
-                                                (group.children || []).map(menu => (
-                                                    <MenuItem
-                                                        key={menu.code}
-                                                        className={cn({ active: selectedMenuKey === menu.code })}
-                                                        theme={theme}
-                                                        onClick={() => onMenuClick(menu)}
-                                                    >
-                                                        <a
-                                                            href={menu.path}
-                                                            onClick={evt => evt.preventDefault()}
-                                                        >
-                                                            {menu?.[language === 'cn' ? 'menuName' : 'enName']}
-                                                        </a>
-                                                    </MenuItem>
-                                                ))
-                                            }
-                                        </MenuList>
-                                    </GroupMenuItem>
-                                ))
-                            }
-                        </div>
-                    ))
-                }
-            </GroupMenus>
-        </>
-    );
-};

package/components/Layout/GlobalNavigation/index.js

@@ -1,117 +0,0 @@
-import { useState, useEffect, useRef, useContext } from 'react';
-import ReactDOM from 'react-dom';
-import cn from 'classnames';
-import styled, { createGlobalStyle, withTheme } from 'styled-components';
-import { uniq } from 'lodash';
-import ActionsContext from '../ActionsContext';
-import { hasLevel3 } from '../../utils';
-import Icon from '../Iconfont';
-import NavigationPopup from './NavigationPopup';
-
-const Navigation = styled.li`
-    &.active {
-        color: ${({ theme }) => theme.primaryColor} !important;
-    }
-    font-size: ${({ theme: { size } }) => size === 'large' ? '14px' : '12px'};
-    .tnt-icon {
-        font-size: ${({ theme: { size } }) => size === 'large' ? '22px' : '18px'};
-        margin-right: 4px;
-    }
-    span {
-        position: relative;
-        font-size: ${({ theme: { size } }) => size === 'large' ? '14px' : '12px'};
-        top: ${({ theme: { size } }) => size === 'large' ? '-3px' : '-2px'};
-        font-family: auto;
-        .tnt-themeS1 & {
-            /* color: rgba(255,255,255,.85); */
-        }
-    }
-    .isInIframe & {
-        display: none;
-    }
-`;
-
-const createPopupContainer = () => {
-    const div = document.createElement('div');
-
-    div.setAttribute('class', 'tnt-navigation-popup');
-
-    return div;
-};
-
-const GlobalStyle = createGlobalStyle`
-    .tnt-navigation-popup {
-        position: absolute;
-        left: 0;
-        top: ${props => props.theme.size === 'large' ? '60px' : '50px'};
-        width: 100%;
-        height: ${props => props.hasLevel3 ? '560px' : '530px'};
-        background: #FFF;
-        box-shadow: 0 10px 10px -8px rgba(0,0,0,.1) inset,
-                    0 10px 10px -8px rgba(0,0,0,.1);
-        transition: all .15s ease-in-out;
-        overflow: hidden;
-        padding: 20px 16px;
-        box-sizing: border-box;
-        &.hide {
-            height: 0;
-            padding: 0;
-        }
-    }
-`;
-
-export default withTheme(
-    props => {
-        const actions = useContext(ActionsContext);
-        const { getText } = actions;
-        const { headerRef, menus } = props;
-        const [visible, setVisible] = useState(false);
-        const popupRef = useRef();
-
-        useEffect(() => {
-            popupRef.current = createPopupContainer();
-            headerRef?.current?.appendChild(popupRef.current);
-
-            return () => {
-                headerRef?.current?.removeChild(popupRef.current);
-            };
-        }, []);
-
-        useEffect(() => {
-            const classNames = popupRef.current.getAttribute('class').split(' ');
-
-            if (visible) {
-                ReactDOM.render(
-                    <NavigationPopup
-                        actions={actions}
-                        theme={props.theme}
-                        menus={menus}
-                        containerRef={headerRef}
-                        popupRef={popupRef}
-                        close={() => setVisible(false)}
-                    />,
-                    popupRef.current
-                );
-                popupRef.current.setAttribute('class', classNames.filter(item => item !== 'hide').join(' '));
-            } else {
-                popupRef.current.setAttribute('class', uniq([...classNames, 'hide']).join(' '));
-            }
-        }, [visible]);
-
-        return (
-            <Navigation
-                onClick={evt => {
-                    evt.stopPropagation();
-                    evt.nativeEvent?.stopImmediatePropagation();
-                    evt.nativeEvent?.stopPropagation();
-                    setVisible(!visible);
-                }}
-                className={cn({ active: visible })}
-            >
-                <Icon type="unordered-list" />
-                <span>{getText('globalNavigation')}</span>
-                <GlobalStyle hasLevel3={hasLevel3(menus)} />
-            </Navigation>
-        );
-    }
-);

package/components/Layout/Header.js

@@ -1,165 +0,0 @@
-/**
- * @file Layout header
- * @author zhangyou
- */
-import { useRef } from 'react';
-import styled, { withTheme } from 'styled-components';
-import Icon from '../Icon';
-import Actions from './HeaderActions';
-import AppList from './AppList';
-import OrgAppList from './OrgAppList';
-
-const Header = styled.div`
-    position: relative;
-    z-index: 201;
-    height: ${props => `${props.theme.headerHeight}px`};
-    display: flex;
-    color: rgba(255,255,255,.85);
-    background: #fff;
-    .hasHeaderTabs & {
-        // background: #191D29;
-        background: #fff !important;
-        box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.18);
-        .tnt-layout-header-content {
-            display: none;
-        }
-    }
-
-    // .tnt-themeS3.hasHeaderTabs &{
-    //     background: ${props => `${props.theme.blueBgColor} !important`}; //#1D4295 !important;
-    // }
-
-    .isInIframe.noAppList &,
-    .isEmptyLayout & {
-        display: none;
-    }
-    .tnt-themeS1 & {
-        background: #FFFFFF;
-        box-shadow: 0 1px 10px 0 rgba(0,0,0,0.15);
-    }
-    .tnt-themeS1.compatible & {
-        /* background: #323b4a; */
-    }
-    padding-right: 20px;
-    background: #FFFFFF;
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
-    .compatible & {
-        box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
-    }
-    transition: box-shadow .2s cubic-bezier(.4,0,.2,1), -webkit-box-shadow .2s cubic-bezier(.4,0,.2,1);
-
-    .sidebar-collapsed-controller {
-        text-align: center;
-        width: ${props => `${props.theme.headerHeight}px`};
-        line-height: ${props => `${props.theme.headerHeight}px`};
-        height: ${props => `${props.theme.headerHeight}px`};
-        cursor: pointer;
-        color: ${props => `${props.theme.primaryTextColor}`};
-        margin-right: 10px;
-
-        & > .tnt-icon {
-            font-size: 16px;
-            .large-size & {
-                font-size: 20px;
-            }
-        }
-
-        i {
-            position: relative;
-            top: -1px;
-            vertical-align: sub;
-        }
-
-        &:hover {
-            background-color: rgba(0,0,0,.06);
-        }
-
-        .tnt-themeS1 & {
-            /* color: rgba(255,255,255,.85); */
-            color: ${props => `${props.theme.primaryTextColor}`};
-        }
-        .large-size & {
-            font-size: 18px;
-        }
-        .isInIframe & {
-            display: none;
-        }
-    }
-`;
-
-const Content = styled.div`
-    flex: 1;
-    .isInIframe & {
-        display: none;
-    }
-`;
-
-export default withTheme(
-    props => {
-        const {
-            collapsed,
-            collapseIconPlacement = 'right',
-            selectedAppKey,
-            appList, // 当前机构下的应用列表
-            orgAppShow, // 是否展示应用
-            orgAppList, // 指定机构下的应用列表
-            orgTreeConfig, // 机构tree
-            selectedOrgKey,
-            orgList,
-            headerTabs,
-            onAppChange,
-            onOrgChange,
-            onCollapseChange,
-            extraActions
-        } = props;
-        const headerRef = useRef();
-        return (
-            <Header className="tnt-layout-header" ref={headerRef}>
-                {
-                    collapseIconPlacement === 'right' && (
-                        <div
-                            className="sidebar-collapsed-controller"
-                            onClick={onCollapseChange}
-                        >
-                            <Icon type={`menu-${collapsed ? 'unfold' : 'fold'}`}/>
-                        </div>
-                    )
-                }
-                {headerTabs}
-
-                {/* 展示机构+应用 */}
-                {
-                    orgList && (
-                        <OrgAppList
-                            orgAppShow={orgAppShow}
-                            selectedOrgKey={selectedOrgKey}
-                            orgList = {orgList}
-                            selectedAppKey={selectedAppKey}
-                            onOrgChange={onOrgChange}
-                            orgTreeConfig={orgTreeConfig}
-                            orgAppList={orgAppList}
-                            onAppChange={onAppChange}
-                            headerTabs={headerTabs}
-                        />
-                    )
-                }
-
-                {/* 只展示应用 走老逻辑 */}
-                {
-                    appList &&
-                    !orgList && (
-                        <AppList
-                            items={appList}
-                            selectedKey={selectedAppKey}
-                            onChange={onAppChange}
-                        />
-                    )
-                }
-                <Content className="tnt-layout-header-content">{props.children}</Content>
-                <Actions {...props} headerRef={headerRef}>
-                    {extraActions}
-                </Actions>
-            </Header>
-        );
-    }
-);