tntd 1.4.20 → 1.4.21
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/Handle/README.md +0 -20
- package/components/Handle/index.js +27 -6
- package/components/locale.js +8 -2
- package/dist/1.tntd.js +1 -1
- package/dist/stats.json +23819 -24067
- package/dist/tntd.css +1 -1
- package/dist/tntd.js +13 -8
- package/es/ArrayInput/icon.js +5 -5
- package/es/ArrayInput/index.js +108 -76
- package/es/AuthContext.js +1 -1
- package/es/Columns/index.js +38 -31
- package/es/DevelopmentLogin/LoginModal.js +45 -32
- package/es/DevelopmentLogin/index.js +17 -13
- package/es/Ellipsis/Svg/CopySVG.js +13 -13
- package/es/Ellipsis/Svg/TickSVG.js +8 -8
- package/es/Ellipsis/index.js +69 -58
- package/es/Handle/README.md +0 -20
- package/es/Handle/index.js +67 -32
- package/es/Icon/fonts/iconfont.js +12 -7
- package/es/Icon/index.js +13 -10
- package/es/Img/Contain.js +29 -24
- package/es/Img/Cover.js +54 -40
- package/es/Img/index.js +45 -36
- package/es/Layout/ActionsContext.js +2 -3
- package/es/Layout/AppList.js +92 -37
- package/es/Layout/Application.js +72 -26
- package/es/Layout/Avatar.js +66 -29
- package/es/Layout/CompatibleLanguage.js +94 -39
- package/es/Layout/EnterpriseLayout/Avatar.js +76 -38
- package/es/Layout/EnterpriseLayout/Language.js +32 -14
- package/es/Layout/EnterpriseLayout/Theme.js +34 -16
- package/es/Layout/EnterpriseLayout/index.js +16 -14
- package/es/Layout/GlobalNavigation/NavigationPopup.js +170 -59
- package/es/Layout/GlobalNavigation/index.js +54 -20
- package/es/Layout/Header.js +46 -25
- package/es/Layout/HeaderActions.js +56 -42
- package/es/Layout/HeaderNavs.js +47 -20
- package/es/Layout/HeaderTabs.js +102 -49
- package/es/Layout/Iconfont.js +1 -1
- package/es/Layout/Language.js +32 -14
- package/es/Layout/Layout.js +108 -86
- package/es/Layout/Logo.js +32 -16
- package/es/Layout/OrgAppList.js +107 -62
- package/es/Layout/SideMenu.js +124 -63
- package/es/Layout/Theme.js +61 -23
- package/es/Layout/checkAuth.js +29 -0
- package/es/Layout/index.js +34 -26
- package/es/Layout/paaslayout/CompactSideMenu.js +74 -35
- package/es/Layout/paaslayout/Header.js +45 -22
- package/es/Layout/paaslayout/Logo.js +13 -3
- package/es/Layout/paaslayout/SideMenu.js +78 -39
- package/es/Layout/paaslayout/index.js +102 -75
- package/es/Layout/storage.js +9 -10
- package/es/Layout/utils.js +136 -0
- package/es/LoadingButton/index.js +24 -15
- package/es/Modal/index.js +46 -38
- package/es/Page/Box.js +41 -34
- package/es/Page/index.js +67 -52
- package/es/Page/utils.js +5 -0
- package/es/QueryForm/Field/Checkbox.js +9 -5
- package/es/QueryForm/Field/Select.js +41 -31
- package/es/QueryForm/Field/SelectInput.js +41 -26
- package/es/QueryForm/Field/fieldsMap.js +1 -0
- package/es/QueryForm/Field/index.js +71 -41
- package/es/QueryForm/createActions.js +7 -6
- package/es/QueryForm/index.js +135 -76
- package/es/QueryListScene/List.js +128 -74
- package/es/QueryListScene/QueryForm.js +81 -46
- package/es/QueryListScene/QueryListScene.js +40 -25
- package/es/QueryListScene/Title.js +3 -3
- package/es/QueryListScene/Toolbar.js +12 -11
- package/es/Select/DropDownWrap.js +50 -29
- package/es/Select/index.js +231 -135
- package/es/Table/ResizableTable/index.js +40 -26
- package/es/Table/index.js +16 -18
- package/es/Title/index.js +23 -21
- package/es/locale.js +11 -3
- package/es/utils/checkAuth.js +5 -3
- package/es/utils/findMenuInfoByPath.js +4 -0
- package/es/utils/index.js +23 -12
- package/lib/ArrayInput/icon.js +6 -6
- package/lib/ArrayInput/index.js +127 -78
- package/lib/AuthContext.js +4 -1
- package/lib/Columns/index.js +47 -31
- package/lib/DevelopmentLogin/LoginModal.js +58 -32
- package/lib/DevelopmentLogin/index.js +27 -16
- package/lib/Ellipsis/Svg/CopySVG.js +15 -13
- package/lib/Ellipsis/Svg/TickSVG.js +10 -8
- package/lib/Ellipsis/index.js +80 -57
- package/lib/Handle/README.md +0 -20
- package/lib/Handle/index.js +80 -32
- package/lib/Icon/fonts/iconfont.js +12 -7
- package/lib/Icon/index.js +20 -11
- package/lib/Img/Contain.js +34 -24
- package/lib/Img/Cover.js +65 -42
- package/lib/Img/index.js +51 -36
- package/lib/Layout/ActionsContext.js +4 -1
- package/lib/Layout/AppList.js +118 -40
- package/lib/Layout/Application.js +86 -26
- package/lib/Layout/Avatar.js +86 -32
- package/lib/Layout/CompatibleLanguage.js +110 -39
- package/lib/Layout/EnterpriseLayout/Avatar.js +100 -41
- package/lib/Layout/EnterpriseLayout/Header.js +113 -0
- package/lib/Layout/EnterpriseLayout/HeaderActions.js +104 -0
- package/lib/Layout/EnterpriseLayout/Language.js +48 -17
- package/lib/Layout/EnterpriseLayout/Theme.js +44 -16
- package/lib/Layout/EnterpriseLayout/index.js +23 -14
- package/lib/Layout/GlobalNavigation/NavigationPopup.js +186 -59
- package/lib/Layout/GlobalNavigation/index.js +74 -23
- package/lib/Layout/Header.js +63 -28
- package/lib/Layout/HeaderActions.js +74 -45
- package/lib/Layout/HeaderNavs.js +61 -23
- package/lib/Layout/HeaderTabs.js +118 -51
- package/lib/Layout/Iconfont.js +5 -1
- package/lib/Layout/Language.js +48 -17
- package/lib/Layout/Layout.js +128 -88
- package/lib/Layout/Logo.js +43 -19
- package/lib/Layout/OrgAppList.js +127 -64
- package/lib/Layout/SideMenu.js +143 -65
- package/lib/Layout/Theme.js +73 -23
- package/lib/Layout/checkAuth.js +39 -0
- package/lib/Layout/createActions.js +5 -0
- package/lib/Layout/images/index.js +28 -0
- package/lib/Layout/index.js +55 -30
- package/lib/Layout/paaslayout/CompactSideMenu.js +84 -35
- package/lib/Layout/paaslayout/Header.js +55 -22
- package/lib/Layout/paaslayout/Logo.js +19 -3
- package/lib/Layout/paaslayout/SideMenu.js +87 -39
- package/lib/Layout/paaslayout/index.js +122 -77
- package/lib/Layout/storage.js +40 -11
- package/lib/Layout/utils.js +166 -0
- package/lib/LoadingButton/index.js +29 -15
- package/lib/Modal/index.js +53 -38
- package/lib/Page/Box.js +45 -34
- package/lib/Page/index.js +77 -52
- package/lib/Page/utils.js +9 -1
- package/lib/QueryForm/Field/Checkbox.js +13 -5
- package/lib/QueryForm/Field/Select.js +53 -33
- package/lib/QueryForm/Field/SelectInput.js +56 -28
- package/lib/QueryForm/Field/fieldsMap.js +15 -1
- package/lib/QueryForm/Field/index.js +81 -43
- package/lib/QueryForm/createActions.js +12 -6
- package/lib/QueryForm/index.js +157 -78
- package/lib/QueryForm/useForm.js +5 -0
- package/lib/QueryListScene/List.js +140 -76
- package/lib/QueryListScene/QueryForm.js +86 -46
- package/lib/QueryListScene/QueryListScene.js +46 -25
- package/lib/QueryListScene/Title.js +7 -3
- package/lib/QueryListScene/Toolbar.js +16 -11
- package/lib/QueryListScene/createActions.js +5 -0
- package/lib/QueryListScene/index.js +10 -0
- package/lib/QueryListScene/useActions.js +5 -0
- package/lib/Select/DropDownWrap.js +56 -31
- package/lib/Select/index.js +241 -135
- package/lib/Table/ResizableTable/index.js +48 -26
- package/lib/Table/index.js +28 -17
- package/lib/Title/index.js +28 -21
- package/lib/index.js +56 -35
- package/lib/locale.js +19 -4
- package/lib/utils/checkAuth.js +9 -4
- package/lib/utils/findMenuInfoByPath.js +8 -1
- package/lib/utils/index.js +42 -15
- package/package.json +2 -2
package/es/Layout/HeaderTabs.js
CHANGED
|
@@ -1,29 +1,61 @@
|
|
|
1
|
-
function
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
function
|
|
6
|
-
|
|
7
|
-
function
|
|
8
|
-
|
|
9
|
-
function
|
|
10
|
-
|
|
11
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
12
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
1
|
+
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); }
|
|
2
|
+
|
|
3
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
|
6
|
+
|
|
7
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
|
8
|
+
|
|
9
|
+
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; }
|
|
10
|
+
|
|
13
11
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
+
|
|
14
13
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
14
|
+
|
|
15
15
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
16
|
+
|
|
17
|
+
function _templateObject3() {
|
|
18
|
+
var data = _taggedTemplateLiteral(["\n position: relative;\n margin: 0;\n padding: 0 20px 0 10px;\n cursor: pointer;\n display: inline-block;\n line-height: ", ";\n /* transition: background-color .5; */\n width: 130px;\n color: rgba(255,255,255,.6);\n\n .tnt-icon[type=close] {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n font-size: 10px;\n padding: 0 10px;\n cursor: pointer;\n z-index: 1;\n }\n\n &:not(:last-child):after {\n position: absolute;\n content: \"\";\n right: 0;\n top: 6px;\n height: 24px;\n width: 1px;\n // opacity: .5;\n // background: #fff;\n background: #E1E6EE;\n opacity: .5;\n // .tnt-themeS1 & {\n // background: #E1E6EE;\n // opacity: 1;\n // }\n }\n\n &.active,\n &.activeTabPreSibling {\n &:after {\n display: none;\n }\n }\n\n a {\n font-size: 14px;\n color: ", ";//rgba(255,255,255,.6);\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n transition: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n line-height: 36px;\n width: 100%;\n // &:hover {\n // color: rgba(255,255,255,.8);\n // }\n // .tnt-themeS1 & {\n // color: ", ";\n // }\n }\n\n &:hover,\n &.active {\n .tnt-icon[type=close] {\n display: unset;\n color: #455064;\n // .tnt-themeS1 & {\n // color: #455064;\n // }\n }\n }\n\n &.active {\n background: #F1F2F5;\n border-radius: 2px 2px 0 0;\n color: ", ";\n font-weight: 600;\n\n a {\n color: ", ";\n }\n }\n"]);
|
|
19
|
+
|
|
20
|
+
_templateObject3 = function _templateObject3() {
|
|
21
|
+
return data;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
return data;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function _templateObject2() {
|
|
28
|
+
var data = _taggedTemplateLiteral(["\n margin: 14px 0 0;\n padding: 0;\n list-style: none;\n text-align: left;\n height: 36px;\n line-height: 36px;\n flex: 1;\n white-space: nowrap;\n padding-right: 40px;\n transition: transform 0.25s linear;\n position: absolute;\n"]);
|
|
29
|
+
|
|
30
|
+
_templateObject2 = function _templateObject2() {
|
|
31
|
+
return data;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
return data;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function _templateObject() {
|
|
38
|
+
var data = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n overflow: hidden;\n position: relative;\n margin-right: 12px;\n margin-left: 4px;\n\n .tnt-layout-header-tabs-arrows {\n position: absolute;\n right: 0;\n bottom: 0;\n font-size: 16px;\n line-height: 36px;\n height: 36px;\n background: #fff !important;\n color: rgba(255,255,255,.8) !important;\n .tnt-icon {\n cursor: pointer;\n color: rgba(139,145,158,1);\n &[disabled] {\n color: rgba(139, 145, 158, .5);\n pointer-events: none;\n cursor: not-allowed;\n }\n }\n // background: #191D29;\n // .tnt-icon {\n // cursor: pointer;\n // &[disabled] {\n // color: rgba(139, 145, 158, .5);\n // pointer-events: none;\n // cursor: not-allowed;\n // }\n // }\n // .tnt-themeS1 & {\n // background: #fff;\n // .tnt-icon {\n // color: rgba(139,145,158,1);\n // }\n // }\n // \u591A\u7B7E\u9875\u7684\u7BAD\u5934\u6837\u5F0F\n // .tnt-themeS3 & {\n // background: ", "; //#1D4295;\n // .tnt-icon {\n // color: rgba(255, 255, 255, .5);\n // &[disabled] {\n // color: rgba(139, 145, 158, .5);\n // pointer-events: none;\n // cursor: not-allowed;\n // }\n // }\n // }\n }\n"]);
|
|
39
|
+
|
|
40
|
+
_templateObject = function _templateObject() {
|
|
41
|
+
return data;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
return data;
|
|
45
|
+
}
|
|
46
|
+
|
|
16
47
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
48
|
+
|
|
17
49
|
import { useState, useEffect, useRef } from 'react';
|
|
18
50
|
import styled, { withTheme } from 'styled-components';
|
|
19
51
|
import cn from 'classnames';
|
|
20
52
|
import { get } from 'lodash';
|
|
21
53
|
import Icon from '../Icon';
|
|
22
|
-
var TabsContainer = styled.div(_templateObject
|
|
54
|
+
var TabsContainer = styled.div(_templateObject(), function (props) {
|
|
23
55
|
return "".concat(props.theme.blueBgColor);
|
|
24
56
|
});
|
|
25
|
-
var Tabs = styled.ul(_templateObject2
|
|
26
|
-
var TabItem = styled.li(_templateObject3
|
|
57
|
+
var Tabs = styled.ul(_templateObject2());
|
|
58
|
+
var TabItem = styled.li(_templateObject3(), function (props) {
|
|
27
59
|
return props.theme.size === 'large' ? '46px' : '36px';
|
|
28
60
|
}, function (props) {
|
|
29
61
|
return props.theme.headerActionsColor;
|
|
@@ -36,47 +68,56 @@ var TabItem = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateL
|
|
|
36
68
|
});
|
|
37
69
|
export var HeaderTabs = withTheme(function (_ref) {
|
|
38
70
|
var theme = _ref.theme,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
71
|
+
className = _ref.className,
|
|
72
|
+
_ref$tabs = _ref.tabs,
|
|
73
|
+
tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
|
|
74
|
+
onTabChange = _ref.onTabChange,
|
|
75
|
+
onTabSelect = _ref.onTabSelect,
|
|
76
|
+
onTabClose = _ref.onTabClose,
|
|
77
|
+
appListVisible = _ref.appListVisible,
|
|
78
|
+
orgListVisible = _ref.orgListVisible,
|
|
79
|
+
orgAppListVisible = _ref.orgAppListVisible,
|
|
80
|
+
language = _ref.language,
|
|
81
|
+
props = _objectWithoutProperties(_ref, ["theme", "className", "tabs", "onTabChange", "onTabSelect", "onTabClose", "appListVisible", "orgListVisible", "orgAppListVisible", "language"]);
|
|
82
|
+
|
|
50
83
|
var _useState = useState(props.selectedKey || get(tabs, '0.key')),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
84
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
85
|
+
selectedKey = _useState2[0],
|
|
86
|
+
setSelectedKey = _useState2[1];
|
|
87
|
+
|
|
54
88
|
var _useState3 = useState(tabs || []),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
89
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
90
|
+
tabItems = _useState4[0],
|
|
91
|
+
setTabItems = _useState4[1];
|
|
92
|
+
|
|
58
93
|
var _useState5 = useState(false),
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
94
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
95
|
+
arrowVisible = _useState6[0],
|
|
96
|
+
setArrowVisible = _useState6[1];
|
|
97
|
+
|
|
62
98
|
var _useState7 = useState({
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
99
|
+
start: true,
|
|
100
|
+
end: true
|
|
101
|
+
}),
|
|
102
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
103
|
+
tabsPositionFlags = _useState8[0],
|
|
104
|
+
setTabsPositionFlags = _useState8[1];
|
|
105
|
+
|
|
69
106
|
var tabsRef = useRef();
|
|
107
|
+
|
|
70
108
|
var getTabsDom = function getTabsDom() {
|
|
71
109
|
return tabsRef.current;
|
|
72
110
|
};
|
|
111
|
+
|
|
73
112
|
var onTabClick = function onTabClick(tab, index) {
|
|
74
113
|
setSelectedKey(tab.key);
|
|
75
114
|
onTabSelect == null ? void 0 : onTabSelect(tab);
|
|
115
|
+
|
|
76
116
|
if (selectedKey !== tab.key) {
|
|
77
117
|
onTabChange == null ? void 0 : onTabChange(tab);
|
|
78
118
|
}
|
|
79
119
|
};
|
|
120
|
+
|
|
80
121
|
var closeTabHandle = function closeTabHandle(tab, index, evt) {
|
|
81
122
|
evt.stopPropagation();
|
|
82
123
|
var newTabItems = tabItems.filter(function (_ref2) {
|
|
@@ -85,16 +126,20 @@ export var HeaderTabs = withTheme(function (_ref) {
|
|
|
85
126
|
});
|
|
86
127
|
var newSelectedKey = selectedKey;
|
|
87
128
|
setTabItems(newTabItems);
|
|
129
|
+
|
|
88
130
|
if (tab.key === selectedKey) {
|
|
89
131
|
var _newTabItems$, _newTabItems;
|
|
132
|
+
|
|
90
133
|
newSelectedKey = index === 0 ? (_newTabItems$ = newTabItems[0]) == null ? void 0 : _newTabItems$.key : (_newTabItems = newTabItems[index - 1]) == null ? void 0 : _newTabItems.key;
|
|
91
134
|
setSelectedKey(newSelectedKey);
|
|
92
135
|
}
|
|
136
|
+
|
|
93
137
|
onTabClose == null ? void 0 : onTabClose(tab, newTabItems, newTabItems.find(function (_ref3) {
|
|
94
138
|
var key = _ref3.key;
|
|
95
139
|
return key === newSelectedKey;
|
|
96
140
|
}));
|
|
97
141
|
};
|
|
142
|
+
|
|
98
143
|
var onMoveToLeft = function onMoveToLeft() {
|
|
99
144
|
var tabsDom = getTabsDom();
|
|
100
145
|
var parentBBox = tabsDom.parentNode.getBoundingClientRect();
|
|
@@ -110,6 +155,7 @@ export var HeaderTabs = withTheme(function (_ref) {
|
|
|
110
155
|
end: Math.abs(newX) < width - parentWidth
|
|
111
156
|
});
|
|
112
157
|
};
|
|
158
|
+
|
|
113
159
|
var onMoveToRight = function onMoveToRight() {
|
|
114
160
|
var tabsDom = getTabsDom();
|
|
115
161
|
var parentBBox = tabsDom.parentNode.getBoundingClientRect();
|
|
@@ -125,6 +171,7 @@ export var HeaderTabs = withTheme(function (_ref) {
|
|
|
125
171
|
end: Math.abs(newX) < width - parentWidth
|
|
126
172
|
});
|
|
127
173
|
};
|
|
174
|
+
|
|
128
175
|
var translateTabsDom = function translateTabsDom(tabs, selectedKey) {
|
|
129
176
|
if (!selectedKey) return;
|
|
130
177
|
var index = tabs.indexOf(tabs.find(function (_ref4) {
|
|
@@ -142,15 +189,19 @@ export var HeaderTabs = withTheme(function (_ref) {
|
|
|
142
189
|
var parentWidth = parentBBox.width - 36;
|
|
143
190
|
var width = tabItems.length * 130;
|
|
144
191
|
var tailX = x + parentWidth; //当前滑动窗口尾部坐标
|
|
192
|
+
|
|
145
193
|
var newX = -x;
|
|
194
|
+
|
|
146
195
|
if (bbox.left < x) {
|
|
147
196
|
newX = -bbox.left;
|
|
148
197
|
} else if (bbox.right >= tailX) {
|
|
149
198
|
newX = parentWidth - bbox.right;
|
|
150
199
|
}
|
|
200
|
+
|
|
151
201
|
if (newX + width < parentWidth) {
|
|
152
202
|
newX = -(width - parentWidth);
|
|
153
203
|
}
|
|
204
|
+
|
|
154
205
|
newX = Math.min(0, newX);
|
|
155
206
|
tabsDom.style.transform = "translateX(".concat(newX, "px)");
|
|
156
207
|
setTabsPositionFlags({
|
|
@@ -158,6 +209,7 @@ export var HeaderTabs = withTheme(function (_ref) {
|
|
|
158
209
|
end: Math.abs(newX) < width - parentWidth
|
|
159
210
|
});
|
|
160
211
|
};
|
|
212
|
+
|
|
161
213
|
useEffect(function () {
|
|
162
214
|
setSelectedKey(props.selectedKey || get(tabs, '0.key'));
|
|
163
215
|
setTabItems(tabs);
|
|
@@ -170,14 +222,15 @@ export var HeaderTabs = withTheme(function (_ref) {
|
|
|
170
222
|
useEffect(function () {
|
|
171
223
|
translateTabsDom(tabItems, selectedKey);
|
|
172
224
|
}, [tabItems, selectedKey, appListVisible, orgListVisible, orgAppListVisible]);
|
|
173
|
-
return
|
|
225
|
+
return React.createElement(TabsContainer, _extends({}, props, {
|
|
174
226
|
className: cn('tnt-layout-header-tabs', _defineProperty({}, className, className))
|
|
175
|
-
}),
|
|
227
|
+
}), React.createElement(Tabs, {
|
|
176
228
|
className: "tnt-layout-header-tabs-content",
|
|
177
229
|
ref: tabsRef
|
|
178
230
|
}, tabItems.map(function (tab, index) {
|
|
179
231
|
var _tabItems;
|
|
180
|
-
|
|
232
|
+
|
|
233
|
+
return React.createElement(TabItem, {
|
|
181
234
|
key: tab.key,
|
|
182
235
|
theme: theme,
|
|
183
236
|
className: cn({
|
|
@@ -187,7 +240,7 @@ export var HeaderTabs = withTheme(function (_ref) {
|
|
|
187
240
|
onClick: function onClick() {
|
|
188
241
|
return onTabClick(tab, index);
|
|
189
242
|
}
|
|
190
|
-
},
|
|
243
|
+
}, React.createElement("a", {
|
|
191
244
|
href: tab.key,
|
|
192
245
|
onClick: function onClick(evt) {
|
|
193
246
|
return evt.preventDefault();
|
|
@@ -195,17 +248,17 @@ export var HeaderTabs = withTheme(function (_ref) {
|
|
|
195
248
|
}, {
|
|
196
249
|
cn: tab.name,
|
|
197
250
|
en: tab.enName || tab.name
|
|
198
|
-
}[language || 'cn']), tab.closable !== false && tabItems.length > 1 &&
|
|
251
|
+
}[language || 'cn']), tab.closable !== false && tabItems.length > 1 && React.createElement(Icon, {
|
|
199
252
|
type: "close",
|
|
200
253
|
onClick: closeTabHandle.bind(null, tab, index)
|
|
201
254
|
}));
|
|
202
|
-
})), arrowVisible &&
|
|
255
|
+
})), arrowVisible && React.createElement("div", {
|
|
203
256
|
className: "tnt-layout-header-tabs-arrows"
|
|
204
|
-
},
|
|
257
|
+
}, React.createElement(Icon, {
|
|
205
258
|
type: "left",
|
|
206
259
|
onClick: onMoveToLeft,
|
|
207
260
|
disabled: !tabsPositionFlags.start
|
|
208
|
-
}),
|
|
261
|
+
}), React.createElement(Icon, {
|
|
209
262
|
type: "right",
|
|
210
263
|
onClick: onMoveToRight,
|
|
211
264
|
disabled: !tabsPositionFlags.end
|
package/es/Layout/Iconfont.js
CHANGED
package/es/Layout/Language.js
CHANGED
|
@@ -1,11 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance
|
|
4
|
-
|
|
5
|
-
function
|
|
6
|
-
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
|
2
|
+
|
|
3
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
|
4
|
+
|
|
5
|
+
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; }
|
|
6
|
+
|
|
7
7
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
+
|
|
9
|
+
function _templateObject() {
|
|
10
|
+
var data = _taggedTemplateLiteral(["\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"]);
|
|
11
|
+
|
|
12
|
+
_templateObject = function _templateObject() {
|
|
13
|
+
return data;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
return data;
|
|
17
|
+
}
|
|
18
|
+
|
|
8
19
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
20
|
+
|
|
9
21
|
import { useState } from 'react';
|
|
10
22
|
import styled, { withTheme } from 'styled-components';
|
|
11
23
|
import { get } from 'lodash';
|
|
@@ -22,7 +34,7 @@ var languagesMap = languages.reduce(function (acc, cur) {
|
|
|
22
34
|
acc[cur.value] = cur;
|
|
23
35
|
return acc;
|
|
24
36
|
}, {});
|
|
25
|
-
var Language = styled.li(_templateObject
|
|
37
|
+
var Language = styled.li(_templateObject(), function (_ref) {
|
|
26
38
|
var size = _ref.theme.size;
|
|
27
39
|
return size === 'large' ? '14px' : '12px';
|
|
28
40
|
}, function (_ref2) {
|
|
@@ -37,27 +49,33 @@ var Language = styled.li(_templateObject || (_templateObject = _taggedTemplateLi
|
|
|
37
49
|
});
|
|
38
50
|
export default withTheme(function (props) {
|
|
39
51
|
var onChange = props.onChange;
|
|
52
|
+
|
|
40
53
|
var getLanguage = function getLanguage() {
|
|
41
54
|
var lang = getLanguageStore() || props.language;
|
|
55
|
+
|
|
42
56
|
if (!languagesMap[lang]) {
|
|
43
57
|
lang = get(languages, '0.value');
|
|
44
58
|
}
|
|
59
|
+
|
|
45
60
|
return lang;
|
|
46
61
|
};
|
|
62
|
+
|
|
47
63
|
var _useState = useState(getLanguage()),
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
64
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
65
|
+
_useState2$ = _useState2[0],
|
|
66
|
+
language = _useState2$ === void 0 ? 'cn' : _useState2$,
|
|
67
|
+
setLanguage = _useState2[1];
|
|
68
|
+
|
|
52
69
|
var switchLanguage = function switchLanguage() {
|
|
53
70
|
var lang = language === 'cn' ? 'en' : 'cn';
|
|
54
71
|
setLanguage(lang);
|
|
55
72
|
setLanguageStore(lang);
|
|
56
73
|
onChange && onChange(lang);
|
|
57
74
|
};
|
|
58
|
-
|
|
75
|
+
|
|
76
|
+
return React.createElement(Language, {
|
|
59
77
|
onClick: switchLanguage
|
|
60
|
-
},
|
|
78
|
+
}, React.createElement(Iconfont, {
|
|
61
79
|
type: "flag-".concat(language)
|
|
62
|
-
}),
|
|
80
|
+
}), React.createElement("span", null, get(languagesMap[language], 'name')));
|
|
63
81
|
});
|