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

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

'use strict';

exports.__esModule = true;

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactRouterDom = require('react-router-dom');

var _queryString = require('query-string');

var _queryString2 = _interopRequireDefault(_queryString);

var _Glyphicon = require('react-bootstrap/lib/Glyphicon');

var _Glyphicon2 = _interopRequireDefault(_Glyphicon);

var _AutoCompleteInput = require('./AutoCompleteInput');

var _AutoCompleteInput2 = _interopRequireDefault(_AutoCompleteInput);

var _Configurable = require('./Configurable');

var _Configurable2 = _interopRequireDefault(_Configurable);

var _Comments = require('./Comments');

var _Comments2 = _interopRequireDefault(_Comments);

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

/**
 * Show the tags for a document from the search results. Optionally
 * shows a link to view similar documents if the moreLikeThisQuery
 * property is set. If the vertical prop is set, then they're rendered
 * in a single column as opposed to in a horizontal row. Also allows
 * the user to add additional tags by clicking the Add button.
 */
var SearchResultTags = (_temp = _class = function (_React$Component) {
  _inherits(SearchResultTags, _React$Component);

  function SearchResultTags(props) {
    _classCallCheck(this, SearchResultTags);

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

    _this.updateTags = function (tags) {
      var _this$context$searche = _this.context.searcher,
          searcher = _this$context$searche === undefined ? null : _this$context$searche;
      var docId = _this.props.docId;


      if (searcher) {
        _this.setState({
          updating: true
        }, function () {
          var completionCallback = function completionCallback() {
            _this.setState({
              tags: tags,
              newTag: '',
              adding: false,
              tagError: null,
              updating: false
            });
          };

          var errorCallback = function errorCallback(error) {
            _this.setState({
              newTag: '',
              adding: false,
              tagError: error.toString(),
              updating: false
            });
          };

          searcher.updateTags(tags, docId, completionCallback, errorCallback);
        });
      }
    };

    _this.removeTag = function (tagName) {
      var tags = _this.state.tags.slice();
      var index = tags.indexOf(tagName);
      if (index >= 0) {
        tags.splice(index, 1);
        _this.updateTags(tags);
      }
    };

    _this.addTag = function () {
      var tagName = _this.state.newTag;


      if (tagName && tagName.length > 0) {
        var _tags = _this.state.tags.slice();
        _tags.push(tagName);
        _this.updateTags(_tags);
      }
    };

    _this.updateNewTag = function (event) {
      if (event.target instanceof HTMLInputElement) {
        _this.setState({
          newTag: event.target.value
        });
      }
    };

    _this.updateNewTagFromString = function (tagValue, addNow) {
      if (addNow) {
        _this.setState({
          newTag: tagValue
        }, _this.addTag);
      } else {
        _this.setState({
          newTag: tagValue
        });
      }
    };

    _this.keyUp = function (event) {
      if (event.target instanceof HTMLInputElement) {
        if (event.key === 'Enter') {
          // If the user presses enter, then add the new tag
          _this.addTag();
        } else if (event.key === 'Escape') {
          // Otherwise, if the press escape, to back to showing the Add… link instead of the input field
          _this.onEscape();
        }
      }
    };

    _this.moreLikeThis = function () {
      var moreLikeThisQuery = _this.props.moreLikeThisQuery;
      var _this$context$searche2 = _this.context.searcher,
          searcher = _this$context$searche2 === undefined ? null : _this$context$searche2;


      if (searcher) {
        searcher.performQueryImmediately(moreLikeThisQuery, true);
      }
    };

    _this.show360View = function () {
      var _this$props = _this.props,
          docId = _this$props.docId,
          history = _this$props.history,
          location = _this$props.location;


      var escapedDocId = encodeURIComponent(docId);
      var path = '/doc360';
      var search = _queryString2.default.parse(location.search);
      search.docId = escapedDocId;
      history.push({ pathname: path, search: '' + _queryString2.default.stringify(search) });
    };

    _this.state = {
      adding: false,
      newTag: '',
      tagError: null,
      tags: [].concat(props.tags),
      updating: false
    };
    return _this;
  } // eslint-disable-line max-len


  SearchResultTags.prototype.onEscape = function onEscape() {
    this.setState({
      newTag: '',
      adding: false
    });
  };

  SearchResultTags.prototype.render360Link = function render360Link() {
    var _props = this.props,
        view360Label = _props.view360Label,
        hide360Link = _props.hide360Link;


    return view360Label && !hide360Link && _react2.default.createElement(
      'a',
      {
        className: 'attivio-tags-more',
        onClick: this.show360View,
        role: 'button',
        tabIndex: 0
      },
      view360Label
    );
  };

  SearchResultTags.prototype.renderInputComponent = function renderInputComponent() {
    var _this2 = this;

    var _props2 = this.props,
        autoCompleteUri = _props2.autoCompleteUri,
        baseUri = _props2.baseUri;
    var newTag = this.state.newTag;


    return autoCompleteUri && autoCompleteUri.length > 0 ? _react2.default.createElement(_AutoCompleteInput2.default, {
      uri: '' + (baseUri || '') + (autoCompleteUri || ''),
      onChange: this.updateNewTagFromString,
      updateValue: this.updateNewTagFromString,
      onEscape: this.onEscape,
      placeholder: 'Tag\u2026',
      value: newTag,
      className: 'form-control'
    }) : _react2.default.createElement('input', {
      type: 'email',
      className: 'form-control',
      id: 'attivio-tags-more-add',
      placeholder: 'Tag\u2026',
      value: newTag,
      onChange: this.updateNewTag,
      onKeyUp: this.keyUp,
      ref: function ref(comp) {
        _this2.inputField = comp;
      }
    });
  };

  SearchResultTags.prototype.renderExtraLinks = function renderExtraLinks() {
    var _this3 = this;

    var _state = this.state,
        adding = _state.adding,
        newTag = _state.newTag,
        updating = _state.updating;


    var addButtonText = updating ? 'Adding\u2026' : 'Add';

    return adding ? _react2.default.createElement(
      'div',
      { className: 'form-inline attivio-tags-form' },
      _react2.default.createElement(
        'div',
        { className: 'form-group' },
        _react2.default.createElement(
          'label',
          { htmlFor: 'attivio-tags-more-add', className: 'sr-only' },
          'Tag'
        ),
        this.renderInputComponent()
      ),
      _react2.default.createElement(
        'button',
        {
          type: 'submit',
          className: 'btn btn-primary btn-xs',
          onClick: this.addTag,
          disabled: newTag.length === 0 || updating
        },
        addButtonText
      )
    ) : _react2.default.createElement(
      'a',
      {
        className: 'attivio-tags-link',
        onClick: function onClick() {
          _this3.setState({
            adding: true
          }, function () {
            if (_this3.inputField) {
              _this3.inputField.focus();
            }
          });
        },
        role: 'button',
        tabIndex: 0
      },
      'Add\u2026'
    );
  };

  SearchResultTags.prototype.renderTags = function renderTags() {
    var _this4 = this;

    var tags = this.state.tags;


    if (tags && tags.length > 0) {
      return tags.map(function (tag) {
        return _react2.default.createElement(
          'span',
          { key: tag },
          _react2.default.createElement(
            'a',
            {
              className: 'attivio-tags-link',
              onClick: function onClick() {
                _this4.removeTag(tag);
              },
              role: 'button',
              tabIndex: 0
            },
            tag,
            ' ',
            _react2.default.createElement('span', { className: 'attivio-icon-remove' })
          ),
          ' '
        );
      });
    }

    return _react2.default.createElement(
      'span',
      { className: 'attivio-tags-link none' },
      'None'
    );
  };

  SearchResultTags.prototype.renderMoreLikeThis = function renderMoreLikeThis() {
    var moreLikeThisQuery = this.props.moreLikeThisQuery;


    return moreLikeThisQuery.length > 0 ? _react2.default.createElement(
      'a',
      {
        className: 'attivio-tags-more',
        onClick: this.moreLikeThis,
        role: 'button',
        tabIndex: 0
      },
      'More like this'
    ) : '';
  };

  SearchResultTags.prototype.render = function render() {
    var _props3 = this.props,
        comments = _props3.comments,
        commentsTable = _props3.commentsTable,
        docId = _props3.docId,
        vertical = _props3.vertical;
    var tagError = this.state.tagError;


    var outerDivClassName = 'attivio-tags ' + (vertical ? 'attivio-tags-vertical' : '');

    return _react2.default.createElement(
      'div',
      { className: outerDivClassName },
      this.render360Link(),
      this.renderMoreLikeThis(),
      comments && _react2.default.createElement(_Comments2.default, { docId: docId, commentsTable: commentsTable }),
      _react2.default.createElement(
        'span',
        { className: 'attivio-tags-label' },
        'Tags:'
      ),
      tagError && _react2.default.createElement(
        'span',
        { title: tagError },
        _react2.default.createElement(_Glyphicon2.default, { glyph: 'exclamation-sign', style: { color: '#d9534f', marginRight: '4px' } })
      ),
      this.renderTags(),
      this.renderExtraLinks()
    );
  };

  return SearchResultTags;
}(_react2.default.Component), _class.contextTypes = {
  searcher: _propTypes2.default.any
}, _class.defaultProps = {
  autoCompleteUri: null,
  baseUri: '',
  comments: false,
  commentsTable: 'comments',
  moreLikeThisQuery: '',
  hide360Link: false,
  vertical: false,
  view360Label: 'Show 360\xB0 View'
}, _class.displayName = 'SearchResultTags', _temp);
exports.default = (0, _reactRouterDom.withRouter)((0, _Configurable2.default)(SearchResultTags));
module.exports = exports['default'];