@performant-software/semantic-components 1.0.19-beta.0 → 1.0.19-beta.2

package/build/main.css

@@ -204,6 +204,11 @@
   margin-left: 5px;
 }
 
+.ui.breadcrumb:first-child {
+  margin-bottom: 1em;
+  margin-top: 0.5em;
+}
+
 .color-button.ui.button {
   border: 1px solid rgba(34, 36, 38, 0.15);
   vertical-align: middle;

package/package.json

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

package/src/components/BreadcrumbItem.js

@@ -0,0 +1,69 @@
+// @flow
+
+import React, { useEffect, useState, type ComponentType } from 'react';
+import { Breadcrumb, Loader } from 'semantic-ui-react';
+
+type Props = {
+  active: boolean,
+  as?: ComponentType<any>,
+  id?: number,
+  label?: string,
+  name: string,
+  onLoad: (id: number, name: string) => Promise<any>,
+  url: string
+};
+
+const BreadcrumbItem: ComponentType<any> = (props: Props) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState(null);
+
+  /**
+   * Sets or clears the name attribute on the state.
+   */
+  useEffect(() => {
+    if (props.id) {
+      props
+        .onLoad(props.id, props.name)
+        .then((n) => setName(n))
+        .finally(() => setLoading(false));
+
+      setLoading(true);
+    } else {
+      setName(null);
+    }
+  }, [props.id, props.name]);
+
+  return (
+    <>
+      <Breadcrumb.Section
+        active={props.active && !props.id}
+        as={props.as}
+        to={`/${props.url}`}
+      >
+        { props.label }
+      </Breadcrumb.Section>
+      { props.id && (
+        <Breadcrumb.Divider
+          icon='right chevron'
+        />
+      )}
+      { loading && (
+        <Loader
+          active
+          inline
+        />
+      )}
+      { name && props.id && (
+        <Breadcrumb.Section
+          active={props.active}
+          as={props.as}
+          to={`/${props.url}/${props.id}`}
+        >
+          { name }
+        </Breadcrumb.Section>
+      )}
+    </>
+  );
+};
+
+export default BreadcrumbItem;

package/src/components/Breadcrumbs.css

@@ -0,0 +1,4 @@
+.ui.breadcrumb:first-child {
+  margin-bottom: 1em;
+  margin-top: 0.5em;
+}

package/src/components/Breadcrumbs.js

@@ -0,0 +1,111 @@
+// @flow
+
+import React, { useCallback, useMemo, type ComponentType } from 'react';
+import { Breadcrumb } from 'semantic-ui-react';
+import _ from 'underscore';
+import BreadcrumbItem from './BreadcrumbItem';
+import './Breadcrumbs.css';
+
+const URL_DELIMITER = '/';
+
+type Props = {
+  /**
+   * Alternate component to use to render the breadcrumb.
+   */
+  as?: ComponentType<any>,
+
+  /**
+   * A key-value pair of types to labels to match the `pathname`.
+   */
+  labels: { key: string, value: string },
+
+  /**
+   * Callback fired to lookup the name of the passed breadcrumb item.
+   */
+  onLoad: (id: number, name: string) => Promise<any>,
+
+  /**
+   * The URL for which to generate the breadcrumb.
+   */
+  pathname: string
+};
+
+/**
+ * This component can be used to render a breadcrumb for the passed URL.
+ */
+const Breadcrumbs: ComponentType<any> = (props: Props) => {
+  /**
+   * Returns true if the passed string contains only digits.
+   *
+   * @type {function(*): boolean}
+   */
+  const isNumeric = useCallback((str: string) => /^\d+$/.test(str), []);
+
+  /**
+   * Sets the items to display based on the URL path.
+   *
+   * @type {[]}
+   */
+  const items = useMemo(() => {
+    const value = [];
+
+    const path = props.pathname.split(URL_DELIMITER).splice(1);
+
+    for (let i = 0; i < path.length; i += 1) {
+      const key = path[i];
+      const id = path[i + 1];
+      const url = path.slice(0, i + 1).join(URL_DELIMITER);
+
+      /*
+       * If the item in the path is non-numeric, we'll add it as the item label.
+       * If the next item is numeric, we'll add it as the ID.
+       * If the next item is non-numeric, it'll be added as a separate label on the next iteration.
+       */
+      if (!isNumeric(key)) {
+        const item = { key, url, id: undefined };
+
+        if (isNumeric(id)) {
+          item.id = id;
+        }
+
+        value.push(item);
+      }
+    }
+
+    return value;
+  }, [props.pathname]);
+
+  /**
+   * Returns true if there are more items to display.
+   *
+   * @type {function(*): boolean}
+   */
+  const hasMore = useCallback((index: number) => index < (items.length - 1), [items]);
+
+  return (
+    <Breadcrumb
+      size='large'
+    >
+      { _.map(items, (item, index) => (
+        <>
+          <BreadcrumbItem
+            active={!hasMore(index)}
+            as={props.as}
+            id={item.id}
+            label={props.labels[item.key]}
+            name={item.key}
+            onLoad={props.onLoad}
+            url={item.url}
+          />
+          { hasMore(index) && (
+            <Breadcrumb.Divider
+              icon='right chevron'
+            />
+          )}
+        </>
+      ))}
+    </Breadcrumb>
+  );
+};
+
+export default Breadcrumbs;

package/src/components/ItemsToggle.js

@@ -71,6 +71,15 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
       return sort && sort.text;
     }
 
+    /**
+     * Returns true if the component should be hidden.
+     *
+     * @returns {boolean|*}
+     */
+    isHidden() {
+      return this.props.hideToggle && _.isEmpty(this.props.sort);
+    }
+
     /**
      * Calls the onSort prop.
      *
@@ -98,7 +107,7 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
      * @returns {*}
      */
     render() {
-      const renderListHeader = this.props.hideToggle
+      const renderListHeader = this.isHidden()
         ? undefined
         : this.renderHeader.bind(this);
 
@@ -121,27 +130,31 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
      * @returns {*}
      */
     renderHeader() {
-      if (this.props.hideToggle) {
+      if (this.isHidden()) {
         return null;
       }
 
       return (
         <>
-          <Button
-            active={this.state.view === Views.list}
-            aria-label='List View'
-            basic
-            icon='list'
-            onClick={() => this.setState({ view: Views.list })}
-          />
-          <Button
-            active={this.state.view === Views.grid}
-            aria-label='Grid View'
-            basic
-            icon='grid layout'
-            onClick={() => this.setState({ view: Views.grid })}
-          />
-          { this.props.sort && this.props.sort.length > 1 && this.props.onSort && (
+          { !this.props.hideToggle && (
+            <>
+              <Button
+                active={this.state.view === Views.list}
+                aria-label='List View'
+                basic
+                icon='list'
+                onClick={() => this.setState({ view: Views.list })}
+              />
+              <Button
+                active={this.state.view === Views.grid}
+                aria-label='Grid View'
+                basic
+                icon='grid layout'
+                onClick={() => this.setState({ view: Views.grid })}
+              />
+            </>
+          )}
+          { !_.isEmpty(this.props.sort) && this.props.onSort && (
             <Button.Group
               basic
               style={{

package/src/i18n/en.json

@@ -31,6 +31,11 @@
       "placeholder": "Enter a URL, ISBN, DOI, PMID, arXiv ID"
     }
   },
+  "BreadcrumbItem": {
+    "labels": {
+      "new": "New"
+    }
+  },
   "Citation": {
     "labels": {
       "untitled": "Untitled"

package/src/index.js

@@ -14,6 +14,7 @@ export { default as BibliographyForm } from './components/BibliographyForm';
 export { default as BibliographyList } from './components/BibliographyList';
 export { default as BibliographySearchInput } from './components/BibliographySearchInput';
 export { default as BooleanIcon } from './components/BooleanIcon';
+export { default as Breadcrumbs } from './components/Breadcrumbs';
 export { default as CancelButton } from './components/CancelButton';
 export { default as ColorButton } from './components/ColorButton';
 export { default as ColorPickerModal } from './components/ColorPickerModal';

package/types/components/BreadcrumbItem.js.flow

@@ -0,0 +1,69 @@
+// @flow
+
+import React, { useEffect, useState, type ComponentType } from 'react';
+import { Breadcrumb, Loader } from 'semantic-ui-react';
+
+type Props = {
+  active: boolean,
+  as?: ComponentType<any>,
+  id?: number,
+  label?: string,
+  name: string,
+  onLoad: (id: number, name: string) => Promise<any>,
+  url: string
+};
+
+const BreadcrumbItem: ComponentType<any> = (props: Props) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState(null);
+
+  /**
+   * Sets or clears the name attribute on the state.
+   */
+  useEffect(() => {
+    if (props.id) {
+      props
+        .onLoad(props.id, props.name)
+        .then((n) => setName(n))
+        .finally(() => setLoading(false));
+
+      setLoading(true);
+    } else {
+      setName(null);
+    }
+  }, [props.id, props.name]);
+
+  return (
+    <>
+      <Breadcrumb.Section
+        active={props.active && !props.id}
+        as={props.as}
+        to={`/${props.url}`}
+      >
+        { props.label }
+      </Breadcrumb.Section>
+      { props.id && (
+        <Breadcrumb.Divider
+          icon='right chevron'
+        />
+      )}
+      { loading && (
+        <Loader
+          active
+          inline
+        />
+      )}
+      { name && props.id && (
+        <Breadcrumb.Section
+          active={props.active}
+          as={props.as}
+          to={`/${props.url}/${props.id}`}
+        >
+          { name }
+        </Breadcrumb.Section>
+      )}
+    </>
+  );
+};
+
+export default BreadcrumbItem;

package/types/components/Breadcrumbs.js.flow

@@ -0,0 +1,111 @@
+// @flow
+
+import React, { useCallback, useMemo, type ComponentType } from 'react';
+import { Breadcrumb } from 'semantic-ui-react';
+import _ from 'underscore';
+import BreadcrumbItem from './BreadcrumbItem';
+import './Breadcrumbs.css';
+
+const URL_DELIMITER = '/';
+
+type Props = {
+  /**
+   * Alternate component to use to render the breadcrumb.
+   */
+  as?: ComponentType<any>,
+
+  /**
+   * A key-value pair of types to labels to match the `pathname`.
+   */
+  labels: { key: string, value: string },
+
+  /**
+   * Callback fired to lookup the name of the passed breadcrumb item.
+   */
+  onLoad: (id: number, name: string) => Promise<any>,
+
+  /**
+   * The URL for which to generate the breadcrumb.
+   */
+  pathname: string
+};
+
+/**
+ * This component can be used to render a breadcrumb for the passed URL.
+ */
+const Breadcrumbs: ComponentType<any> = (props: Props) => {
+  /**
+   * Returns true if the passed string contains only digits.
+   *
+   * @type {function(*): boolean}
+   */
+  const isNumeric = useCallback((str: string) => /^\d+$/.test(str), []);
+
+  /**
+   * Sets the items to display based on the URL path.
+   *
+   * @type {[]}
+   */
+  const items = useMemo(() => {
+    const value = [];
+
+    const path = props.pathname.split(URL_DELIMITER).splice(1);
+
+    for (let i = 0; i < path.length; i += 1) {
+      const key = path[i];
+      const id = path[i + 1];
+      const url = path.slice(0, i + 1).join(URL_DELIMITER);
+
+      /*
+       * If the item in the path is non-numeric, we'll add it as the item label.
+       * If the next item is numeric, we'll add it as the ID.
+       * If the next item is non-numeric, it'll be added as a separate label on the next iteration.
+       */
+      if (!isNumeric(key)) {
+        const item = { key, url, id: undefined };
+
+        if (isNumeric(id)) {
+          item.id = id;
+        }
+
+        value.push(item);
+      }
+    }
+
+    return value;
+  }, [props.pathname]);
+
+  /**
+   * Returns true if there are more items to display.
+   *
+   * @type {function(*): boolean}
+   */
+  const hasMore = useCallback((index: number) => index < (items.length - 1), [items]);
+
+  return (
+    <Breadcrumb
+      size='large'
+    >
+      { _.map(items, (item, index) => (
+        <>
+          <BreadcrumbItem
+            active={!hasMore(index)}
+            as={props.as}
+            id={item.id}
+            label={props.labels[item.key]}
+            name={item.key}
+            onLoad={props.onLoad}
+            url={item.url}
+          />
+          { hasMore(index) && (
+            <Breadcrumb.Divider
+              icon='right chevron'
+            />
+          )}
+        </>
+      ))}
+    </Breadcrumb>
+  );
+};
+
+export default Breadcrumbs;

package/types/components/ItemsToggle.js.flow

@@ -71,6 +71,15 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
       return sort && sort.text;
     }
 
+    /**
+     * Returns true if the component should be hidden.
+     *
+     * @returns {boolean|*}
+     */
+    isHidden() {
+      return this.props.hideToggle && _.isEmpty(this.props.sort);
+    }
+
     /**
      * Calls the onSort prop.
      *
@@ -98,7 +107,7 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
      * @returns {*}
      */
     render() {
-      const renderListHeader = this.props.hideToggle
+      const renderListHeader = this.isHidden()
         ? undefined
         : this.renderHeader.bind(this);
 
@@ -121,27 +130,31 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
      * @returns {*}
      */
     renderHeader() {
-      if (this.props.hideToggle) {
+      if (this.isHidden()) {
         return null;
       }
 
       return (
         <>
-          <Button
-            active={this.state.view === Views.list}
-            aria-label='List View'
-            basic
-            icon='list'
-            onClick={() => this.setState({ view: Views.list })}
-          />
-          <Button
-            active={this.state.view === Views.grid}
-            aria-label='Grid View'
-            basic
-            icon='grid layout'
-            onClick={() => this.setState({ view: Views.grid })}
-          />
-          { this.props.sort && this.props.sort.length > 1 && this.props.onSort && (
+          { !this.props.hideToggle && (
+            <>
+              <Button
+                active={this.state.view === Views.list}
+                aria-label='List View'
+                basic
+                icon='list'
+                onClick={() => this.setState({ view: Views.list })}
+              />
+              <Button
+                active={this.state.view === Views.grid}
+                aria-label='Grid View'
+                basic
+                icon='grid layout'
+                onClick={() => this.setState({ view: Views.grid })}
+              />
+            </>
+          )}
+          { !_.isEmpty(this.props.sort) && this.props.onSort && (
             <Button.Group
               basic
               style={{

package/types/index.js.flow

@@ -14,6 +14,7 @@ export { default as BibliographyForm } from './components/BibliographyForm';
 export { default as BibliographyList } from './components/BibliographyList';
 export { default as BibliographySearchInput } from './components/BibliographySearchInput';
 export { default as BooleanIcon } from './components/BooleanIcon';
+export { default as Breadcrumbs } from './components/Breadcrumbs';
 export { default as CancelButton } from './components/CancelButton';
 export { default as ColorButton } from './components/ColorButton';
 export { default as ColorPickerModal } from './components/ColorPickerModal';