muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36: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,
}) => {
const [current, setCurrent] = useState(0);
const [height, setHeight] = useState(320);
const [height, setHeight] = useState(window.innerHeight - 143);
const [max_height, setMaxHeight] = useState(960);
const [loaded, setLoaded] = useState<Record<number, boolean>>({});
const refs = useRef<Record<number, HTMLDivElement>>({});
@ -86,7 +86,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
if (!wrap || !wrap.current) return () => clearTimeout(timeout);
const { width } = wrap.current.getBoundingClientRect();
const fallback = (width * 9) / 16;
const fallback = window.innerHeight - 143;
if (is_loading) {
setHeight(fallback);
@ -158,7 +158,6 @@ const NodeImageSlideBlock: FC<IProps> = ({
const updateMaxHeight = useCallback(() => {
if (!wrap.current) return;
const { width } = wrap.current.getBoundingClientRect();
setMaxHeight(window.innerHeight - 143);
normalizeOffset();
}, [wrap, setMaxHeight, normalizeOffset]);
@ -292,25 +291,26 @@ const NodeImageSlideBlock: FC<IProps> = ({
onTouchStart={startDragging}
ref={slide}
>
{!is_loading &&
images.map((file, index) => (
<div
className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index],
})}
ref={setRef(index)}
key={node.updated_at + file.id}
>
<img
className={styles.image}
src={getURL(file, PRESETS['1600'])}
alt=""
key={file.id}
onLoad={onImageLoad(index)}
style={{ maxHeight: max_height }}
/>
</div>
))}
{images.map((file, index) => (
<div
className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index],
})}
ref={setRef(index)}
key={node.updated_at + file.id}
>
<img
className={styles.image}
src={getURL(file, PRESETS['1600'])}
alt=""
key={file.id}
onLoad={onImageLoad(index)}
style={{
maxHeight: max_height,
}}
/>
</div>
))}
</div>
{images.length > 1 && (
@ -320,17 +320,6 @@ const NodeImageSlideBlock: FC<IProps> = ({
{images.length}
</div>
)}
{/*
!is_loading && (
<ImageSwitcher
total={images.length}
current={current}
onChange={changeCurrent}
loaded={loaded}
/>
)
*/}
</div>
{images.length > 1 && (