@collectionspace/cspace-public-browser 1.5.1

package/src/components/detail/ImageGallery.jsx

@@ -0,0 +1,153 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import Immutable from 'immutable';
+import Gallery from 'react-image-gallery';
+import 'react-image-gallery/styles/css/image-gallery.css';
+import config from '../../config';
+import { blobUrl } from '../../helpers/urlHelpers';
+import styles from '../../../styles/cspace/ImageGallery.css';
+
+const propTypes = {
+  findMedia: PropTypes.func,
+  institutionId: PropTypes.string,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  media: PropTypes.instanceOf(Immutable.Map),
+  referenceValue: PropTypes.string.isRequired,
+};
+
+const defaultProps = {
+  institutionId: undefined,
+  media: undefined,
+  findMedia: () => undefined,
+};
+
+const messages = defineMessages({
+  defaultAltText: {
+    id: 'imageGallery.defaultAltText',
+    defaultMessage: 'Image {num}',
+  },
+  titledAltText: {
+    id: 'imageGallery.titledAltText',
+    defaultMessage: '{title} Image {num}',
+  },
+  thumbnailAltText: {
+    id: 'imageGallery.thumbnailAltText',
+    defaultMessage: 'Thumbnail: {altText}',
+  },
+});
+
+const getInstitutionIds = () => {
+  const institutionsConfig = config.get('institutions');
+
+  return (institutionsConfig ? Object.keys(institutionsConfig) : []);
+};
+
+class ImageGallery extends Component {
+  componentDidMount() {
+    this.findMedia();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      referenceValue,
+    } = this.props;
+
+    const {
+      referenceValue: prevReferenceValue,
+    } = prevProps;
+
+    if (referenceValue !== prevReferenceValue) {
+      this.findMedia();
+    }
+  }
+
+  findMedia() {
+    const {
+      findMedia,
+      institutionId,
+      media,
+      referenceValue,
+    } = this.props;
+
+    const institutionIds = (typeof institutionId === 'undefined')
+      ? [null, ...getInstitutionIds()]
+      : [institutionId];
+
+    institutionIds.forEach((instId) => {
+      if (!media || !media.get(instId)) {
+        findMedia(referenceValue, instId);
+      }
+    });
+  }
+
+  render() {
+    const {
+      institutionId,
+      intl,
+      media,
+    } = this.props;
+
+    if (!media) {
+      return null;
+    }
+
+    const institutionIds = (typeof institutionId === 'undefined')
+      ? [null, ...getInstitutionIds()]
+      : [institutionId];
+
+    const items = [];
+
+    institutionIds.forEach((instId) => {
+      const mediaMap = media.get(instId) || Immutable.Map();
+      const title = mediaMap.get('title');
+      const mediaCsids = mediaMap.get('csids') || Immutable.List();
+      const mediaAltTexts = mediaMap.get('altTexts') || Immutable.List();
+
+      if (mediaCsids && mediaCsids.size > 0) {
+        const gatewayUrl = instId
+          ? config.get(['institutions', instId, 'gatewayUrl'])
+          : config.get('gatewayUrl');
+
+        mediaCsids.forEach((mediaCsid, index) => {
+          let altText = mediaAltTexts.get(index);
+          if (!altText) {
+            const num = index + 1;
+            altText = title ? intl.formatMessage(messages.titledAltText, { title, num })
+              : intl.formatMessage(messages.defaultAltText, { num });
+          }
+
+          items.push({
+            original: blobUrl(gatewayUrl, mediaCsid, config.get('detailImageDerivative')),
+            thumbnail: blobUrl(gatewayUrl, mediaCsid, 'Thumbnail'),
+            originalAlt: altText,
+            thumbnailAlt: intl.formatMessage(messages.thumbnailAltText, { altText }),
+          });
+        });
+      }
+    });
+
+    if (items.length > 0) {
+      return (
+        <div className={styles.common}>
+          <Gallery
+            disableArrowKeys
+            items={items}
+            showFullscreenButton={false}
+            showPlayButton={false}
+            showThumbnails={items.length > 1}
+          />
+        </div>
+      );
+    }
+
+    return <div />;
+  }
+}
+
+ImageGallery.propTypes = propTypes;
+ImageGallery.defaultProps = defaultProps;
+
+export default injectIntl(ImageGallery);

package/src/components/detail/ImageGalleryContainer.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import ImageGallery from './ImageGallery';
+import { findMedia } from '../../actions/mediaActions';
+import { getMedia } from '../../reducers';
+
+const mapStateToProps = (state, ownProps) => ({
+  media: getMedia(state, ownProps.referenceValue),
+});
+
+const mapDispatchToProps = {
+  findMedia,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ImageGallery);

package/src/components/detail/InstitutionHoldingList.jsx

@@ -0,0 +1,188 @@
+/* global window */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import FieldList from './FieldList';
+import ImageGallery from './ImageGalleryContainer';
+import PanelTitle from '../layout/PanelTitle';
+import config from '../../config';
+import styles from '../../../styles/cspace/InstitutionHoldingList.css';
+
+const messages = defineMessages({
+  title: {
+    id: 'institutionHoldingList.title',
+    defaultMessage: 'Samples at {title}',
+  },
+});
+
+const propTypes = {
+  hits: PropTypes.arrayOf(PropTypes.shape({
+    _source: PropTypes.shape({
+      'collectionspace_core:uri': PropTypes.string,
+    }),
+  })),
+  institutionConfig: PropTypes.shape({
+    title: PropTypes.string,
+  }).isRequired,
+  institutionId: PropTypes.string.isRequired,
+  isExpanded: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  expandPanel: PropTypes.func,
+  referenceValue: PropTypes.string.isRequired,
+  togglePanel: PropTypes.func,
+};
+
+const defaultProps = {
+  hits: [],
+  isExpanded: false,
+  isSelected: false,
+  expandPanel: () => undefined,
+  togglePanel: () => undefined,
+};
+
+const renderResult = (data) => {
+  const {
+    'collectionspace_core:uri': uri,
+  } = data;
+
+  return (
+    <li key={uri}>
+      <FieldList config={config.get('institutionHoldings').detailFields} data={data} />
+    </li>
+  );
+};
+
+export default class InstitutionHoldingList extends Component {
+  constructor() {
+    super();
+
+    this.ref = React.createRef();
+  }
+
+  componentDidMount() {
+    const {
+      isSelected,
+    } = this.props;
+
+    if (isSelected) {
+      this.focus();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isSelected: prevIsSelected,
+    } = prevProps;
+
+    const {
+      isSelected,
+    } = this.props;
+
+    if (isSelected && !prevIsSelected) {
+      this.focus();
+    }
+  }
+
+  focus() {
+    const {
+      expandPanel,
+    } = this.props;
+
+    const domNode = this.ref.current;
+
+    if (domNode) {
+      window.setTimeout(() => {
+        expandPanel();
+
+        domNode.scrollIntoView();
+      }, 0);
+    }
+  }
+
+  renderContent() {
+    const {
+      hits,
+      institutionId,
+      isExpanded,
+      referenceValue,
+    } = this.props;
+
+    if (isExpanded) {
+      return (
+        <div>
+          <ImageGallery institutionId={institutionId} referenceValue={referenceValue} />
+
+          <ul>
+            {/* eslint-disable-next-line no-underscore-dangle */}
+            {hits.map((hit) => renderResult(hit._source))}
+          </ul>
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  renderTitle() {
+    const {
+      hits,
+      institutionConfig,
+      isExpanded,
+      togglePanel,
+    } = this.props;
+
+    const {
+      title,
+    } = institutionConfig;
+
+    const formattedTitle = (
+      <FormattedMessage
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...messages.title}
+        tagName="h2"
+        values={{
+          title,
+          count: hits.length,
+        }}
+      />
+    );
+
+    return (
+      <PanelTitle
+        isExpanded={isExpanded}
+        title={formattedTitle}
+        onClick={togglePanel}
+      />
+    );
+  }
+
+  render() {
+    const {
+      hits,
+    } = this.props;
+
+    if (hits.length === 0) {
+      return null;
+    }
+
+    const {
+      institutionId,
+      isExpanded,
+    } = this.props;
+
+    return (
+      <section
+        className={isExpanded ? styles.expanded : styles.collapsed}
+        id={institutionId}
+        ref={this.ref}
+      >
+        {this.renderTitle()}
+        {this.renderContent()}
+      </section>
+    );
+  }
+}
+
+InstitutionHoldingList.propTypes = propTypes;
+InstitutionHoldingList.defaultProps = defaultProps;

package/src/components/detail/InstitutionHoldingListContainer.js

@@ -0,0 +1,29 @@
+import { connect } from 'react-redux';
+import InstitutionHoldingList from './InstitutionHoldingList';
+
+import {
+  expandPanel,
+  togglePanel,
+} from '../../actions/prefsActions';
+
+import {
+  getDetailInstitutionHits,
+  isPanelExpanded,
+} from '../../reducers';
+
+const panelId = (institutionId) => `SampleList-${institutionId}`;
+
+const mapStateToProps = (state, ownProps) => ({
+  hits: getDetailInstitutionHits(state, ownProps.institutionId),
+  isExpanded: isPanelExpanded(state, panelId(ownProps.institutionId)),
+});
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  expandPanel: () => dispatch(expandPanel(panelId(ownProps.institutionId))),
+  togglePanel: () => dispatch(togglePanel(panelId(ownProps.institutionId))),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(InstitutionHoldingList);

package/src/components/detail/InstitutionIndex.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import get from 'lodash/get';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import config from '../../config';
+import linkStyles from '../../../styles/cspace/Link.css';
+import styles from '../../../styles/cspace/InstitutionIndex.css';
+
+const messages = defineMessages({
+  label: {
+    id: 'institutionIndex.label',
+    defaultMessage: 'Holdings at {title}',
+  },
+});
+
+const propTypes = {
+  holdingInstitutions: PropTypes.instanceOf(Immutable.Set).isRequired,
+};
+
+export default function InstitutionIndex(props) {
+  const {
+    holdingInstitutions,
+  } = props;
+
+  const institutions = config.get('institutions');
+
+  const links = holdingInstitutions.map((institutionId) => {
+    const title = get(institutions, [institutionId, 'title']);
+
+    return (
+      <li key={institutionId}>
+        <a className={linkStyles.hash} href={`#${institutionId}`}>
+          <FormattedMessage
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...messages.label}
+            values={{ title }}
+          />
+        </a>
+      </li>
+    );
+  });
+
+  if (links.size === 0) {
+    return null;
+  }
+
+  return (
+    <nav className={styles.common}>
+      <ul>
+        {links}
+      </ul>
+    </nav>
+  );
+}
+
+InstitutionIndex.propTypes = propTypes;

package/src/components/detail/InstitutionIndexContainer.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import InstitutionIndex from './InstitutionIndex';
+import { getDetailHoldingInstitutions } from '../../reducers';
+
+const mapStateToProps = (state) => ({
+  holdingInstitutions: getDetailHoldingInstitutions(state),
+});
+
+export default connect(
+  mapStateToProps,
+)(InstitutionIndex);

package/src/components/detail/InstitutionSection.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import InstitutionHoldingList from './InstitutionHoldingListContainer';
+import styles from '../../../styles/cspace/InstitutionSection.css';
+
+const propTypes = {
+  config: PropTypes.objectOf(PropTypes.object).isRequired,
+  holdingInstitutions: PropTypes.instanceOf(Immutable.Set).isRequired,
+  referenceValue: PropTypes.string.isRequired,
+  selectedInstitutionId: PropTypes.string,
+};
+
+const defaultProps = {
+  selectedInstitutionId: undefined,
+};
+
+export default function InstitutionSection(props) {
+  const {
+    config,
+    holdingInstitutions,
+    referenceValue,
+    selectedInstitutionId,
+  } = props;
+
+  if (!holdingInstitutions || holdingInstitutions.size === 0) {
+    return null;
+  }
+
+  const institutions = holdingInstitutions.map((institutionId) => (
+    <InstitutionHoldingList
+      institutionConfig={config[institutionId]}
+      institutionId={institutionId}
+      isSelected={institutionId === selectedInstitutionId}
+      key={institutionId}
+      referenceValue={referenceValue}
+    />
+  ));
+
+  return (
+    <section className={styles.common}>
+      {institutions}
+    </section>
+  );
+}
+
+InstitutionSection.propTypes = propTypes;
+InstitutionSection.defaultProps = defaultProps;

package/src/components/detail/InstitutionSectionContainer.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import InstitutionSection from './InstitutionSection';
+import { getDetailHoldingInstitutions } from '../../reducers';
+
+const mapStateToProps = (state) => ({
+  holdingInstitutions: getDetailHoldingInstitutions(state),
+});
+
+export default connect(
+  mapStateToProps,
+)(InstitutionSection);

package/src/components/layout/Fixed.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../../../styles/cspace/Fixed.css';
+
+const propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]),
+};
+
+const defaultProps = {
+  children: undefined,
+};
+
+export default function Fixed(props) {
+  const {
+    children,
+  } = props;
+
+  return (
+    <div className={styles.common}>
+      {children}
+    </div>
+  );
+}
+
+Fixed.propTypes = propTypes;
+Fixed.defaultProps = defaultProps;

package/src/components/layout/IconButton.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import styles from '../../../styles/cspace/IconButton.css';
+
+const propTypes = {
+  className: PropTypes.string,
+  labelMessage: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+  }).isRequired,
+  onClick: PropTypes.func,
+};
+
+const defaultProps = {
+  className: undefined,
+  onClick: undefined,
+};
+
+export default function IconButton(props) {
+  const {
+    className,
+    labelMessage,
+    onClick,
+  } = props;
+
+  return (
+    <button
+      className={classNames(className, styles.common)}
+      type="button"
+      onClick={onClick}
+    >
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <FormattedMessage {...labelMessage} tagName="span" />
+    </button>
+  );
+}
+
+IconButton.propTypes = propTypes;
+IconButton.defaultProps = defaultProps;

package/src/components/layout/Panel.jsx

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from '../../../styles/cspace/Panel.css';
+
+const propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]),
+  title: PropTypes.element,
+  isExpanded: PropTypes.bool,
+  onHeaderClick: PropTypes.func,
+};
+
+const defaultProps = {
+  children: undefined,
+  isExpanded: false,
+  onHeaderClick: () => undefined,
+  title: undefined,
+};
+
+export default class Panel extends Component {
+  constructor() {
+    super();
+
+    this.handleHeaderButtonClick = this.handleHeaderButtonClick.bind(this);
+  }
+
+  handleHeaderButtonClick() {
+    const {
+      id,
+      onHeaderClick,
+    } = this.props;
+
+    onHeaderClick(id);
+  }
+
+  render() {
+    const {
+      children,
+      isExpanded,
+      title,
+    } = this.props;
+
+    const className = isExpanded ? styles.expanded : styles.collapsed;
+
+    return (
+      <div className={className}>
+        <header>
+          <button onClick={this.handleHeaderButtonClick} aria-expanded={isExpanded} type="button">{title}</button>
+        </header>
+        {isExpanded ? children : undefined}
+      </div>
+    );
+  }
+}
+
+Panel.propTypes = propTypes;
+Panel.defaultProps = defaultProps;

package/src/components/layout/PanelContainer.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import Panel from './Panel';
+import { isPanelExpanded } from '../../reducers';
+
+import {
+  togglePanel,
+} from '../../actions/prefsActions';
+
+const mapStateToProps = (state, ownProps) => ({
+  isExpanded: isPanelExpanded(state, ownProps.id),
+});
+
+const mapDispatchToProps = {
+  onHeaderClick: togglePanel,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Panel);