ndla-ui
Version:
UI component library for NDLA.
273 lines (230 loc) • 12.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactBemHelper = require('react-bem-helper');
var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);
var _common = require('ndla-icons/common');
var _ndlaI18n = require('ndla-i18n');
var _SafeLink = require('../common/SafeLink');
var _SafeLink2 = _interopRequireDefault(_SafeLink);
var _ActiveFilters = require('./ActiveFilters');
var _ActiveFilters2 = _interopRequireDefault(_ActiveFilters);
var _ContentTypeResult = require('./ContentTypeResult');
var _ContentTypeResult2 = _interopRequireDefault(_ContentTypeResult);
var _shapes = require('../shapes');
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; } /*
* Copyright (c) 2016-present, NDLA.
*
* This source code is licensed under the GPLv3 license found in the
* LICENSE file in the root directory of this source tree.
*
*/
var classes = new _reactBemHelper2.default('c-search-field');
var messagesShape = _propTypes2.default.shape({
// required if search result
searchResultHeading: _propTypes2.default.string,
contentTypeResultShowMoreLabel: _propTypes2.default.string,
contentTypeResultShowLessLabel: _propTypes2.default.string,
contentTypeResultNoHit: _propTypes2.default.string
});
var SearchResult = function SearchResult(_ref) {
var result = _ref.result,
allResultUrl = _ref.allResultUrl,
resourceToLinkProps = _ref.resourceToLinkProps,
onNavigate = _ref.onNavigate,
t = _ref.t;
return _react2.default.createElement(
'section',
classes('search-result'),
_react2.default.createElement(
'h1',
classes('search-result-heading'),
t('searchPage.searchField.searchResultHeading')
),
_react2.default.createElement(
'div',
classes('search-result-content'),
result.map(function (contentTypeResult) {
return _react2.default.createElement(_ContentTypeResult2.default, {
onNavigate: onNavigate,
contentTypeResult: contentTypeResult,
resourceToLinkProps: resourceToLinkProps,
defaultCount: window.innerWidth > 980 ? 7 : 3,
key: contentTypeResult.title,
messages: {
allResultLabel: t('searchPage.searchField.contentTypeResultShowMoreLabel'),
showLessResultLabel: t('searchPage.searchField.contentTypeResultShowLessLabel'),
noHit: t('searchPage.searchField.contentTypeResultNoHit')
}
});
})
),
_react2.default.createElement(
'div',
classes('go-to-search'),
_react2.default.createElement(
_SafeLink2.default,
{ to: allResultUrl },
t('searchPage.searchField.allResultButtonText')
)
)
);
};
SearchResult.propTypes = {
result: _propTypes2.default.arrayOf(_shapes.ContentTypeResultShape),
resourceToLinkProps: _propTypes2.default.func.isRequired,
allResultUrl: _propTypes2.default.string.isRequired,
onNavigate: _propTypes2.default.func,
t: _propTypes2.default.func.isRequired
};
var SearchField = function (_Component) {
_inherits(SearchField, _Component);
function SearchField(props) {
_classCallCheck(this, SearchField);
var _this = _possibleConstructorReturn(this, (SearchField.__proto__ || Object.getPrototypeOf(SearchField)).call(this, props));
_this.state = {
inputHasFocus: false
};
_this.inputRef = null;
_this.handleOnFilterRemove = _this.handleOnFilterRemove.bind(_this);
_this.onInputBlur = _this.onInputBlur.bind(_this);
_this.onInputFocus = _this.onInputFocus.bind(_this);
return _this;
}
_createClass(SearchField, [{
key: 'onInputBlur',
value: function onInputBlur() {
this.setState({
inputHasFocus: false
});
}
}, {
key: 'onInputFocus',
value: function onInputFocus() {
this.setState({
inputHasFocus: true
});
}
}, {
key: 'handleOnFilterRemove',
value: function handleOnFilterRemove(value, filterName) {
this.props.onFilterRemove(value, filterName);
this.inputRef.focus();
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
placeholder = _props.placeholder,
value = _props.value,
onChange = _props.onChange,
filters = _props.filters,
searchResult = _props.searchResult,
messages = _props.messages,
allResultUrl = _props.allResultUrl,
onSearch = _props.onSearch,
resourceToLinkProps = _props.resourceToLinkProps,
small = _props.small,
autofocus = _props.autofocus,
onNavigate = _props.onNavigate,
t = _props.t;
var modifiers = [];
var hasSearchResult = searchResult && searchResult.length > 0;
var searchResultView = null;
if (hasSearchResult) {
modifiers.push('has-search-result');
searchResultView = _react2.default.createElement(SearchResult, {
result: searchResult,
searchString: value,
allResultUrl: allResultUrl,
resourceToLinkProps: resourceToLinkProps,
autofocus: autofocus,
onNavigate: onNavigate,
t: t
});
}
if (filters && filters.length > 0) {
modifiers.push('has-filter');
}
if (this.state.inputHasFocus) {
modifiers.push('input-has-focus');
}
return _react2.default.createElement(
'form',
_extends({ action: '/search/' }, classes('', modifiers), { onSubmit: onSearch }),
_react2.default.createElement(
'div',
classes('input-wrapper'),
_react2.default.createElement('input', _extends({
ref: function ref(_ref2) {
_this2.inputRef = _ref2;
},
title: messages.searchFieldTitle,
type: 'search'
}, classes('input', { small: small }), {
'aria-autocomplete': 'list',
autoComplete: 'off',
id: 'search',
name: 'search',
placeholder: placeholder,
'aria-label': placeholder,
value: value,
onChange: onChange,
onBlur: this.onInputBlur,
onFocus: this.onInputFocus
})),
filters && filters.length > 0 && _react2.default.createElement(
'div',
classes('filters'),
_react2.default.createElement(_ActiveFilters2.default, {
filters: filters,
onFilterRemove: this.handleOnFilterRemove
})
),
_react2.default.createElement(
'button',
_extends({
tabIndex: '-1'
}, classes('button'), {
type: 'submit',
value: 'Search' }),
_react2.default.createElement(_common.Search, null)
)
),
searchResultView
);
}
}]);
return SearchField;
}(_react.Component);
SearchField.propTypes = {
value: _propTypes2.default.string.isRequired,
placeholder: _propTypes2.default.string.isRequired,
onChange: _propTypes2.default.func.isRequired,
onSearch: _propTypes2.default.func.isRequired,
filters: _propTypes2.default.arrayOf(_propTypes2.default.shape({
value: _propTypes2.default.string.isRequired,
title: _propTypes2.default.string.isRequired
})),
messages: messagesShape,
searchResult: _propTypes2.default.arrayOf(_shapes.ContentTypeResultShape),
allResultUrl: _propTypes2.default.string,
resourceToLinkProps: _propTypes2.default.func,
onFilterRemove: _propTypes2.default.func,
small: _propTypes2.default.bool,
autofocus: _propTypes2.default.bool,
onNavigate: _propTypes2.default.func,
t: _propTypes2.default.func.isRequired
};
exports.default = (0, _ndlaI18n.injectT)(SearchField);