ndla-ui/es/Search/SearchPage.js

UI component library for NDLA.

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

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, { Component, Fragment } from 'react';
import BEMHelper from 'react-bem-helper';
import PropTypes from 'prop-types';
import { Back } from 'ndla-icons/common';
import debounce from 'lodash/debounce';
import { getCurrentBreakpoint, breakpoints } from 'ndla-util';
import Modal, { ModalHeader, ModalBody, ModalCloseButton } from 'ndla-modal';
import Button from 'ndla-button';
import { injectT } from 'ndla-i18n';

import SearchField from './SearchField';
import ActiveFilters from './ActiveFilters';

var classes = BEMHelper('c-search-page');
var filterClasses = BEMHelper('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 = debounce(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 = getCurrentBreakpoint();
      var isNarrowScreen = currentBreakpoint === breakpoints.mobile || currentBreakpoint === 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 React.createElement(
        'main',
        classes(),
        React.createElement(
          'div',
          classes('search-field-wrapper'),
          React.createElement(SearchField, {
            value: searchString,
            onChange: onSearchFieldChange,
            onSearch: onSearch,
            placeholder: t('searchPage.searchFieldPlaceholder'),
            filters: searchFieldFilters,
            onFilterRemove: onSearchFieldFilterRemove,
            resourceToLinkProps: resourceToLinkProps,
            messages: {
              searchFieldTitle: t('searchPage.search')
            }
          })
        ),
        author,
        React.createElement(
          'div',
          classes('filter-result-wrapper'),
          React.createElement(
            'aside',
            classes('filter-wrapper'),
            React.createElement(
              'h1',
              classes('filter-heading'),
              t('searchPage.searchPageMessages.filterHeading')
            ),
            React.createElement(
              'div',
              classes('filters'),
              !this.state.isNarrowScreen && filters
            )
          ),
          React.createElement(
            'div',
            classes('result-wrapper'),
            React.createElement(
              'h2',
              _extends({ 'aria-hidden': 'true' }, classes('result-label', 'large-screen')),
              !hideResultText ? messages.resultHeading : '\xA0'
            ),
            React.createElement(
              'div',
              classes('active-filters'),
              React.createElement(ActiveFilters, {
                filters: activeFilters,
                onFilterRemove: function onFilterRemove(value, filterName) {
                  return onSearchFieldFilterRemove(value, filterName);
                }
              })
            ),
            React.createElement(
              'div',
              classes('toggle-filter'),
              React.createElement(
                Modal,
                {
                  animation: 'subtle',
                  animationDuration: 150,
                  size: 'fullscreen',
                  backgroundColor: 'grey',
                  activateButton: React.createElement(
                    Button,
                    { outline: true },
                    t('searchPage.searchPageMessages.filterHeading')
                  ) },
                function (onClose) {
                  return React.createElement(
                    Fragment,
                    null,
                    React.createElement(
                      ModalHeader,
                      { modifier: 'white left-align' },
                      React.createElement(
                        ModalCloseButton,
                        {
                          title: React.createElement(
                            Fragment,
                            null,
                            React.createElement(Back, null),
                            ' ',
                            messages.narrowScreenFilterHeading
                          ),
                          onClick: onClose },
                        'Close'
                      )
                    ),
                    React.createElement(
                      ModalBody,
                      { modifier: 'slide-in-left no-side-padding-mobile' },
                      filters,
                      React.createElement(
                        'div',
                        filterClasses('usefilter-wrapper'),
                        React.createElement(
                          Button,
                          { outline: true, onClick: onClose },
                          t('searchPage.searchFilterMessages.useFilter')
                        )
                      )
                    )
                  );
                }
              )
            ),
            React.createElement(
              'h2',
              _extends({ 'aria-hidden': 'true' }, classes('result-label', 'small-screen')),
              !hideResultText ? messages.resultHeading : '\xA0'
            ),
            children
          )
        )
      );
    }
  }]);

  return SearchPage;
}(Component);

SearchPage.propTypes = {
  // should be <Fragment />
  filters: PropTypes.node.isRequired,
  children: PropTypes.node.isRequired,
  searchString: PropTypes.string.isRequired,
  onSearchFieldChange: PropTypes.func.isRequired,
  onSearch: PropTypes.func.isRequired,
  onSearchFieldFilterRemove: PropTypes.func.isRequired,
  resourceToLinkProps: PropTypes.func.isRequired,
  searchFieldFilters: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    filterName: PropTypes.string.isRequired
  })),
  activeFilters: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    filterName: PropTypes.string.isRequired
  })),
  messages: PropTypes.shape({
    narrowScreenFilterHeading: PropTypes.string.isRequired,
    resultHeading: PropTypes.string
  }).isRequired,
  author: PropTypes.node,
  hideResultText: PropTypes.bool,
  filterScreenChange: PropTypes.func,
  t: PropTypes.func.isRequired
};

SearchPage.defaultProps = {
  author: null
};

export default injectT(SearchPage);