@performant-software/semantic-components 0.5.16-beta.0 → 0.5.16-beta.3

package/build/main.css

@@ -422,6 +422,14 @@ div.react-calendar {
   left: 4px;
 }
 
+.lazy-loader {
+  background-color: #f9fafb;
+  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
+  padding-top: 20%;
+  padding-bottom: 20%;
+  text-align: center;
+}
+
 .lazy-audio.ui.segment {
   display: inline-block !important;
   max-width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "0.5.16-beta.0",
+  "version": "0.5.16-beta.3",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -9,12 +9,10 @@
     "./build/semantic-ui.css"
   ],
   "scripts": {
-    "build": "webpack --mode production && flow-copy-source -v src types",
-    "publish": "npm publish",
-    "publish-beta": "npm publish --tag beta"
+    "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^0.5.16-beta.0",
+    "@performant-software/shared-components": "^0.5.16-beta.3",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",
@@ -35,7 +33,7 @@
     "react-dom": ">= 16.13.1 < 18.0.0"
   },
   "devDependencies": {
-    "@performant-software/webpack-config": "^0.5.16-beta.0",
+    "@performant-software/webpack-config": "^0.5.16-beta.3",
     "flow-copy-source": "^2.0.9",
     "less": "^4.1.2",
     "less-loader": "^11.0.0",

package/src/components/AudioPlayer.js

@@ -1,8 +1,9 @@
 // @flow
 
-import React from 'react';
-import { Button, Modal } from 'semantic-ui-react';
+import React, { useState } from 'react';
+import { Button, Message, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import './AudioPlayer.css';
 
 type Props = {
@@ -12,25 +13,42 @@ type Props = {
   src: string
 };
 
-const AudioPlayer = (props: Props) => (
-  <Modal
-    centered={props.centered}
-    className='audio-player'
-    open={props.open}
-  >
-    <Modal.Content>
-      <audio
-        controls
-        src={props.src}
-      />
-    </Modal.Content>
-    <Modal.Actions>
-      <Button
-        content={i18n.t('Common.buttons.close')}
-        onClick={props.onClose}
-      />
-    </Modal.Actions>
-  </Modal>
-);
+const AudioPlayer = (props: Props) => {
+  const [error, setError] = useState(false);
+
+  return (
+    <ModalContext.Consumer>
+      {(mountNode) => (
+        <Modal
+          centered={props.centered}
+          className='audio-player'
+          mountNode={mountNode}
+          open={props.open}
+        >
+          <Modal.Content>
+            { error && (
+              <Message
+                content={i18n.t('AudioPlayer.errors.path.content', { path: props.src })}
+                header={i18n.t('AudioPlayer.errors.path.header')}
+                icon='exclamation circle'
+              />
+            )}
+            <audio
+              controls
+              onError={() => setError(true)}
+              src={props.src}
+            />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button
+              content={i18n.t('Common.buttons.close')}
+              onClick={props.onClose}
+            />
+          </Modal.Actions>
+        </Modal>
+      )}
+    </ModalContext.Consumer>
+  );
+};
 
 export default AudioPlayer;

package/src/components/DownloadButton.js

@@ -1,23 +1,74 @@
 // @flow
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import uuid from 'react-uuid';
-import { Button } from 'semantic-ui-react';
+import { Icon } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
 
 type Props = {
+  basic?: boolean,
+  className?: string,
+  color?: string,
+  compact?: boolean,
   filename?: string,
+  primary?: boolean,
+  size?: string,
+  secondary?: boolean,
   url: string
 };
 
-const DownloadButton = ({ filename, url, ...button }: Props) => (
-  <a
-    download={filename || uuid()}
-    href={url}
-  >
-    <Button
-      {...button}
-    />
-  </a>
-);
+const DownloadButton = (props: Props) => {
+  /**
+   * Sets the appropriate class names based on the formatting props.
+   *
+   * @type {string}
+   */
+  const className = useMemo(() => {
+    const classNames = ['ui', 'button'];
+
+    if (props.basic) {
+      classNames.push('basic');
+    }
+
+    if (props.className) {
+      classNames.push(...props.className.split(' '));
+    }
+
+    if (props.color) {
+      classNames.push(props.color);
+    }
+
+    if (props.compact) {
+      classNames.push('compact');
+    }
+
+    if (props.primary) {
+      classNames.push('primary');
+    }
+
+    if (props.secondary) {
+      classNames.push('secondary');
+    }
+
+    if (props.size) {
+      classNames.push(props.size);
+    }
+
+    return classNames.join(' ');
+  }, [props.basic, props.color]);
+
+  return (
+    <a
+      className={className}
+      download={props.filename || uuid()}
+      href={props.url}
+    >
+      <Icon
+        name='cloud download'
+      />
+      { i18n.t('Common.buttons.download') }
+    </a>
+  );
+};
 
 export default DownloadButton;

package/src/components/IIIFModal.js

@@ -0,0 +1,26 @@
+// @flow
+
+import React from 'react';
+import { Modal } from 'semantic-ui-react';
+import { IIIFViewer } from '@performant-software/shared-components';
+
+type Props = {
+  onClose: () => void
+};
+
+const IIIFModal = ({ onClose, ...props }: Props) => (
+  <Modal
+    centered={false}
+    closeIcon
+    onClose={onClose}
+    open
+  >
+    <Modal.Content>
+      <IIIFViewer
+        {...props}
+      />
+    </Modal.Content>
+  </Modal>
+);
+
+export default IIIFModal;

package/src/components/LazyAudio.js

@@ -13,22 +13,28 @@ import {
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
 import AudioPlayer from './AudioPlayer';
+import DownloadButton from './DownloadButton';
+import LazyLoader from './LazyLoader';
 import './LazyAudio.css';
 
 type Props = {
   children?: Node,
   dimmable: boolean,
+  download?: string,
   duration?: number,
   image?: any,
+  name?: string,
   preview?: string,
   size?: string,
   src?: string
 };
 
 const LazyAudio = (props: Props) => {
-  const [visible, setVisible] = useState(false);
-  const [modal, setModal] = useState(false);
   const [dimmer, setDimmer] = useState(false);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(!props.preview);
+  const [modal, setModal] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   if (!visible) {
     return (
@@ -60,14 +66,28 @@ const LazyAudio = (props: Props) => {
           onMouseEnter={() => setDimmer(true)}
           onMouseLeave={() => setDimmer(false)}
         >
-          { props.preview && (
+          { !loaded && (
+            <LazyLoader
+              active
+              size={props.size}
+            />
+          )}
+          { !error && props.preview && (
             <Image
               {...props.image}
+              onError={() => {
+                setError(true);
+                setLoaded(true);
+              }}
+              onLoad={() => {
+                setError(false);
+                setLoaded(true);
+              }}
               size={props.size}
               src={props.preview}
             />
           )}
-          { !props.preview && (
+          { (error || !props.preview) && (
             <Image
               {...props.image}
               className='placeholder-image'
@@ -94,6 +114,13 @@ const LazyAudio = (props: Props) => {
                     primary
                   />
                 )}
+                { props.download && (
+                  <DownloadButton
+                    color='green'
+                    filename={props.name}
+                    url={props.download}
+                  />
+                )}
                 { props.children }
               </div>
             </Dimmer>

package/src/components/LazyDocument.js

@@ -11,8 +11,8 @@ import {
   Transition,
   Visibility
 } from 'semantic-ui-react';
-import i18n from '../i18n/i18n';
 import DownloadButton from './DownloadButton';
+import LazyLoader from './LazyLoader';
 import './LazyDocument.css';
 
 type Props = {
@@ -27,8 +27,10 @@ type Props = {
 };
 
 const LazyDocument = (props: Props) => {
-  const [visible, setVisible] = useState(false);
   const [dimmer, setDimmer] = useState(false);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(!props.preview);
+  const [visible, setVisible] = useState(false);
 
   if (!visible) {
     return (
@@ -60,9 +62,23 @@ const LazyDocument = (props: Props) => {
           onMouseEnter={() => setDimmer(true)}
           onMouseLeave={() => setDimmer(false)}
         >
-          { props.preview && (
+          { !loaded && (
+            <LazyLoader
+              active
+              size={props.size}
+            />
+          )}
+          { !error && props.preview && (
             <Image
               {...props.image}
+              onError={() => {
+                setError(true);
+                setLoaded(true);
+              }}
+              onLoad={() => {
+                setError(false);
+                setLoaded(true);
+              }}
               src={props.preview}
               size={props.size}
             />
@@ -81,7 +97,7 @@ const LazyDocument = (props: Props) => {
               </Document>
             </Image>
           )}
-          { !props.preview && !(props.src && props.pdf) && (
+          { (error || (!props.preview && !(props.src && props.pdf))) && (
             <Image
               {...props.image}
               className='placeholder-image'
@@ -102,8 +118,6 @@ const LazyDocument = (props: Props) => {
               >
                 { props.src && (
                   <DownloadButton
-                    content={i18n.t('LazyDocument.buttons.download')}
-                    icon='cloud download'
                     primary
                     url={props.src}
                   />

package/src/components/LazyIIIF.js

@@ -0,0 +1,44 @@
+// @flow
+
+import React, { useState, type Node } from 'react';
+import { Button } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import IIIFModal from './IIIFModal';
+import LazyMedia from './LazyMedia';
+
+type Props = {
+  children?: Node,
+  manifest?: string
+};
+
+const LazyIIIF = (props: Props) => {
+  const [modal, setModal] = useState(false);
+
+  return (
+    <>
+      <LazyMedia
+        {...props}
+      >
+        { props.manifest && (
+          <Button
+            content={i18n.t('Common.buttons.open')}
+            icon='images outline'
+            onClick={() => setModal(true)}
+          />
+        )}
+        { props.children }
+      </LazyMedia>
+      { modal && (
+        <IIIFModal
+          manifestId={props.manifest}
+          onClose={() => setModal(false)}
+          options={{
+            showIIIFBadge: false
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default LazyIIIF;

package/src/components/LazyImage.js

@@ -12,23 +12,29 @@ import {
   Visibility
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import DownloadButton from './DownloadButton';
+import LazyLoader from './LazyLoader';
 import PhotoViewer from './PhotoViewer';
 import './LazyImage.css';
 
 type Props = {
   children?: Node,
   dimmable: boolean,
+  download?: string,
   duration?: number,
   image?: any,
+  name?: string,
   preview?: string,
   size?: string,
   src?: string
 };
 
 const LazyImage = (props: Props) => {
-  const [visible, setVisible] = useState(false);
-  const [modal, setModal] = useState(false);
   const [dimmer, setDimmer] = useState(false);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(!(props.src || props.preview));
+  const [modal, setModal] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   if (!visible) {
     return (
@@ -60,14 +66,28 @@ const LazyImage = (props: Props) => {
           onMouseEnter={() => setDimmer(true)}
           onMouseLeave={() => setDimmer(false)}
         >
-          { (props.preview || props.src) && (
+          { !loaded && (
+            <LazyLoader
+              active
+              size={props.size}
+            />
+          )}
+          { !error && (props.preview || props.src) && (
             <Image
               {...props.image}
+              onError={() => {
+                setError(true);
+                setLoaded(true);
+              }}
+              onLoad={() => {
+                setError(false);
+                setLoaded(true);
+              }}
               size={props.size}
               src={props.preview || props.src}
             />
           )}
-          { !(props.preview || props.src) && (
+          { (error || !(props.preview || props.src)) && (
             <Image
               {...props.image}
               className='placeholder-image'
@@ -79,7 +99,7 @@ const LazyImage = (props: Props) => {
               />
             </Image>
           )}
-          { (props.src || props.children) && props.dimmable && (
+          { !error && (props.src || props.children) && props.dimmable && (
             <Dimmer
               active={dimmer}
             >
@@ -94,6 +114,13 @@ const LazyImage = (props: Props) => {
                     primary
                   />
                 )}
+                { props.download && (
+                  <DownloadButton
+                    color='green'
+                    filename={props.name}
+                    url={props.download}
+                  />
+                )}
                 { props.children }
               </div>
             </Dimmer>

package/src/components/LazyLoader.css

@@ -0,0 +1,7 @@
+.lazy-loader {
+  background-color: #f9fafb;
+  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
+  padding-top: 20%;
+  padding-bottom: 20%;
+  text-align: center;
+}

package/src/components/LazyLoader.js

@@ -0,0 +1,28 @@
+// @flow
+
+import React from 'react';
+import { Image, Loader } from 'semantic-ui-react';
+import './LazyLoader.css';
+
+type Props = {
+  active: boolean,
+  size: string
+};
+
+const LazyLoader = (props: Props) => (
+  <Image
+    className='lazy-loader'
+    size={props.size}
+  >
+    <Loader
+      active={props.active}
+    />
+  </Image>
+);
+
+LazyLoader.defaultProps = {
+  active: false,
+  size: 'small'
+};
+
+export default LazyLoader;