Commit 7f7a09b 1 parent 35ba0f8 commit 7f7a09b Copy full SHA for 7f7a09b
File tree 2 files changed +19
-6
lines changed
2 files changed +19
-6
lines changed Original file line number Diff line number Diff line change @@ -36,7 +36,14 @@ const CollapseGroupComponent: React.FC<React.PropsWithChildren<CollapseGroupProp
36
36
37
37
useEffect ( ( ) => {
38
38
if ( onChange ) {
39
- onChange ( state ) ;
39
+ const openIndices = stateRef . current . filter ( index => {
40
+ if ( ! Array . isArray ( hasIndexChildren ) ) {
41
+ return true ;
42
+ }
43
+ const isDisabled = hasIndexChildren . find ( ( child : React . ReactElement ) => child . props . index === index ) ?. props . disabled ;
44
+ return ! isDisabled ;
45
+ } ) ;
46
+ onChange ( openIndices ) ;
40
47
}
41
48
} , [ state ] ) ;
42
49
Original file line number Diff line number Diff line change @@ -50,7 +50,7 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
50
50
}
51
51
52
52
useEffect ( ( ) => {
53
- if ( ! values . length ) return ;
53
+ if ( ! values . length || disabled ) return ;
54
54
const isActive = ! ! values . find ( item => item === index ) ;
55
55
setVisible ( isActive ) ;
56
56
} , [ values . join ( ',' ) ] ) ;
@@ -66,7 +66,8 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
66
66
< div className = { classes } { ...props } >
67
67
< div className = "view" role = "button" onClick = { clickHandler } >
68
68
< div className = "title" >
69
- < span > { title } </ span > < CollapseIcon active = { visible } />
69
+ < span > { title } </ span >
70
+ { ! disabled && < CollapseIcon active = { visible } /> }
70
71
</ div >
71
72
{ subtitle && < div className = "subtitle" > { subtitle } </ div > }
72
73
</ div >
@@ -77,9 +78,11 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
77
78
.collapse {
78
79
border-top: 1px solid var(--color-border-1000);
79
80
border-bottom: 1px solid var(--color-border-1000);
80
- &.disabled {
81
- background: var(--color-background-900);
82
- }
81
+ }
82
+
83
+ .collapse.disabled .title {
84
+ color: var(--color-foreground-700);
85
+ cursor: not-allowed;
83
86
}
84
87
85
88
.shadow {
@@ -93,6 +96,9 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
93
96
cursor: pointer;
94
97
outline: none;
95
98
}
99
+ &.disabled {
100
+ pointer-events: none;
101
+ }
96
102
97
103
.title {
98
104
display: flex;
You can’t perform that action at this time.
0 commit comments