details and gallery

1 files changed, 75 insertions, 0 deletions

diff --git a/src/views/Gallery.js b/src/views/Gallery.js
new file mode 100644
index 0000000..7bdf18b
--- /dev/null
+++ b/src/views/Gallery.js
@@ -0,0 +1,75 @@
+/**
+ * Detail view, displaying text plus media
+ */
+
+import React, { useState, useEffect } from "react";
+
+export default function Gallery({ images, visible }) {
+  const hasItems = !!images?.length;
+  const oneItem = images?.length === 1;
+
+  const [index, setIndex] = useState(0);
+  const [opacity, setOpacity] = useState(0);
+  useEffect(() => {
+    setIndex(0);
+    setOpacity(0);
+    setTimeout(() => setOpacity(1), 500);
+  }, [images]);
+
+  function previous() {
+    setOpacity(0);
+    setTimeout(() => setIndex(Math.max(0, index - 1)), 100);
+    // setTimeout(() => setOpacity(1), 500);
+  }
+  function next() {
+    setOpacity(0);
+    setTimeout(() => setIndex(Math.min(images.length - 1, index + 1)), 100);
+    // setTimeout(() => setOpacity(1), 500);
+  }
+  function nextOrWrap() {
+    if (oneItem) return;
+    setOpacity(0);
+    setTimeout(() => setIndex(mod(index + 1, images.length)), 100);
+    // setTimeout(() => setOpacity(1), 500);
+  }
+  function appear() {
+    setOpacity(1);
+  }
+
+  if (!hasItems) {
+    return <div className="gallery" style={{ opacity: 0 }} />;
+  }
+
+  return (
+    <div className="gallery" style={{ opacity: visible ? 1 : 0 }}>
+      <div className="image">
+        {visible && !!images[index] && (
+          <img
+            src={images[index].uri}
+            onClick={nextOrWrap}
+            onLoad={appear}
+            style={{ opacity }}
+          />
+        )}
+      </div>
+      <div className="buttons">
+        {!oneItem && (
+          <img
+            src="/assets/img/arrow-back.svg"
+            onClick={previous}
+            style={{ opacity: index > 0 ? 1 : 0 }}
+          />
+        )}
+        {!oneItem && (
+          <img
+            src="/assets/img/arrow-forward.svg"
+            onClick={next}
+            style={{ opacity: index < images.length - 1 ? 1 : 0 }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+const mod = (n, m) => n - m * Math.floor(n / m);