-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
settings-drawer.js
63 lines (58 loc) · 1.73 KB
/
settings-drawer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/**
* WordPress dependencies
*/
import {
Button,
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
} from '@wordpress/components';
import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
import { useReducedMotion, useInstanceId } from '@wordpress/compose';
import { _x, isRTL } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
const prefersReducedMotion = useReducedMotion();
const MaybeAnimatePresence = prefersReducedMotion
? Fragment
: AnimatePresence;
const MaybeMotionDiv = prefersReducedMotion ? 'div' : motion.div;
const id = useInstanceId( LinkSettingsDrawer );
const settingsDrawerId = `link-control-settings-drawer-${ id }`;
return (
<>
<Button
className="block-editor-link-control__drawer-toggle"
aria-expanded={ settingsOpen }
onClick={ () => setSettingsOpen( ! settingsOpen ) }
icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
aria-controls={ settingsDrawerId }
>
{ _x( 'Advanced', 'Additional link settings' ) }
</Button>
<MaybeAnimatePresence>
{ settingsOpen && (
<MaybeMotionDiv
className="block-editor-link-control__drawer"
hidden={ ! settingsOpen }
id={ settingsDrawerId }
initial="collapsed"
animate="open"
exit="collapsed"
variants={ {
open: { opacity: 1, height: 'auto' },
collapsed: { opacity: 0, height: 0 },
} }
transition={ {
duration: 0.1,
} }
>
<div className="block-editor-link-control__drawer-inner">
{ children }
</div>
</MaybeMotionDiv>
) }
</MaybeAnimatePresence>
</>
);
}
export default LinkSettingsDrawer;