muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed default width and height for file loader

Browse source
This commit is contained in:
Fedor Katurov 2021-06-23 14:55:37 +07:00
parent b64ddcf5ce
commit 4853143d26
2 changed files with 21 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/media/ImagePreloader/index.tsx
View file

@ -1,12 +1,12 @@
import React, { FC, MouseEventHandler, useCallback, useEffect, useState } from 'react'; import React, { FC, MouseEventHandler, useCallback, useMemo, useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { describeArc, getURL } from '~/utils/dom'; import { getURL } from '~/utils/dom';
import { PRESETS } from '~/constants/urls'; import { PRESETS } from '~/constants/urls';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import { IFile } from '~/redux/types'; import { IFile } from '~/redux/types';
import { LoaderCircleInner } from '~/components/input/LoaderCircleInner';
import { LoaderCircle } from '~/components/input/LoaderCircle'; import { LoaderCircle } from '~/components/input/LoaderCircle';
import { Icon } from '~/components/input/Icon'; import { Icon } from '~/components/input/Icon';
import { useResizeHandler } from '~/utils/hooks/useResizeHandler';
interface IProps { interface IProps {
file: IFile; file: IFile;
@ -15,6 +15,9 @@ interface IProps {
className?: string; className?: string;
} }
const DEFAULT_WIDTH = 1920;
const DEFAULT_HEIGHT = 1020;
const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => { const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140); const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140);
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
@ -37,20 +40,21 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
setHasError(true); setHasError(true);
}, [setHasError]); }, [setHasError]);
useEffect(() => { const [width, height] = useMemo(
window.addEventListener('resize', onResize); () => [file?.metadata?.width || DEFAULT_WIDTH, file?.metadata?.height || DEFAULT_HEIGHT],
[file?.metadata]
);
return () => window.removeEventListener('resize', onResize); useResizeHandler(onResize);
}, [onResize]);
return ( return (
<> <>
<svg <svg
viewBox={`0 0 ${file?.metadata?.width || 0} ${file?.metadata?.height || 0}`} viewBox={`0 0 ${width} ${height}`}
className={classNames(styles.preview, { [styles.is_loaded]: loaded })} className={classNames(styles.preview, { [styles.is_loaded]: loaded })}
style={{ style={{
maxHeight, maxHeight,
height: file?.metadata?.height || 'auto', height: height,
}} }}
onClick={onClick} onClick={onClick}
> >

8
src/utils/hooks/useResizeHandler.ts Normal file
View file

@ -0,0 +1,8 @@
import { useEffect } from 'react';
export const useResizeHandler = (onResize: () => any) => {
useEffect(() => {
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, [onResize]);
};