@attivio/suit
Version:
Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.
365 lines (310 loc) • 10.7 kB
JavaScript
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 PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import QueryString from 'query-string';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import AutoCompleteInput from './AutoCompleteInput';
import Configurable from './Configurable';
import Comments from './Comments';
/**
* 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 = QueryString.parse(location.search);
search.docId = escapedDocId;
history.push({ pathname: path, search: '' + QueryString.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 && React.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 ? React.createElement(AutoCompleteInput, {
uri: '' + (baseUri || '') + (autoCompleteUri || ''),
onChange: this.updateNewTagFromString,
updateValue: this.updateNewTagFromString,
onEscape: this.onEscape,
placeholder: 'Tag\u2026',
value: newTag,
className: 'form-control'
}) : React.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 ? React.createElement(
'div',
{ className: 'form-inline attivio-tags-form' },
React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
{ htmlFor: 'attivio-tags-more-add', className: 'sr-only' },
'Tag'
),
this.renderInputComponent()
),
React.createElement(
'button',
{
type: 'submit',
className: 'btn btn-primary btn-xs',
onClick: this.addTag,
disabled: newTag.length === 0 || updating
},
addButtonText
)
) : React.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 React.createElement(
'span',
{ key: tag },
React.createElement(
'a',
{
className: 'attivio-tags-link',
onClick: function onClick() {
_this4.removeTag(tag);
},
role: 'button',
tabIndex: 0
},
tag,
' ',
React.createElement('span', { className: 'attivio-icon-remove' })
),
' '
);
});
}
return React.createElement(
'span',
{ className: 'attivio-tags-link none' },
'None'
);
};
SearchResultTags.prototype.renderMoreLikeThis = function renderMoreLikeThis() {
var moreLikeThisQuery = this.props.moreLikeThisQuery;
return moreLikeThisQuery.length > 0 ? React.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 React.createElement(
'div',
{ className: outerDivClassName },
this.render360Link(),
this.renderMoreLikeThis(),
comments && React.createElement(Comments, { docId: docId, commentsTable: commentsTable }),
React.createElement(
'span',
{ className: 'attivio-tags-label' },
'Tags:'
),
tagError && React.createElement(
'span',
{ title: tagError },
React.createElement(Glyphicon, { glyph: 'exclamation-sign', style: { color: '#d9534f', marginRight: '4px' } })
),
this.renderTags(),
this.renderExtraLinks()
);
};
return SearchResultTags;
}(React.Component), _class.contextTypes = {
searcher: PropTypes.any
}, _class.defaultProps = {
autoCompleteUri: null,
baseUri: '',
comments: false,
commentsTable: 'comments',
moreLikeThisQuery: '',
hide360Link: false,
vertical: false,
view360Label: 'Show 360\xB0 View'
}, _class.displayName = 'SearchResultTags', _temp);
export default withRouter(Configurable(SearchResultTags));