@performant-software/semantic-components 1.0.6-beta.0 → 1.0.6-beta.1

package/build/main.css

@@ -913,6 +913,49 @@ div.react-calendar {
   opacity: 0.87;
 }
 
+.selectize-image-header.ui.segment .container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.selectize-image-header.ui.segment .container > .ui.cards {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  margin: 0em 0.2rem;
+}
+.selectize-image-header.ui.segment > .bottom-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+.selectize-image-header.ui.segment > .bottom-container .ui.button.link {
+  box-shadow: 0 0;
+  -moz-box-shadow: 0 0;
+  -webkit-box-shadow: 0 0;
+}
+.selectize-image-header.ui.segment .container > .ui.cards > .ui.card > .content > .meta {
+  font-size: 0.7em;
+}
+.selectize-image-header.ui.segment .container > .ui.cards > .ui.card > .image {
+  aspect-ratio: 1;
+  object-fit: cover;
+  width: 100%;
+}
+.selectize-image-header.ui.segment .container > .ui.cards > .ui.card > .ui.segment.placeholder {
+  align-items: center;
+  aspect-ratio: 1;
+  margin-bottom: 0;
+  max-width: 100%;
+  min-height: unset;
+}
+.selectize-image-header.ui.segment .container > .ui.cards > .ui.card > .ui.segment.placeholder > .icon {
+  color: rgba(0, 0, 0, 0.87);
+  height: unset;
+}
+
 .tabbed-modal.ui .modal-header .ui.menu {
   max-width: 100%;
   overflow: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.6-beta.0",
+  "version": "1.0.6-beta.1",
   "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.6-beta.0",
+    "@performant-software/shared-components": "^1.0.6-beta.1",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "citeproc": "^2.4.62",

package/src/components/SelectizeImageHeader.css

@@ -0,0 +1,49 @@
+.selectize-image-header.ui.segment .container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.selectize-image-header.ui.segment .container > .ui.cards {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  margin: 0em 0.2rem;
+}
+
+.selectize-image-header.ui.segment > .bottom-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.selectize-image-header.ui.segment > .bottom-container .ui.button.link {
+  box-shadow: 0 0;
+  -moz-box-shadow: 0 0;
+  -webkit-box-shadow: 0 0;
+}
+
+.selectize-image-header.ui.segment .container > .ui.cards > .ui.card > .content > .meta {
+  font-size: 0.7em;
+}
+
+.selectize-image-header.ui.segment .container > .ui.cards > .ui.card > .image {
+  aspect-ratio: 1;
+  object-fit: cover;
+  width: 100%;
+}
+
+.selectize-image-header.ui.segment .container > .ui.cards > .ui.card > .ui.segment.placeholder {
+  align-items: center;
+  aspect-ratio: 1;
+  margin-bottom: 0;
+  max-width: 100%;
+  min-height: unset;
+}
+
+.selectize-image-header.ui.segment .container > .ui.cards > .ui.card > .ui.segment.placeholder > .icon {
+  color: rgba(0, 0, 0, 0.87);
+  height: unset;
+}

package/src/components/SelectizeImageHeader.js

@@ -0,0 +1,276 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type Element
+} from 'react';
+import {
+  Button,
+  Card,
+  Header,
+  Icon,
+  Image,
+  Segment,
+  Transition
+} from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import './SelectizeImageHeader.css';
+
+type Props = {
+  collapsable?: boolean,
+  onItemClick: (item: any) => void,
+  perPage?: number,
+  renderDescription?: (item: any) => Element<any> | string,
+  renderExtra?: (item: any) => Element<any> | string,
+  renderHeader?: (item: any) => Element<any> | string,
+  renderImage?: (item: any) => Element<any> | string,
+  renderMeta?: (item: any) => Element<any> | string,
+  selectedItem: any,
+  selectedItems: Array<any>
+};
+
+type CardProps = {
+  onClick: () => void,
+  onDelete: () => void,
+  description?: Element<any> | string,
+  extra?: Element<any> | string,
+  header?: Element<any> | string,
+  image?: Element<any> | string,
+  meta?: Element<any> | string,
+  selected: boolean
+};
+
+const DEFAULT_PER_PAGE = 5;
+
+const SelectizeCard = (props: CardProps) => (
+  <Card
+    raised={props.selected}
+    link
+    onClick={props.onClick}
+  >
+    { props.image && _.isString(props.image) && (
+      <Image
+        size='small'
+        src={props.image}
+      />
+    )}
+    { !!props.image && !_.isString(props.image) && props.image }
+    { !props.image && (
+      <Segment
+        placeholder
+      >
+        <Icon
+          name='image'
+          size='large'
+        />
+      </Segment>
+    )}
+    <Card.Content>
+      { props.header && (
+        <Card.Header>
+          <Header
+            as='h6'
+            content={props.header}
+          />
+        </Card.Header>
+      )}
+      { props.meta && (
+        <Card.Meta
+          content={props.meta}
+        />
+      )}
+      { props.description && (
+        <Card.Description
+          content={props.description}
+        />
+      )}
+    </Card.Content>
+    { props.extra && (
+      <Card.Content
+        extra
+      >
+        { props.extra }
+      </Card.Content>
+    )}
+    { props.selected && (
+      <Card.Content
+        extra
+      >
+        <Button
+          basic
+          circular
+          compact
+          icon='times'
+          onClick={props.onDelete}
+        />
+      </Card.Content>
+    )}
+  </Card>
+);
+
+SelectizeCard.defaultProps = {
+  header: undefined,
+  image: undefined,
+  meta: undefined,
+  renderExtra: undefined
+};
+
+const SelectizeImageHeader = (props: Props) => {
+  const [page, setPage] = useState(1);
+  const [pages, setPages] = useState(0);
+  const [collapsed, setCollapsed] = useState(false);
+
+  /**
+   * Sets the items for the current page.
+   *
+   * @type {null}
+   */
+  const items = useMemo(() => {
+    let records = null;
+
+    if (page && props.selectedItems && props.selectedItems.length) {
+      const startIndex = (page - 1) * (props.perPage || DEFAULT_PER_PAGE);
+      const endIndex = startIndex + (props.perPage || DEFAULT_PER_PAGE);
+
+      records = props.selectedItems.slice(startIndex, endIndex);
+    }
+
+    return records;
+  }, [page, props.perPage, props.selectedItems]);
+
+  /**
+   * Sets the pagination label.
+   *
+   * @type {string}
+   */
+  const pagination = useMemo(() => {
+    const startIndex = (page - 1) * (props.perPage || DEFAULT_PER_PAGE);
+    const endIndex = startIndex + (props.perPage || DEFAULT_PER_PAGE);
+    const total = props.selectedItems.length;
+
+    return `${startIndex + 1} - ${Math.min(endIndex, total)} of ${total}`;
+  }, [page, props.perPage, props.selectedItems]);
+
+  /**
+   * Changes the current page number. If the next page is invalid, we move to the first page or last page.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onPageChange = useCallback((increment) => {
+    let nextPage = page + increment;
+
+    if (nextPage < 1) {
+      nextPage = pages;
+    } else if (nextPage > pages) {
+      nextPage = 1;
+    }
+
+    setPage(nextPage);
+  }, [page, pages]);
+
+  /**
+   * Set the number of pages when the perPage or selectedItems props change.
+   */
+  useEffect(() => {
+    if (props.perPage && props.selectedItems) {
+      setPages(Math.ceil(props.selectedItems.length / props.perPage));
+    }
+  }, [props.perPage, props.selectedItems]);
+
+  /**
+   * If we're removing the last item on the page, decrement the page by 1.
+   */
+  useEffect(() => {
+    if (!(items && items.length) && props.selectedItems && props.selectedItems.length && page > 1) {
+      setPage(page - 1);
+    }
+  }, [items, page, props.selectedItems]);
+
+  if (_.isEmpty(items)) {
+    return null;
+  }
+
+  return (
+    <Segment
+      className='selectize-image-header'
+    >
+      <Transition
+        visible={!collapsed}
+      >
+        <div>
+          <div
+            className='container'
+          >
+            <Button
+              basic
+              circular
+              disabled={pages <= 1}
+              icon='arrow left'
+              onClick={onPageChange.bind(this, -1)}
+            />
+            <Card.Group
+              itemsPerRow={props.perPage}
+            >
+              { _.map(items, (item) => (
+                <SelectizeCard
+                  description={props.renderDescription && props.renderDescription(item)}
+                  extra={props.renderExtra && props.renderExtra(item)}
+                  header={props.renderHeader && props.renderHeader(item)}
+                  image={props.renderImage && props.renderImage(item)}
+                  meta={props.renderMeta && props.renderMeta(item)}
+                  key={item.id}
+                  onClick={() => (
+                    props.selectedItem === item
+                      ? props.onItemClick(null)
+                      : props.onItemClick(item)
+                  )}
+                  onDelete={() => props.onItemClick(item)}
+                  selected={item === props.selectedItem}
+                />
+              ))}
+            </Card.Group>
+            <Button
+              basic
+              circular
+              disabled={pages <= 1}
+              icon='arrow right'
+              onClick={onPageChange.bind(this, 1)}
+            />
+          </div>
+        </div>
+      </Transition>
+      <div
+        className='bottom-container'
+      >
+        <div />
+        <div>{ pagination }</div>
+        <div>
+          { props.collapsable && (
+            <Button
+              as='a'
+              basic
+              circular
+              className='link'
+              compact
+              content={collapsed ? i18n.t('Common.buttons.show') : i18n.t('Common.buttons.hide')}
+              onClick={() => setCollapsed((prevCollapsed) => !prevCollapsed)}
+            />
+          )}
+        </div>
+      </div>
+    </Segment>
+  );
+};
+
+SelectizeImageHeader.defaultProps = {
+  collapsable: true,
+  onItemClick: () => {},
+  perPage: DEFAULT_PER_PAGE,
+  renderExtra: undefined
+};
+
+export default SelectizeImageHeader;

package/src/i18n/en.json

@@ -44,11 +44,13 @@
       "close": "Close",
       "download": "Download",
       "edit": "Edit",
+      "hide": "Hide",
       "iiif": "View IIIF",
       "ok": "OK",
       "open": "Open",
       "save": "Save",
       "search": "Search",
+      "show": "Show",
       "upload": "Upload"
     },
     "errors": {

package/src/index.js

@@ -70,6 +70,7 @@ export { default as SaveButton } from './components/SaveButton';
 export { default as Section } from './components/Section';
 export { default as Selectize } from './components/Selectize';
 export { default as SelectizeHeader } from './components/SelectizeHeader';
+export { default as SelectizeImageHeader } from './components/SelectizeImageHeader';
 export { default as TabbedModal } from './components/TabbedModal';
 export { default as TabsMenu } from './components/TabsMenu';
 export { default as TagsList } from './components/TagsList';

package/types/components/SelectizeImageHeader.js.flow

@@ -0,0 +1,276 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type Element
+} from 'react';
+import {
+  Button,
+  Card,
+  Header,
+  Icon,
+  Image,
+  Segment,
+  Transition
+} from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import './SelectizeImageHeader.css';
+
+type Props = {
+  collapsable?: boolean,
+  onItemClick: (item: any) => void,
+  perPage?: number,
+  renderDescription?: (item: any) => Element<any> | string,
+  renderExtra?: (item: any) => Element<any> | string,
+  renderHeader?: (item: any) => Element<any> | string,
+  renderImage?: (item: any) => Element<any> | string,
+  renderMeta?: (item: any) => Element<any> | string,
+  selectedItem: any,
+  selectedItems: Array<any>
+};
+
+type CardProps = {
+  onClick: () => void,
+  onDelete: () => void,
+  description?: Element<any> | string,
+  extra?: Element<any> | string,
+  header?: Element<any> | string,
+  image?: Element<any> | string,
+  meta?: Element<any> | string,
+  selected: boolean
+};
+
+const DEFAULT_PER_PAGE = 5;
+
+const SelectizeCard = (props: CardProps) => (
+  <Card
+    raised={props.selected}
+    link
+    onClick={props.onClick}
+  >
+    { props.image && _.isString(props.image) && (
+      <Image
+        size='small'
+        src={props.image}
+      />
+    )}
+    { !!props.image && !_.isString(props.image) && props.image }
+    { !props.image && (
+      <Segment
+        placeholder
+      >
+        <Icon
+          name='image'
+          size='large'
+        />
+      </Segment>
+    )}
+    <Card.Content>
+      { props.header && (
+        <Card.Header>
+          <Header
+            as='h6'
+            content={props.header}
+          />
+        </Card.Header>
+      )}
+      { props.meta && (
+        <Card.Meta
+          content={props.meta}
+        />
+      )}
+      { props.description && (
+        <Card.Description
+          content={props.description}
+        />
+      )}
+    </Card.Content>
+    { props.extra && (
+      <Card.Content
+        extra
+      >
+        { props.extra }
+      </Card.Content>
+    )}
+    { props.selected && (
+      <Card.Content
+        extra
+      >
+        <Button
+          basic
+          circular
+          compact
+          icon='times'
+          onClick={props.onDelete}
+        />
+      </Card.Content>
+    )}
+  </Card>
+);
+
+SelectizeCard.defaultProps = {
+  header: undefined,
+  image: undefined,
+  meta: undefined,
+  renderExtra: undefined
+};
+
+const SelectizeImageHeader = (props: Props) => {
+  const [page, setPage] = useState(1);
+  const [pages, setPages] = useState(0);
+  const [collapsed, setCollapsed] = useState(false);
+
+  /**
+   * Sets the items for the current page.
+   *
+   * @type {null}
+   */
+  const items = useMemo(() => {
+    let records = null;
+
+    if (page && props.selectedItems && props.selectedItems.length) {
+      const startIndex = (page - 1) * (props.perPage || DEFAULT_PER_PAGE);
+      const endIndex = startIndex + (props.perPage || DEFAULT_PER_PAGE);
+
+      records = props.selectedItems.slice(startIndex, endIndex);
+    }
+
+    return records;
+  }, [page, props.perPage, props.selectedItems]);
+
+  /**
+   * Sets the pagination label.
+   *
+   * @type {string}
+   */
+  const pagination = useMemo(() => {
+    const startIndex = (page - 1) * (props.perPage || DEFAULT_PER_PAGE);
+    const endIndex = startIndex + (props.perPage || DEFAULT_PER_PAGE);
+    const total = props.selectedItems.length;
+
+    return `${startIndex + 1} - ${Math.min(endIndex, total)} of ${total}`;
+  }, [page, props.perPage, props.selectedItems]);
+
+  /**
+   * Changes the current page number. If the next page is invalid, we move to the first page or last page.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onPageChange = useCallback((increment) => {
+    let nextPage = page + increment;
+
+    if (nextPage < 1) {
+      nextPage = pages;
+    } else if (nextPage > pages) {
+      nextPage = 1;
+    }
+
+    setPage(nextPage);
+  }, [page, pages]);
+
+  /**
+   * Set the number of pages when the perPage or selectedItems props change.
+   */
+  useEffect(() => {
+    if (props.perPage && props.selectedItems) {
+      setPages(Math.ceil(props.selectedItems.length / props.perPage));
+    }
+  }, [props.perPage, props.selectedItems]);
+
+  /**
+   * If we're removing the last item on the page, decrement the page by 1.
+   */
+  useEffect(() => {
+    if (!(items && items.length) && props.selectedItems && props.selectedItems.length && page > 1) {
+      setPage(page - 1);
+    }
+  }, [items, page, props.selectedItems]);
+
+  if (_.isEmpty(items)) {
+    return null;
+  }
+
+  return (
+    <Segment
+      className='selectize-image-header'
+    >
+      <Transition
+        visible={!collapsed}
+      >
+        <div>
+          <div
+            className='container'
+          >
+            <Button
+              basic
+              circular
+              disabled={pages <= 1}
+              icon='arrow left'
+              onClick={onPageChange.bind(this, -1)}
+            />
+            <Card.Group
+              itemsPerRow={props.perPage}
+            >
+              { _.map(items, (item) => (
+                <SelectizeCard
+                  description={props.renderDescription && props.renderDescription(item)}
+                  extra={props.renderExtra && props.renderExtra(item)}
+                  header={props.renderHeader && props.renderHeader(item)}
+                  image={props.renderImage && props.renderImage(item)}
+                  meta={props.renderMeta && props.renderMeta(item)}
+                  key={item.id}
+                  onClick={() => (
+                    props.selectedItem === item
+                      ? props.onItemClick(null)
+                      : props.onItemClick(item)
+                  )}
+                  onDelete={() => props.onItemClick(item)}
+                  selected={item === props.selectedItem}
+                />
+              ))}
+            </Card.Group>
+            <Button
+              basic
+              circular
+              disabled={pages <= 1}
+              icon='arrow right'
+              onClick={onPageChange.bind(this, 1)}
+            />
+          </div>
+        </div>
+      </Transition>
+      <div
+        className='bottom-container'
+      >
+        <div />
+        <div>{ pagination }</div>
+        <div>
+          { props.collapsable && (
+            <Button
+              as='a'
+              basic
+              circular
+              className='link'
+              compact
+              content={collapsed ? i18n.t('Common.buttons.show') : i18n.t('Common.buttons.hide')}
+              onClick={() => setCollapsed((prevCollapsed) => !prevCollapsed)}
+            />
+          )}
+        </div>
+      </div>
+    </Segment>
+  );
+};
+
+SelectizeImageHeader.defaultProps = {
+  collapsable: true,
+  onItemClick: () => {},
+  perPage: DEFAULT_PER_PAGE,
+  renderExtra: undefined
+};
+
+export default SelectizeImageHeader;

package/types/index.js.flow

@@ -70,6 +70,7 @@ export { default as SaveButton } from './components/SaveButton';
 export { default as Section } from './components/Section';
 export { default as Selectize } from './components/Selectize';
 export { default as SelectizeHeader } from './components/SelectizeHeader';
+export { default as SelectizeImageHeader } from './components/SelectizeImageHeader';
 export { default as TabbedModal } from './components/TabbedModal';
 export { default as TabsMenu } from './components/TabsMenu';
 export { default as TagsList } from './components/TagsList';