Skip to content

Commit b378883

Browse files
DAreRodzDAreRodz
committed
Lock core/accordion iapi store
1 parent 3be8bb2 commit b378883

File tree

1 file changed

+78
-74
lines changed
  • packages/block-library/src/accordion

1 file changed

+78
-74
lines changed

‎packages/block-library/src/accordion/view.js‎

Lines changed: 78 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -3,85 +3,89 @@
33
*/
44
import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
55

6-
store( 'core/accordion', {
7-
state: {
8-
get isOpen() {
9-
const { id, accordionItems } = getContext();
10-
const accordionItem = accordionItems.find(
11-
( item ) => item.id === id
12-
);
13-
return accordionItem ? accordionItem.isOpen : false;
6+
store(
7+
'core/accordion',
8+
{
9+
state: {
10+
get isOpen() {
11+
const { id, accordionItems } = getContext();
12+
const accordionItem = accordionItems.find(
13+
( item ) => item.id === id
14+
);
15+
return accordionItem ? accordionItem.isOpen : false;
16+
},
1417
},
15-
},
16-
actions: {
17-
toggle: () => {
18-
const context = getContext();
19-
const { id, autoclose, accordionItems } = context;
20-
const accordionItem = accordionItems.find(
21-
( item ) => item.id === id
22-
);
18+
actions: {
19+
toggle: () => {
20+
const context = getContext();
21+
const { id, autoclose, accordionItems } = context;
22+
const accordionItem = accordionItems.find(
23+
( item ) => item.id === id
24+
);
2325

24-
if ( autoclose ) {
25-
accordionItems.forEach( ( item ) => {
26-
item.isOpen =
27-
item.id === id ? ! accordionItem.isOpen : false;
28-
} );
29-
} else {
30-
accordionItem.isOpen = ! accordionItem.isOpen;
31-
}
32-
},
33-
handleKeyDown: withSyncEvent( ( event ) => {
34-
if (
35-
event.key !== 'ArrowUp' &&
36-
event.key !== 'ArrowDown' &&
37-
event.key !== 'Home' &&
38-
event.key !== 'End'
39-
) {
40-
return;
41-
}
26+
if ( autoclose ) {
27+
accordionItems.forEach( ( item ) => {
28+
item.isOpen =
29+
item.id === id ? ! accordionItem.isOpen : false;
30+
} );
31+
} else {
32+
accordionItem.isOpen = ! accordionItem.isOpen;
33+
}
34+
},
35+
handleKeyDown: withSyncEvent( ( event ) => {
36+
if (
37+
event.key !== 'ArrowUp' &&
38+
event.key !== 'ArrowDown' &&
39+
event.key !== 'Home' &&
40+
event.key !== 'End'
41+
) {
42+
return;
43+
}
4244

43-
event.preventDefault();
44-
const context = getContext();
45-
const { id, accordionItems } = context;
46-
const currentIndex = accordionItems.findIndex(
47-
( item ) => item.id === id
48-
);
45+
event.preventDefault();
46+
const context = getContext();
47+
const { id, accordionItems } = context;
48+
const currentIndex = accordionItems.findIndex(
49+
( item ) => item.id === id
50+
);
4951

50-
let nextIndex;
52+
let nextIndex;
5153

52-
switch ( event.key ) {
53-
case 'ArrowUp':
54-
nextIndex = Math.max( 0, currentIndex - 1 );
55-
break;
56-
case 'ArrowDown':
57-
nextIndex = Math.min(
58-
currentIndex + 1,
59-
accordionItems.length - 1
60-
);
61-
break;
62-
case 'Home':
63-
nextIndex = 0;
64-
break;
65-
case 'End':
66-
nextIndex = accordionItems.length - 1;
67-
break;
68-
}
54+
switch ( event.key ) {
55+
case 'ArrowUp':
56+
nextIndex = Math.max( 0, currentIndex - 1 );
57+
break;
58+
case 'ArrowDown':
59+
nextIndex = Math.min(
60+
currentIndex + 1,
61+
accordionItems.length - 1
62+
);
63+
break;
64+
case 'Home':
65+
nextIndex = 0;
66+
break;
67+
case 'End':
68+
nextIndex = accordionItems.length - 1;
69+
break;
70+
}
6971

70-
const nextId = accordionItems[ nextIndex ].id;
71-
const nextButton = document.getElementById( nextId );
72-
if ( nextButton ) {
73-
nextButton.focus();
74-
}
75-
} ),
76-
},
77-
callbacks: {
78-
initAccordionItems: () => {
79-
const context = getContext();
80-
const { id, openByDefault } = context;
81-
context.accordionItems.push( {
82-
id,
83-
isOpen: openByDefault,
84-
} );
72+
const nextId = accordionItems[ nextIndex ].id;
73+
const nextButton = document.getElementById( nextId );
74+
if ( nextButton ) {
75+
nextButton.focus();
76+
}
77+
} ),
78+
},
79+
callbacks: {
80+
initAccordionItems: () => {
81+
const context = getContext();
82+
const { id, openByDefault } = context;
83+
context.accordionItems.push( {
84+
id,
85+
isOpen: openByDefault,
86+
} );
87+
},
8588
},
8689
},
87-
} );
90+
{ lock: true }
91+
);

0 commit comments

Comments
 (0)