@collectionspace/cspace-public-browser 1.5.1

package/lib/components/detail/DetailNavBar.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DetailNavBar;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntl = require("react-intl");
+var _reactRouterDom = require("react-router-dom");
+var _immutable = _interopRequireDefault(require("immutable"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _config = _interopRequireDefault(require("../../config"));
+var _urlHelpers = require("../../helpers/urlHelpers");
+var _DetailNavBar = _interopRequireDefault(require("../../../styles/cspace/DetailNavBar.css"));
+var _Link = _interopRequireDefault(require("../../../styles/cspace/Link.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const propTypes = {
+  params: _propTypes.default.instanceOf(_immutable.default.Map).isRequired,
+  prev: _propTypes.default.shape({
+    'ecm:name': _propTypes.default.string
+  }),
+  next: _propTypes.default.shape({
+    'ecm:name': _propTypes.default.string
+  })
+};
+const defaultProps = {
+  prev: undefined,
+  next: undefined
+};
+const messages = (0, _reactIntl.defineMessages)({
+  search: {
+    "id": "detailNavBar.search",
+    "defaultMessage": "Return to search"
+  },
+  prev: {
+    "id": "detailNavBar.prev",
+    "defaultMessage": "Previous"
+  },
+  next: {
+    "id": "detailNavBar.next",
+    "defaultMessage": "Next"
+  }
+});
+function DetailNavBar(props) {
+  const {
+    params,
+    prev,
+    next
+  } = props;
+  const index = params.get('index');
+  const searchParams = params.get('searchParams');
+  if (!searchParams || typeof index === 'undefined') {
+    return null;
+  }
+  const searchParamsObj = searchParams.toJS();
+  const detailPath = _config.default.get('detailPath');
+  let prevLink;
+  let nextLink;
+  if (prev) {
+    const csid = (0, _get.default)(prev, 'ecm:name');
+    prevLink = /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+      className: _Link.default.prev,
+      to: {
+        pathname: `/${detailPath}/${csid}`,
+        state: {
+          index: index - 1,
+          searchParams: searchParamsObj
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.prev)));
+  }
+  if (next) {
+    const csid = (0, _get.default)(next, 'ecm:name');
+    nextLink = /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+      className: _Link.default.next,
+      to: {
+        pathname: `/${detailPath}/${csid}`,
+        state: {
+          index: index + 1,
+          searchParams: searchParamsObj
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.next)));
+  }
+  const queryString = (0, _urlHelpers.searchParamsToQueryString)(searchParams);
+  return /*#__PURE__*/_react.default.createElement("nav", {
+    className: _DetailNavBar.default.common
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    className: _Link.default.back,
+    to: {
+      pathname: '/search',
+      search: `?${queryString}`
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.search))), /*#__PURE__*/_react.default.createElement("div", null, prevLink, nextLink));
+}
+DetailNavBar.propTypes = propTypes;
+DetailNavBar.defaultProps = defaultProps;

package/lib/components/detail/DetailPanel.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactHelmet = _interopRequireDefault(require("react-helmet"));
+var _immutable = _interopRequireDefault(require("immutable"));
+var _FieldList = _interopRequireDefault(require("./FieldList"));
+var _DetailNavBar = _interopRequireDefault(require("./DetailNavBar"));
+var _ImageGalleryContainer = _interopRequireDefault(require("./ImageGalleryContainer"));
+var _InstitutionIndexContainer = _interopRequireDefault(require("./InstitutionIndexContainer"));
+var _InstitutionSectionContainer = _interopRequireDefault(require("./InstitutionSectionContainer"));
+var _ExhibitionSection = _interopRequireDefault(require("./ExhibitionSection"));
+var _config = _interopRequireDefault(require("../../config"));
+var _DetailPanel = _interopRequireDefault(require("../../../styles/cspace/DetailPanel.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const propTypes = {
+  adjacents: _propTypes.default.shape({
+    prev: _propTypes.default.object,
+    next: _propTypes.default.object
+  }),
+  data: _propTypes.default.shape({
+    'collectionspace_core:refName': _propTypes.default.string,
+    'collectionspace_denorm:title': _propTypes.default.string,
+    'collectionspace_denorm:exhibition': _propTypes.default.array,
+    'collectionobjects_common:objectHistoryNote': _propTypes.default.string,
+    'collectionobjects_common:ownersContributionNote': _propTypes.default.string,
+    'collectionobjects_common:viewersContributionNote': _propTypes.default.string
+  }),
+  params: _propTypes.default.instanceOf(_immutable.default.Map).isRequired,
+  readDetail: _propTypes.default.func
+};
+const defaultProps = {
+  adjacents: {},
+  data: undefined,
+  readDetail: () => undefined
+};
+class DetailPanel extends _react.Component {
+  componentDidMount() {
+    this.readDetail();
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      params
+    } = this.props;
+    const {
+      params: prevParams
+    } = prevProps;
+    if (params.get('csid') !== prevParams.get('csid')) {
+      this.readDetail();
+    }
+  }
+  readDetail() {
+    const {
+      readDetail
+    } = this.props;
+    readDetail();
+  }
+  renderDescription() {
+    const {
+      data
+    } = this.props;
+    const descFormatter = _config.default.get('detailDescription');
+    const desc = descFormatter && descFormatter(data);
+    return /*#__PURE__*/_react.default.createElement("p", null, desc);
+  }
+  renderFieldList() {
+    const {
+      data
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_FieldList.default, {
+      config: _config.default.get('detailFields'),
+      data: data
+    });
+  }
+  renderHeader() {
+    const {
+      adjacents,
+      data,
+      params
+    } = this.props;
+    const titleFormatter = _config.default.get('detailTitle');
+    const title = titleFormatter && titleFormatter(data);
+    const subtitleFormatter = _config.default.get('detailSubtitle');
+    const subtitle = subtitleFormatter && subtitleFormatter(data);
+    const {
+      'collectionspace_core:refName': refName
+    } = data;
+    return /*#__PURE__*/_react.default.createElement("header", null, /*#__PURE__*/_react.default.createElement(_DetailNavBar.default, {
+      params: params,
+      prev: adjacents.prev,
+      next: adjacents.next
+    }), title && /*#__PURE__*/_react.default.createElement("h1", null, title), subtitle && /*#__PURE__*/_react.default.createElement("h2", null, subtitle), /*#__PURE__*/_react.default.createElement(_InstitutionIndexContainer.default, {
+      refName: refName
+    }));
+  }
+  renderImageGallery() {
+    const {
+      data
+    } = this.props;
+    const referenceField = _config.default.get('referenceField');
+    const referenceValue = data[referenceField];
+    return /*#__PURE__*/_react.default.createElement(_ImageGalleryContainer.default, {
+      referenceValue: referenceValue
+    });
+  }
+  renderPageTitle() {
+    const {
+      data
+    } = this.props;
+    const {
+      'collectionspace_denorm:title': title
+    } = data;
+    return /*#__PURE__*/_react.default.createElement(_reactHelmet.default, null, /*#__PURE__*/_react.default.createElement("title", null, title));
+  }
+  renderInstitutions() {
+    const {
+      data,
+      params
+    } = this.props;
+    const institutionsConfig = _config.default.get('institutions');
+    if (!institutionsConfig) {
+      return null;
+    }
+    const selectedInstitutionId = params.get('#');
+    const referenceField = _config.default.get('referenceField');
+    const referenceValue = data[referenceField];
+    return /*#__PURE__*/_react.default.createElement(_InstitutionSectionContainer.default, {
+      config: institutionsConfig,
+      selectedInstitutionId: selectedInstitutionId,
+      referenceValue: referenceValue
+    });
+  }
+  renderExhibition() {
+    const {
+      data
+    } = this.props;
+    const exhibition = data['collectionspace_denorm:exhibition'];
+    if (exhibition && exhibition.length > 0) {
+      const historyNote = data['collectionobjects_common:objectHistoryNote'];
+      const ownerConrtibutionNote = data['collectionobjects_common:ownersContributionNote'];
+      const viewerContributionNote = data['collectionobjects_common:viewersContributionNote'];
+      return /*#__PURE__*/_react.default.createElement(_ExhibitionSection.default, {
+        exhibition: exhibition[0],
+        historyNote: historyNote,
+        ownerConrtibutionNote: ownerConrtibutionNote,
+        viewerContributionNote: viewerContributionNote
+      });
+    }
+    return null;
+  }
+  render() {
+    const {
+      data
+    } = this.props;
+    if (!data) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _DetailPanel.default.common
+    }, this.renderPageTitle(), this.renderHeader(), this.renderDescription(), this.renderImageGallery(), this.renderFieldList(), this.renderInstitutions(), this.renderExhibition());
+  }
+}
+exports.default = DetailPanel;
+DetailPanel.propTypes = propTypes;
+DetailPanel.defaultProps = defaultProps;

package/lib/components/detail/DetailPanelContainer.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _DetailPanel = _interopRequireDefault(require("./DetailPanel"));
+var _detailActions = require("../../actions/detailActions");
+var _reducers = require("../../reducers");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mapStateToProps = state => ({
+  adjacents: (0, _reducers.getDetailAdjacents)(state),
+  data: (0, _reducers.getDetailData)(state),
+  error: (0, _reducers.getDetailError)(state),
+  isPending: (0, _reducers.isDetailPending)(state)
+});
+const mapDispatchToProps = {
+  readDetail: _detailActions.readDetail
+};
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_DetailPanel.default);
+exports.default = _default;

package/lib/components/detail/ExhibitionSection.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ExhibitionSection;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntl = require("react-intl");
+var _ExhibitionSection = _interopRequireDefault(require("../../../styles/cspace/ExhibitionSection.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const propTypes = {
+  exhibition: _propTypes.default.shape({
+    title: _propTypes.default.string,
+    generalNote: _propTypes.default.string,
+    curatorialNote: _propTypes.default.string
+  }),
+  historyNote: _propTypes.default.string,
+  ownerConrtibutionNote: _propTypes.default.string,
+  viewerContributionNote: _propTypes.default.string
+};
+const defaultProps = {
+  exhibition: undefined,
+  historyNote: undefined,
+  ownerConrtibutionNote: undefined,
+  viewerContributionNote: undefined
+};
+const messages = (0, _reactIntl.defineMessages)({
+  objectStoryHeader: {
+    "id": "exhibitionSection.objectStoryHeader",
+    "defaultMessage": "Object Story"
+  },
+  donorStoryHeader: {
+    "id": "exhibitionSection.donorStoryHeader",
+    "defaultMessage": "Donor Story"
+  },
+  curatorialStoryHeader: {
+    "id": "exhibitionSection.curatorialStoryHeader",
+    "defaultMessage": "Curatorial Story"
+  }
+});
+function ExhibitionSection(props) {
+  const {
+    exhibition,
+    historyNote,
+    viewerContributionNote,
+    ownerConrtibutionNote
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _ExhibitionSection.default.common
+  }, /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement("h1", null, exhibition.title), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("h2", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.objectStoryHeader)), /*#__PURE__*/_react.default.createElement("div", null, historyNote), /*#__PURE__*/_react.default.createElement("h2", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.donorStoryHeader)), /*#__PURE__*/_react.default.createElement("div", null, ownerConrtibutionNote), /*#__PURE__*/_react.default.createElement("div", null, exhibition.generalNote), /*#__PURE__*/_react.default.createElement("h2", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.curatorialStoryHeader)), /*#__PURE__*/_react.default.createElement("div", null, viewerContributionNote), /*#__PURE__*/_react.default.createElement("div", null, exhibition.curatorialNote));
+}
+ExhibitionSection.propTypes = propTypes;
+ExhibitionSection.defaultProps = defaultProps;

package/lib/components/detail/FieldList.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FieldList;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntl = require("react-intl");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _FieldList = _interopRequireDefault(require("../../../styles/cspace/FieldList.css"));
+var _FieldListGroup = _interopRequireDefault(require("../../../styles/cspace/FieldListGroup.css"));
+var _FieldListField = _interopRequireDefault(require("../../../styles/cspace/FieldListField.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const propTypes = {
+  config: _propTypes.default.shape({
+    fields: _propTypes.default.object.isRequired,
+    groups: _propTypes.default.object.isRequired,
+    layout: _propTypes.default.object.isRequired
+  }).isRequired,
+  data: _propTypes.default.shape({
+    'collectionspace_core:refName': _propTypes.default.string,
+    'collectionspace_denorm:title': _propTypes.default.string
+  }).isRequired
+};
+const renderField = (id, fieldConfig, data) => {
+  const {
+    className,
+    field,
+    format,
+    label,
+    messages
+  } = fieldConfig;
+  const title = messages
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.label) : label;
+  const value = data[field];
+  const formattedValue = format && value ? format(value, id) : value;
+  if (!formattedValue) {
+    return null;
+  }
+  if (title) {
+    const classes = (0, _classnames.default)(_FieldListField.default[className]);
+    const classProp = classes ? {
+      className: classes
+    } : undefined;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: id
+    }, /*#__PURE__*/_react.default.createElement("div", classProp, title), /*#__PURE__*/_react.default.createElement("div", classProp, formattedValue));
+  }
+  const classes = (0, _classnames.default)(_FieldListField.default.unlabeled, _FieldListField.default[className]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes,
+    key: id
+  }, formattedValue);
+};
+const renderGroup = (id, groupConfig, config, data) => {
+  const {
+    className,
+    fields,
+    label,
+    messages
+  } = groupConfig;
+  const title = messages
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.label) : label;
+  const fieldsConfig = config.fields;
+  const renderedFields = fields.map(fieldId => renderField(fieldId, fieldsConfig[fieldId], data)).filter(renderedField => !!renderedField);
+  if (renderedFields.length === 0) {
+    return null;
+  }
+  const classes = (0, _classnames.default)(_FieldListGroup.default.common, _FieldListGroup.default[className]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes,
+    key: id
+  }, title && /*#__PURE__*/_react.default.createElement("h3", null, title), /*#__PURE__*/_react.default.createElement("div", null, renderedFields));
+};
+function FieldList(props) {
+  const {
+    config,
+    data
+  } = props;
+  const {
+    groups,
+    layout
+  } = config;
+  return Object.keys(layout).map(layoutId => /*#__PURE__*/_react.default.createElement("div", {
+    className: _FieldList.default.common,
+    key: layoutId,
+    style: {
+      gridArea: layoutId
+    }
+  }, layout[layoutId].map(groupId => renderGroup(groupId, groups[groupId], config, data))));
+}
+FieldList.propTypes = propTypes;

package/lib/components/detail/FieldValueList.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FieldValueList;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _FieldValueList = _interopRequireDefault(require("../../../styles/cspace/FieldValueList.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const propTypes = {
+  children: _propTypes.default.node,
+  inline: _propTypes.default.bool
+};
+const defaultProps = {
+  children: undefined,
+  inline: false
+};
+function FieldValueList(props) {
+  const {
+    children,
+    inline
+  } = props;
+  const className = inline ? _FieldValueList.default.inline : _FieldValueList.default.common;
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: className
+  }, children);
+}
+FieldValueList.propTypes = propTypes;
+FieldValueList.defaultProps = defaultProps;

package/lib/components/detail/ImageGallery.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntl = require("react-intl");
+var _immutable = _interopRequireDefault(require("immutable"));
+var _reactImageGallery = _interopRequireDefault(require("react-image-gallery"));
+require("react-image-gallery/styles/css/image-gallery.css");
+var _config = _interopRequireDefault(require("../../config"));
+var _urlHelpers = require("../../helpers/urlHelpers");
+var _ImageGallery = _interopRequireDefault(require("../../../styles/cspace/ImageGallery.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const propTypes = {
+  findMedia: _propTypes.default.func,
+  institutionId: _propTypes.default.string,
+  intl: _propTypes.default.shape({
+    formatMessage: _propTypes.default.func.isRequired
+  }).isRequired,
+  media: _propTypes.default.instanceOf(_immutable.default.Map),
+  referenceValue: _propTypes.default.string.isRequired
+};
+const defaultProps = {
+  institutionId: undefined,
+  media: undefined,
+  findMedia: () => undefined
+};
+const messages = (0, _reactIntl.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.default.get('institutions');
+  return institutionsConfig ? Object.keys(institutionsConfig) : [];
+};
+class ImageGallery extends _react.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.default.Map();
+      const title = mediaMap.get('title');
+      const mediaCsids = mediaMap.get('csids') || _immutable.default.List();
+      const mediaAltTexts = mediaMap.get('altTexts') || _immutable.default.List();
+      if (mediaCsids && mediaCsids.size > 0) {
+        const gatewayUrl = instId ? _config.default.get(['institutions', instId, 'gatewayUrl']) : _config.default.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: (0, _urlHelpers.blobUrl)(gatewayUrl, mediaCsid, _config.default.get('detailImageDerivative')),
+            thumbnail: (0, _urlHelpers.blobUrl)(gatewayUrl, mediaCsid, 'Thumbnail'),
+            originalAlt: altText,
+            thumbnailAlt: intl.formatMessage(messages.thumbnailAltText, {
+              altText
+            })
+          });
+        });
+      }
+    });
+    if (items.length > 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _ImageGallery.default.common
+      }, /*#__PURE__*/_react.default.createElement(_reactImageGallery.default, {
+        disableArrowKeys: true,
+        items: items,
+        showFullscreenButton: false,
+        showPlayButton: false,
+        showThumbnails: items.length > 1
+      }));
+    }
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  }
+}
+ImageGallery.propTypes = propTypes;
+ImageGallery.defaultProps = defaultProps;
+var _default = (0, _reactIntl.injectIntl)(ImageGallery);
+exports.default = _default;

package/lib/components/detail/ImageGalleryContainer.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _ImageGallery = _interopRequireDefault(require("./ImageGallery"));
+var _mediaActions = require("../../actions/mediaActions");
+var _reducers = require("../../reducers");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mapStateToProps = (state, ownProps) => ({
+  media: (0, _reducers.getMedia)(state, ownProps.referenceValue)
+});
+const mapDispatchToProps = {
+  findMedia: _mediaActions.findMedia
+};
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_ImageGallery.default);
+exports.default = _default;