@performant-software/semantic-components 1.2.0-beta.27 → 1.2.0-beta.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.2.0-beta.27",
+  "version": "1.2.0-beta.29",
   "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.2.0-beta.27",
+    "@performant-software/shared-components": "^1.2.0-beta.29",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",
@@ -32,6 +32,7 @@
     "zotero-translation-client": "^5.0.1"
   },
   "peerDependencies": {
+    "@samvera/clover-iiif": "^2.3.2",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

package/src/components/BibliographyList.js

@@ -23,7 +23,7 @@ import SortSelector from './SortSelector';
 import { SORT_DESCENDING } from '../constants/Sort';
 import StyleSelector from './StyleSelector';
 import Toaster from './Toaster';
-import useList, { Props as ListProps } from './List';
+import useList, { type Props as ListProps } from './List';
 import ZoteroTranslateContext from '../context/ZoteroTranslateContext';
 import './BibliographyList.css';
 

package/src/components/DataTable.js

@@ -13,8 +13,8 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import ColumnResize from './ColumnResize';
-import useColumnSelector, { Props as ColumnSelectorProps } from './DataTableColumnSelector';
-import useList, { Props as ListProps } from './List';
+import useColumnSelector, { type Props as ColumnSelectorProps } from './DataTableColumnSelector';
+import useList, { type Props as ListProps } from './List';
 import './DataTable.css';
 
 import type { Action } from './List';

package/src/components/ImageCarousel.js

@@ -22,10 +22,20 @@ type ImageType = {
 };
 
 type Props = {
+  /**
+   * The array of images to display.
+   */
   images: Array<ImageType>,
+
+  /**
+   * Callback fired when the close icon is clicked.
+   */
   onClose: () => void
 };
 
+/**
+ * This component renders a full screen image carousel component used to scroll through the passed array of images.
+ */
 const ImageCarousel = (props: Props) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [visible, setVisible] = useState(true);

package/src/components/LazyIIIF.js

@@ -1,10 +1,10 @@
 // @flow
 
+import Viewer from '@samvera/clover-iiif/viewer';
 import React, { useState, type Node } from 'react';
-import { Button } from 'semantic-ui-react';
+import { Button, Modal } from 'semantic-ui-react';
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
-import IIIFModal from './IIIFModal';
 import LazyMedia from './LazyMedia';
 
 type Props = {
@@ -34,11 +34,19 @@ const LazyIIIF = ({ manifest, options = {}, ...props }: Props) => {
         { props.children }
       </LazyMedia>
       { modal && (
-        <IIIFModal
-          manifestId={manifest}
+        <Modal
+          centered={false}
+          closeIcon
           onClose={() => setModal(false)}
-          options={_.defaults(options, { showIIIFBadge: false })}
-        />
+          open
+        >
+          <Modal.Content>
+            <Viewer
+              iiifContent={manifest}
+              options={_.defaults(options, { showIIIFBadge: false })}
+            />
+          </Modal.Content>
+        </Modal>
       )}
     </>
   );

package/src/components/SimpleEditPage.js

@@ -14,10 +14,10 @@ import {
   Form,
   Grid,
   Menu,
-  MenuProps,
   Message,
   Ref,
-  Sticky
+  Sticky,
+  type MenuProps
 } from 'semantic-ui-react';
 import _ from 'underscore';
 import i18n from '../i18n/i18n';

package/src/index.js

@@ -47,7 +47,6 @@ 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 ImageCarousel } from './components/ImageCarousel';
 export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';

package/types/components/BibliographyList.js.flow

@@ -23,7 +23,7 @@ import SortSelector from './SortSelector';
 import { SORT_DESCENDING } from '../constants/Sort';
 import StyleSelector from './StyleSelector';
 import Toaster from './Toaster';
-import useList, { Props as ListProps } from './List';
+import useList, { type Props as ListProps } from './List';
 import ZoteroTranslateContext from '../context/ZoteroTranslateContext';
 import './BibliographyList.css';
 

package/types/components/DataTable.js.flow

@@ -13,8 +13,8 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import ColumnResize from './ColumnResize';
-import useColumnSelector, { Props as ColumnSelectorProps } from './DataTableColumnSelector';
-import useList, { Props as ListProps } from './List';
+import useColumnSelector, { type Props as ColumnSelectorProps } from './DataTableColumnSelector';
+import useList, { type Props as ListProps } from './List';
 import './DataTable.css';
 
 import type { Action } from './List';

package/types/components/ImageCarousel.js.flow

@@ -22,10 +22,20 @@ type ImageType = {
 };
 
 type Props = {
+  /**
+   * The array of images to display.
+   */
   images: Array<ImageType>,
+
+  /**
+   * Callback fired when the close icon is clicked.
+   */
   onClose: () => void
 };
 
+/**
+ * This component renders a full screen image carousel component used to scroll through the passed array of images.
+ */
 const ImageCarousel = (props: Props) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [visible, setVisible] = useState(true);

package/types/components/LazyIIIF.js.flow

@@ -1,10 +1,10 @@
 // @flow
 
+import Viewer from '@samvera/clover-iiif/viewer';
 import React, { useState, type Node } from 'react';
-import { Button } from 'semantic-ui-react';
+import { Button, Modal } from 'semantic-ui-react';
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
-import IIIFModal from './IIIFModal';
 import LazyMedia from './LazyMedia';
 
 type Props = {
@@ -34,11 +34,19 @@ const LazyIIIF = ({ manifest, options = {}, ...props }: Props) => {
         { props.children }
       </LazyMedia>
       { modal && (
-        <IIIFModal
-          manifestId={manifest}
+        <Modal
+          centered={false}
+          closeIcon
           onClose={() => setModal(false)}
-          options={_.defaults(options, { showIIIFBadge: false })}
-        />
+          open
+        >
+          <Modal.Content>
+            <Viewer
+              iiifContent={manifest}
+              options={_.defaults(options, { showIIIFBadge: false })}
+            />
+          </Modal.Content>
+        </Modal>
       )}
     </>
   );

package/types/components/SimpleEditPage.js.flow

@@ -14,10 +14,10 @@ import {
   Form,
   Grid,
   Menu,
-  MenuProps,
   Message,
   Ref,
-  Sticky
+  Sticky,
+  type MenuProps
 } from 'semantic-ui-react';
 import _ from 'underscore';
 import i18n from '../i18n/i18n';

package/types/components/ViewPDFButton.js.flow

@@ -0,0 +1,68 @@
+// @flow
+
+import React, { useMemo } from 'react';
+import { Icon, Button } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+type Props = {
+  basic?: boolean,
+  className?: string,
+  color?: string,
+  compact?: boolean,
+  primary?: boolean,
+  size?: string,
+  secondary?: boolean,
+  url: string,
+};
+
+const ViewPDFButton = (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 (
+    <Button className={className} onClick={() => window.open(props.url, '_blank')}>
+      <Icon
+        name='file pdf'
+      />
+      {i18n.t('Common.buttons.pdf')}
+    </Button>
+  );
+};
+
+export default ViewPDFButton;

package/types/index.js.flow

@@ -47,7 +47,6 @@ 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 ImageCarousel } from './components/ImageCarousel';
 export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';

package/webpack.config.js

@@ -2,6 +2,9 @@ const { configure } = require('@performant-software/webpack-config');
 const path = require('path');
 
 module.exports = configure(__dirname, {
+  externals: [
+    '@samvera/clover-iiif'
+  ],
   resolve: {
     alias: {
       '../../theme.config$': path.join(__dirname, '/src/css/theme.config'),

package/src/components/IIIFModal.js

@@ -1,26 +0,0 @@
-// @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;