tntd 1.4.6 → 1.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Layout/HeaderActions.js +90 -128
- package/components/LoadingButton/index.js +11 -15
- package/dist/stats.json +4958 -4958
- package/dist/tntd.js +1 -1
- package/es/Layout/HeaderActions.js +10 -10
- package/es/LoadingButton/index.js +20 -10
- package/lib/ArrayInput/icon.js +27 -31
- package/lib/ArrayInput/index.js +211 -298
- package/lib/AuthContext.js +2 -13
- package/lib/Columns/index.js +71 -100
- package/lib/DevelopmentLogin/LoginModal.js +79 -141
- package/lib/DevelopmentLogin/index.js +28 -55
- package/lib/Ellipsis/Svg/CopySVG.js +23 -71
- package/lib/Ellipsis/Svg/TickSVG.js +17 -49
- package/lib/Ellipsis/index.js +148 -154
- package/lib/Handle/index.js +72 -109
- package/lib/Icon/fonts/iconfont.js +1 -43
- package/lib/Icon/iconList.js +119 -8
- package/lib/Icon/index.js +13 -45
- package/lib/Img/Contain.js +49 -81
- package/lib/Img/Cover.js +88 -136
- package/lib/Img/index.js +36 -89
- package/lib/Layout/ActionsContext.js +2 -11
- package/lib/Layout/AppList.js +262 -256
- package/lib/Layout/Application.js +119 -135
- package/lib/Layout/Avatar.js +137 -137
- package/lib/Layout/CompatibleLanguage.js +214 -195
- package/lib/Layout/EnterpriseLayout/Avatar.js +156 -168
- package/lib/Layout/EnterpriseLayout/Language.js +75 -100
- package/lib/Layout/EnterpriseLayout/Theme.js +96 -94
- package/lib/Layout/EnterpriseLayout/index.js +32 -45
- package/lib/Layout/GlobalNavigation/NavigationPopup.js +335 -407
- package/lib/Layout/GlobalNavigation/index.js +110 -158
- package/lib/Layout/Header.js +165 -116
- package/lib/Layout/HeaderActions.js +132 -129
- package/lib/Layout/HeaderNavs.js +90 -113
- package/lib/Layout/HeaderTabs.js +312 -278
- package/lib/Layout/Iconfont.js +2 -15
- package/lib/Layout/Language.js +63 -102
- package/lib/Layout/Layout.js +272 -261
- package/lib/Layout/Logo.js +132 -87
- package/lib/Layout/OrgAppList.js +440 -319
- package/lib/Layout/SideMenu.js +429 -343
- package/lib/Layout/Theme.js +95 -124
- package/lib/Layout/checkAuth.js +21 -35
- package/lib/Layout/createActions.js +38 -51
- package/lib/Layout/images/index.js +33 -41
- package/lib/Layout/index.js +110 -161
- package/lib/Layout/paaslayout/CompactSideMenu.js +200 -178
- package/lib/Layout/paaslayout/Header.js +84 -90
- package/lib/Layout/paaslayout/Logo.js +27 -32
- package/lib/Layout/paaslayout/SideMenu.js +161 -174
- package/lib/Layout/paaslayout/index.js +240 -261
- package/lib/Layout/storage.js +20 -78
- package/lib/Layout/utils.js +93 -143
- package/lib/LoadingButton/index.js +25 -57
- package/lib/Modal/index.js +83 -108
- package/lib/Page/Box.js +56 -81
- package/lib/Page/index.js +151 -173
- package/lib/Page/utils.js +12 -30
- package/lib/QueryForm/Field/Checkbox.js +11 -33
- package/lib/QueryForm/Field/Select.js +63 -99
- package/lib/QueryForm/Field/SelectInput.js +69 -114
- package/lib/QueryForm/Field/fieldsMap.js +30 -52
- package/lib/QueryForm/Field/index.js +76 -158
- package/lib/QueryForm/createActions.js +50 -65
- package/lib/QueryForm/index.js +304 -383
- package/lib/QueryForm/useForm.js +6 -17
- package/lib/QueryListScene/List.js +290 -366
- package/lib/QueryListScene/QueryForm.js +93 -161
- package/lib/QueryListScene/QueryListScene.js +33 -87
- package/lib/QueryListScene/Title.js +10 -20
- package/lib/QueryListScene/Toolbar.js +8 -31
- package/lib/QueryListScene/createActions.js +64 -79
- package/lib/QueryListScene/index.js +23 -40
- package/lib/QueryListScene/useActions.js +6 -17
- package/lib/Select/DropDownWrap.js +60 -124
- package/lib/Select/index.js +425 -561
- package/lib/Table/ResizableTable/index.js +77 -121
- package/lib/Table/index.js +19 -51
- package/lib/Title/index.js +34 -52
- package/lib/index.js +19 -159
- package/lib/locale.js +48 -63
- package/package.json +1 -1
- package/lib/Layout/EnterpriseLayout/Header.js +0 -113
- package/lib/Layout/EnterpriseLayout/HeaderActions.js +0 -104
|
@@ -1,165 +1,117 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
|
|
35
|
-
|
|
36
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
|
|
37
|
-
|
|
38
|
-
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
|
|
39
|
-
|
|
40
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
|
|
41
|
-
|
|
42
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
|
43
|
-
|
|
44
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
|
45
|
-
|
|
46
|
-
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
47
|
-
|
|
48
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
49
|
-
|
|
50
|
-
function _templateObject2() {
|
|
51
|
-
var data = _taggedTemplateLiteral(["\n .tnt-navigation-popup {\n position: absolute;\n left: 0;\n top: ", ";\n width: 100%;\n height: ", ";\n background: #FFF;\n box-shadow: 0 10px 10px -8px rgba(0,0,0,.1) inset,\n 0 10px 10px -8px rgba(0,0,0,.1);\n transition: all .15s ease-in-out;\n overflow: hidden;\n padding: 20px 16px;\n box-sizing: border-box;\n &.hide {\n height: 0;\n padding: 0;\n }\n }\n"]);
|
|
52
|
-
|
|
53
|
-
_templateObject2 = function _templateObject2() {
|
|
54
|
-
return data;
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
return data;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
function _templateObject() {
|
|
61
|
-
var data = _taggedTemplateLiteral(["\n &.active {\n color: ", " !important;\n }\n font-size: ", ";\n .tnt-icon {\n font-size: ", ";\n margin-right: 4px;\n }\n span {\n position: relative;\n font-size: ", ";\n top: ", ";\n font-family: auto;\n .tnt-themeS1 & {\n /* color: rgba(255,255,255,.85); */\n }\n }\n .isInIframe & {\n display: none;\n }\n"]);
|
|
62
|
-
|
|
63
|
-
_templateObject = function _templateObject() {
|
|
64
|
-
return data;
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
return data;
|
|
68
|
-
}
|
|
1
|
+
import { useState, useEffect, useRef, useContext } from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom';
|
|
3
|
+
import cn from 'classnames';
|
|
4
|
+
import styled, { createGlobalStyle, withTheme } from 'styled-components';
|
|
5
|
+
import { uniq } from 'lodash';
|
|
6
|
+
import ActionsContext from '../ActionsContext';
|
|
7
|
+
import { hasLevel3 } from '../utils';
|
|
8
|
+
import Icon from '../Iconfont';
|
|
9
|
+
import NavigationPopup from './NavigationPopup';
|
|
10
|
+
|
|
11
|
+
const Navigation = styled.li`
|
|
12
|
+
&.active {
|
|
13
|
+
color: ${({ theme }) => theme.primaryColor} !important;
|
|
14
|
+
}
|
|
15
|
+
font-size: ${({ theme: { size } }) => size === 'large' ? '14px' : '12px'};
|
|
16
|
+
.tnt-icon {
|
|
17
|
+
font-size: ${({ theme: { size } }) => size === 'large' ? '22px' : '18px'};
|
|
18
|
+
margin-right: 4px;
|
|
19
|
+
}
|
|
20
|
+
span {
|
|
21
|
+
position: relative;
|
|
22
|
+
font-size: ${({ theme: { size } }) => size === 'large' ? '14px' : '12px'};
|
|
23
|
+
top: ${({ theme: { size } }) => size === 'large' ? '-3px' : '-2px'};
|
|
24
|
+
font-family: auto;
|
|
25
|
+
.tnt-themeS1 & {
|
|
26
|
+
/* color: rgba(255,255,255,.85); */
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
.isInIframe & {
|
|
30
|
+
display: none;
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
69
33
|
|
|
70
|
-
|
|
34
|
+
const createPopupContainer = () => {
|
|
35
|
+
const div = document.createElement('div');
|
|
71
36
|
|
|
72
|
-
|
|
73
|
-
var theme = _ref.theme;
|
|
74
|
-
return theme.primaryColor;
|
|
75
|
-
}, function (_ref2) {
|
|
76
|
-
var size = _ref2.theme.size;
|
|
77
|
-
return size === 'large' ? '14px' : '12px';
|
|
78
|
-
}, function (_ref3) {
|
|
79
|
-
var size = _ref3.theme.size;
|
|
80
|
-
return size === 'large' ? '22px' : '18px';
|
|
81
|
-
}, function (_ref4) {
|
|
82
|
-
var size = _ref4.theme.size;
|
|
83
|
-
return size === 'large' ? '14px' : '12px';
|
|
84
|
-
}, function (_ref5) {
|
|
85
|
-
var size = _ref5.theme.size;
|
|
86
|
-
return size === 'large' ? '-3px' : '-2px';
|
|
87
|
-
});
|
|
37
|
+
div.setAttribute('class', 'tnt-navigation-popup');
|
|
88
38
|
|
|
89
|
-
|
|
90
|
-
var div = document.createElement('div');
|
|
91
|
-
div.setAttribute('class', 'tnt-navigation-popup');
|
|
92
|
-
return div;
|
|
39
|
+
return div;
|
|
93
40
|
};
|
|
94
41
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
var popupRef = (0, _react.useRef)();
|
|
113
|
-
(0, _react.useEffect)(function () {
|
|
114
|
-
var _headerRef$current;
|
|
115
|
-
|
|
116
|
-
popupRef.current = createPopupContainer();
|
|
117
|
-
headerRef == null ? void 0 : (_headerRef$current = headerRef.current) == null ? void 0 : _headerRef$current.appendChild(popupRef.current);
|
|
118
|
-
return function () {
|
|
119
|
-
var _headerRef$current2;
|
|
120
|
-
|
|
121
|
-
headerRef == null ? void 0 : (_headerRef$current2 = headerRef.current) == null ? void 0 : _headerRef$current2.removeChild(popupRef.current);
|
|
122
|
-
};
|
|
123
|
-
}, []);
|
|
124
|
-
(0, _react.useEffect)(function () {
|
|
125
|
-
var classNames = popupRef.current.getAttribute('class').split(' ');
|
|
126
|
-
|
|
127
|
-
if (visible) {
|
|
128
|
-
_reactDom["default"].render(React.createElement(_NavigationPopup["default"], {
|
|
129
|
-
actions: actions,
|
|
130
|
-
theme: props.theme,
|
|
131
|
-
menus: menus,
|
|
132
|
-
containerRef: headerRef,
|
|
133
|
-
popupRef: popupRef,
|
|
134
|
-
close: function close() {
|
|
135
|
-
return setVisible(false);
|
|
42
|
+
const GlobalStyle = createGlobalStyle`
|
|
43
|
+
.tnt-navigation-popup {
|
|
44
|
+
position: absolute;
|
|
45
|
+
left: 0;
|
|
46
|
+
top: ${props => props.theme.size === 'large' ? '60px' : '50px'};
|
|
47
|
+
width: 100%;
|
|
48
|
+
height: ${props => props.hasLevel3 ? '560px' : '530px'};
|
|
49
|
+
background: #FFF;
|
|
50
|
+
box-shadow: 0 10px 10px -8px rgba(0,0,0,.1) inset,
|
|
51
|
+
0 10px 10px -8px rgba(0,0,0,.1);
|
|
52
|
+
transition: all .15s ease-in-out;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
padding: 20px 16px;
|
|
55
|
+
box-sizing: border-box;
|
|
56
|
+
&.hide {
|
|
57
|
+
height: 0;
|
|
58
|
+
padding: 0;
|
|
136
59
|
}
|
|
137
|
-
}), popupRef.current);
|
|
138
|
-
|
|
139
|
-
popupRef.current.setAttribute('class', classNames.filter(function (item) {
|
|
140
|
-
return item !== 'hide';
|
|
141
|
-
}).join(' '));
|
|
142
|
-
} else {
|
|
143
|
-
popupRef.current.setAttribute('class', (0, _lodash.uniq)([].concat(_toConsumableArray(classNames), ['hide'])).join(' '));
|
|
144
60
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
61
|
+
`;
|
|
62
|
+
|
|
63
|
+
export default withTheme(
|
|
64
|
+
props => {
|
|
65
|
+
const actions = useContext(ActionsContext);
|
|
66
|
+
const { getText } = actions;
|
|
67
|
+
const { headerRef, menus } = props;
|
|
68
|
+
const [visible, setVisible] = useState(false);
|
|
69
|
+
const popupRef = useRef();
|
|
70
|
+
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
popupRef.current = createPopupContainer();
|
|
73
|
+
headerRef?.current?.appendChild(popupRef.current);
|
|
74
|
+
|
|
75
|
+
return () => {
|
|
76
|
+
headerRef?.current?.removeChild(popupRef.current);
|
|
77
|
+
};
|
|
78
|
+
}, []);
|
|
79
|
+
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
const classNames = popupRef.current.getAttribute('class').split(' ');
|
|
82
|
+
|
|
83
|
+
if (visible) {
|
|
84
|
+
ReactDOM.render(
|
|
85
|
+
<NavigationPopup
|
|
86
|
+
actions={actions}
|
|
87
|
+
theme={props.theme}
|
|
88
|
+
menus={menus}
|
|
89
|
+
containerRef={headerRef}
|
|
90
|
+
popupRef={popupRef}
|
|
91
|
+
close={() => setVisible(false)}
|
|
92
|
+
/>,
|
|
93
|
+
popupRef.current
|
|
94
|
+
);
|
|
95
|
+
popupRef.current.setAttribute('class', classNames.filter(item => item !== 'hide').join(' '));
|
|
96
|
+
} else {
|
|
97
|
+
popupRef.current.setAttribute('class', uniq([...classNames, 'hide']).join(' '));
|
|
98
|
+
}
|
|
99
|
+
}, [visible]);
|
|
100
|
+
|
|
101
|
+
return (
|
|
102
|
+
<Navigation
|
|
103
|
+
onClick={evt => {
|
|
104
|
+
evt.stopPropagation();
|
|
105
|
+
evt.nativeEvent?.stopImmediatePropagation();
|
|
106
|
+
evt.nativeEvent?.stopPropagation();
|
|
107
|
+
setVisible(!visible);
|
|
108
|
+
}}
|
|
109
|
+
className={cn({ active: visible })}
|
|
110
|
+
>
|
|
111
|
+
<Icon type="unordered-list" />
|
|
112
|
+
<span>{getText('globalNavigation')}</span>
|
|
113
|
+
<GlobalStyle hasLevel3={hasLevel3(menus)}/>
|
|
114
|
+
</Navigation>
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
);
|
package/lib/Layout/Header.js
CHANGED
|
@@ -1,116 +1,165 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @file Layout header
|
|
3
|
+
* @author zhangyou
|
|
4
|
+
*/
|
|
5
|
+
import { useRef } from 'react';
|
|
6
|
+
import styled, { withTheme } from 'styled-components';
|
|
7
|
+
import Icon from '../Icon';
|
|
8
|
+
import Actions from './HeaderActions';
|
|
9
|
+
import AppList from './AppList';
|
|
10
|
+
import OrgAppList from './OrgAppList';
|
|
11
|
+
|
|
12
|
+
const Header = styled.div`
|
|
13
|
+
position: relative;
|
|
14
|
+
z-index: 201;
|
|
15
|
+
height: ${props => `${props.theme.headerHeight}px`};
|
|
16
|
+
display: flex;
|
|
17
|
+
color: rgba(255,255,255,.85);
|
|
18
|
+
background: #fff;
|
|
19
|
+
.hasHeaderTabs & {
|
|
20
|
+
// background: #191D29;
|
|
21
|
+
background: #fff !important;
|
|
22
|
+
box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.18);
|
|
23
|
+
.tnt-layout-header-content {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// .tnt-themeS3.hasHeaderTabs &{
|
|
29
|
+
// background: ${props => `${props.theme.blueBgColor} !important`}; //#1D4295 !important;
|
|
30
|
+
// }
|
|
31
|
+
|
|
32
|
+
.isInIframe.noAppList &,
|
|
33
|
+
.isEmptyLayout & {
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
36
|
+
.tnt-themeS1 & {
|
|
37
|
+
background: #FFFFFF;
|
|
38
|
+
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.15);
|
|
39
|
+
}
|
|
40
|
+
.tnt-themeS1.compatible & {
|
|
41
|
+
/* background: #323b4a; */
|
|
42
|
+
}
|
|
43
|
+
padding-right: 20px;
|
|
44
|
+
background: #FFFFFF;
|
|
45
|
+
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
|
|
46
|
+
.compatible & {
|
|
47
|
+
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
|
|
48
|
+
}
|
|
49
|
+
transition: box-shadow .2s cubic-bezier(.4,0,.2,1), -webkit-box-shadow .2s cubic-bezier(.4,0,.2,1);
|
|
50
|
+
|
|
51
|
+
.sidebar-collapsed-controller {
|
|
52
|
+
text-align: center;
|
|
53
|
+
width: ${props => `${props.theme.headerHeight}px`};
|
|
54
|
+
line-height: ${props => `${props.theme.headerHeight}px`};
|
|
55
|
+
height: ${props => `${props.theme.headerHeight}px`};
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
color: ${props => `${props.theme.primaryTextColor}`};
|
|
58
|
+
margin-right: 10px;
|
|
59
|
+
|
|
60
|
+
& > .tnt-icon {
|
|
61
|
+
font-size: 16px;
|
|
62
|
+
.large-size & {
|
|
63
|
+
font-size: 20px;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
i {
|
|
68
|
+
position: relative;
|
|
69
|
+
top: -1px;
|
|
70
|
+
vertical-align: sub;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&:hover {
|
|
74
|
+
background-color: rgba(0,0,0,.06);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.tnt-themeS1 & {
|
|
78
|
+
/* color: rgba(255,255,255,.85); */
|
|
79
|
+
color: ${props => `${props.theme.primaryTextColor}`};
|
|
80
|
+
}
|
|
81
|
+
.large-size & {
|
|
82
|
+
font-size: 18px;
|
|
83
|
+
}
|
|
84
|
+
.isInIframe & {
|
|
85
|
+
display: none;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
`;
|
|
89
|
+
|
|
90
|
+
const Content = styled.div`
|
|
91
|
+
flex: 1;
|
|
92
|
+
.isInIframe & {
|
|
93
|
+
display: none;
|
|
94
|
+
}
|
|
95
|
+
`;
|
|
96
|
+
|
|
97
|
+
export default withTheme(
|
|
98
|
+
props => {
|
|
99
|
+
const {
|
|
100
|
+
collapsed,
|
|
101
|
+
collapseIconPlacement = 'right',
|
|
102
|
+
selectedAppKey,
|
|
103
|
+
appList, // 当前机构下的应用列表
|
|
104
|
+
orgAppShow, // 是否展示应用
|
|
105
|
+
orgAppList, // 指定机构下的应用列表
|
|
106
|
+
orgTreeConfig, // 机构tree
|
|
107
|
+
selectedOrgKey,
|
|
108
|
+
orgList,
|
|
109
|
+
headerTabs,
|
|
110
|
+
onAppChange,
|
|
111
|
+
onOrgChange,
|
|
112
|
+
onCollapseChange,
|
|
113
|
+
extraActions
|
|
114
|
+
} = props;
|
|
115
|
+
const headerRef = useRef();
|
|
116
|
+
return (
|
|
117
|
+
<Header className="tnt-layout-header" ref={headerRef}>
|
|
118
|
+
{
|
|
119
|
+
collapseIconPlacement === 'right' && (
|
|
120
|
+
<div
|
|
121
|
+
className="sidebar-collapsed-controller"
|
|
122
|
+
onClick={onCollapseChange}
|
|
123
|
+
>
|
|
124
|
+
<Icon type={`menu-${collapsed ? 'unfold' : 'fold'}`}/>
|
|
125
|
+
</div>
|
|
126
|
+
)
|
|
127
|
+
}
|
|
128
|
+
{headerTabs}
|
|
129
|
+
|
|
130
|
+
{/* 展示机构+应用 */}
|
|
131
|
+
{
|
|
132
|
+
orgList && (
|
|
133
|
+
<OrgAppList
|
|
134
|
+
orgAppShow={orgAppShow}
|
|
135
|
+
selectedOrgKey={selectedOrgKey}
|
|
136
|
+
orgList = {orgList}
|
|
137
|
+
selectedAppKey={selectedAppKey}
|
|
138
|
+
onOrgChange={onOrgChange}
|
|
139
|
+
orgTreeConfig={orgTreeConfig}
|
|
140
|
+
orgAppList={orgAppList}
|
|
141
|
+
onAppChange={onAppChange}
|
|
142
|
+
headerTabs={headerTabs}
|
|
143
|
+
/>
|
|
144
|
+
)
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
{/* 只展示应用 走老逻辑 */}
|
|
148
|
+
{
|
|
149
|
+
appList &&
|
|
150
|
+
!orgList && (
|
|
151
|
+
<AppList
|
|
152
|
+
items={appList}
|
|
153
|
+
selectedKey={selectedAppKey}
|
|
154
|
+
onChange={onAppChange}
|
|
155
|
+
/>
|
|
156
|
+
)
|
|
157
|
+
}
|
|
158
|
+
<Content className="tnt-layout-header-content">{props.children}</Content>
|
|
159
|
+
<Actions {...props} headerRef={headerRef}>
|
|
160
|
+
{extraActions}
|
|
161
|
+
</Actions>
|
|
162
|
+
</Header>
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
);
|