cspace-ui/lib/components/search/list/DetailItem.js

CollectionSpace user interface for browsers

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactRouterDom = require("react-router-dom");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _immutable = _interopRequireDefault(require("immutable"));
var _reactIntl = require("react-intl");
var _cspaceInput = require("cspace-input");
var _ConfigProvider = require("../../config/ConfigProvider");
var _searchNames = require("../../../constants/searchNames");
var _SearchList = _interopRequireDefault(require("../../../../styles/cspace-ui/SearchList.css"));
var _SearchResultCheckbox = _interopRequireDefault(require("../SearchResultCheckbox"));
var _SearchResultImage = _interopRequireDefault(require("../SearchResultImage"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
  Button
} = _cspaceInput.components;
const propTypes = {
  intl: _reactIntl.intlShape,
  item: _propTypes.default.instanceOf(_immutable.default.Map),
  index: _propTypes.default.number,
  detailConfig: _propTypes.default.shape({
    aside: _propTypes.default.shape({
      formatter: _propTypes.default.func
    }),
    title: _propTypes.default.shape({
      formatter: _propTypes.default.func
    }),
    subtitle: _propTypes.default.shape({
      formatter: _propTypes.default.func
    }),
    description: _propTypes.default.shape({
      formatter: _propTypes.default.func
    }),
    tags: _propTypes.default.shape({
      formatter: _propTypes.default.func
    }),
    footer: _propTypes.default.shape({
      formatter: _propTypes.default.func
    })
  }),
  searchDescriptor: _propTypes.default.object,
  listType: _propTypes.default.string,
  selectedItems: _propTypes.default.instanceOf(_immutable.default.Map)
};
const DETAIL_DERIVATIVE = 'Small';
const renderEditButton = (location, state) => {
  const button = /*#__PURE__*/_react.default.createElement(Button, {
    name: "edit"
  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
    id: "searchDetailList.editLabel",
    defaultMessage: "Edit Record"
  }));
  return location ? /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: {
      pathname: location,
      state
    }
  }, button) : button;
};
function DetailItem({
  intl,
  item,
  index,
  detailConfig,
  searchDescriptor,
  listType,
  selectedItems
}) {
  const config = (0, _ConfigProvider.useConfig)();
  const {
    title: {
      formatter: titleFormatter
    } = {},
    subtitle: {
      formatter: subtitleFormatter
    } = {},
    description: {
      formatter: descriptionFormatter
    } = {},
    tags: {
      formatter: tagFormatter
    } = {},
    footer: {
      formatter: footerFormatter
    } = {},
    aside: {
      formatter: asideFormatter
    } = {}
  } = detailConfig;
  const csid = item.get('csid');
  const selected = selectedItems ? selectedItems.has(csid) : false;
  const listTypeConfig = config.listTypes[listType];
  const {
    getItemLocationPath
  } = listTypeConfig;
  let location;
  let state;
  if (getItemLocationPath) {
    location = getItemLocationPath(item, {
      config,
      searchDescriptor
    });
    state = {
      searchDescriptor: searchDescriptor.toJS(),
      // The search traverser on records will always link to the search result page, so use
      // its search name.
      searchName: _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME
    };
  }
  const renderInfo = () => /*#__PURE__*/_react.default.createElement("aside", null, asideFormatter(item, {
    intl
  }));
  const renderDescriptionBlock = () => /*#__PURE__*/_react.default.createElement("div", {
    className: _SearchList.default.description
  }, location ? /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: {
      pathname: location,
      state
    }
  }, titleFormatter === null || titleFormatter === void 0 ? void 0 : titleFormatter(item, {
    intl
  })) : titleFormatter === null || titleFormatter === void 0 ? void 0 : titleFormatter(item, {
    intl
  }), subtitleFormatter === null || subtitleFormatter === void 0 ? void 0 : subtitleFormatter(item, {
    intl
  }), descriptionFormatter === null || descriptionFormatter === void 0 ? void 0 : descriptionFormatter(item, {
    intl
  }), tagFormatter === null || tagFormatter === void 0 ? void 0 : tagFormatter(item, {
    intl
  }), footerFormatter === null || footerFormatter === void 0 ? void 0 : footerFormatter(item, {
    intl
  }));
  const blob = /*#__PURE__*/_react.default.createElement(_SearchResultImage.default, {
    derivative: DETAIL_DERIVATIVE,
    item: item,
    location: location,
    state: state
  });
  const editButton = renderEditButton(location, state);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _SearchList.default.innerDetail
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _SearchList.default.imageContainer
  }, blob), /*#__PURE__*/_react.default.createElement(_SearchResultCheckbox.default, {
    index: index,
    listType: listType,
    searchDescriptor: searchDescriptor,
    selected: selected
  }), renderDescriptionBlock(), /*#__PURE__*/_react.default.createElement("div", {
    className: _SearchList.default.info
  }, renderInfo(), editButton));
}
var _default = exports.default = (0, _reactIntl.injectIntl)(DetailItem);
DetailItem.propTypes = propTypes;