@zat-design/sisyphus-react 3.13.16-beta.8 → 3.13.18-beta.1
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/dist/index.esm.css +103 -0
- package/dist/less.esm.css +103 -0
- package/es/ProLayout/components/ProCollapse/PropTypes.d.ts +8 -3
- package/es/ProLayout/components/ProCollapse/index.js +27 -3
- package/es/ProLayout/components/ProCollapse/style/index.less +137 -0
- package/lib/ProLayout/components/ProCollapse/PropTypes.d.ts +8 -3
- package/lib/ProLayout/components/ProCollapse/index.js +27 -3
- package/lib/ProLayout/components/ProCollapse/style/index.less +137 -0
- package/package.json +2 -2
package/dist/index.esm.css
CHANGED
|
@@ -825,6 +825,109 @@
|
|
|
825
825
|
font-weight: 500 !important;
|
|
826
826
|
font-size: var(--zaui-font-size, 14px);
|
|
827
827
|
}
|
|
828
|
+
.pro-collapse.pro-collapse-level3 {
|
|
829
|
+
margin-bottom: var(--zaui-space-size-md, 16px);
|
|
830
|
+
}
|
|
831
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 {
|
|
832
|
+
margin-top: 8px !important;
|
|
833
|
+
}
|
|
834
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .pro-collapse-panel {
|
|
835
|
+
border: none !important;
|
|
836
|
+
}
|
|
837
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-header {
|
|
838
|
+
height: auto !important;
|
|
839
|
+
background: #fff !important;
|
|
840
|
+
}
|
|
841
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-header:hover {
|
|
842
|
+
background: #fff !important;
|
|
843
|
+
}
|
|
844
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-header .ant-collapse-header-text:before {
|
|
845
|
+
display: block;
|
|
846
|
+
}
|
|
847
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-header .ant-collapse-extra .extra-info {
|
|
848
|
+
font-size: var(--zaui-font-size, 14px);
|
|
849
|
+
color: var(--zaui-text, #343434);
|
|
850
|
+
}
|
|
851
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-content .ant-collapse-content-box .pro-collapse-content {
|
|
852
|
+
padding: var(--zaui-space-size-sm, 8px) 0 !important;
|
|
853
|
+
}
|
|
854
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-item-active {
|
|
855
|
+
margin-bottom: 0 !important;
|
|
856
|
+
}
|
|
857
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-panel {
|
|
858
|
+
border: 1px solid #d9d9d9;
|
|
859
|
+
margin-bottom: var(--zaui-space-size-md, 16px);
|
|
860
|
+
overflow: hidden;
|
|
861
|
+
border-radius: 8px !important;
|
|
862
|
+
}
|
|
863
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-panel:last-child {
|
|
864
|
+
margin-bottom: 0;
|
|
865
|
+
border-bottom: 1px solid #d9d9d9;
|
|
866
|
+
}
|
|
867
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-header {
|
|
868
|
+
height: 48px !important;
|
|
869
|
+
padding: 0 var(--zaui-space-size-md, 16px) !important;
|
|
870
|
+
background: #F8F8F8 !important;
|
|
871
|
+
border-radius: 8px;
|
|
872
|
+
-webkit-box-align: center !important;
|
|
873
|
+
-webkit-align-items: center !important;
|
|
874
|
+
-ms-flex-align: center !important;
|
|
875
|
+
align-items: center !important;
|
|
876
|
+
-webkit-box-pack: center !important;
|
|
877
|
+
-webkit-justify-content: center !important;
|
|
878
|
+
-ms-flex-pack: center !important;
|
|
879
|
+
justify-content: center !important;
|
|
880
|
+
display: -webkit-box !important;
|
|
881
|
+
display: -webkit-flex !important;
|
|
882
|
+
display: -ms-flexbox !important;
|
|
883
|
+
display: flex !important;
|
|
884
|
+
margin: 0 !important;
|
|
885
|
+
border-bottom: none !important;
|
|
886
|
+
}
|
|
887
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-header .ant-collapse-header-text {
|
|
888
|
+
font-size: var(--zaui-font-size, 14px);
|
|
889
|
+
font-weight: 500;
|
|
890
|
+
color: var(--zaui-text, #343434);
|
|
891
|
+
padding-left: 16px !important;
|
|
892
|
+
}
|
|
893
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-header .ant-collapse-header-text:before {
|
|
894
|
+
display: none;
|
|
895
|
+
}
|
|
896
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-header .ant-collapse-extra .extra-info {
|
|
897
|
+
font-size: var(--zaui-font-size, 14px);
|
|
898
|
+
color: var(--zaui-text, #343434);
|
|
899
|
+
}
|
|
900
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-content .ant-collapse-content-box .pro-collapse-content {
|
|
901
|
+
padding: var(--zaui-space-size-md, 16px) !important;
|
|
902
|
+
background: var(--zaui-base-bg, #ffffff);
|
|
903
|
+
}
|
|
904
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-collapse .ant-collapse-expand-icon {
|
|
905
|
+
display: block !important;
|
|
906
|
+
color: #999;
|
|
907
|
+
}
|
|
908
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-collapse .ant-collapse-header {
|
|
909
|
+
cursor: pointer;
|
|
910
|
+
padding: 0 !important;
|
|
911
|
+
}
|
|
912
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-collapse .ant-collapse-header:hover {
|
|
913
|
+
background: #f0f0f0;
|
|
914
|
+
}
|
|
915
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-no-collapse .ant-collapse-expand-icon {
|
|
916
|
+
display: none !important;
|
|
917
|
+
}
|
|
918
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-no-collapse .ant-collapse-header {
|
|
919
|
+
cursor: default;
|
|
920
|
+
}
|
|
921
|
+
.pro-collapse.pro-collapse-level3.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
|
|
922
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
|
|
923
|
+
color: var(--zaui-text, #343434);
|
|
924
|
+
cursor: default;
|
|
925
|
+
background: #F8F8F8 !important;
|
|
926
|
+
}
|
|
927
|
+
.pro-collapse .pro-collapse-content:has(> .pro-collapse-level3):not(:has(> .pro-collapse-level2)) {
|
|
928
|
+
padding: var(--zaui-space-size-md, 16px) !important;
|
|
929
|
+
padding-right: 0 !important;
|
|
930
|
+
}
|
|
828
931
|
.pro-footer {
|
|
829
932
|
position: fixed;
|
|
830
933
|
right: 0;
|
package/dist/less.esm.css
CHANGED
|
@@ -825,6 +825,109 @@
|
|
|
825
825
|
font-weight: 500 !important;
|
|
826
826
|
font-size: var(--zaui-font-size, 14px);
|
|
827
827
|
}
|
|
828
|
+
.pro-collapse.pro-collapse-level3 {
|
|
829
|
+
margin-bottom: var(--zaui-space-size-md, 16px);
|
|
830
|
+
}
|
|
831
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 {
|
|
832
|
+
margin-top: 8px !important;
|
|
833
|
+
}
|
|
834
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .pro-collapse-panel {
|
|
835
|
+
border: none !important;
|
|
836
|
+
}
|
|
837
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-header {
|
|
838
|
+
height: auto !important;
|
|
839
|
+
background: #fff !important;
|
|
840
|
+
}
|
|
841
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-header:hover {
|
|
842
|
+
background: #fff !important;
|
|
843
|
+
}
|
|
844
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-header .ant-collapse-header-text:before {
|
|
845
|
+
display: block;
|
|
846
|
+
}
|
|
847
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-header .ant-collapse-extra .extra-info {
|
|
848
|
+
font-size: var(--zaui-font-size, 14px);
|
|
849
|
+
color: var(--zaui-text, #343434);
|
|
850
|
+
}
|
|
851
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level2 .ant-collapse-content .ant-collapse-content-box .pro-collapse-content {
|
|
852
|
+
padding: var(--zaui-space-size-sm, 8px) 0 !important;
|
|
853
|
+
}
|
|
854
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-item-active {
|
|
855
|
+
margin-bottom: 0 !important;
|
|
856
|
+
}
|
|
857
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-panel {
|
|
858
|
+
border: 1px solid #d9d9d9;
|
|
859
|
+
margin-bottom: var(--zaui-space-size-md, 16px);
|
|
860
|
+
overflow: hidden;
|
|
861
|
+
border-radius: 8px !important;
|
|
862
|
+
}
|
|
863
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-panel:last-child {
|
|
864
|
+
margin-bottom: 0;
|
|
865
|
+
border-bottom: 1px solid #d9d9d9;
|
|
866
|
+
}
|
|
867
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-header {
|
|
868
|
+
height: 48px !important;
|
|
869
|
+
padding: 0 var(--zaui-space-size-md, 16px) !important;
|
|
870
|
+
background: #F8F8F8 !important;
|
|
871
|
+
border-radius: 8px;
|
|
872
|
+
-webkit-box-align: center !important;
|
|
873
|
+
-webkit-align-items: center !important;
|
|
874
|
+
-ms-flex-align: center !important;
|
|
875
|
+
align-items: center !important;
|
|
876
|
+
-webkit-box-pack: center !important;
|
|
877
|
+
-webkit-justify-content: center !important;
|
|
878
|
+
-ms-flex-pack: center !important;
|
|
879
|
+
justify-content: center !important;
|
|
880
|
+
display: -webkit-box !important;
|
|
881
|
+
display: -webkit-flex !important;
|
|
882
|
+
display: -ms-flexbox !important;
|
|
883
|
+
display: flex !important;
|
|
884
|
+
margin: 0 !important;
|
|
885
|
+
border-bottom: none !important;
|
|
886
|
+
}
|
|
887
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-header .ant-collapse-header-text {
|
|
888
|
+
font-size: var(--zaui-font-size, 14px);
|
|
889
|
+
font-weight: 500;
|
|
890
|
+
color: var(--zaui-text, #343434);
|
|
891
|
+
padding-left: 16px !important;
|
|
892
|
+
}
|
|
893
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-header .ant-collapse-header-text:before {
|
|
894
|
+
display: none;
|
|
895
|
+
}
|
|
896
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-header .ant-collapse-extra .extra-info {
|
|
897
|
+
font-size: var(--zaui-font-size, 14px);
|
|
898
|
+
color: var(--zaui-text, #343434);
|
|
899
|
+
}
|
|
900
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse-content .ant-collapse-content-box .pro-collapse-content {
|
|
901
|
+
padding: var(--zaui-space-size-md, 16px) !important;
|
|
902
|
+
background: var(--zaui-base-bg, #ffffff);
|
|
903
|
+
}
|
|
904
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-collapse .ant-collapse-expand-icon {
|
|
905
|
+
display: block !important;
|
|
906
|
+
color: #999;
|
|
907
|
+
}
|
|
908
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-collapse .ant-collapse-header {
|
|
909
|
+
cursor: pointer;
|
|
910
|
+
padding: 0 !important;
|
|
911
|
+
}
|
|
912
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-collapse .ant-collapse-header:hover {
|
|
913
|
+
background: #f0f0f0;
|
|
914
|
+
}
|
|
915
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-no-collapse .ant-collapse-expand-icon {
|
|
916
|
+
display: none !important;
|
|
917
|
+
}
|
|
918
|
+
.pro-collapse.pro-collapse-level3 .pro-collapse-level3-no-collapse .ant-collapse-header {
|
|
919
|
+
cursor: default;
|
|
920
|
+
}
|
|
921
|
+
.pro-collapse.pro-collapse-level3.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
|
|
922
|
+
.pro-collapse.pro-collapse-level3 .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
|
|
923
|
+
color: var(--zaui-text, #343434);
|
|
924
|
+
cursor: default;
|
|
925
|
+
background: #F8F8F8 !important;
|
|
926
|
+
}
|
|
927
|
+
.pro-collapse .pro-collapse-content:has(> .pro-collapse-level3):not(:has(> .pro-collapse-level2)) {
|
|
928
|
+
padding: var(--zaui-space-size-md, 16px) !important;
|
|
929
|
+
padding-right: 0 !important;
|
|
930
|
+
}
|
|
828
931
|
.pro-footer {
|
|
829
932
|
position: fixed;
|
|
830
933
|
right: 0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
import { CollapseProps, CollapsePanelProps } from 'antd/es/collapse';
|
|
3
|
-
export type levelType = '1' | '2';
|
|
3
|
+
export type levelType = '1' | '2' | '3';
|
|
4
4
|
export interface TitleListType {
|
|
5
5
|
/**
|
|
6
6
|
* @description 描述的标题
|
|
@@ -28,12 +28,12 @@ export interface ProCollapseType {
|
|
|
28
28
|
* @description 自动适应窗口大小
|
|
29
29
|
* @default -
|
|
30
30
|
*/
|
|
31
|
-
autoHeight?:
|
|
31
|
+
autoHeight?: boolean;
|
|
32
32
|
/**
|
|
33
33
|
* @description 标题前图标
|
|
34
34
|
* @default -
|
|
35
35
|
*/
|
|
36
|
-
icon?: React.ReactNode |
|
|
36
|
+
icon?: React.ReactNode | boolean;
|
|
37
37
|
/**
|
|
38
38
|
* @description 折叠头部多个标题
|
|
39
39
|
* @default []
|
|
@@ -59,6 +59,11 @@ export interface ProCollapseType {
|
|
|
59
59
|
* @default false
|
|
60
60
|
*/
|
|
61
61
|
towCollapse?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* @description 三级折叠是否带收起
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
66
|
+
threeCollapse?: boolean;
|
|
62
67
|
/**
|
|
63
68
|
* @description 标题右侧扩展信息
|
|
64
69
|
* @default -
|
|
@@ -6,7 +6,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
6
6
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
7
7
|
import "antd/es/collapse/style";
|
|
8
8
|
import _Collapse from "antd/es/collapse";
|
|
9
|
-
import _isBoolean from "lodash/isBoolean";
|
|
10
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
10
|
import { useLayoutEffect } from 'react';
|
|
12
11
|
import { CaretRightOutlined } from '@ant-design/icons';
|
|
@@ -24,6 +23,8 @@ var ProCollapse = function ProCollapse(props) {
|
|
|
24
23
|
level = _props$level === void 0 ? '1' : _props$level,
|
|
25
24
|
_props$towCollapse = props.towCollapse,
|
|
26
25
|
towCollapse = _props$towCollapse === void 0 ? false : _props$towCollapse,
|
|
26
|
+
_props$threeCollapse = props.threeCollapse,
|
|
27
|
+
threeCollapse = _props$threeCollapse === void 0 ? false : _props$threeCollapse,
|
|
27
28
|
titleList = props.titleList,
|
|
28
29
|
extra = props.extra,
|
|
29
30
|
_props$column = props.column,
|
|
@@ -49,9 +50,10 @@ var ProCollapse = function ProCollapse(props) {
|
|
|
49
50
|
var cls = classNames(_defineProperty({
|
|
50
51
|
'pro-collapse': true,
|
|
51
52
|
'pro-collapse-level2': level === '2',
|
|
53
|
+
'pro-collapse-level3': level === '3',
|
|
52
54
|
'pro-collapse-list': titleList === null || titleList === void 0 ? void 0 : titleList.length,
|
|
53
55
|
'pro-collapse-no-title': !title,
|
|
54
|
-
'pro-collapse-no-level1-title': !title && level !== '2'
|
|
56
|
+
'pro-collapse-no-level1-title': !title && level !== '2' && level !== '3'
|
|
55
57
|
}, "".concat(className), className));
|
|
56
58
|
var content = _jsx("div", {
|
|
57
59
|
className: "pro-collapse-content",
|
|
@@ -82,13 +84,35 @@ var ProCollapse = function ProCollapse(props) {
|
|
|
82
84
|
children: content
|
|
83
85
|
}), "1");
|
|
84
86
|
}
|
|
87
|
+
if (level === '3') {
|
|
88
|
+
var level3Panel = classNames({
|
|
89
|
+
'pro-collapse-level3-collapse': threeCollapse,
|
|
90
|
+
'pro-collapse-level3-no-collapse': !threeCollapse,
|
|
91
|
+
'pro-collapse-panel': true
|
|
92
|
+
});
|
|
93
|
+
var _hasCollapse = {};
|
|
94
|
+
if (!threeCollapse) {
|
|
95
|
+
_hasCollapse.collapsible = 'disabled';
|
|
96
|
+
}
|
|
97
|
+
return _jsx(Panel, _objectSpread(_objectSpread(_objectSpread({
|
|
98
|
+
header: _title,
|
|
99
|
+
className: level3Panel,
|
|
100
|
+
extra: _jsx("div", {
|
|
101
|
+
className: "extra-info",
|
|
102
|
+
children: extra
|
|
103
|
+
}),
|
|
104
|
+
forceRender: true
|
|
105
|
+
}, _hasCollapse), collapsePanelProps), {}, {
|
|
106
|
+
children: content
|
|
107
|
+
}), "1");
|
|
108
|
+
}
|
|
85
109
|
if (icon) {
|
|
86
110
|
_title = _jsxs(_Space, {
|
|
87
111
|
size: 8,
|
|
88
112
|
align: "center",
|
|
89
113
|
children: [_jsx("div", {
|
|
90
114
|
className: "pro-collapse-icon",
|
|
91
|
-
children:
|
|
115
|
+
children: typeof icon === 'boolean' ? _jsx(ProIcon, {
|
|
92
116
|
src: foldSvg,
|
|
93
117
|
actionMap: {
|
|
94
118
|
fill: []
|
|
@@ -201,4 +201,141 @@
|
|
|
201
201
|
}
|
|
202
202
|
|
|
203
203
|
}
|
|
204
|
+
|
|
205
|
+
&.pro-collapse-level3 {
|
|
206
|
+
margin-bottom: var(--zaui-space-size-md, 16px);
|
|
207
|
+
|
|
208
|
+
.pro-collapse-level2{
|
|
209
|
+
margin-top: 8px !important;
|
|
210
|
+
.pro-collapse-panel {
|
|
211
|
+
border: none !important;
|
|
212
|
+
}
|
|
213
|
+
.@{ant-prefix}-collapse-header {
|
|
214
|
+
height: auto !important;
|
|
215
|
+
background: #fff !important;
|
|
216
|
+
&:hover{
|
|
217
|
+
background: #fff !important;
|
|
218
|
+
}
|
|
219
|
+
.@{ant-prefix}-collapse-header-text {
|
|
220
|
+
&:before{
|
|
221
|
+
display: block;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.@{ant-prefix}-collapse-extra {
|
|
226
|
+
.extra-info {
|
|
227
|
+
font-size: var(--zaui-font-size, 14px);
|
|
228
|
+
color: var(--zaui-text, #343434);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
.@{ant-prefix}-collapse-content{
|
|
233
|
+
.@{ant-prefix}-collapse-content-box{
|
|
234
|
+
.pro-collapse-content{
|
|
235
|
+
padding: var(--zaui-space-size-sm, 8px) 0 !important;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.@{ant-prefix}-collapse-item-active{
|
|
243
|
+
margin-bottom: 0 !important;
|
|
244
|
+
}
|
|
245
|
+
.pro-collapse-panel {
|
|
246
|
+
border: 1px solid #d9d9d9;
|
|
247
|
+
margin-bottom: var(--zaui-space-size-md, 16px);
|
|
248
|
+
overflow: hidden;
|
|
249
|
+
border-radius: 8px !important;
|
|
250
|
+
|
|
251
|
+
&:last-child {
|
|
252
|
+
margin-bottom: 0;
|
|
253
|
+
border-bottom: 1px solid #d9d9d9;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
.@{ant-prefix}-collapse-header {
|
|
260
|
+
height: 48px !important;
|
|
261
|
+
padding: 0 var(--zaui-space-size-md, 16px) !important;
|
|
262
|
+
background: #F8F8F8 !important;
|
|
263
|
+
border-radius: 8px;
|
|
264
|
+
align-items: center !important;
|
|
265
|
+
justify-content: center !important;
|
|
266
|
+
display: flex !important;
|
|
267
|
+
margin: 0 !important;
|
|
268
|
+
border-bottom: none !important;
|
|
269
|
+
|
|
270
|
+
.@{ant-prefix}-collapse-header-text {
|
|
271
|
+
font-size: var(--zaui-font-size, 14px);
|
|
272
|
+
font-weight: 500;
|
|
273
|
+
color: var(--zaui-text, #343434);
|
|
274
|
+
padding-left: 16px !important;
|
|
275
|
+
&:before{
|
|
276
|
+
display: none;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.@{ant-prefix}-collapse-extra {
|
|
281
|
+
.extra-info {
|
|
282
|
+
font-size: var(--zaui-font-size, 14px);
|
|
283
|
+
color: var(--zaui-text, #343434);
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.@{ant-prefix}-collapse-content {
|
|
289
|
+
.@{ant-prefix}-collapse-content-box {
|
|
290
|
+
.pro-collapse-content {
|
|
291
|
+
padding: var(--zaui-space-size-md, 16px) !important;
|
|
292
|
+
background: var(--zaui-base-bg, #ffffff);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
// 可折叠样式
|
|
298
|
+
.pro-collapse-level3-collapse {
|
|
299
|
+
.@{ant-prefix}-collapse-expand-icon {
|
|
300
|
+
display: block !important;
|
|
301
|
+
color: #999;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.@{ant-prefix}-collapse-header {
|
|
305
|
+
cursor: pointer;
|
|
306
|
+
padding: 0 !important;
|
|
307
|
+
&:hover {
|
|
308
|
+
background: #f0f0f0;
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
// 不可折叠样式
|
|
314
|
+
.pro-collapse-level3-no-collapse {
|
|
315
|
+
.@{ant-prefix}-collapse-expand-icon {
|
|
316
|
+
display: none !important;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.@{ant-prefix}-collapse-header {
|
|
320
|
+
cursor: default;
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
// 禁用折叠时的样式
|
|
325
|
+
&.@{ant-prefix}-collapse .@{ant-prefix}-collapse-item-disabled > .@{ant-prefix}-collapse-header,
|
|
326
|
+
.@{ant-prefix}-collapse
|
|
327
|
+
.@{ant-prefix}-collapse-item-disabled
|
|
328
|
+
> .@{ant-prefix}-collapse-header
|
|
329
|
+
> .arrow {
|
|
330
|
+
color: var(--zaui-text, #343434);
|
|
331
|
+
cursor: default;
|
|
332
|
+
background: #F8F8F8 !important;
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
// 当pro-collapse-content直接包含level3且不包含level2时，添加padding
|
|
336
|
+
.pro-collapse-content:has(> .pro-collapse-level3):not(:has(> .pro-collapse-level2)) {
|
|
337
|
+
padding: var(--zaui-space-size-md, 16px) !important;
|
|
338
|
+
padding-right: 0 !important;
|
|
339
|
+
}
|
|
340
|
+
|
|
204
341
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
import { CollapseProps, CollapsePanelProps } from 'antd/es/collapse';
|
|
3
|
-
export type levelType = '1' | '2';
|
|
3
|
+
export type levelType = '1' | '2' | '3';
|
|
4
4
|
export interface TitleListType {
|
|
5
5
|
/**
|
|
6
6
|
* @description 描述的标题
|
|
@@ -28,12 +28,12 @@ export interface ProCollapseType {
|
|
|
28
28
|
* @description 自动适应窗口大小
|
|
29
29
|
* @default -
|
|
30
30
|
*/
|
|
31
|
-
autoHeight?:
|
|
31
|
+
autoHeight?: boolean;
|
|
32
32
|
/**
|
|
33
33
|
* @description 标题前图标
|
|
34
34
|
* @default -
|
|
35
35
|
*/
|
|
36
|
-
icon?: React.ReactNode |
|
|
36
|
+
icon?: React.ReactNode | boolean;
|
|
37
37
|
/**
|
|
38
38
|
* @description 折叠头部多个标题
|
|
39
39
|
* @default []
|
|
@@ -59,6 +59,11 @@ export interface ProCollapseType {
|
|
|
59
59
|
* @default false
|
|
60
60
|
*/
|
|
61
61
|
towCollapse?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* @description 三级折叠是否带收起
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
66
|
+
threeCollapse?: boolean;
|
|
62
67
|
/**
|
|
63
68
|
* @description 标题右侧扩展信息
|
|
64
69
|
* @default -
|
|
@@ -13,7 +13,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
13
13
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
14
14
|
require("antd/es/collapse/style");
|
|
15
15
|
var _collapse = _interopRequireDefault(require("antd/es/collapse"));
|
|
16
|
-
var _isBoolean2 = _interopRequireDefault(require("lodash/isBoolean"));
|
|
17
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
17
|
var _react = require("react");
|
|
19
18
|
var _icons = require("@ant-design/icons");
|
|
@@ -31,6 +30,8 @@ var ProCollapse = function ProCollapse(props) {
|
|
|
31
30
|
level = _props$level === void 0 ? '1' : _props$level,
|
|
32
31
|
_props$towCollapse = props.towCollapse,
|
|
33
32
|
towCollapse = _props$towCollapse === void 0 ? false : _props$towCollapse,
|
|
33
|
+
_props$threeCollapse = props.threeCollapse,
|
|
34
|
+
threeCollapse = _props$threeCollapse === void 0 ? false : _props$threeCollapse,
|
|
34
35
|
titleList = props.titleList,
|
|
35
36
|
extra = props.extra,
|
|
36
37
|
_props$column = props.column,
|
|
@@ -56,9 +57,10 @@ var ProCollapse = function ProCollapse(props) {
|
|
|
56
57
|
var cls = (0, _classnames.default)((0, _defineProperty2.default)({
|
|
57
58
|
'pro-collapse': true,
|
|
58
59
|
'pro-collapse-level2': level === '2',
|
|
60
|
+
'pro-collapse-level3': level === '3',
|
|
59
61
|
'pro-collapse-list': titleList === null || titleList === void 0 ? void 0 : titleList.length,
|
|
60
62
|
'pro-collapse-no-title': !title,
|
|
61
|
-
'pro-collapse-no-level1-title': !title && level !== '2'
|
|
63
|
+
'pro-collapse-no-level1-title': !title && level !== '2' && level !== '3'
|
|
62
64
|
}, "".concat(className), className));
|
|
63
65
|
var content = (0, _jsxRuntime.jsx)("div", {
|
|
64
66
|
className: "pro-collapse-content",
|
|
@@ -89,13 +91,35 @@ var ProCollapse = function ProCollapse(props) {
|
|
|
89
91
|
children: content
|
|
90
92
|
}), "1");
|
|
91
93
|
}
|
|
94
|
+
if (level === '3') {
|
|
95
|
+
var level3Panel = (0, _classnames.default)({
|
|
96
|
+
'pro-collapse-level3-collapse': threeCollapse,
|
|
97
|
+
'pro-collapse-level3-no-collapse': !threeCollapse,
|
|
98
|
+
'pro-collapse-panel': true
|
|
99
|
+
});
|
|
100
|
+
var _hasCollapse = {};
|
|
101
|
+
if (!threeCollapse) {
|
|
102
|
+
_hasCollapse.collapsible = 'disabled';
|
|
103
|
+
}
|
|
104
|
+
return (0, _jsxRuntime.jsx)(Panel, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
|
|
105
|
+
header: _title,
|
|
106
|
+
className: level3Panel,
|
|
107
|
+
extra: (0, _jsxRuntime.jsx)("div", {
|
|
108
|
+
className: "extra-info",
|
|
109
|
+
children: extra
|
|
110
|
+
}),
|
|
111
|
+
forceRender: true
|
|
112
|
+
}, _hasCollapse), collapsePanelProps), {}, {
|
|
113
|
+
children: content
|
|
114
|
+
}), "1");
|
|
115
|
+
}
|
|
92
116
|
if (icon) {
|
|
93
117
|
_title = (0, _jsxRuntime.jsxs)(_space.default, {
|
|
94
118
|
size: 8,
|
|
95
119
|
align: "center",
|
|
96
120
|
children: [(0, _jsxRuntime.jsx)("div", {
|
|
97
121
|
className: "pro-collapse-icon",
|
|
98
|
-
children:
|
|
122
|
+
children: typeof icon === 'boolean' ? (0, _jsxRuntime.jsx)(_index.default, {
|
|
99
123
|
src: _fold.default,
|
|
100
124
|
actionMap: {
|
|
101
125
|
fill: []
|
|
@@ -201,4 +201,141 @@
|
|
|
201
201
|
}
|
|
202
202
|
|
|
203
203
|
}
|
|
204
|
+
|
|
205
|
+
&.pro-collapse-level3 {
|
|
206
|
+
margin-bottom: var(--zaui-space-size-md, 16px);
|
|
207
|
+
|
|
208
|
+
.pro-collapse-level2{
|
|
209
|
+
margin-top: 8px !important;
|
|
210
|
+
.pro-collapse-panel {
|
|
211
|
+
border: none !important;
|
|
212
|
+
}
|
|
213
|
+
.@{ant-prefix}-collapse-header {
|
|
214
|
+
height: auto !important;
|
|
215
|
+
background: #fff !important;
|
|
216
|
+
&:hover{
|
|
217
|
+
background: #fff !important;
|
|
218
|
+
}
|
|
219
|
+
.@{ant-prefix}-collapse-header-text {
|
|
220
|
+
&:before{
|
|
221
|
+
display: block;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.@{ant-prefix}-collapse-extra {
|
|
226
|
+
.extra-info {
|
|
227
|
+
font-size: var(--zaui-font-size, 14px);
|
|
228
|
+
color: var(--zaui-text, #343434);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
.@{ant-prefix}-collapse-content{
|
|
233
|
+
.@{ant-prefix}-collapse-content-box{
|
|
234
|
+
.pro-collapse-content{
|
|
235
|
+
padding: var(--zaui-space-size-sm, 8px) 0 !important;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.@{ant-prefix}-collapse-item-active{
|
|
243
|
+
margin-bottom: 0 !important;
|
|
244
|
+
}
|
|
245
|
+
.pro-collapse-panel {
|
|
246
|
+
border: 1px solid #d9d9d9;
|
|
247
|
+
margin-bottom: var(--zaui-space-size-md, 16px);
|
|
248
|
+
overflow: hidden;
|
|
249
|
+
border-radius: 8px !important;
|
|
250
|
+
|
|
251
|
+
&:last-child {
|
|
252
|
+
margin-bottom: 0;
|
|
253
|
+
border-bottom: 1px solid #d9d9d9;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
.@{ant-prefix}-collapse-header {
|
|
260
|
+
height: 48px !important;
|
|
261
|
+
padding: 0 var(--zaui-space-size-md, 16px) !important;
|
|
262
|
+
background: #F8F8F8 !important;
|
|
263
|
+
border-radius: 8px;
|
|
264
|
+
align-items: center !important;
|
|
265
|
+
justify-content: center !important;
|
|
266
|
+
display: flex !important;
|
|
267
|
+
margin: 0 !important;
|
|
268
|
+
border-bottom: none !important;
|
|
269
|
+
|
|
270
|
+
.@{ant-prefix}-collapse-header-text {
|
|
271
|
+
font-size: var(--zaui-font-size, 14px);
|
|
272
|
+
font-weight: 500;
|
|
273
|
+
color: var(--zaui-text, #343434);
|
|
274
|
+
padding-left: 16px !important;
|
|
275
|
+
&:before{
|
|
276
|
+
display: none;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.@{ant-prefix}-collapse-extra {
|
|
281
|
+
.extra-info {
|
|
282
|
+
font-size: var(--zaui-font-size, 14px);
|
|
283
|
+
color: var(--zaui-text, #343434);
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.@{ant-prefix}-collapse-content {
|
|
289
|
+
.@{ant-prefix}-collapse-content-box {
|
|
290
|
+
.pro-collapse-content {
|
|
291
|
+
padding: var(--zaui-space-size-md, 16px) !important;
|
|
292
|
+
background: var(--zaui-base-bg, #ffffff);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
// 可折叠样式
|
|
298
|
+
.pro-collapse-level3-collapse {
|
|
299
|
+
.@{ant-prefix}-collapse-expand-icon {
|
|
300
|
+
display: block !important;
|
|
301
|
+
color: #999;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.@{ant-prefix}-collapse-header {
|
|
305
|
+
cursor: pointer;
|
|
306
|
+
padding: 0 !important;
|
|
307
|
+
&:hover {
|
|
308
|
+
background: #f0f0f0;
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
// 不可折叠样式
|
|
314
|
+
.pro-collapse-level3-no-collapse {
|
|
315
|
+
.@{ant-prefix}-collapse-expand-icon {
|
|
316
|
+
display: none !important;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.@{ant-prefix}-collapse-header {
|
|
320
|
+
cursor: default;
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
// 禁用折叠时的样式
|
|
325
|
+
&.@{ant-prefix}-collapse .@{ant-prefix}-collapse-item-disabled > .@{ant-prefix}-collapse-header,
|
|
326
|
+
.@{ant-prefix}-collapse
|
|
327
|
+
.@{ant-prefix}-collapse-item-disabled
|
|
328
|
+
> .@{ant-prefix}-collapse-header
|
|
329
|
+
> .arrow {
|
|
330
|
+
color: var(--zaui-text, #343434);
|
|
331
|
+
cursor: default;
|
|
332
|
+
background: #F8F8F8 !important;
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
// 当pro-collapse-content直接包含level3且不包含level2时，添加padding
|
|
336
|
+
.pro-collapse-content:has(> .pro-collapse-level3):not(:has(> .pro-collapse-level2)) {
|
|
337
|
+
padding: var(--zaui-space-size-md, 16px) !important;
|
|
338
|
+
padding-right: 0 !important;
|
|
339
|
+
}
|
|
340
|
+
|
|
204
341
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zat-design/sisyphus-react",
|
|
3
|
-
"version": "3.13.
|
|
3
|
+
"version": "3.13.18-beta.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"@dnd-kit/sortable": "^7.0.2",
|
|
68
68
|
"@dnd-kit/utilities": "^3.2.1",
|
|
69
69
|
"@pansy/react-watermark": "^3.1.13",
|
|
70
|
-
"@zat-design/utils": "1.1.
|
|
70
|
+
"@zat-design/utils": "1.1.43",
|
|
71
71
|
"ahooks": "3.8.4",
|
|
72
72
|
"antd": "4.24.16",
|
|
73
73
|
"big.js": "^6.2.1",
|