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

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

55
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,25 +291,26 @@ 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], })}
})} ref={setRef(index)}
ref={setRef(index)} key={node.updated_at + file.id}
key={node.updated_at + file.id} >
> <img
<img className={styles.image}
className={styles.image} src={getURL(file, PRESETS['1600'])}
src={getURL(file, PRESETS['1600'])} alt=""
alt="" key={file.id}
key={file.id} onLoad={onImageLoad(index)}
onLoad={onImageLoad(index)} style={{
style={{ maxHeight: max_height }} maxHeight: max_height,
/> }}
</div> />
))} </div>
))}
</div> </div>
{images.length > 1 && ( {images.length > 1 && (
@ -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 && (