-
Notifications
You must be signed in to change notification settings - Fork 392
/
DocumentPanelHeader.tsx
141 lines (125 loc) · 4.87 KB
/
DocumentPanelHeader.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
// @todo: remove the following line when part imports has been removed from this file
///<reference types="@sanity/types/parts" />
import {ArrowLeftIcon, CloseIcon, SplitVerticalIcon} from '@sanity/icons'
import {Button, Inline} from '@sanity/ui'
import {negate} from 'lodash'
import LanguageFilter from 'part:@sanity/desk-tool/language-select-component?'
import React, {memo, forwardRef, useMemo} from 'react'
import {PaneMenuItem} from '../../../../types'
import {PaneHeader, PaneContextMenuButton} from '../../../../components/pane'
import {useDeskTool} from '../../../../contexts/deskTool'
import {usePaneRouter} from '../../../../contexts/paneRouter'
import {TimelineMenu} from '../../timeline'
import {useDocumentPane} from '../../useDocumentPane'
import {DocumentHeaderTabs} from './DocumentHeaderTabs'
import {ValidationMenu} from './ValidationMenu'
import {DocumentHeaderTitle} from './DocumentHeaderTitle'
export interface DocumentPanelHeaderProps {
rootElement: HTMLDivElement | null
}
const isActionButton = (item: PaneMenuItem) => Boolean(item.showAsAction)
const isMenuButton = negate(isActionButton)
const DocumentPanelHeader = forwardRef(function DocumentPanelHeader(
{rootElement}: DocumentPanelHeaderProps,
ref: React.ForwardedRef<HTMLDivElement>
) {
const {
documentSchema,
handleMenuAction,
handlePaneClose,
handlePaneSplit,
historyController,
markers,
menuItems,
menuItemGroups,
ready,
views,
totalReferenceCount,
} = useDocumentPane()
const {revTime: rev} = historyController
const {features} = useDeskTool()
const {index, BackLink, hasGroupSiblings} = usePaneRouter()
const contextMenuItems = useMemo(() => menuItems.filter(isMenuButton), [menuItems])
const [isValidationOpen, setValidationOpen] = React.useState<boolean>(false)
const showTabs = views.length > 1
const showVersionMenu = features.reviewChanges
// there are three kinds of buttons possible:
//
// 1. split pane - creates a new split pane
// 2. close split pane — closes the current split pane
// 3. close pane group — closes the current pane group
// show the split pane button if they're enabled and there is more than one
// view available to use to create a split view
const showSplitPaneButton = features.splitViews && handlePaneSplit && views.length > 1
// show the split pane button close button if the split button is showing
// and there is more than one split pane open (aka has-siblings)
const showSplitPaneCloseButton = showSplitPaneButton && hasGroupSiblings
// show the pane group close button if the `showSplitPaneCloseButton` is
// _not_ showing (the split pane button replaces the group close button)
// and if the back button is not showing (the back button and the close
// button) do the same thing and shouldn't be shown at the same time)
const showPaneGroupCloseButton = !showSplitPaneCloseButton && !features.backButton
return (
<PaneHeader
ref={ref}
loading={!ready}
title={<DocumentHeaderTitle />}
tabs={showTabs && <DocumentHeaderTabs />}
backButton={
features.backButton &&
index > 0 && <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" />
}
subActions={showVersionMenu && <TimelineMenu chunk={rev} mode="rev" />}
totalReferenceCount={totalReferenceCount}
actions={
<Inline space={1}>
{LanguageFilter && <LanguageFilter key="language-menu" schemaType={documentSchema} />}
{markers.length > 0 && (
<ValidationMenu
boundaryElement={rootElement}
isOpen={isValidationOpen}
key="validation-menu"
setOpen={setValidationOpen}
/>
)}
<PaneContextMenuButton
itemGroups={menuItemGroups}
items={contextMenuItems}
key="context-menu"
onAction={handleMenuAction}
/>
{showSplitPaneButton && (
<Button
icon={SplitVerticalIcon}
key="split-pane-button"
mode="bleed"
onClick={handlePaneSplit}
title="Split pane right"
/>
)}
{showSplitPaneCloseButton && (
<Button
icon={CloseIcon}
key="close-view-button"
mode="bleed"
onClick={handlePaneClose}
title="Close split pane"
/>
)}
{showPaneGroupCloseButton && (
<Button
icon={CloseIcon}
key="close-view-button"
mode="bleed"
title="Close pane group"
as={BackLink}
/>
)}
</Inline>
}
/>
)
})
const MemoizedDocumentPanelHeader = memo(DocumentPanelHeader)
MemoizedDocumentPanelHeader.displayName = 'MemoizedDocumentPanelHeader'
export {MemoizedDocumentPanelHeader as DocumentPanelHeader}