diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx index 9bfacf4b..9fe22919 100644 --- a/src/components/node/NodeImageBlock/index.tsx +++ b/src/components/node/NodeImageBlock/index.tsx @@ -7,6 +7,7 @@ import { getURL } from '~/utils/dom'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; import { PRESETS } from '~/constants/urls'; import * as MODAL_ACTIONS from '~/redux/modal/actions'; +import { LoaderCircle } from '~/components/input/LoaderCircle'; interface IProps { is_loading: boolean; @@ -19,7 +20,7 @@ interface IProps { const NodeImageBlock: FC = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => { const [is_animated, setIsAnimated] = useState(false); const [current, setCurrent] = useState(0); - const [height, setHeight] = useState(320); + const [height, setHeight] = useState(window.innerHeight - 140); const [loaded, setLoaded] = useState>({}); const refs = useRef>({}); @@ -39,9 +40,12 @@ const NodeImageBlock: FC = ({ node, is_loading, updateLayout, modalShowP useEffect(() => updateLayout(), [loaded]); useEffect(() => { - if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320); + if (!refs || !refs.current[current] || !loaded[current]) + return setHeight(window.innerHeight - 140); + const el = refs.current[current]; const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height; + setHeight(element_height); }, [refs, current, loaded]); @@ -50,6 +54,12 @@ const NodeImageBlock: FC = ({ node, is_loading, updateLayout, modalShowP return () => clearTimeout(timer); }, []); + const onOpenPhotoSwipe = useCallback(() => modalShowPhotoswipe(images, current), [ + modalShowPhotoswipe, + images, + current, + ]); + return (
= ({ node, is_loading, updateLayout, modalShowP loaded={loaded} /> -
- {(is_loading || !loaded[0] || !images.length) &&
} +
+ {(is_loading || !loaded[0] || !images.length) && ( +
+ +
+ )} {images.map((file, index) => (
= memo( return (
- {stack && + {/* + stack && createPortal( = memo( stack />, document.body - )} + ) + */}