ndla-ui
Version:
UI component library for NDLA.
281 lines (240 loc) • 11 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 _reactBemHelper = require('react-bem-helper');
var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _common = require('ndla-icons/common');
var _debounce = require('lodash/debounce');
var _debounce2 = _interopRequireDefault(_debounce);
var _ndlaUtil = require('ndla-util');
var _ndlaModal = require('ndla-modal');
var _ndlaModal2 = _interopRequireDefault(_ndlaModal);
var _ndlaButton = require('ndla-button');
var _ndlaButton2 = _interopRequireDefault(_ndlaButton);
var _ndlaI18n = require('ndla-i18n');
var _SearchField = require('./SearchField');
var _SearchField2 = _interopRequireDefault(_SearchField);
var _ActiveFilters = require('./ActiveFilters');
var _ActiveFilters2 = _interopRequireDefault(_ActiveFilters);
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 classes = (0, _reactBemHelper2.default)('c-search-page');
var filterClasses = (0, _reactBemHelper2.default)('c-filter');
var SearchPage = function (_Component) {
_inherits(SearchPage, _Component);
function SearchPage(props) {
_classCallCheck(this, SearchPage);
var _this = _possibleConstructorReturn(this, (SearchPage.__proto__ || Object.getPrototypeOf(SearchPage)).call(this, props));
_this.state = {
isNarrowScreen: false
};
_this.filterCloseButton = null;
_this.checkScreenSize = _this.checkScreenSize.bind(_this);
_this.checkScreenSizeDebounce = (0, _debounce2.default)(function () {
return _this.checkScreenSize();
}, 100);
return _this;
}
_createClass(SearchPage, [{
key: 'componentDidMount',
value: function componentDidMount() {
window.addEventListener('resize', this.checkScreenSizeDebounce);
this.checkScreenSize();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener('resize', this.checkScreenSizeDebounce);
}
}, {
key: 'checkScreenSize',
value: function checkScreenSize() {
var currentBreakpoint = (0, _ndlaUtil.getCurrentBreakpoint)();
var isNarrowScreen = currentBreakpoint === _ndlaUtil.breakpoints.mobile || currentBreakpoint === _ndlaUtil.breakpoints.tablet;
/* eslint react/no-did-mount-set-state: 0 */
if (isNarrowScreen !== this.state.isNarrowScreen) {
this.setState({
isNarrowScreen: isNarrowScreen
});
}
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
searchString = _props.searchString,
onSearchFieldChange = _props.onSearchFieldChange,
onSearchFieldFilterRemove = _props.onSearchFieldFilterRemove,
searchFieldFilters = _props.searchFieldFilters,
onSearch = _props.onSearch,
activeFilters = _props.activeFilters,
resourceToLinkProps = _props.resourceToLinkProps,
filters = _props.filters,
children = _props.children,
messages = _props.messages,
author = _props.author,
hideResultText = _props.hideResultText,
t = _props.t;
return _react2.default.createElement(
'main',
classes(),
_react2.default.createElement(
'div',
classes('search-field-wrapper'),
_react2.default.createElement(_SearchField2.default, {
value: searchString,
onChange: onSearchFieldChange,
onSearch: onSearch,
placeholder: t('searchPage.searchFieldPlaceholder'),
filters: searchFieldFilters,
onFilterRemove: onSearchFieldFilterRemove,
resourceToLinkProps: resourceToLinkProps,
messages: {
searchFieldTitle: t('searchPage.search')
}
})
),
author,
_react2.default.createElement(
'div',
classes('filter-result-wrapper'),
_react2.default.createElement(
'aside',
classes('filter-wrapper'),
_react2.default.createElement(
'h1',
classes('filter-heading'),
t('searchPage.searchPageMessages.filterHeading')
),
_react2.default.createElement(
'div',
classes('filters'),
!this.state.isNarrowScreen && filters
)
),
_react2.default.createElement(
'div',
classes('result-wrapper'),
_react2.default.createElement(
'h2',
_extends({ 'aria-hidden': 'true' }, classes('result-label', 'large-screen')),
!hideResultText ? messages.resultHeading : '\xA0'
),
_react2.default.createElement(
'div',
classes('active-filters'),
_react2.default.createElement(_ActiveFilters2.default, {
filters: activeFilters,
onFilterRemove: function onFilterRemove(value, filterName) {
return onSearchFieldFilterRemove(value, filterName);
}
})
),
_react2.default.createElement(
'div',
classes('toggle-filter'),
_react2.default.createElement(
_ndlaModal2.default,
{
animation: 'subtle',
animationDuration: 150,
size: 'fullscreen',
backgroundColor: 'grey',
activateButton: _react2.default.createElement(
_ndlaButton2.default,
{ outline: true },
t('searchPage.searchPageMessages.filterHeading')
) },
function (onClose) {
return _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(
_ndlaModal.ModalHeader,
{ modifier: 'white left-align' },
_react2.default.createElement(
_ndlaModal.ModalCloseButton,
{
title: _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(_common.Back, null),
' ',
messages.narrowScreenFilterHeading
),
onClick: onClose },
'Close'
)
),
_react2.default.createElement(
_ndlaModal.ModalBody,
{ modifier: 'slide-in-left no-side-padding-mobile' },
filters,
_react2.default.createElement(
'div',
filterClasses('usefilter-wrapper'),
_react2.default.createElement(
_ndlaButton2.default,
{ outline: true, onClick: onClose },
t('searchPage.searchFilterMessages.useFilter')
)
)
)
);
}
)
),
_react2.default.createElement(
'h2',
_extends({ 'aria-hidden': 'true' }, classes('result-label', 'small-screen')),
!hideResultText ? messages.resultHeading : '\xA0'
),
children
)
)
);
}
}]);
return SearchPage;
}(_react.Component);
SearchPage.propTypes = {
// should be <Fragment />
filters: _propTypes2.default.node.isRequired,
children: _propTypes2.default.node.isRequired,
searchString: _propTypes2.default.string.isRequired,
onSearchFieldChange: _propTypes2.default.func.isRequired,
onSearch: _propTypes2.default.func.isRequired,
onSearchFieldFilterRemove: _propTypes2.default.func.isRequired,
resourceToLinkProps: _propTypes2.default.func.isRequired,
searchFieldFilters: _propTypes2.default.arrayOf(_propTypes2.default.shape({
value: _propTypes2.default.string.isRequired,
title: _propTypes2.default.string.isRequired,
filterName: _propTypes2.default.string.isRequired
})),
activeFilters: _propTypes2.default.arrayOf(_propTypes2.default.shape({
value: _propTypes2.default.string.isRequired,
title: _propTypes2.default.string.isRequired,
filterName: _propTypes2.default.string.isRequired
})),
messages: _propTypes2.default.shape({
narrowScreenFilterHeading: _propTypes2.default.string.isRequired,
resultHeading: _propTypes2.default.string
}).isRequired,
author: _propTypes2.default.node,
hideResultText: _propTypes2.default.bool,
filterScreenChange: _propTypes2.default.func,
t: _propTypes2.default.func.isRequired
};
SearchPage.defaultProps = {
author: null
};
exports.default = (0, _ndlaI18n.injectT)(SearchPage);