11'use client' ;
2- import React , { useMemo } from 'react' ;
2+ import React , { useEffect , useMemo } from 'react' ;
33import Collapse from './collapse' ;
44import useCurrentState from '../utils/use-current-state' ;
55import { setChildrenIndex } from '../utils/collections' ;
@@ -8,39 +8,53 @@ import useScale, { withScale } from '../use-scale';
88import useClasses from '../use-classes' ;
99
1010interface Props {
11- accordion ?: boolean ;
11+ multiple ?: boolean ;
1212 className ?: string ;
13+ value ?: number [ ] ;
14+ onChange ?: ( openIndices : number [ ] ) => void ;
1315}
1416
1517type NativeAttrs = Omit < React . HTMLAttributes < HTMLDivElement > , keyof Props > ;
1618export type CollapseGroupProps = Props & NativeAttrs ;
1719
1820const CollapseGroupComponent : React . FC < React . PropsWithChildren < CollapseGroupProps > > = ( {
1921 children,
20- accordion = true ,
21- className = '' ,
22+ multiple = false ,
23+ className,
24+ value = [ ] ,
25+ onChange,
2226 ...props
2327} : React . PropsWithChildren < CollapseGroupProps > ) => {
2428 const { SCALE , UNIT , CLASS_NAMES } = useScale ( ) ;
2529
26- const [ state , setState , stateRef ] = useCurrentState < Array < number > > ( [ ] ) ;
30+ const [ state , setState , stateRef ] = useCurrentState < Array < number > > ( value ) ;
2731 const classes = useClasses ( 'collapse-group' , className , CLASS_NAMES ) ;
2832
29- const updateValues = ( currentIndex : number , nextState : boolean ) => {
30- const hasChild = stateRef . current . find ( val => val === currentIndex ) ;
31- if ( accordion ) {
32- if ( nextState ) return setState ( [ currentIndex ] ) ;
33- return setState ( [ ] ) ;
33+ useEffect ( ( ) => {
34+ setState ( value ) ;
35+ } , [ value . join ( ',' ) ] ) ;
36+
37+ useEffect ( ( ) => {
38+ if ( onChange ) {
39+ onChange ( state ) ;
3440 }
41+ } , [ state ] ) ;
3542
36- if ( nextState ) {
37- // In a few cases, the user will set Collapse Component state manually.
38- // If the user incorrectly set the state, Group component should ignore it.
39- /* istanbul ignore if */
40- if ( hasChild ) return ;
41- return setState ( [ ...stateRef . current , currentIndex ] ) ;
43+ const updateValues = ( currentIndex : number , nextState : boolean ) => {
44+ if ( ! multiple ) {
45+ if ( nextState ) {
46+ setState ( [ currentIndex ] ) ;
47+ } else {
48+ setState ( [ ] ) ;
49+ }
50+ } else {
51+ const currentIndexExists = stateRef . current . includes ( currentIndex ) ;
52+ if ( nextState && ! currentIndexExists ) {
53+ setState ( [ ...stateRef . current , currentIndex ] ) ;
54+ } else if ( ! nextState && currentIndexExists ) {
55+ setState ( stateRef . current . filter ( item => item !== currentIndex ) ) ;
56+ }
4257 }
43- setState ( stateRef . current . filter ( item => item !== currentIndex ) ) ;
4458 } ;
4559
4660 const initialValue = useMemo < CollapseConfig > (
0 commit comments