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

better initial height calculation

Browse source
This commit is contained in:
Fedor Katurov 2020-09-01 16:56:08 +07:00
parent 0e3c7cbfd6
commit a0d18076ad
1 changed files with 22 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/node/NodeImageSlideBlock/index.tsx
View file

@ -24,7 +24,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
modalShowPhotoswipe, modalShowPhotoswipe,
}) => { }) => {
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const [height, setHeight] = useState(320); const [height, setHeight] = useState(window.innerHeight - 143);
const [max_height, setMaxHeight] = useState(960); const [max_height, setMaxHeight] = useState(960);
const [loaded, setLoaded] = useState<Record<number, boolean>>({}); const [loaded, setLoaded] = useState<Record<number, boolean>>({});
const refs = useRef<Record<number, HTMLDivElement>>({}); const refs = useRef<Record<number, HTMLDivElement>>({});
@ -86,7 +86,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
if (!wrap || !wrap.current) return () => clearTimeout(timeout); if (!wrap || !wrap.current) return () => clearTimeout(timeout);
const { width } = wrap.current.getBoundingClientRect(); const { width } = wrap.current.getBoundingClientRect();
const fallback = (width * 9) / 16; const fallback = window.innerHeight - 143;
if (is_loading) { if (is_loading) {
setHeight(fallback); setHeight(fallback);
@ -158,7 +158,6 @@ const NodeImageSlideBlock: FC<IProps> = ({
const updateMaxHeight = useCallback(() => { const updateMaxHeight = useCallback(() => {
if (!wrap.current) return; if (!wrap.current) return;
const { width } = wrap.current.getBoundingClientRect();
setMaxHeight(window.innerHeight - 143); setMaxHeight(window.innerHeight - 143);
normalizeOffset(); normalizeOffset();
}, [wrap, setMaxHeight, normalizeOffset]); }, [wrap, setMaxHeight, normalizeOffset]);
@ -292,8 +291,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
onTouchStart={startDragging} onTouchStart={startDragging}
ref={slide} ref={slide}
> >
{!is_loading && {images.map((file, index) => (
images.map((file, index) => (
<div <div
className={classNames(styles.image_wrap, { className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index], is_active: index === current && loaded[index],
@ -307,7 +305,9 @@ const NodeImageSlideBlock: FC<IProps> = ({
alt="" alt=""
key={file.id} key={file.id}
onLoad={onImageLoad(index)} onLoad={onImageLoad(index)}
style={{ maxHeight: max_height }} style={{
maxHeight: max_height,
}}
/> />
</div> </div>
))} ))}
@ -320,17 +320,6 @@ const NodeImageSlideBlock: FC<IProps> = ({
{images.length} {images.length}
</div> </div>
)} )}
{/*
!is_loading && (
<ImageSwitcher
total={images.length}
current={current}
onChange={changeCurrent}
loaded={loaded}
/>
)
*/}
</div> </div>
{images.length > 1 && ( {images.length > 1 && (