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

fixed appearance for mobile

Browse source
This commit is contained in:
Fedor Katurov 2019-10-30 17:45:42 +07:00
parent 89a0cdd970
commit 8294c20d04
4 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,6 +37,11 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
[node]
);
useEffect(() => {
setLoaded({});
refs.current = {};
}, [images]);
const updateSizes = useCallback(() => {
const values = Object.keys(refs.current).reduce((obj, key) => {
const ref = refs.current[key];
@ -53,7 +58,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
index => el => {
refs.current[index] = el;
},
[refs, heights, setHeights]
[refs, heights, setHeights, images]
);
const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
@ -62,8 +67,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
]);
// update outside hooks
useEffect(() => updateLayout(), [loaded, height]);
useEffect(() => updateSizes(), [refs, current, loaded]);
useEffect(() => updateLayout(), [loaded, height, images]);
useEffect(() => updateSizes(), [refs, current, loaded, images]);
useEffect(() => {
if (!wrap || !wrap.current) return;
@ -77,7 +82,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
if (current !== Math.round(selected)) setCurrent(Math.round(selected));
setHeight(now);
}, [offset, heights, max_height]);
}, [offset, heights, max_height, images]);
const onDrag = useCallback(
event => {
@ -136,7 +141,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
[setIsDragging, setInitialX, offset, setInitialOffset]
);
useEffect(() => updateMaxHeight(), []);
useEffect(() => updateMaxHeight(), [images]);
useEffect(() => {
window.addEventListener('resize', updateSizes);