tntd 1.4.4 → 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.
Files changed (88) hide show
  1. package/components/Layout/HeaderActions.js +90 -128
  2. package/components/LoadingButton/index.js +11 -15
  3. package/components/QueryListScene/QueryForm.js +7 -4
  4. package/dist/stats.json +4990 -4990
  5. package/dist/tntd.js +1 -1
  6. package/es/Layout/HeaderActions.js +10 -10
  7. package/es/LoadingButton/index.js +20 -10
  8. package/es/QueryListScene/QueryForm.js +6 -3
  9. package/lib/ArrayInput/icon.js +27 -31
  10. package/lib/ArrayInput/index.js +211 -298
  11. package/lib/AuthContext.js +2 -13
  12. package/lib/Columns/index.js +71 -100
  13. package/lib/DevelopmentLogin/LoginModal.js +79 -141
  14. package/lib/DevelopmentLogin/index.js +28 -55
  15. package/lib/Ellipsis/Svg/CopySVG.js +23 -71
  16. package/lib/Ellipsis/Svg/TickSVG.js +17 -49
  17. package/lib/Ellipsis/index.js +148 -154
  18. package/lib/Handle/index.js +72 -109
  19. package/lib/Icon/fonts/iconfont.js +1 -43
  20. package/lib/Icon/iconList.js +119 -8
  21. package/lib/Icon/index.js +13 -45
  22. package/lib/Img/Contain.js +49 -81
  23. package/lib/Img/Cover.js +88 -136
  24. package/lib/Img/index.js +36 -89
  25. package/lib/Layout/ActionsContext.js +2 -11
  26. package/lib/Layout/AppList.js +262 -256
  27. package/lib/Layout/Application.js +119 -135
  28. package/lib/Layout/Avatar.js +137 -137
  29. package/lib/Layout/CompatibleLanguage.js +214 -195
  30. package/lib/Layout/EnterpriseLayout/Avatar.js +156 -168
  31. package/lib/Layout/EnterpriseLayout/Language.js +75 -100
  32. package/lib/Layout/EnterpriseLayout/Theme.js +96 -94
  33. package/lib/Layout/EnterpriseLayout/index.js +32 -45
  34. package/lib/Layout/GlobalNavigation/NavigationPopup.js +335 -407
  35. package/lib/Layout/GlobalNavigation/index.js +110 -158
  36. package/lib/Layout/Header.js +165 -116
  37. package/lib/Layout/HeaderActions.js +132 -129
  38. package/lib/Layout/HeaderNavs.js +90 -113
  39. package/lib/Layout/HeaderTabs.js +312 -278
  40. package/lib/Layout/Iconfont.js +2 -15
  41. package/lib/Layout/Language.js +63 -102
  42. package/lib/Layout/Layout.js +272 -261
  43. package/lib/Layout/Logo.js +132 -87
  44. package/lib/Layout/OrgAppList.js +440 -319
  45. package/lib/Layout/SideMenu.js +429 -343
  46. package/lib/Layout/Theme.js +95 -124
  47. package/lib/Layout/checkAuth.js +21 -35
  48. package/lib/Layout/createActions.js +38 -51
  49. package/lib/Layout/images/index.js +33 -41
  50. package/lib/Layout/index.js +110 -161
  51. package/lib/Layout/paaslayout/CompactSideMenu.js +200 -178
  52. package/lib/Layout/paaslayout/Header.js +84 -90
  53. package/lib/Layout/paaslayout/Logo.js +27 -32
  54. package/lib/Layout/paaslayout/SideMenu.js +161 -174
  55. package/lib/Layout/paaslayout/index.js +240 -261
  56. package/lib/Layout/storage.js +20 -78
  57. package/lib/Layout/utils.js +93 -143
  58. package/lib/LoadingButton/index.js +25 -57
  59. package/lib/Modal/index.js +83 -108
  60. package/lib/Page/Box.js +56 -81
  61. package/lib/Page/index.js +151 -173
  62. package/lib/Page/utils.js +12 -30
  63. package/lib/QueryForm/Field/Checkbox.js +11 -33
  64. package/lib/QueryForm/Field/Select.js +63 -99
  65. package/lib/QueryForm/Field/SelectInput.js +69 -114
  66. package/lib/QueryForm/Field/fieldsMap.js +30 -52
  67. package/lib/QueryForm/Field/index.js +76 -158
  68. package/lib/QueryForm/createActions.js +50 -65
  69. package/lib/QueryForm/index.js +304 -383
  70. package/lib/QueryForm/useForm.js +6 -17
  71. package/lib/QueryListScene/List.js +290 -366
  72. package/lib/QueryListScene/QueryForm.js +93 -158
  73. package/lib/QueryListScene/QueryListScene.js +33 -87
  74. package/lib/QueryListScene/Title.js +10 -20
  75. package/lib/QueryListScene/Toolbar.js +8 -31
  76. package/lib/QueryListScene/createActions.js +64 -79
  77. package/lib/QueryListScene/index.js +23 -40
  78. package/lib/QueryListScene/useActions.js +6 -17
  79. package/lib/Select/DropDownWrap.js +60 -124
  80. package/lib/Select/index.js +425 -561
  81. package/lib/Table/ResizableTable/index.js +77 -121
  82. package/lib/Table/index.js +19 -51
  83. package/lib/Title/index.js +34 -52
  84. package/lib/index.js +19 -159
  85. package/lib/locale.js +48 -63
  86. package/package.json +1 -1
  87. package/lib/Layout/EnterpriseLayout/Header.js +0 -113
  88. package/lib/Layout/EnterpriseLayout/HeaderActions.js +0 -104
@@ -1,165 +1,117 @@
1
- "use strict";
2
-
3
- function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _react = require("react");
11
-
12
- var _reactDom = _interopRequireDefault(require("react-dom"));
13
-
14
- var _classnames = _interopRequireDefault(require("classnames"));
15
-
16
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
17
-
18
- var _lodash = require("lodash");
19
-
20
- var _ActionsContext = _interopRequireDefault(require("../ActionsContext"));
21
-
22
- var _utils = require("../utils");
23
-
24
- var _Iconfont = _interopRequireDefault(require("../Iconfont"));
25
-
26
- var _NavigationPopup = _interopRequireDefault(require("./NavigationPopup"));
27
-
28
- function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
29
-
30
- function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
-
32
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
34
+ const createPopupContainer = () => {
35
+ const div = document.createElement('div');
71
36
 
72
- var Navigation = _styledComponents["default"].li(_templateObject(), function (_ref) {
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
- var createPopupContainer = function createPopupContainer() {
90
- var div = document.createElement('div');
91
- div.setAttribute('class', 'tnt-navigation-popup');
92
- return div;
39
+ return div;
93
40
  };
94
41
 
95
- var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject2(), function (props) {
96
- return props.theme.size === 'large' ? '60px' : '50px';
97
- }, function (props) {
98
- return props.hasLevel3 ? '560px' : '530px';
99
- });
100
-
101
- var _default = (0, _styledComponents.withTheme)(function (props) {
102
- var actions = (0, _react.useContext)(_ActionsContext["default"]);
103
- var getText = actions.getText;
104
- var headerRef = props.headerRef,
105
- menus = props.menus;
106
-
107
- var _useState = (0, _react.useState)(false),
108
- _useState2 = _slicedToArray(_useState, 2),
109
- visible = _useState2[0],
110
- setVisible = _useState2[1];
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
- }, [visible]);
146
- return React.createElement(Navigation, {
147
- onClick: function onClick(evt) {
148
- var _evt$nativeEvent, _evt$nativeEvent2;
149
-
150
- evt.stopPropagation();
151
- (_evt$nativeEvent = evt.nativeEvent) == null ? void 0 : _evt$nativeEvent.stopImmediatePropagation();
152
- (_evt$nativeEvent2 = evt.nativeEvent) == null ? void 0 : _evt$nativeEvent2.stopPropagation();
153
- setVisible(!visible);
154
- },
155
- className: (0, _classnames["default"])({
156
- active: visible
157
- })
158
- }, React.createElement(_Iconfont["default"], {
159
- type: "unordered-list"
160
- }), React.createElement("span", null, getText('globalNavigation')), React.createElement(GlobalStyle, {
161
- hasLevel3: (0, _utils.hasLevel3)(menus)
162
- }));
163
- });
164
-
165
- exports["default"] = _default;
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
+ );
@@ -1,116 +1,165 @@
1
- "use strict";
2
-
3
- function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _react = require("react");
11
-
12
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
-
14
- var _Icon = _interopRequireDefault(require("../Icon"));
15
-
16
- var _HeaderActions = _interopRequireDefault(require("./HeaderActions"));
17
-
18
- var _AppList = _interopRequireDefault(require("./AppList"));
19
-
20
- var _OrgAppList = _interopRequireDefault(require("./OrgAppList"));
21
-
22
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
23
-
24
- function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
25
-
26
- function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
-
28
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
29
-
30
- function _templateObject2() {
31
- var data = _taggedTemplateLiteral(["\n flex: 1;\n .isInIframe & {\n display: none;\n }\n"]);
32
-
33
- _templateObject2 = function _templateObject2() {
34
- return data;
35
- };
36
-
37
- return data;
38
- }
39
-
40
- function _templateObject() {
41
- var data = _taggedTemplateLiteral(["\n position: relative;\n z-index: 201;\n height: ", ";\n display: flex;\n color: rgba(255,255,255,.85);\n background: #fff;\n .hasHeaderTabs & {\n // background: #191D29;\n background: #fff !important;\n box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.18);\n .tnt-layout-header-content {\n display: none;\n }\n }\n\n // .tnt-themeS3.hasHeaderTabs &{\n // background: ", "; //#1D4295 !important;\n // }\n\n .isInIframe.noAppList &,\n .isEmptyLayout & {\n display: none;\n }\n .tnt-themeS1 & {\n background: #FFFFFF;\n box-shadow: 0 1px 10px 0 rgba(0,0,0,0.15);\n }\n .tnt-themeS1.compatible & {\n /* background: #323b4a; */\n }\n padding-right: 20px;\n background: #FFFFFF;\n box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);\n .compatible & {\n box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);\n }\n transition: box-shadow .2s cubic-bezier(.4,0,.2,1), -webkit-box-shadow .2s cubic-bezier(.4,0,.2,1);\n\n .sidebar-collapsed-controller {\n text-align: center;\n width: ", ";\n line-height: ", ";\n height: ", ";\n cursor: pointer;\n color: ", ";\n margin-right: 10px;\n\n & > .tnt-icon {\n font-size: 16px;\n .large-size & {\n font-size: 20px;\n }\n }\n\n i {\n position: relative;\n top: -1px;\n vertical-align: sub;\n }\n\n &:hover {\n background-color: rgba(0,0,0,.06);\n }\n\n .tnt-themeS1 & {\n /* color: rgba(255,255,255,.85); */\n color: ", ";\n }\n .large-size & {\n font-size: 18px;\n }\n .isInIframe & {\n display: none;\n }\n }\n"]);
42
-
43
- _templateObject = function _templateObject() {
44
- return data;
45
- };
46
-
47
- return data;
48
- }
49
-
50
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
51
-
52
- var Header = _styledComponents["default"].div(_templateObject(), function (props) {
53
- return "".concat(props.theme.headerHeight, "px");
54
- }, function (props) {
55
- return "".concat(props.theme.blueBgColor, " !important");
56
- }, function (props) {
57
- return "".concat(props.theme.headerHeight, "px");
58
- }, function (props) {
59
- return "".concat(props.theme.headerHeight, "px");
60
- }, function (props) {
61
- return "".concat(props.theme.headerHeight, "px");
62
- }, function (props) {
63
- return "".concat(props.theme.primaryTextColor);
64
- }, function (props) {
65
- return "".concat(props.theme.primaryTextColor);
66
- });
67
-
68
- var Content = _styledComponents["default"].div(_templateObject2());
69
-
70
- var _default = (0, _styledComponents.withTheme)(function (props) {
71
- var collapsed = props.collapsed,
72
- _props$collapseIconPl = props.collapseIconPlacement,
73
- collapseIconPlacement = _props$collapseIconPl === void 0 ? 'right' : _props$collapseIconPl,
74
- selectedAppKey = props.selectedAppKey,
75
- appList = props.appList,
76
- orgAppShow = props.orgAppShow,
77
- orgAppList = props.orgAppList,
78
- orgTreeConfig = props.orgTreeConfig,
79
- selectedOrgKey = props.selectedOrgKey,
80
- orgList = props.orgList,
81
- headerTabs = props.headerTabs,
82
- onAppChange = props.onAppChange,
83
- onOrgChange = props.onOrgChange,
84
- onCollapseChange = props.onCollapseChange,
85
- extraActions = props.extraActions;
86
- var headerRef = (0, _react.useRef)();
87
- return React.createElement(Header, {
88
- className: "tnt-layout-header",
89
- ref: headerRef
90
- }, collapseIconPlacement === 'right' && React.createElement("div", {
91
- className: "sidebar-collapsed-controller",
92
- onClick: onCollapseChange
93
- }, React.createElement(_Icon["default"], {
94
- type: "menu-".concat(collapsed ? 'unfold' : 'fold')
95
- })), headerTabs, orgList && React.createElement(_OrgAppList["default"], {
96
- orgAppShow: orgAppShow,
97
- selectedOrgKey: selectedOrgKey,
98
- orgList: orgList,
99
- selectedAppKey: selectedAppKey,
100
- onOrgChange: onOrgChange,
101
- orgTreeConfig: orgTreeConfig,
102
- orgAppList: orgAppList,
103
- onAppChange: onAppChange,
104
- headerTabs: headerTabs
105
- }), appList && !orgList && React.createElement(_AppList["default"], {
106
- items: appList,
107
- selectedKey: selectedAppKey,
108
- onChange: onAppChange
109
- }), React.createElement(Content, {
110
- className: "tnt-layout-header-content"
111
- }, props.children), React.createElement(_HeaderActions["default"], _extends({}, props, {
112
- headerRef: headerRef
113
- }), extraActions));
114
- });
115
-
116
- exports["default"] = _default;
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
+ );