Skip to content

Commit 7f7a09b

Browse files
committed
fix(Collapse): close disabled with custom value
1 parent 35ba0f8 commit 7f7a09b

File tree

2 files changed

+19
-6
lines changed

2 files changed

+19
-6
lines changed

src/components/collapse/collapse-group.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,14 @@ const CollapseGroupComponent: React.FC<React.PropsWithChildren<CollapseGroupProp
3636

3737
useEffect(() => {
3838
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);
4047
}
4148
}, [state]);
4249

src/components/collapse/collapse.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
5050
}
5151

5252
useEffect(() => {
53-
if (!values.length) return;
53+
if (!values.length || disabled) return;
5454
const isActive = !!values.find(item => item === index);
5555
setVisible(isActive);
5656
}, [values.join(',')]);
@@ -66,7 +66,8 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
6666
<div className={classes} {...props}>
6767
<div className="view" role="button" onClick={clickHandler}>
6868
<div className="title">
69-
<span>{title}</span> <CollapseIcon active={visible} />
69+
<span>{title}</span>
70+
{!disabled && <CollapseIcon active={visible} />}
7071
</div>
7172
{subtitle && <div className="subtitle">{subtitle}</div>}
7273
</div>
@@ -77,9 +78,11 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
7778
.collapse {
7879
border-top: 1px solid var(--color-border-1000);
7980
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;
8386
}
8487
8588
.shadow {
@@ -93,6 +96,9 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
9396
cursor: pointer;
9497
outline: none;
9598
}
99+
&.disabled {
100+
pointer-events: none;
101+
}
96102
97103
.title {
98104
display: flex;

0 commit comments

Comments
 (0)