/
InsertMenu.tsx
78 lines (67 loc) · 2.27 KB
/
InsertMenu.tsx
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React, {memo, useCallback, useMemo} from 'react'
import {AddIcon} from '@sanity/icons'
import {Button, PopoverProps} from '@sanity/ui'
import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
import {BlockItem} from './types'
import {useFocusBlock} from './hooks'
const CollapseMenuMemo = memo(CollapseMenu)
const MENU_POPOVER_PROPS: PopoverProps = {constrainSize: true, portal: true}
interface InsertMenuProps {
disabled: boolean
items: BlockItem[]
isFullscreen?: boolean
collapsed?: boolean
}
export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
const {disabled, items, isFullscreen, collapsed} = props
const focusBlock = useFocusBlock()
const editor = usePortableTextEditor()
const isVoidFocus = focusBlock && focusBlock._type !== editor.schemaTypes.block.name
const handleMenuClose = useCallback(() => {
PortableTextEditor.focus(editor)
}, [editor])
const children = useMemo(() => {
return items.map((item) => {
const title = item.type.title || item.type.type?.name
return (
<CollapseMenuButton
aria-label={`Insert ${title}${item.inline ? ' (inline)' : ' (block)'}`}
padding={2}
mode="bleed"
disabled={disabled || (isVoidFocus && item.inline === true)}
icon={item.icon}
key={item.key}
// eslint-disable-next-line react/jsx-no-bind, react/jsx-handler-names
onClick={item.handle}
text={title}
tooltipText={`Insert ${title}`}
tooltipProps={{
disabled,
placement: isFullscreen ? 'bottom' : 'top',
portal: 'default',
}}
/>
)
})
}, [items, disabled, isVoidFocus, isFullscreen])
const menuButtonProps = useMemo(
() => ({
button: <Button icon={AddIcon} mode="bleed" padding={2} disabled={disabled} />,
popover: MENU_POPOVER_PROPS,
}),
[disabled]
)
return (
<CollapseMenuMemo
collapsed={collapsed}
collapseText={false}
disableRestoreFocusOnClose
gap={1}
menuButtonProps={menuButtonProps}
onMenuClose={handleMenuClose}
>
{children}
</CollapseMenuMemo>
)
})