Fix linting
This commit is contained in:
parent
038f6bc26c
commit
d287871e48
@ -55,7 +55,8 @@ export default function FullscreenButton({
|
||||
title="Toggle Fullscreen"
|
||||
className={clsx(
|
||||
className,
|
||||
'text-medium absolute bottom-2 right-2 bg-white p-2 rounded hidden md:block',
|
||||
'text-medium absolute bottom-2 right-2 bg-white p-2 rounded',
|
||||
'hidden md:block',
|
||||
)}
|
||||
icon={isFullscreen ? <MdFullscreenExit size={18} />
|
||||
: <MdFullscreen size={18} />}
|
||||
|
||||
@ -4,7 +4,15 @@ import 'viewerjs/dist/viewer.css';
|
||||
import { clsx } from 'clsx/lite';
|
||||
import FullscreenButton from '../FullscreenButton';
|
||||
|
||||
export default function ImageActions({ children, enableImageActions = false, className }: { children: React.ReactNode, enableImageActions?: boolean, className?: string }) {
|
||||
export default function ImageActions({
|
||||
children,
|
||||
enableImageActions = false,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
enableImageActions?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const viewerRef = useRef<Viewer | null>(null);
|
||||
|
||||
@ -46,9 +54,14 @@ export default function ImageActions({ children, enableImageActions = false, cla
|
||||
background-image: none;
|
||||
}
|
||||
`}</style>
|
||||
<div className={clsx(className, enableImageActions && 'cursor-zoom-in')} ref={containerRef} >
|
||||
<div
|
||||
className={clsx(className, enableImageActions && 'cursor-zoom-in')}
|
||||
ref={containerRef}
|
||||
>
|
||||
{children}
|
||||
{enableImageActions && <FullscreenButton imageRef={containerRef}/>}
|
||||
{enableImageActions && (
|
||||
<FullscreenButton imageRef={containerRef} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -10,7 +10,10 @@ export default function ImageLarge(props: ImageProps) {
|
||||
...rest
|
||||
} = props;
|
||||
return (
|
||||
<ImageActions enableImageActions={enableImageActions} className="flex relative items-center justify-center h-full">
|
||||
<ImageActions
|
||||
enableImageActions={enableImageActions}
|
||||
className="flex relative items-center justify-center h-full"
|
||||
>
|
||||
<ImageWithFallback {...{
|
||||
...rest,
|
||||
blurCompatibilityLevel: blurCompatibilityMode ? 'high' : 'none',
|
||||
|
||||
@ -104,6 +104,6 @@ export default function ImageWithFallback(props: ImageProps & {
|
||||
onLoad,
|
||||
onError,
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user