@performant-software/semantic-components 1.0.16 → 1.0.17

package/build/main.css

@@ -601,6 +601,37 @@ div.react-calendar {
   aspect-ratio: 1;
 }
 
+.image-carousel > .content {
+  height: 100%;
+  width: 100%;
+}
+.image-carousel > .content > .ui.grid {
+  height: 100%;
+}
+.image-carousel > .content > .ui.grid > .row.image-content {
+  flex-grow: 1;
+}
+.image-carousel > .content > .ui.grid > .row.image-content > .column {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.image-carousel > .content > .ui.grid > .row.image-content > .column.image-container {
+  flex-grow: 1;
+}
+.image-carousel > .content > .ui.grid > .row.image-content > .column.image-container img {
+  width: 100%;
+  height: auto;
+  max-height: 70vh;
+  object-fit: contain;
+}
+.image-carousel .ui.button,
+.image-carousel .ui.button:hover {
+  border: none;
+  background: none;
+  color: #FFFFFF;
+}
+
 .item-list {
   margin: 1em 0em 1em 0em;
 }
@@ -685,6 +716,9 @@ div.react-calendar {
   width: 100% !important;
   height: 100% !important;
 }
+.lazy-document > .image.hidden {
+  display: none;
+}
 
 .photo-viewer {
   padding: 30px;
@@ -713,6 +747,9 @@ div.react-calendar {
   padding-bottom: 20%;
   text-align: center;
 }
+.lazy-image > .image.hidden {
+  display: none;
+}
 
 .video-player video {
   width: 100%;
@@ -745,6 +782,9 @@ div.react-calendar {
   display: table;
   width: 100%;
 }
+.lazy-video > .image.hidden {
+  display: none;
+}
 
 .listLoader.ui.segment {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.16",
+    "@performant-software/shared-components": "^1.0.17",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

package/src/components/ImageCarousel.css

@@ -0,0 +1,36 @@
+.image-carousel > .content {
+  height: 100%;
+  width: 100%;
+}
+
+.image-carousel > .content > .ui.grid {
+  height: 100%;
+}
+
+.image-carousel > .content > .ui.grid > .row.image-content {
+  flex-grow: 1;
+}
+
+.image-carousel > .content > .ui.grid > .row.image-content > .column {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-carousel > .content > .ui.grid > .row.image-content > .column.image-container {
+  flex-grow: 1;
+}
+
+.image-carousel > .content > .ui.grid > .row.image-content > .column.image-container img {
+  width: 100%;
+  height: auto;
+  max-height: 70vh;
+  object-fit: contain;
+}
+
+.image-carousel .ui.button,
+.image-carousel .ui.button:hover {
+  border: none;
+  background: none;
+  color: #FFFFFF;
+}

package/src/components/ImageCarousel.js

@@ -0,0 +1,154 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import {
+  Button,
+  Dimmer,
+  Grid,
+  Image,
+  Loader,
+  Transition
+} from 'semantic-ui-react';
+import './ImageCarousel.css';
+
+type ImageType = {
+  caption?: string,
+  src: string
+};
+
+type Props = {
+  images: Array<ImageType>,
+  onClose: () => void
+};
+
+const ImageCarousel = (props: Props) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  /**
+   * Sets the current image based on the current index.
+   *
+   * @type {*}
+   */
+  const image = useMemo(() => {
+    let value;
+
+    if (props.images && props.images.length > currentIndex) {
+      value = props.images[currentIndex];
+    }
+
+    return value;
+  }, [currentIndex, props.images]);
+
+  /**
+   * Sets the new index value.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onIndexChange = useCallback((increment) => {
+    const newIndex = currentIndex + increment;
+
+    if (newIndex >= 0 && newIndex < props.images.length) {
+      setCurrentIndex(newIndex);
+      setVisible(false);
+    }
+  }, [currentIndex, props.images]);
+
+  /**
+   * Sets up the component when initially mounted.
+   */
+  useEffect(() => {
+    // Disabled scrolling on the page when carousel is visible.
+    if (document.body) {
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      // Re-enable scrolling
+      if (document.body) {
+        document.body.style.overflow = 'auto';
+      }
+    };
+  }, []);
+
+  return (
+    <Dimmer
+      active
+      className='image-carousel'
+      page
+    >
+      <Grid
+        padded
+      >
+        <Grid.Row>
+          <Grid.Column
+            textAlign='right'
+          >
+            <Button
+              icon='times'
+              onClick={props.onClose}
+              size='huge'
+            />
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row
+          className='image-content'
+        >
+          <Grid.Column>
+            { props.images && props.images.length > 1 && (
+              <Button
+                disabled={currentIndex === 0}
+                icon='chevron left'
+                onClick={() => onIndexChange(-1)}
+                size='massive'
+              />
+            )}
+          </Grid.Column>
+          <Grid.Column
+            className='image-container'
+          >
+            { !visible && (
+              <Loader
+                active
+              />
+            )}
+            <Transition
+              animation='fade'
+              duration={500}
+              visible={visible}
+            >
+              <Image
+                src={image?.src}
+                onLoad={() => setVisible(true)}
+              />
+            </Transition>
+          </Grid.Column>
+          <Grid.Column>
+            { props.images && props.images.length > 1 && (
+              <Button
+                disabled={currentIndex === props.images.length - 1}
+                icon='chevron right'
+                onClick={() => onIndexChange(1)}
+                size='massive'
+              />
+            )}
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Column
+            textAlign='center'
+          >
+            { image?.caption }
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Dimmer>
+  );
+};
+
+export default ImageCarousel;

package/src/components/LazyDocument.css

@@ -26,3 +26,7 @@
   width: 100% !important;
   height: 100% !important;
 }
+
+.lazy-document > .image.hidden {
+  display: none;
+}

package/src/components/LazyDocument.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState, type Node } from 'react';
+import React, { useCallback, useState, type Node } from 'react';
 import { pdfjs, Document, Page } from 'react-pdf';
 import {
   Dimmer,
@@ -38,6 +38,25 @@ const LazyDocument = (props: Props) => {
   const [loaded, setLoaded] = useState(!props.preview);
   const [visible, setVisible] = useState(false);
 
+  /**
+   * Returns the list of class names for the image component.
+   *
+   * @type {function(*=): []}
+   */
+  const getClassNames = useCallback((defaultClass = null) => {
+    const classNames = [];
+
+    if (defaultClass) {
+      classNames.push(defaultClass);
+    }
+
+    if (!loaded) {
+      classNames.push('hidden');
+    }
+
+    return classNames.join(' ');
+  }, [loaded]);
+
   if (!visible) {
     return (
       <Visibility
@@ -77,6 +96,7 @@ const LazyDocument = (props: Props) => {
           { !error && props.preview && (
             <Image
               {...props.image}
+              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -92,6 +112,7 @@ const LazyDocument = (props: Props) => {
           { !error && loaded && !props.preview && props.src && props.pdf && (
             <Image
               {...props.image}
+              className={getClassNames()}
               size={props.size}
             >
               <Document
@@ -107,7 +128,7 @@ const LazyDocument = (props: Props) => {
           { (error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}
-              className='placeholder-image'
+              className={getClassNames('placeholder-image')}
               size={props.size}
             >
               <Icon

package/src/components/LazyImage.css

@@ -21,3 +21,7 @@
   padding-bottom: 20%;
   text-align: center;
 }
+
+.lazy-image > .image.hidden {
+  display: none;
+}

package/src/components/LazyImage.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState, type Node } from 'react';
+import React, { useCallback, useState, type Node } from 'react';
 import {
   Button,
   Dimmer,
@@ -36,6 +36,25 @@ const LazyImage = (props: Props) => {
   const [modal, setModal] = useState(false);
   const [visible, setVisible] = useState(false);
 
+  /**
+   * Returns the list of class names for the image component.
+   *
+   * @type {function(*=): []}
+   */
+  const getClassNames = useCallback((defaultClass = null) => {
+    const classNames = [];
+
+    if (defaultClass) {
+      classNames.push(defaultClass);
+    }
+
+    if (!loaded) {
+      classNames.push('hidden');
+    }
+
+    return classNames.join(' ');
+  }, [loaded]);
+
   if (!visible) {
     return (
       <Visibility
@@ -75,6 +94,7 @@ const LazyImage = (props: Props) => {
           { !error && (props.preview || props.src) && (
             <Image
               {...props.image}
+              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -90,7 +110,7 @@ const LazyImage = (props: Props) => {
           { (error || !(props.preview || props.src)) && (
             <Image
               {...props.image}
-              className='placeholder-image'
+              className={getClassNames('placeholder-image')}
               size={props.size}
             >
               <Icon

package/src/components/LazyVideo.css

@@ -26,3 +26,7 @@
   display: table;
   width: 100%;
 }
+
+.lazy-video > .image.hidden {
+  display: none;
+}

package/src/components/LazyVideo.js

@@ -1,6 +1,11 @@
 // @flow
 
-import React, { useState, type Element, type Node } from 'react';
+import React, {
+  useCallback,
+  useState,
+  type Element,
+  type Node
+} from 'react';
 import {
   Button,
   Dimmer,
@@ -39,6 +44,25 @@ const LazyVideo = (props: Props) => {
   const [modal, setModal] = useState(false);
   const [visible, setVisible] = useState(false);
 
+  /**
+   * Returns the list of class names for the image component.
+   *
+   * @type {function(*=): []}
+   */
+  const getClassNames = useCallback((defaultClass = null) => {
+    const classNames = [];
+
+    if (defaultClass) {
+      classNames.push(defaultClass);
+    }
+
+    if (!loaded) {
+      classNames.push('hidden');
+    }
+
+    return classNames.join(' ');
+  }, [loaded]);
+
   if (!visible) {
     return (
       <Visibility
@@ -78,6 +102,7 @@ const LazyVideo = (props: Props) => {
           { !error && props.preview && (
             <Image
               {...props.image}
+              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -93,6 +118,7 @@ const LazyVideo = (props: Props) => {
           { !error && !props.preview && props.src && (
             <Image
               {...props.image}
+              className={getClassNames()}
               size={props.size}
             >
               <video
@@ -111,7 +137,7 @@ const LazyVideo = (props: Props) => {
           { (error || (!props.preview && !props.src)) && (
             <Image
               {...props.image}
-              className='placeholder-image'
+              className={getClassNames('placeholder-image')}
               size={props.size}
             >
               <Icon

package/src/index.js

@@ -45,6 +45,7 @@ export { default as GoogleMap } from './components/GoogleMap';
 export { default as GooglePlacesSearch } from './components/GooglePlacesSearch';
 export { default as HorizontalCards } from './components/HorizontalCards';
 export { default as IIIFModal } from './components/IIIFModal';
+export { default as ImageCarousel } from './components/ImageCarousel';
 export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';
 export { default as Items } from './components/Items';

package/types/components/LazyDocument.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState, type Node } from 'react';
+import React, { useCallback, useState, type Node } from 'react';
 import { pdfjs, Document, Page } from 'react-pdf';
 import {
   Dimmer,
@@ -38,6 +38,25 @@ const LazyDocument = (props: Props) => {
   const [loaded, setLoaded] = useState(!props.preview);
   const [visible, setVisible] = useState(false);
 
+  /**
+   * Returns the list of class names for the image component.
+   *
+   * @type {function(*=): []}
+   */
+  const getClassNames = useCallback((defaultClass = null) => {
+    const classNames = [];
+
+    if (defaultClass) {
+      classNames.push(defaultClass);
+    }
+
+    if (!loaded) {
+      classNames.push('hidden');
+    }
+
+    return classNames.join(' ');
+  }, [loaded]);
+
   if (!visible) {
     return (
       <Visibility
@@ -77,6 +96,7 @@ const LazyDocument = (props: Props) => {
           { !error && props.preview && (
             <Image
               {...props.image}
+              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -92,6 +112,7 @@ const LazyDocument = (props: Props) => {
           { !error && loaded && !props.preview && props.src && props.pdf && (
             <Image
               {...props.image}
+              className={getClassNames()}
               size={props.size}
             >
               <Document
@@ -107,7 +128,7 @@ const LazyDocument = (props: Props) => {
           { (error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}
-              className='placeholder-image'
+              className={getClassNames('placeholder-image')}
               size={props.size}
             >
               <Icon

package/types/components/LazyImage.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState, type Node } from 'react';
+import React, { useCallback, useState, type Node } from 'react';
 import {
   Button,
   Dimmer,
@@ -36,6 +36,25 @@ const LazyImage = (props: Props) => {
   const [modal, setModal] = useState(false);
   const [visible, setVisible] = useState(false);
 
+  /**
+   * Returns the list of class names for the image component.
+   *
+   * @type {function(*=): []}
+   */
+  const getClassNames = useCallback((defaultClass = null) => {
+    const classNames = [];
+
+    if (defaultClass) {
+      classNames.push(defaultClass);
+    }
+
+    if (!loaded) {
+      classNames.push('hidden');
+    }
+
+    return classNames.join(' ');
+  }, [loaded]);
+
   if (!visible) {
     return (
       <Visibility
@@ -75,6 +94,7 @@ const LazyImage = (props: Props) => {
           { !error && (props.preview || props.src) && (
             <Image
               {...props.image}
+              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -90,7 +110,7 @@ const LazyImage = (props: Props) => {
           { (error || !(props.preview || props.src)) && (
             <Image
               {...props.image}
-              className='placeholder-image'
+              className={getClassNames('placeholder-image')}
               size={props.size}
             >
               <Icon

package/types/components/LazyVideo.js.flow

@@ -1,6 +1,11 @@
 // @flow
 
-import React, { useState, type Element, type Node } from 'react';
+import React, {
+  useCallback,
+  useState,
+  type Element,
+  type Node
+} from 'react';
 import {
   Button,
   Dimmer,
@@ -39,6 +44,25 @@ const LazyVideo = (props: Props) => {
   const [modal, setModal] = useState(false);
   const [visible, setVisible] = useState(false);
 
+  /**
+   * Returns the list of class names for the image component.
+   *
+   * @type {function(*=): []}
+   */
+  const getClassNames = useCallback((defaultClass = null) => {
+    const classNames = [];
+
+    if (defaultClass) {
+      classNames.push(defaultClass);
+    }
+
+    if (!loaded) {
+      classNames.push('hidden');
+    }
+
+    return classNames.join(' ');
+  }, [loaded]);
+
   if (!visible) {
     return (
       <Visibility
@@ -78,6 +102,7 @@ const LazyVideo = (props: Props) => {
           { !error && props.preview && (
             <Image
               {...props.image}
+              className={getClassNames()}
               onError={() => {
                 setError(true);
                 setLoaded(true);
@@ -93,6 +118,7 @@ const LazyVideo = (props: Props) => {
           { !error && !props.preview && props.src && (
             <Image
               {...props.image}
+              className={getClassNames()}
               size={props.size}
             >
               <video
@@ -111,7 +137,7 @@ const LazyVideo = (props: Props) => {
           { (error || (!props.preview && !props.src)) && (
             <Image
               {...props.image}
-              className='placeholder-image'
+              className={getClassNames('placeholder-image')}
               size={props.size}
             >
               <Icon

package/types/index.js.flow

@@ -45,6 +45,7 @@ export { default as GoogleMap } from './components/GoogleMap';
 export { default as GooglePlacesSearch } from './components/GooglePlacesSearch';
 export { default as HorizontalCards } from './components/HorizontalCards';
 export { default as IIIFModal } from './components/IIIFModal';
+export { default as ImageCarousel } from './components/ImageCarousel';
 export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';
 export { default as Items } from './components/Items';