refactor document viewer UI buttons and props.
This commit is contained in:
@@ -118,7 +118,7 @@ export const useWorkspaceSurface = ({
|
||||
<DocumentViewerPanel
|
||||
variant="sidebar"
|
||||
sidebarMode={sidebarMode}
|
||||
onCollapsePanel={onClose}
|
||||
onClosePanel={onClose}
|
||||
onMaximizePanel={onOpenPreview}
|
||||
tagOptions={tagOptions}
|
||||
{...restDetailProps}
|
||||
|
||||
@@ -312,14 +312,27 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
|
||||
className="panel-header--dark"
|
||||
title={documentTitle}
|
||||
leading={
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="icon-button"
|
||||
aria-label="Close preview"
|
||||
type="button"
|
||||
>
|
||||
<IconX />
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="icon-button"
|
||||
aria-label="Close preview"
|
||||
type="button"
|
||||
>
|
||||
<IconX />
|
||||
</button>
|
||||
{onMaximize && (
|
||||
<button
|
||||
onClick={onMaximize}
|
||||
className="icon-button"
|
||||
aria-label="Open document info"
|
||||
title="Open document info"
|
||||
type="button"
|
||||
>
|
||||
<FileInfoIcon />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
actions={
|
||||
<>
|
||||
@@ -335,17 +348,6 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
|
||||
<DownloadIcon />
|
||||
</a>
|
||||
)}
|
||||
{onMaximize && (
|
||||
<button
|
||||
onClick={onMaximize}
|
||||
className="icon-button"
|
||||
aria-label="Open document info"
|
||||
title="Open document info"
|
||||
type="button"
|
||||
>
|
||||
<FileInfoIcon />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
DownloadIcon,
|
||||
CloseIcon,
|
||||
IconZoomInArea,
|
||||
IconX,
|
||||
WindowMaximizeIcon,
|
||||
} from '../ui/icons';
|
||||
import {
|
||||
@@ -42,7 +41,6 @@ interface DocumentViewerPanelProps extends DocumentSummarySectionProps {
|
||||
onClosePanel?: () => void;
|
||||
resolveFolderPath?: (doc: Document | null) => Array<{ id?: string; name?: string }>;
|
||||
variant?: 'viewer' | 'sidebar';
|
||||
onCollapsePanel?: () => void;
|
||||
onMaximizePanel?: (args: { documentIds: Array<string> }) => void;
|
||||
sidebarMode?: SidebarMode;
|
||||
}
|
||||
@@ -76,17 +74,6 @@ export const createDocumentViewerHeaderActions = ({
|
||||
<DownloadIcon />
|
||||
</a>
|
||||
) : null}
|
||||
{canZoom && onZoom ? (
|
||||
<button
|
||||
type="button"
|
||||
className="icon-button"
|
||||
onClick={onZoom}
|
||||
aria-label="Open zoom preview"
|
||||
title="Open zoom preview"
|
||||
>
|
||||
<IconZoomInArea />
|
||||
</button>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -110,7 +97,6 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
|
||||
onClosePanel,
|
||||
resolveFolderPath,
|
||||
variant = 'viewer',
|
||||
onCollapsePanel,
|
||||
onMaximizePanel,
|
||||
sidebarMode = 'overlay',
|
||||
}) => {
|
||||
@@ -330,20 +316,6 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
|
||||
canZoom: Boolean(document),
|
||||
});
|
||||
|
||||
const collapseButton = isSidebarVariant && onCollapsePanel
|
||||
? (
|
||||
<button
|
||||
type="button"
|
||||
className="icon-button"
|
||||
onClick={() => onCollapsePanel?.()}
|
||||
aria-label="Close detail panel"
|
||||
title="Close detail panel"
|
||||
>
|
||||
<IconX />
|
||||
</button>
|
||||
)
|
||||
: null;
|
||||
|
||||
const maximizeButton = isSidebarVariant && onMaximizePanel
|
||||
? (
|
||||
<button
|
||||
@@ -365,7 +337,7 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
|
||||
)
|
||||
: null;
|
||||
|
||||
const closeButton = !isSidebarVariant && onClosePanel
|
||||
const closeButton = onClosePanel
|
||||
? (
|
||||
<button
|
||||
type="button"
|
||||
@@ -379,15 +351,24 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
|
||||
)
|
||||
: null;
|
||||
|
||||
const headerLeadingButtons = isSidebarVariant
|
||||
? [
|
||||
collapseButton ? <React.Fragment key="collapse-button">{collapseButton}</React.Fragment> : null,
|
||||
maximizeButton ? <React.Fragment key="maximize-button">{maximizeButton}</React.Fragment> : null,
|
||||
].filter(Boolean)
|
||||
: [
|
||||
sidebarToggle ? <React.Fragment key="sidebar-toggle">{sidebarToggle}</React.Fragment> : null,
|
||||
closeButton ? <React.Fragment key="close-button">{closeButton}</React.Fragment> : null,
|
||||
].filter(Boolean);
|
||||
const previewZoomButton = (
|
||||
<button
|
||||
type="button"
|
||||
className="icon-button"
|
||||
onClick={handleZoomOpen}
|
||||
aria-label="Open zoom preview"
|
||||
title="Open zoom preview"
|
||||
>
|
||||
<IconZoomInArea />
|
||||
</button>
|
||||
);
|
||||
|
||||
const headerLeadingButtons = [
|
||||
sidebarToggle ? <React.Fragment key="sidebar-toggle">{sidebarToggle}</React.Fragment> : null,
|
||||
closeButton ? <React.Fragment key="close-button">{closeButton}</React.Fragment> : null,
|
||||
maximizeButton ? <React.Fragment key="maximize-button">{maximizeButton}</React.Fragment> : null,
|
||||
previewZoomButton ? <React.Fragment key="preview-zoom-button">{previewZoomButton}</React.Fragment> : null,
|
||||
].filter(Boolean);
|
||||
const headerLeadingContent = headerLeadingButtons.length ? headerLeadingButtons : null;
|
||||
|
||||
const resizeHandle = isSidebarVariant ? (
|
||||
|
||||
Reference in New Issue
Block a user