no prev/next anymore
This commit is contained in:
@@ -1,8 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import type { JSX } from 'react';
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '../ui/icons';
|
||||
import { useAssetNavigator } from '../hooks/useAssetNavigator';
|
||||
import { preventAll } from './events';
|
||||
|
||||
type Identifier = string | number;
|
||||
|
||||
@@ -32,11 +30,6 @@ type GetDocumentAsset = (document: DocumentLike | null, assetType: string) => As
|
||||
interface NavigatorSnapshot {
|
||||
url: string | null;
|
||||
alt?: string;
|
||||
canGoPrev: boolean;
|
||||
canGoNext: boolean;
|
||||
goPrev?: () => void;
|
||||
goNext?: () => void;
|
||||
ordinal: number;
|
||||
width: number | null;
|
||||
height: number | null;
|
||||
}
|
||||
@@ -46,7 +39,6 @@ interface DesktopPreviewCardProps {
|
||||
title?: string;
|
||||
ensureAssetUrl?: EnsureAssetUrl | null;
|
||||
getDocumentAsset: GetDocumentAsset;
|
||||
prefetch?: number;
|
||||
onNavigatorSnapshot?: (docId: Identifier, snapshot: NavigatorSnapshot | null) => void;
|
||||
shouldLoad?: boolean;
|
||||
}
|
||||
@@ -56,7 +48,6 @@ const DesktopPreviewCard = ({
|
||||
title,
|
||||
ensureAssetUrl,
|
||||
getDocumentAsset,
|
||||
prefetch = 3,
|
||||
onNavigatorSnapshot,
|
||||
shouldLoad = true,
|
||||
}: DesktopPreviewCardProps): JSX.Element => {
|
||||
@@ -65,10 +56,9 @@ const DesktopPreviewCard = ({
|
||||
assetType: 'thumbnail',
|
||||
ensureAssetUrl: shouldLoad ? ensureAssetUrl : null,
|
||||
getAsset: getDocumentAsset,
|
||||
prefetch,
|
||||
});
|
||||
|
||||
const { currentUrl, cardinality, canGoPrev, canGoNext, currentMetadata, ordinal } = navigator;
|
||||
const { currentUrl, currentMetadata } = navigator;
|
||||
const docId = doc?.id ?? null;
|
||||
|
||||
const metadataWidth = Number((currentMetadata as { width?: number } | null)?.width);
|
||||
@@ -78,14 +68,13 @@ const DesktopPreviewCard = ({
|
||||
if (!onNavigatorSnapshot || !docId) {
|
||||
return undefined;
|
||||
}
|
||||
if (!currentUrl) {
|
||||
onNavigatorSnapshot(docId, null);
|
||||
return undefined;
|
||||
}
|
||||
const snapshot = {
|
||||
url: currentUrl || null,
|
||||
url: currentUrl,
|
||||
alt: title,
|
||||
canGoPrev,
|
||||
canGoNext,
|
||||
goPrev: navigator.goPrev,
|
||||
goNext: navigator.goNext,
|
||||
ordinal,
|
||||
width: Number.isFinite(metadataWidth) && metadataWidth > 0 ? metadataWidth : null,
|
||||
height: Number.isFinite(metadataHeight) && metadataHeight > 0 ? metadataHeight : null,
|
||||
};
|
||||
@@ -95,21 +84,14 @@ const DesktopPreviewCard = ({
|
||||
docId,
|
||||
currentUrl,
|
||||
title,
|
||||
canGoPrev,
|
||||
canGoNext,
|
||||
ordinal,
|
||||
metadataWidth,
|
||||
metadataHeight,
|
||||
navigator.goPrev,
|
||||
navigator.goNext,
|
||||
onNavigatorSnapshot,
|
||||
]);
|
||||
|
||||
const hasPreview = Boolean(currentUrl);
|
||||
const cardClasses = ['desk-item__card'];
|
||||
if (!hasPreview) cardClasses.push('desk-item__card--empty');
|
||||
const showNav = hasPreview && (cardinality > 1 || canGoPrev || canGoNext);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cardClasses.join(' ')}
|
||||
@@ -134,58 +116,6 @@ const DesktopPreviewCard = ({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{showNav ? (
|
||||
<div className="desk-card__nav">
|
||||
<button
|
||||
type="button"
|
||||
className="desk-card__nav-button"
|
||||
onClick={(event) => {
|
||||
preventAll(event);
|
||||
navigator.goPrev();
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
preventAll(event);
|
||||
}}
|
||||
onPointerUp={(event) => {
|
||||
preventAll(event);
|
||||
}}
|
||||
onMouseDown={(event) => {
|
||||
preventAll(event);
|
||||
}}
|
||||
onMouseUp={(event) => {
|
||||
preventAll(event);
|
||||
}}
|
||||
disabled={!canGoPrev}
|
||||
aria-label="Previous preview"
|
||||
>
|
||||
<ArrowLeftIcon />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="desk-card__nav-button"
|
||||
onClick={(event) => {
|
||||
preventAll(event);
|
||||
navigator.goNext();
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
preventAll(event);
|
||||
}}
|
||||
onPointerUp={(event) => {
|
||||
preventAll(event);
|
||||
}}
|
||||
onMouseDown={(event) => {
|
||||
preventAll(event);
|
||||
}}
|
||||
onMouseUp={(event) => {
|
||||
preventAll(event);
|
||||
}}
|
||||
disabled={!canGoNext}
|
||||
aria-label="Next preview"
|
||||
>
|
||||
<ArrowRightIcon />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -46,14 +46,8 @@ export interface DeskDocument {
|
||||
interface NavigatorSnapshot {
|
||||
url: string | null;
|
||||
alt?: string | null;
|
||||
canGoPrev?: boolean;
|
||||
canGoNext?: boolean;
|
||||
goPrev?: () => void;
|
||||
goNext?: () => void;
|
||||
ordinal?: number | null;
|
||||
width?: number | null;
|
||||
height?: number | null;
|
||||
contentType?: string | null;
|
||||
}
|
||||
|
||||
type OverlayOriginHint = {
|
||||
@@ -71,8 +65,10 @@ interface OverlayOriginTransform {
|
||||
baseHeight: number;
|
||||
}
|
||||
|
||||
interface OverlayDisplay extends NavigatorSnapshot {
|
||||
interface OverlayDisplay {
|
||||
url: string;
|
||||
alt?: string | null;
|
||||
contentType?: string | null;
|
||||
}
|
||||
|
||||
interface DocumentSizeInfo {
|
||||
@@ -380,11 +376,6 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
|
||||
prevSnapshot &&
|
||||
prevSnapshot.url === snapshot.url &&
|
||||
prevSnapshot.alt === snapshot.alt &&
|
||||
prevSnapshot.canGoPrev === snapshot.canGoPrev &&
|
||||
prevSnapshot.canGoNext === snapshot.canGoNext &&
|
||||
prevSnapshot.goPrev === snapshot.goPrev &&
|
||||
prevSnapshot.goNext === snapshot.goNext &&
|
||||
prevSnapshot.ordinal === snapshot.ordinal &&
|
||||
prevSnapshot.width === snapshot.width &&
|
||||
prevSnapshot.height === snapshot.height;
|
||||
if (sameSnapshot) {
|
||||
@@ -672,11 +663,7 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
|
||||
if (!overlaySource) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
...overlaySource,
|
||||
canGoPrev: false,
|
||||
canGoNext: false,
|
||||
};
|
||||
return overlaySource;
|
||||
}, [overlaySource]);
|
||||
|
||||
const overlayDocument = useMemo<DeskDocument | null>(() => {
|
||||
@@ -1122,7 +1109,6 @@ function DesktopWorkspaceView({
|
||||
</div>
|
||||
<PreviewZoomOverlay
|
||||
open={Boolean(overlayDisplay?.url)}
|
||||
display={overlayDisplay}
|
||||
onClose={closeOverlay}
|
||||
document={overlayDocument}
|
||||
originRect={overlayOriginRect}
|
||||
|
||||
Reference in New Issue
Block a user