zotero-web-library/lib/libraryUi/widgets/LibrarySearchBox.js

Web library from zotero.org

'use strict';

var log = require('libzotero/lib/Log').Logger('zotero-web-library:LibrarySearchBox');

var React = require('react');

var LibrarySearchBox = React.createClass({
	displayName: 'LibrarySearchBox',

	componentWillMount: function componentWillMount() {
		var library = this.props.library;
		if (!library) {
			log.error('no library prop set on LibrarySearchBox');
		}
		library.listen('clearLibraryQuery', this.clearLibraryQuery);
	},
	getInitialState: function getInitialState() {
		var query = Zotero.state.getUrlVar('q');
		if (query === undefined) {
			query = '';
		}
		return {
			searchType: 'simple',
			query: query
		};
	},
	search: function search(evt) {
		evt.preventDefault();
		log.debug('library-search form submitted', 3);
		Zotero.state.clearUrlVars(['collectionKey', 'tag', 'q', 'qmode']);
		var query = this.state.query;
		var searchType = this.state.searchType;

		if (query !== '' || Zotero.state.getUrlVar('q')) {
			Zotero.state.pathVars['q'] = query;
			if (searchType != 'simple') {
				Zotero.state.pathVars['qmode'] = searchType;
			}
			Zotero.state.pushState();
		}
		return false;
	},
	clearLibraryQuery: function clearLibraryQuery() {
		Zotero.state.unsetUrlVar('q');
		Zotero.state.unsetUrlVar('qmode');

		this.setState({ query: '' });
		Zotero.state.pushState();
		return;
	},
	changeSearchType: function changeSearchType(evt) {
		evt.preventDefault();
		var selectedType = evt.target.getAttribute('data-searchtype');
		this.setState({ searchType: selectedType });
	},
	changeQuery: function changeQuery(evt) {
		this.setState({ query: evt.target.value });
	},
	render: function render() {
		var placeHolder = '';
		if (this.state.searchType == 'simple') {
			placeHolder = 'Search Title, Creator, Year';
		} else if (this.state.searchType == 'everything') {
			placeHolder = 'Search Full Text';
		}

		return React.createElement(
			'div',
			{ className: 'btn-toolbar row', id: 'search-box', style: { maxWidth: '350px' } },
			React.createElement(
				'form',
				{ action: '/search/', onSubmit: this.search, className: 'navbar-form zsearch library-search', role: 'search' },
				React.createElement(
					'div',
					{ className: 'input-group' },
					React.createElement(
						'div',
						{ className: 'input-group-btn' },
						React.createElement(
							'button',
							{ type: 'button', className: 'btn btn-default dropdown-toggle', 'data-toggle': 'dropdown' },
							React.createElement('span', { className: 'caret' })
						),
						React.createElement(
							'ul',
							{ className: 'dropdown-menu' },
							React.createElement(
								'li',
								null,
								React.createElement(
									'a',
									{ href: '#', onClick: this.changeSearchType, 'data-searchtype': 'simple' },
									'Title, Creator, Year'
								)
							),
							React.createElement(
								'li',
								null,
								React.createElement(
									'a',
									{ href: '#', onClick: this.changeSearchType, 'data-searchtype': 'everything' },
									'Full Text'
								)
							)
						)
					),
					React.createElement('input', { onChange: this.changeQuery, value: this.state.query, type: 'text', name: 'q', id: 'header-search-query', className: 'search-query form-control', placeholder: placeHolder }),
					React.createElement(
						'span',
						{ className: 'input-group-btn' },
						React.createElement(
							'button',
							{ onClick: this.clearLibraryQuery, className: 'btn btn-default clear-field-button', type: 'button' },
							React.createElement('span', { className: 'glyphicons fonticon glyphicons-remove-2' })
						)
					)
				)
			)
		);
	}
});

module.exports = LibrarySearchBox;