@performant-software/semantic-components 0.5.16-beta.1 → 0.5.16-beta.4

package/types/components/IIIFModal.js.flow

@@ -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/types/components/LazyAudio.js.flow

@@ -13,14 +13,17 @@ 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
@@ -111,6 +114,13 @@ const LazyAudio = (props: Props) => {
                     primary
                   />
                 )}
+                { props.download && (
+                  <DownloadButton
+                    color='green'
+                    filename={props.name}
+                    url={props.download}
+                  />
+                )}
                 { props.children }
               </div>
             </Dimmer>

package/types/components/LazyDocument.js.flow

@@ -11,7 +11,6 @@ import {
   Transition,
   Visibility
 } from 'semantic-ui-react';
-import i18n from '../i18n/i18n';
 import DownloadButton from './DownloadButton';
 import LazyLoader from './LazyLoader';
 import './LazyDocument.css';
@@ -119,8 +118,6 @@ const LazyDocument = (props: Props) => {
               >
                 { props.src && (
                   <DownloadButton
-                    content={i18n.t('LazyDocument.buttons.download')}
-                    icon='cloud download'
                     primary
                     url={props.src}
                   />

package/types/components/LazyIIIF.js.flow

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

package/types/components/LazyImage.js.flow

@@ -12,6 +12,7 @@ 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';
@@ -19,8 +20,10 @@ import './LazyImage.css';
 type Props = {
   children?: Node,
   dimmable: boolean,
+  download?: string,
   duration?: number,
   image?: any,
+  name?: string,
   preview?: string,
   size?: string,
   src?: string
@@ -111,6 +114,13 @@ const LazyImage = (props: Props) => {
                     primary
                   />
                 )}
+                { props.download && (
+                  <DownloadButton
+                    color='green'
+                    filename={props.name}
+                    url={props.download}
+                  />
+                )}
                 { props.children }
               </div>
             </Dimmer>

package/types/components/LazyMedia.js.flow

@@ -0,0 +1,243 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType,
+  type Node
+} from 'react';
+import { Icon } from 'semantic-ui-react';
+import { Trans } from 'react-i18next';
+import _ from 'underscore';
+import FileInputButton from './FileInputButton';
+import i18n from '../i18n/i18n';
+import LazyAudio from './LazyAudio';
+import LazyDocument from './LazyDocument';
+import LazyImage from './LazyImage';
+import LazyVideo from './LazyVideo';
+
+type Props = {
+  children?: Node,
+  contentType: string,
+  dimmable?: boolean,
+  downloadUrl?: string,
+  name?: string,
+  onUpload: (file: File) => void,
+  preview?: string,
+  size?: string,
+  src?: string
+};
+
+const ContentTypes = {
+  audio: 'audio',
+  image: 'image',
+  pdf: 'application/pdf',
+  video: 'video'
+};
+
+const WebContentTypes = [
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'image/bmp',
+  'video/m4v',
+  'video/mp4'
+];
+
+const LazyMedia: ComponentType<any> = (props: Props) => {
+  const [contentType, setContentType] = useState(props.contentType || '');
+  const [name, setName] = useState(props.name);
+  const [preview, setPreview] = useState(props.preview);
+  const [source, setSource] = useState(props.src);
+
+  /**
+   * Sets the file extension based on the name.
+   *
+   * @type {*}
+   */
+  const fileExtension = useMemo(() => {
+    let value;
+
+    if (name) {
+      value = name.split('.').pop();
+      value = value && value.toUpperCase();
+    }
+
+    return value;
+  }, [name]);
+
+  /**
+   * Sets the content type, name, preview, and source attributes. Also calls the onUpload prop.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onUpload = useCallback((files) => {
+    const file = _.first(files);
+
+    setContentType(file.type);
+    setName(file.name);
+    setPreview(null);
+
+    if (_.contains(WebContentTypes, file.type)
+      || file.type.startsWith(ContentTypes.audio)
+      || file.type === ContentTypes.pdf) {
+      setSource(URL.createObjectURL(file));
+    } else {
+      setSource(null);
+    }
+
+    props.onUpload(file);
+  }, [props.onUpload]);
+
+  /**
+   * Renders the child buttons.
+   *
+   * @type {unknown}
+   */
+  const renderChildren = useCallback(() => (
+    <>
+      { props.onUpload && (
+        <FileInputButton
+          color='orange'
+          content={i18n.t('Common.buttons.upload')}
+          icon='cloud upload'
+          onSelection={onUpload}
+        />
+      )}
+      { props.children }
+    </>
+  ));
+
+  /**
+   * Renders the media component.
+   *
+   * @type {(function(): *)|*}
+   */
+  const renderMedia = useCallback(() => {
+    if (contentType.startsWith(ContentTypes.image)) {
+      return (
+        <LazyImage
+          dimmable={props.dimmable}
+          download={props.downloadUrl}
+          preview={preview}
+          src={source}
+          size={props.size}
+        >
+          { renderChildren() }
+        </LazyImage>
+      );
+    }
+
+    if (contentType.startsWith(ContentTypes.video)) {
+      return (
+        <LazyVideo
+          dimmable={props.dimmable}
+          download={props.downloadUrl}
+          preview={preview}
+          src={source}
+          size={props.size}
+        >
+          { renderChildren() }
+        </LazyVideo>
+      );
+    }
+
+    if (contentType.startsWith(ContentTypes.audio)) {
+      return (
+        <LazyAudio
+          dimmable={props.dimmable}
+          download={props.downloadUrl}
+          preview={preview}
+          src={source}
+          size={props.size}
+        >
+          { renderChildren() }
+        </LazyAudio>
+      );
+    }
+
+    return (
+      <LazyDocument
+        dimmable={props.dimmable}
+        pdf={contentType === ContentTypes.pdf}
+        preview={preview}
+        src={source}
+        size={props.size}
+      >
+        { renderChildren() }
+      </LazyDocument>
+    );
+  }, [contentType, preview, source, props.dimmable, props.downloadUrl, props.size]);
+
+  /**
+   * Renders the upload message.
+   *
+   * @type {(function(): (null|*))|*}
+   */
+  const renderMessage = useCallback(() => {
+    if (!fileExtension) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Icon
+          name='info circle'
+        />
+        <span>
+          <Trans
+            components={{ bold: <strong /> }}
+            default='Your <bold>{{type}}</bold> has been received'
+            i18n={i18n}
+            i18nKey='LazyMedia.messages.uploaded'
+            values={{
+              type: fileExtension
+            }}
+          />
+        </span>
+      </div>
+    );
+  }, [fileExtension]);
+
+  /**
+   * Sets the content type, name, preview, and source.
+   */
+  useEffect(() => {
+    if (props.contentType) {
+      setContentType(props.contentType);
+    }
+
+    if (props.name) {
+      setName(props.name);
+    }
+
+    if (props.preview) {
+      setPreview(props.preview);
+    }
+
+    if (props.src) {
+      setSource(props.src);
+    } else {
+      setSource(null);
+    }
+  }, [props.contentType, props.name, props.preview, props.src]);
+
+  return (
+    <div
+      className='lazy-media'
+    >
+      { renderMedia() }
+      { renderMessage() }
+    </div>
+  );
+};
+
+LazyMedia.defaultProps = {
+  dimmable: true,
+  size: 'medium'
+};
+
+export default LazyMedia;

package/types/components/LazyVideo.js.flow

@@ -12,6 +12,7 @@ import {
   Visibility
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import DownloadButton from './DownloadButton';
 import LazyLoader from './LazyLoader';
 import VideoPlayer from './VideoPlayer';
 import './LazyVideo.css';
@@ -20,10 +21,12 @@ type Props = {
   autoPlay?: boolean,
   children?: Node,
   dimmable: boolean,
+  download?: string,
   duration?: number,
   embedded?: boolean,
   icon?: string | Element<any>,
   image?: any,
+  name?: string,
   preview?: ?string,
   size?: string,
   src?: string
@@ -132,6 +135,13 @@ const LazyVideo = (props: Props) => {
                     primary
                   />
                 )}
+                { props.download && (
+                  <DownloadButton
+                    color='green'
+                    filename={props.name}
+                    url={props.download}
+                  />
+                )}
                 { props.children }
               </div>
             </Dimmer>

package/types/index.js.flow

@@ -35,6 +35,7 @@ export { default as FuzzyDate } from './components/FuzzyDate';
 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 ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';
 export { default as Items } from './components/Items';
@@ -42,7 +43,9 @@ export { default as KeyboardField } from './components/KeyboardField';
 export { default as KeyValuePairs } from './components/KeyValuePairs';
 export { default as LazyAudio } from './components/LazyAudio';
 export { default as LazyDocument } from './components/LazyDocument';
+export { default as LazyIIIF } from './components/LazyIIIF';
 export { default as LazyImage } from './components/LazyImage';
+export { default as LazyMedia } from './components/LazyMedia';
 export { default as LazyVideo } from './components/LazyVideo';
 export { default as LinkButton } from './components/LinkButton';
 export { default as ListFilters } from './components/ListFilters';