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

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

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Modal = require('react-bootstrap/lib/Modal');

var _Modal2 = _interopRequireDefault(_Modal);

var _Carousel = require('react-bootstrap/lib/Carousel');

var _Carousel2 = _interopRequireDefault(_Carousel);

var _DefaultImage = require('./DefaultImage');

var _DefaultImage2 = _interopRequireDefault(_DefaultImage);

var _StringUtils = require('../util/StringUtils');

var _StringUtils2 = _interopRequireDefault(_StringUtils);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

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 _react2.default.createElement(
          _Carousel2.default.Item,
          { key: 'image' + index * 2 / 2 + '-' + uri },
          _react2.default.createElement(_DefaultImage2.default, {
            src: uri,
            alt: 'Thumbnail',
            style: {
              marginLeft: 'auto',
              marginRight: 'auto',
              maxHeight: '75vh'
            }
          }),
          _react2.default.createElement(
            _Carousel2.default.Caption,
            null,
            _react2.default.createElement(
              'em',
              null,
              caption
            )
          )
        );
      });
      previewComps = _react2.default.createElement(
        _Carousel2.default,
        {
          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 = _react2.default.createElement(_DefaultImage2.default, {
        src: this.props.uris[0],
        alt: 'Thumbnail',
        style: {
          marginLeft: 'auto',
          marginRight: 'auto',
          display: 'block',
          maxHeight: '75vh'
        }
      });
    }

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

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

  return DocumentPreview;
}(_react2.default.Component), _class.defaultProps = {
  docTitle: null
}, _class.displayName = 'DocumentPreview', _temp);
exports.default = DocumentPreview;
module.exports = exports['default'];