@attivio/suit/es/components/DocumentPreview.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

var _class, _temp;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React from 'react';

import Modal from 'react-bootstrap/lib/Modal';
import Carousel from 'react-bootstrap/lib/Carousel';

import DefaultImage from './DefaultImage';
import StringUtils from '../util/StringUtils';

var DocumentPreview = (_temp = _class = function (_React$Component) {
  _inherits(DocumentPreview, _React$Component);

  // eslint-disable-line max-len
  function DocumentPreview(props) {
    _classCallCheck(this, DocumentPreview);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.state = {
      currentItem: 0
    };
    _this.handleSelect = _this.handleSelect.bind(_this);
    return _this;
  }

  DocumentPreview.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    // If we're going to be shown when we weren't previously, reset the image to display to the first one.
    if (nextProps.show && !this.props.show) {
      this.setState({
        currentItem: 0
      });
    }
  };

  DocumentPreview.prototype.handleSelect = function handleSelect(selectedIndex) {
    this.setState({
      currentItem: selectedIndex
    });
  };

  DocumentPreview.prototype.render = function render() {
    var _this2 = this;

    var previewComps = void 0;
    // If we have multiple images, display them in a carousel object
    if (this.props.uris.length > 1) {
      var items = this.props.uris.map(function (uri, index) {
        var caption = index + 1 + ' of ' + _this2.props.uris.length;
        return React.createElement(
          Carousel.Item,
          { key: 'image' + index * 2 / 2 + '-' + uri },
          React.createElement(DefaultImage, {
            src: uri,
            alt: 'Thumbnail',
            style: {
              marginLeft: 'auto',
              marginRight: 'auto',
              maxHeight: '75vh'
            }
          }),
          React.createElement(
            Carousel.Caption,
            null,
            React.createElement(
              'em',
              null,
              caption
            )
          )
        );
      });
      previewComps = React.createElement(
        Carousel,
        {
          activeIndex: this.state.currentItem,
          interval: null,
          onSelect: this.handleSelect,
          slide: false,
          indicators: false,
          className: 'preview'
        },
        items
      );
    } else {
      // A single image doesn't warrant a carousel
      previewComps = React.createElement(DefaultImage, {
        src: this.props.uris[0],
        alt: 'Thumbnail',
        style: {
          marginLeft: 'auto',
          marginRight: 'auto',
          display: 'block',
          maxHeight: '75vh'
        }
      });
    }

    var title = this.props.docTitle ? 'Preview of \u201C' + StringUtils.stripSimpleHtml(this.props.docTitle) + '\u201D' : 'Preview';

    return React.createElement(
      Modal,
      { show: this.props.show, bsSize: 'large', onHide: this.props.onClose },
      React.createElement(
        Modal.Header,
        { closeButton: true },
        React.createElement(
          'h3',
          null,
          title
        )
      ),
      React.createElement(
        Modal.Body,
        null,
        previewComps
      )
    );
  };

  return DocumentPreview;
}(React.Component), _class.defaultProps = {
  docTitle: null
}, _class.displayName = 'DocumentPreview', _temp);
export { DocumentPreview as default };