-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
drop-zone.js
62 lines (55 loc) · 1.54 KB
/
drop-zone.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
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { useReducedMotion } from '@wordpress/compose';
import { __unstableMotion as motion } from '@wordpress/components';
/**
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
import BlockPopoverCover from './cover';
const animateVariants = {
hide: { opacity: 0, scaleY: 0.75 },
show: { opacity: 1, scaleY: 1 },
exit: { opacity: 0, scaleY: 0.9 },
};
function BlockDropZonePopover( {
__unstablePopoverSlot,
__unstableContentRef,
} ) {
const { clientId } = useSelect( ( select ) => {
const { getBlockOrder, getBlockInsertionPoint } =
select( blockEditorStore );
const insertionPoint = getBlockInsertionPoint();
const order = getBlockOrder( insertionPoint.rootClientId );
if ( ! order.length ) {
return {};
}
return {
clientId: order[ insertionPoint.index ],
};
}, [] );
const reducedMotion = useReducedMotion();
return (
<BlockPopoverCover
clientId={ clientId }
__unstablePopoverSlot={ __unstablePopoverSlot }
__unstableContentRef={ __unstableContentRef }
className="block-editor-block-popover__drop-zone"
>
<motion.div
data-testid="block-popover-drop-zone"
initial={
reducedMotion ? animateVariants.show : animateVariants.hide
}
animate={ animateVariants.show }
exit={
reducedMotion ? animateVariants.show : animateVariants.exit
}
className="block-editor-block-popover__drop-zone-foreground"
/>
</BlockPopoverCover>
);
}
export default BlockDropZonePopover;