NodeImageBlock resizes to content

src/components/node/ImageSwitcher/index.tsx

@@ -7,13 +7,18 @@ import classNames = require('classnames');
 interface IProps {
   total: number;
   current: number;
+  onChange: (current: number) => void;
 }
 
-const ImageSwitcher: FC<IProps> = ({ total, current }) => (
+const ImageSwitcher: FC<IProps> = ({ total, current, onChange }) => (
   <div className={styles.wrap}>
     <div className={styles.switcher}>
       {range(0, total).map(item => (
-        <div className={classNames({ is_active: item === current })} key={item} />
+        <div
+          className={classNames({ is_active: item === current })}
+          key={item}
+          onClick={() => onChange(item)}
+        />
       ))}
     </div>
   </div>

src/components/node/ImageSwitcher/styles.scss

@@ -2,6 +2,7 @@
   width: 100%;
   height: 0;
   position: relative;
+  z-index: 2;
 }
 
 .switcher {
@@ -22,7 +23,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: .5;
+    opacity: 0.5;
     transition: opacity 0.25s;
 
     &:hover {

src/components/node/NodeImageBlock/index.tsx

@@ -1,10 +1,20 @@
-import React, { FC, useMemo } from 'react';
+import React, {
+  FC,
+  useMemo,
+  useState,
+  useEffect,
+  RefObject,
+  LegacyRef,
+  useRef,
+  useCallback,
+} from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
 import classNames from 'classnames';
 import { getImageSize } from '~/utils/dom';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
+import { readFileSync } from 'fs';
 
 interface IProps {
   is_loading: boolean;
@@ -12,26 +22,56 @@ interface IProps {
 }
 
 const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
+  const [current, setCurrent] = useState(0);
+  const [height, setHeight] = useState(0);
+  const refs = useRef<HTMLDivElement[]>([]);
+  // const [refs, setRefs] = useState<Record<number, HTMLDivElement | RefObject<any>>>({});
+
   const images = useMemo(
     () =>
       (node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
     [node]
   );
 
+  const setRef = useCallback(
+    index => el => {
+      refs.current[index] = el;
+    },
+    [refs]
+  );
+
+  useEffect(() => {
+    console.log({ refs });
+
+    if (!refs || !refs.current[current]) return;
+
+    const el = refs.current[current];
+
+    const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
+
+    setHeight(element_height);
+  }, [refs, current]);
+
   return (
     <div className={classNames(styles.wrap, { is_loading })}>
       {!is_loading && (
         <div>
-          <ImageSwitcher total={5} current={2} />
+          <ImageSwitcher total={images.length} current={current} onChange={setCurrent} />
 
-          <div className={styles.image_container}>
-            {images.map(file => (
-              <img
-                className={styles.image}
-                src={getImageSize(file.url, 'node')}
-                alt=""
+          <div className={styles.image_container} style={{ height }}>
+            {images.map((file, index) => (
+              <div
+                className={classNames(styles.image_wrap, { is_active: index === current })}
+                ref={setRef(index)}
                 key={file.id}
-              />
+              >
+                <img
+                  className={styles.image}
+                  src={getImageSize(file.url, 'node')}
+                  alt=""
+                  key={file.id}
+                />
+              </div>
             ))}
           </div>
         </div>

src/components/node/NodeImageBlock/styles.scss

@@ -5,6 +5,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  overflow: hidden;
+  transition: height 0.5s;
 
   .image {
     max-height: 800px;
@@ -13,3 +16,19 @@
     border-radius: $radius $radius 0 0;
   }
 }
+
+.image_wrap {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  z-index: 1;
+  transition: opacity 0.5s;
+
+  &:global(.is_active) {
+    opacity: 1;
+  }
+}

src/containers/examples/ImageExample/index.tsx

@@ -9,13 +9,13 @@ import { NodePanel } from '~/components/node/NodePanel';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { Tags } from '~/components/node/Tags';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { ImageSwitcher } from "~/components/node/ImageSwitcher";
+import { ImageSwitcher } from '~/components/node/ImageSwitcher';
 
 interface IProps {}
 
 const ImageExample: FC<IProps> = () => (
   <Card className={styles.node} seamless>
-    <ImageSwitcher total={5} current={2} />
+    <ImageSwitcher total={5} current={2} onChange={console.log} />
 
     <div className={styles.image_container}>
       <img