@lemon-fe/components 0.0.28 → 0.0.31
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/es/MainFramework/components/{DownBar → DropMenu}/index.d.ts +1 -1
- package/es/MainFramework/components/DropMenu/index.js +104 -0
- package/es/MainFramework/components/DropMenu/index.less +86 -0
- package/es/MainFramework/components/Menu/index.js +4 -8
- package/es/MainFramework/components/Menu/index.less +1 -1
- package/es/MainFramework/components/RefreshButton/index.d.ts +5 -0
- package/es/MainFramework/components/RefreshButton/index.js +72 -0
- package/es/MainFramework/components/RefreshButton/index.less +60 -0
- package/es/MainFramework/components/TabBar/index.js +64 -3
- package/es/MainFramework/components/TabBar/index.less +14 -0
- package/es/MainFramework/index.d.ts +3 -0
- package/es/MainFramework/index.js +12 -57
- package/es/MainFramework/index.less +10 -3
- package/package.json +3 -3
- package/es/MainFramework/components/DownBar/index.js +0 -84
- package/es/MainFramework/components/DownBar/index.less +0 -108
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
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; }
|
|
2
|
+
|
|
3
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
+
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
|
|
9
|
+
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; }
|
|
10
|
+
|
|
11
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
import React, { useState } from 'react';
|
|
16
|
+
import classNames from 'classnames';
|
|
17
|
+
import { PREFIX_CLS as prefixCls } from '../../../constants';
|
|
18
|
+
import { Popover } from 'antd';
|
|
19
|
+
export default function DropMenu(props) {
|
|
20
|
+
var tabs = props.tabs,
|
|
21
|
+
active = props.active,
|
|
22
|
+
_props$visible = props.visible,
|
|
23
|
+
visible = _props$visible === void 0 ? false : _props$visible,
|
|
24
|
+
onClick = props.onClick,
|
|
25
|
+
onClose = props.onClose;
|
|
26
|
+
|
|
27
|
+
var _useState = useState(false),
|
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
+
popVisible = _useState2[0],
|
|
30
|
+
setPopVisible = _useState2[1];
|
|
31
|
+
|
|
32
|
+
var handleClose = function handleClose(e, index) {
|
|
33
|
+
e.stopPropagation();
|
|
34
|
+
onClose(index);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
var handleClick = function handleClick(index) {
|
|
38
|
+
onClick(index);
|
|
39
|
+
setPopVisible(false);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
return /*#__PURE__*/React.createElement(Popover, {
|
|
43
|
+
visible: popVisible,
|
|
44
|
+
onVisibleChange: setPopVisible,
|
|
45
|
+
overlayClassName: "".concat(prefixCls, "-nav-menu-pop"),
|
|
46
|
+
trigger: "click",
|
|
47
|
+
placement: "bottomRight",
|
|
48
|
+
content: /*#__PURE__*/React.createElement("div", {
|
|
49
|
+
className: "".concat(prefixCls, "-nav-menu-tabs")
|
|
50
|
+
}, tabs.map(function (item, index) {
|
|
51
|
+
var key = item.title;
|
|
52
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: classNames("".concat(prefixCls, "-nav-menu-tab"), _defineProperty({}, "".concat(prefixCls, "-nav-menu-tab-active"), index === active)),
|
|
54
|
+
onClick: function onClick() {
|
|
55
|
+
return handleClick(index);
|
|
56
|
+
},
|
|
57
|
+
key: key
|
|
58
|
+
}, item.title, item.closable !== false && /*#__PURE__*/React.createElement("div", {
|
|
59
|
+
className: "".concat(prefixCls, "-nav-menu-tab-close"),
|
|
60
|
+
onClick: function onClick(e) {
|
|
61
|
+
return handleClose(e, index);
|
|
62
|
+
}
|
|
63
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
64
|
+
width: "14",
|
|
65
|
+
height: "14",
|
|
66
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
67
|
+
}, /*#__PURE__*/React.createElement("g", {
|
|
68
|
+
fill: "none",
|
|
69
|
+
fillRule: "evenodd"
|
|
70
|
+
}, /*#__PURE__*/React.createElement("g", {
|
|
71
|
+
fill: "currentColor"
|
|
72
|
+
}, /*#__PURE__*/React.createElement("g", {
|
|
73
|
+
fillRule: "nonzero"
|
|
74
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
75
|
+
d: "M7.74992318,2.75006802 L7.74992318,11.250068 C7.74992318,11.6642816 7.41413675,12.000068 6.99992318,12.000068 C6.58570962,12.000068 6.24992318,11.6642816 6.24992318,11.250068 L6.24992318,2.75006802 C6.24992318,2.33585446 6.58570962,2.00006802 6.99992318,2.00006802 C7.41413675,2.00006802 7.74992318,2.33585446 7.74992318,2.75006802 Z",
|
|
76
|
+
transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999923, 7.000068) rotate(45.000000) translate(-6.999923, -7.000068)"
|
|
77
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
78
|
+
d: "M7.74994595,2.75007682 L7.74994595,11.2500768 C7.74994595,11.6642904 7.41415952,12.0000768 6.99994595,12.0000768 C6.58573239,12.0000768 6.24994595,11.6642904 6.24994595,11.2500768 L6.24994595,2.75007682 C6.24994595,2.33586325 6.58573239,2.00007682 6.99994595,2.00007682 C7.41415952,2.00007682 7.74994595,2.33586325 7.74994595,2.75007682 Z",
|
|
79
|
+
transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999946, 7.000077) rotate(-45.000000) translate(-6.999946, -7.000077)"
|
|
80
|
+
})))))));
|
|
81
|
+
}))
|
|
82
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
className: classNames("".concat(prefixCls, "-nav-menu-drop-icon"), _defineProperty({}, "".concat(prefixCls, "-nav-menu-drop-icon-active"), popVisible)),
|
|
84
|
+
style: visible ? {
|
|
85
|
+
visibility: 'visible'
|
|
86
|
+
} : {
|
|
87
|
+
visibility: 'hidden'
|
|
88
|
+
}
|
|
89
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
90
|
+
width: "20",
|
|
91
|
+
height: "20",
|
|
92
|
+
viewBox: "0 0 20 20",
|
|
93
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
94
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
95
|
+
d: "M5.757 7.757 10 12l4.243-4.243",
|
|
96
|
+
stroke: "currentColor",
|
|
97
|
+
"stroke-width": "1.5",
|
|
98
|
+
strokeLinecap: "round",
|
|
99
|
+
strokeLinejoin: "round",
|
|
100
|
+
strokeDasharray: "0,0",
|
|
101
|
+
fill: "none",
|
|
102
|
+
fillRule: "evenodd"
|
|
103
|
+
}))));
|
|
104
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
.@{prefixCls}-nav-menu {
|
|
2
|
+
&-pop {
|
|
3
|
+
padding-top: 0 !important;
|
|
4
|
+
|
|
5
|
+
.ant-popover-arrow {
|
|
6
|
+
display: none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.ant-popover-inner {
|
|
10
|
+
position: relative;
|
|
11
|
+
width: 160px;
|
|
12
|
+
padding: 8px 0;
|
|
13
|
+
border-radius: 8px;
|
|
14
|
+
border-image: linear-gradient(147deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
|
|
15
|
+
box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
|
|
16
|
+
0 6px 16px -8px rgba(0, 0, 0, 0.08);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.ant-popover-inner-content {
|
|
20
|
+
padding: 0;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&-tabs {
|
|
25
|
+
position: relative;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&-tab {
|
|
29
|
+
position: relative;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
width: 100%;
|
|
32
|
+
height: 36px;
|
|
33
|
+
padding: 0 16px;
|
|
34
|
+
color: #333;
|
|
35
|
+
font-size: 14px;
|
|
36
|
+
line-height: 36px;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
transition: background-color 0.2s;
|
|
39
|
+
|
|
40
|
+
&:hover {
|
|
41
|
+
background-color: #eee;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&-active {
|
|
45
|
+
color: @primary-color;
|
|
46
|
+
background-color: .primary(0.1) [] !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&-close {
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: 10px;
|
|
52
|
+
right: 12px;
|
|
53
|
+
display: none;
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
width: 16px;
|
|
56
|
+
height: 16px;
|
|
57
|
+
padding: 1px;
|
|
58
|
+
line-height: 1;
|
|
59
|
+
|
|
60
|
+
&:hover {
|
|
61
|
+
color: @primary-color;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:hover &-close {
|
|
66
|
+
display: block;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&-drop-icon {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: center;
|
|
74
|
+
width: 34px;
|
|
75
|
+
height: 34px;
|
|
76
|
+
color: #6d6d6d;
|
|
77
|
+
border-radius: 50%;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
|
|
80
|
+
&:hover,
|
|
81
|
+
&-active {
|
|
82
|
+
color: #333;
|
|
83
|
+
background-color: #f7f7f7;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -406,7 +406,7 @@ export default function Menu(props) {
|
|
|
406
406
|
overflow: 'hidden'
|
|
407
407
|
}
|
|
408
408
|
}, item.name), /*#__PURE__*/React.createElement("div", {
|
|
409
|
-
className:
|
|
409
|
+
className: "".concat(prefixCls, "-menu-item-favorite"),
|
|
410
410
|
onClick: function onClick(e) {
|
|
411
411
|
toggleFavorite(e, item);
|
|
412
412
|
}
|
|
@@ -544,11 +544,11 @@ export default function Menu(props) {
|
|
|
544
544
|
strokeDasharray: "0,0",
|
|
545
545
|
transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000) translate(8.535522, 10.000000) rotate(-45.000000) translate(-8.535522, -10.000000)"
|
|
546
546
|
})))))), menus.map(function (item, index) {
|
|
547
|
-
var
|
|
547
|
+
var _classNames5;
|
|
548
548
|
|
|
549
549
|
return /*#__PURE__*/React.createElement("div", {
|
|
550
550
|
key: index,
|
|
551
|
-
className: classNames("".concat(prefixCls, "-menu-top-item"), (
|
|
551
|
+
className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-active"), activeMenu !== undefined && activeMenu.path[0] === index), _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames5)),
|
|
552
552
|
onClick: function onClick() {
|
|
553
553
|
return handleClick(item);
|
|
554
554
|
},
|
|
@@ -587,11 +587,7 @@ export default function Menu(props) {
|
|
|
587
587
|
className: "".concat(prefixCls, "-menu-icon")
|
|
588
588
|
}, favoriteIcon), /*#__PURE__*/React.createElement("div", {
|
|
589
589
|
className: "".concat(prefixCls, "-menu-title")
|
|
590
|
-
}, "\u6536\u85CF")), /*#__PURE__*/React.createElement("div", {
|
|
591
|
-
className: classNames("".concat(prefixCls, "-menu-divider-div"), _defineProperty({}, "".concat(prefixCls, "-menu-divider-div-collapsed"), collapsed))
|
|
592
|
-
}, /*#__PURE__*/React.createElement(Divider, {
|
|
593
|
-
className: "".concat(prefixCls, "-menu-divider")
|
|
594
|
-
}))), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
590
|
+
}, "\u6536\u85CF"))), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
595
591
|
className: "".concat(prefixCls, "-menu-gutter")
|
|
596
592
|
}), collapsed ? /*#__PURE__*/React.createElement("div", {
|
|
597
593
|
className: "".concat(prefixCls, "-menu-top-item"),
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
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; }
|
|
2
|
+
|
|
3
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
+
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
|
|
9
|
+
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; }
|
|
10
|
+
|
|
11
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
import { Popover } from 'antd';
|
|
16
|
+
import classNames from 'classnames';
|
|
17
|
+
import React, { useState } from 'react';
|
|
18
|
+
import { PREFIX_CLS as prefixCls } from '../../../constants';
|
|
19
|
+
export default function RefreshButton(props) {
|
|
20
|
+
var onRefresh = props.onRefresh,
|
|
21
|
+
onCloseOther = props.onCloseOther,
|
|
22
|
+
onCloseAll = props.onCloseAll;
|
|
23
|
+
|
|
24
|
+
var _useState = useState(false),
|
|
25
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
26
|
+
popVisible = _useState2[0],
|
|
27
|
+
setPopVisible = _useState2[1];
|
|
28
|
+
|
|
29
|
+
return /*#__PURE__*/React.createElement(Popover, {
|
|
30
|
+
visible: popVisible,
|
|
31
|
+
onVisibleChange: setPopVisible,
|
|
32
|
+
trigger: "click",
|
|
33
|
+
overlayClassName: "".concat(prefixCls, "-refresh-down-pop"),
|
|
34
|
+
placement: "bottomRight",
|
|
35
|
+
content: /*#__PURE__*/React.createElement("div", {
|
|
36
|
+
className: "".concat(prefixCls, "-refresh-down-tabs")
|
|
37
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
38
|
+
className: "".concat(prefixCls, "-refresh-down-tab"),
|
|
39
|
+
onClick: function onClick() {
|
|
40
|
+
onRefresh();
|
|
41
|
+
setPopVisible(false);
|
|
42
|
+
}
|
|
43
|
+
}, "\u5237\u65B0\u5F53\u524D\u9875"), /*#__PURE__*/React.createElement("div", {
|
|
44
|
+
className: "".concat(prefixCls, "-refresh-down-tab"),
|
|
45
|
+
onClick: function onClick() {
|
|
46
|
+
onCloseOther();
|
|
47
|
+
setPopVisible(false);
|
|
48
|
+
}
|
|
49
|
+
}, "\u5173\u95ED\u5176\u4ED6\u9875"), /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
className: "".concat(prefixCls, "-refresh-down-tab"),
|
|
51
|
+
onClick: function onClick() {
|
|
52
|
+
onCloseAll();
|
|
53
|
+
setPopVisible(false);
|
|
54
|
+
}
|
|
55
|
+
}, "\u5173\u95ED\u5168\u90E8\u9875"))
|
|
56
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
57
|
+
className: classNames("".concat(prefixCls, "-refresh-button-icon"), _defineProperty({}, "".concat(prefixCls, "-refresh-button-icon-active"), popVisible))
|
|
58
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
59
|
+
width: "20",
|
|
60
|
+
height: "20",
|
|
61
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
62
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
63
|
+
d: "M17 10.06a7 7 0 0 1-13.033 3.492V17m-.96-7.33a7 7 0 0 1 12.884-3.453V3",
|
|
64
|
+
stroke: "currentColor",
|
|
65
|
+
strokeWidth: "1.5",
|
|
66
|
+
opacity: ".9",
|
|
67
|
+
strokeLinecap: "round",
|
|
68
|
+
strokeLinejoin: "round",
|
|
69
|
+
fill: "none",
|
|
70
|
+
fillRule: "evenodd"
|
|
71
|
+
}))));
|
|
72
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
.@{prefixCls}-refresh-button-icon {
|
|
2
|
+
width: 34px;
|
|
3
|
+
height: 34px;
|
|
4
|
+
margin-left: 7px;
|
|
5
|
+
padding: 7px;
|
|
6
|
+
color: #6d6d6d;
|
|
7
|
+
border-radius: 50%;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
transition: background-color 0.2s;
|
|
10
|
+
|
|
11
|
+
&:hover,
|
|
12
|
+
&-active {
|
|
13
|
+
color: #333;
|
|
14
|
+
background-color: #f3f3f3;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.@{prefixCls}-refresh-down {
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
line-height: 1;
|
|
22
|
+
|
|
23
|
+
&-tab {
|
|
24
|
+
position: relative;
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 36px;
|
|
27
|
+
color: #333;
|
|
28
|
+
font-size: 14px;
|
|
29
|
+
line-height: 36px;
|
|
30
|
+
text-align: center;
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
transition: background-color 0.2s;
|
|
33
|
+
|
|
34
|
+
&:hover {
|
|
35
|
+
background-color: #eee;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&-pop {
|
|
40
|
+
padding-top: 0 !important;
|
|
41
|
+
|
|
42
|
+
.ant-popover-arrow {
|
|
43
|
+
display: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.ant-popover-inner {
|
|
47
|
+
position: relative;
|
|
48
|
+
width: 120px;
|
|
49
|
+
padding: 8px 0;
|
|
50
|
+
border-radius: 8px;
|
|
51
|
+
border-image: linear-gradient(147deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
|
|
52
|
+
box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
|
|
53
|
+
0 6px 16px -8px rgba(0, 0, 0, 0.08);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.ant-popover-inner-content {
|
|
57
|
+
padding: 0;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -1,25 +1,78 @@
|
|
|
1
1
|
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; }
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
+
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
|
|
9
|
+
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; }
|
|
10
|
+
|
|
11
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
4
16
|
import classNames from 'classnames';
|
|
5
17
|
import { PREFIX_CLS as prefixCls } from '../../../constants';
|
|
18
|
+
import DropMenu from '../DropMenu';
|
|
19
|
+
import { useDebounce } from '@lemon-fe/hooks';
|
|
6
20
|
export default function TabBar(props) {
|
|
7
21
|
var tabs = props.tabs,
|
|
8
22
|
active = props.active,
|
|
9
23
|
_onClick = props.onClick,
|
|
10
24
|
onClose = props.onClose;
|
|
11
25
|
|
|
26
|
+
var _useState = useState(false),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
hideTabs = _useState2[0],
|
|
29
|
+
setHideTabs = _useState2[1];
|
|
30
|
+
|
|
31
|
+
var tabRef = useRef(null);
|
|
32
|
+
|
|
12
33
|
var handleClose = function handleClose(e, index) {
|
|
13
34
|
e.stopPropagation();
|
|
14
35
|
onClose(index);
|
|
15
36
|
};
|
|
16
37
|
|
|
38
|
+
var handleDropMenu = useDebounce(function () {
|
|
39
|
+
var _tabRef$current, _tabRef$current$query;
|
|
40
|
+
|
|
41
|
+
if (tabRef.current === null) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
var barWidth = (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.offsetWidth;
|
|
46
|
+
var iconWidth = (_tabRef$current$query = tabRef.current.querySelector(".".concat(prefixCls, "-nav-tabs-layout-icon"))) === null || _tabRef$current$query === void 0 ? void 0 : _tabRef$current$query.offsetWidth;
|
|
47
|
+
var minWidth = 66 * tabs.length + 32;
|
|
48
|
+
var width = barWidth - (iconWidth || 0);
|
|
49
|
+
|
|
50
|
+
if (tabs.length && minWidth >= width) {
|
|
51
|
+
setHideTabs(true);
|
|
52
|
+
} else if (minWidth < width) {
|
|
53
|
+
setHideTabs(false);
|
|
54
|
+
}
|
|
55
|
+
}, 300);
|
|
56
|
+
useEffect(function () {
|
|
57
|
+
window.addEventListener('resize', handleDropMenu);
|
|
58
|
+
return function () {
|
|
59
|
+
window.removeEventListener('resize', handleDropMenu);
|
|
60
|
+
};
|
|
61
|
+
}, []);
|
|
62
|
+
useEffect(function () {
|
|
63
|
+
handleDropMenu();
|
|
64
|
+
}, [tabs, active]);
|
|
17
65
|
return /*#__PURE__*/React.createElement("div", {
|
|
66
|
+
className: "".concat(prefixCls, "-nav-tabs-layout"),
|
|
67
|
+
ref: tabRef
|
|
68
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
18
69
|
className: "".concat(prefixCls, "-nav-tabs")
|
|
19
70
|
}, tabs.map(function (item, index) {
|
|
71
|
+
var _classNames;
|
|
72
|
+
|
|
20
73
|
var key = item.title;
|
|
21
74
|
return /*#__PURE__*/React.createElement("div", {
|
|
22
|
-
className: classNames("".concat(prefixCls, "-nav-tab"),
|
|
75
|
+
className: classNames("".concat(prefixCls, "-nav-tab"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-nav-tab-active"), index === active), _defineProperty(_classNames, "".concat(prefixCls, "-nav-tabs-end"), index === tabs.length - 1), _classNames)),
|
|
23
76
|
onClick: function onClick() {
|
|
24
77
|
return _onClick(index);
|
|
25
78
|
},
|
|
@@ -51,5 +104,13 @@ export default function TabBar(props) {
|
|
|
51
104
|
d: "M7.74994595,2.75007682 L7.74994595,11.2500768 C7.74994595,11.6642904 7.41415952,12.0000768 6.99994595,12.0000768 C6.58573239,12.0000768 6.24994595,11.6642904 6.24994595,11.2500768 L6.24994595,2.75007682 C6.24994595,2.33586325 6.58573239,2.00007682 6.99994595,2.00007682 C7.41415952,2.00007682 7.74994595,2.33586325 7.74994595,2.75007682 Z",
|
|
52
105
|
transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999946, 7.000077) rotate(-45.000000) translate(-6.999946, -7.000077)"
|
|
53
106
|
}))))))));
|
|
54
|
-
}))
|
|
107
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
108
|
+
className: "".concat(prefixCls, "-nav-tabs-layout-icon")
|
|
109
|
+
}, /*#__PURE__*/React.createElement(DropMenu, {
|
|
110
|
+
visible: true,
|
|
111
|
+
tabs: tabs,
|
|
112
|
+
active: active,
|
|
113
|
+
onClick: _onClick,
|
|
114
|
+
onClose: onClose
|
|
115
|
+
})));
|
|
55
116
|
}
|
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
.@{prefixCls}-nav-tabs-layout {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-grow: 1;
|
|
5
|
+
flex-wrap: nowrap;
|
|
6
|
+
align-items: flex-end;
|
|
7
|
+
justify-content: space-between;
|
|
8
|
+
overflow-x: hidden;
|
|
9
|
+
|
|
10
|
+
&-icon {
|
|
11
|
+
align-self: center;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
1
15
|
.@{prefixCls}-nav-tabs {
|
|
2
16
|
position: relative;
|
|
3
17
|
display: flex;
|
|
@@ -7,6 +7,9 @@ interface Props<T> {
|
|
|
7
7
|
onTabClick: (index: number) => void;
|
|
8
8
|
onTabClose: (index: number) => void;
|
|
9
9
|
onMenuClick: (menu: MenuItem) => void;
|
|
10
|
+
onRefresh: () => void;
|
|
11
|
+
onCloseOther: () => void;
|
|
12
|
+
onCloseAll: () => void;
|
|
10
13
|
right?: ReactNode;
|
|
11
14
|
children?: ReactNode;
|
|
12
15
|
logo?: string | false | ReactElement;
|
|
@@ -1,21 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
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; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
1
|
+
import React from 'react';
|
|
14
2
|
import TabBar from './components/TabBar';
|
|
15
3
|
import Menu from './components/Menu';
|
|
16
4
|
import { PREFIX_CLS as prefixCls } from '../constants';
|
|
17
|
-
import
|
|
18
|
-
import { useDebounce } from '@lemon-fe/hooks';
|
|
5
|
+
import RefreshButton from './components/RefreshButton';
|
|
19
6
|
export default function MainFramework(props) {
|
|
20
7
|
var tabs = props.tabs,
|
|
21
8
|
active = props.active,
|
|
@@ -25,49 +12,17 @@ export default function MainFramework(props) {
|
|
|
25
12
|
onTabClick = props.onTabClick,
|
|
26
13
|
onMenuClick = props.onMenuClick,
|
|
27
14
|
onTabClose = props.onTabClose,
|
|
15
|
+
onRefresh = props.onRefresh,
|
|
16
|
+
onCloseOther = props.onCloseOther,
|
|
17
|
+
onCloseAll = props.onCloseAll,
|
|
28
18
|
logo = props.logo,
|
|
29
19
|
title = props.title,
|
|
30
20
|
favorites = props.favorites,
|
|
31
21
|
onFavoritesChange = props.onFavoritesChange;
|
|
32
|
-
|
|
33
|
-
var _useState = useState(false),
|
|
34
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
35
|
-
hideTabs = _useState2[0],
|
|
36
|
-
setHideTabs = _useState2[1];
|
|
37
|
-
|
|
38
|
-
var tabRef = useRef(null);
|
|
39
|
-
var handleDownBar = useDebounce(function () {
|
|
40
|
-
var _tabRef$current$query, _tabRef$current$query2;
|
|
41
|
-
|
|
42
|
-
if (tabRef.current === null) {
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
var leftLength = (_tabRef$current$query = tabRef.current.querySelector(".".concat(prefixCls, "-nav-left"))) === null || _tabRef$current$query === void 0 ? void 0 : _tabRef$current$query.offsetWidth;
|
|
47
|
-
var rightLength = (_tabRef$current$query2 = tabRef.current.querySelector(".".concat(prefixCls, "-nav-right"))) === null || _tabRef$current$query2 === void 0 ? void 0 : _tabRef$current$query2.offsetWidth;
|
|
48
|
-
var minWidth = 66 * tabs.length + 32;
|
|
49
|
-
var width = window.innerWidth - (leftLength || 0) - (rightLength || 0);
|
|
50
|
-
|
|
51
|
-
if (tabs.length && minWidth >= width) {
|
|
52
|
-
setHideTabs(true);
|
|
53
|
-
} else if (minWidth < width) {
|
|
54
|
-
setHideTabs(false);
|
|
55
|
-
}
|
|
56
|
-
}, 300);
|
|
57
|
-
useEffect(function () {
|
|
58
|
-
window.addEventListener('resize', handleDownBar);
|
|
59
|
-
return function () {
|
|
60
|
-
window.removeEventListener('resize', handleDownBar);
|
|
61
|
-
};
|
|
62
|
-
}, []);
|
|
63
|
-
useEffect(function () {
|
|
64
|
-
handleDownBar();
|
|
65
|
-
}, [tabs, active]);
|
|
66
22
|
return /*#__PURE__*/React.createElement("div", {
|
|
67
23
|
className: "".concat(prefixCls, "-main")
|
|
68
24
|
}, /*#__PURE__*/React.createElement("div", {
|
|
69
|
-
className: "".concat(prefixCls, "-nav")
|
|
70
|
-
ref: tabRef
|
|
25
|
+
className: "".concat(prefixCls, "-nav")
|
|
71
26
|
}, /*#__PURE__*/React.createElement("div", {
|
|
72
27
|
className: "".concat(prefixCls, "-nav-left")
|
|
73
28
|
}, logo !== false && /*#__PURE__*/React.createElement("div", {
|
|
@@ -92,12 +47,12 @@ export default function MainFramework(props) {
|
|
|
92
47
|
onClose: onTabClose
|
|
93
48
|
}), /*#__PURE__*/React.createElement("div", {
|
|
94
49
|
className: "".concat(prefixCls, "-nav-right")
|
|
95
|
-
}, /*#__PURE__*/React.createElement(
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
50
|
+
}, /*#__PURE__*/React.createElement(RefreshButton, {
|
|
51
|
+
onRefresh: onRefresh,
|
|
52
|
+
onCloseAll: onCloseAll,
|
|
53
|
+
onCloseOther: onCloseOther
|
|
54
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
55
|
+
className: "".concat(prefixCls, "-nav-divider")
|
|
101
56
|
}), right)), /*#__PURE__*/React.createElement("div", {
|
|
102
57
|
className: "".concat(prefixCls, "-body")
|
|
103
58
|
}, /*#__PURE__*/React.createElement(Menu, {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@import './components/Menu/index.less';
|
|
2
2
|
@import './components/TabBar/index.less';
|
|
3
|
-
@import './components/
|
|
3
|
+
@import './components/DropMenu/index.less';
|
|
4
|
+
@import './components/RefreshButton/index.less';
|
|
4
5
|
|
|
5
6
|
.@{prefixCls}-main {
|
|
6
7
|
display: flex;
|
|
@@ -57,8 +58,14 @@
|
|
|
57
58
|
|
|
58
59
|
&-right {
|
|
59
60
|
flex-shrink: 0;
|
|
60
|
-
|
|
61
|
-
|
|
61
|
+
flex-wrap: nowrap;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&-divider {
|
|
65
|
+
width: 1px;
|
|
66
|
+
height: 14px;
|
|
67
|
+
margin: 0 9px;
|
|
68
|
+
background: #c4c4c4;
|
|
62
69
|
}
|
|
63
70
|
}
|
|
64
71
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lemon-fe/components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.31",
|
|
4
4
|
"description": "> TODO: description",
|
|
5
5
|
"author": "鲁盛杰 <lusj@cnlemon.net>",
|
|
6
6
|
"homepage": "",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"registry": "https://registry.npmjs.org"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@lemon-fe/hooks": "^0.0.
|
|
19
|
+
"@lemon-fe/hooks": "^0.0.31",
|
|
20
20
|
"antd": "^4.17.0",
|
|
21
21
|
"classnames": "^2.2.6",
|
|
22
22
|
"lodash": "^4.17.21",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"@types/lodash": "^4.14.179",
|
|
40
40
|
"@types/react-resizable": "^1.7.4"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "b6ade1c9ef71ea127920c62080bfddee624dcb54"
|
|
43
43
|
}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
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; }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import classNames from 'classnames';
|
|
5
|
-
import { PREFIX_CLS as prefixCls } from '../../../constants';
|
|
6
|
-
import { Dropdown } from 'antd';
|
|
7
|
-
export default function DownBar(props) {
|
|
8
|
-
var tabs = props.tabs,
|
|
9
|
-
active = props.active,
|
|
10
|
-
_props$visible = props.visible,
|
|
11
|
-
visible = _props$visible === void 0 ? false : _props$visible,
|
|
12
|
-
_onClick = props.onClick,
|
|
13
|
-
onClose = props.onClose;
|
|
14
|
-
|
|
15
|
-
var handleClose = function handleClose(e, index) {
|
|
16
|
-
e.stopPropagation();
|
|
17
|
-
onClose(index);
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
return /*#__PURE__*/React.createElement(Dropdown, {
|
|
21
|
-
overlayStyle: visible ? {
|
|
22
|
-
visibility: 'visible'
|
|
23
|
-
} : {
|
|
24
|
-
visibility: 'hidden'
|
|
25
|
-
},
|
|
26
|
-
placement: "bottomRight",
|
|
27
|
-
overlay: /*#__PURE__*/React.createElement("div", {
|
|
28
|
-
className: "".concat(prefixCls, "-down-tabs")
|
|
29
|
-
}, tabs.map(function (item, index) {
|
|
30
|
-
var key = item.title;
|
|
31
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
32
|
-
className: classNames("".concat(prefixCls, "-down-tab"), _defineProperty({}, "".concat(prefixCls, "-down-tab-active"), index === active)),
|
|
33
|
-
onClick: function onClick() {
|
|
34
|
-
return _onClick(index);
|
|
35
|
-
},
|
|
36
|
-
key: key
|
|
37
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
38
|
-
className: "".concat(prefixCls, "-down-tab-title")
|
|
39
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
40
|
-
className: "".concat(prefixCls, "-down-tab-inner")
|
|
41
|
-
}, item.title), item.closable !== false && /*#__PURE__*/React.createElement("div", {
|
|
42
|
-
className: "".concat(prefixCls, "-down-tab-close"),
|
|
43
|
-
onClick: function onClick(e) {
|
|
44
|
-
return handleClose(e, index);
|
|
45
|
-
}
|
|
46
|
-
}, /*#__PURE__*/React.createElement("svg", {
|
|
47
|
-
width: "20",
|
|
48
|
-
height: "20",
|
|
49
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
50
|
-
}, /*#__PURE__*/React.createElement("g", {
|
|
51
|
-
fill: "none",
|
|
52
|
-
fillRule: "evenodd"
|
|
53
|
-
}, /*#__PURE__*/React.createElement("g", {
|
|
54
|
-
fill: "currentColor"
|
|
55
|
-
}, /*#__PURE__*/React.createElement("g", {
|
|
56
|
-
fillRule: "nonzero"
|
|
57
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
58
|
-
d: "M7.74992318,2.75006802 L7.74992318,11.250068 C7.74992318,11.6642816 7.41413675,12.000068 6.99992318,12.000068 C6.58570962,12.000068 6.24992318,11.6642816 6.24992318,11.250068 L6.24992318,2.75006802 C6.24992318,2.33585446 6.58570962,2.00006802 6.99992318,2.00006802 C7.41413675,2.00006802 7.74992318,2.33585446 7.74992318,2.75006802 Z",
|
|
59
|
-
transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999923, 7.000068) rotate(45.000000) translate(-6.999923, -7.000068)"
|
|
60
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
61
|
-
d: "M7.74994595,2.75007682 L7.74994595,11.2500768 C7.74994595,11.6642904 7.41415952,12.0000768 6.99994595,12.0000768 C6.58573239,12.0000768 6.24994595,11.6642904 6.24994595,11.2500768 L6.24994595,2.75007682 C6.24994595,2.33586325 6.58573239,2.00007682 6.99994595,2.00007682 C7.41415952,2.00007682 7.74994595,2.33586325 7.74994595,2.75007682 Z",
|
|
62
|
-
transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999946, 7.000077) rotate(-45.000000) translate(-6.999946, -7.000077)"
|
|
63
|
-
}))))))));
|
|
64
|
-
}))
|
|
65
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
66
|
-
className: "".concat(prefixCls, "-down-tab-icon"),
|
|
67
|
-
style: visible ? {
|
|
68
|
-
visibility: 'visible'
|
|
69
|
-
} : {
|
|
70
|
-
visibility: 'hidden'
|
|
71
|
-
}
|
|
72
|
-
}, /*#__PURE__*/React.createElement("svg", {
|
|
73
|
-
width: "14",
|
|
74
|
-
height: "14",
|
|
75
|
-
viewBox: "0 0 16 16",
|
|
76
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
77
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
78
|
-
d: "M4.707 5.293L3.293 6.707 8 11.414l4.707-4.707-1.414-1.414L8 8.586z",
|
|
79
|
-
color: "#6D6D6D",
|
|
80
|
-
opacity: ".9",
|
|
81
|
-
fill: "currentColor",
|
|
82
|
-
fillRule: "nonzero"
|
|
83
|
-
}))));
|
|
84
|
-
}
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
.@{prefixCls}-down-tabs {
|
|
2
|
-
position: relative;
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: column;
|
|
5
|
-
align-items: flex-start;
|
|
6
|
-
width: 120px;
|
|
7
|
-
overflow-x: hidden;
|
|
8
|
-
background-color: #fcfcfc;
|
|
9
|
-
border-radius: 8px;
|
|
10
|
-
box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
|
|
11
|
-
0px 6px 16px -8px rgba(0, 0, 0, 0.08);
|
|
12
|
-
backdrop-filter: blur(13px);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.@{prefixCls}-down-tab {
|
|
16
|
-
position: relative;
|
|
17
|
-
box-sizing: content-box;
|
|
18
|
-
width: 100%;
|
|
19
|
-
height: 43px;
|
|
20
|
-
cursor: pointer;
|
|
21
|
-
|
|
22
|
-
&-title {
|
|
23
|
-
position: relative;
|
|
24
|
-
z-index: 4;
|
|
25
|
-
display: flex;
|
|
26
|
-
flex-wrap: nowrap;
|
|
27
|
-
align-items: center;
|
|
28
|
-
padding: 0 12px;
|
|
29
|
-
transition: background-color 0.2s;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
&:hover:not(&-active) &-title,
|
|
33
|
-
&:hover:not(&-active)::after {
|
|
34
|
-
background-color: #f2f2f2;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&-active &-title,
|
|
38
|
-
&-active::after {
|
|
39
|
-
background-color: #eeeeee;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
&:hover::after {
|
|
43
|
-
z-index: 2;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&-active::after {
|
|
47
|
-
z-index: 3;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
&-active::before,
|
|
51
|
-
&-active + &::before,
|
|
52
|
-
&:hover::before,
|
|
53
|
-
&:hover + &::before {
|
|
54
|
-
opacity: 0;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
&-active &-inner {
|
|
58
|
-
opacity: 1;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
&-inner {
|
|
62
|
-
flex: 1;
|
|
63
|
-
min-width: 0;
|
|
64
|
-
overflow: hidden;
|
|
65
|
-
color: #333;
|
|
66
|
-
font-size: 14px;
|
|
67
|
-
line-height: 43px;
|
|
68
|
-
white-space: nowrap;
|
|
69
|
-
text-overflow: ellipsis;
|
|
70
|
-
opacity: 0.7;
|
|
71
|
-
|
|
72
|
-
&::after {
|
|
73
|
-
display: inline-block;
|
|
74
|
-
width: 16px;
|
|
75
|
-
content: ' ';
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
&-close {
|
|
80
|
-
display: none;
|
|
81
|
-
}
|
|
82
|
-
&:hover &-close {
|
|
83
|
-
display: block;
|
|
84
|
-
width: 14px;
|
|
85
|
-
height: 14px;
|
|
86
|
-
color: #c4c4c4;
|
|
87
|
-
line-height: 14px;
|
|
88
|
-
text-align: center;
|
|
89
|
-
border-radius: 50%;
|
|
90
|
-
&:hover {
|
|
91
|
-
color: #f2f2f2;
|
|
92
|
-
background-color: #c1c1c1;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.@{prefixCls}-down-tab-icon {
|
|
98
|
-
display: flex;
|
|
99
|
-
align-items: center;
|
|
100
|
-
justify-content: center;
|
|
101
|
-
width: 34px;
|
|
102
|
-
height: 34px;
|
|
103
|
-
border-radius: 50%;
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
&:hover {
|
|
106
|
-
background-color: #eeeeee;
|
|
107
|
-
}
|
|
108
|
-
}
|