@ndla/ui 4.3.2 → 4.3.3-alpha.12

package/es/SearchTypeResult/components/SubjectFilters.js

@@ -0,0 +1,177 @@
+import _styled from "@emotion/styled-base";
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/**
+ * Copyright (c) 2021-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '@ndla/button';
+import { Plus as PlusIcon } from '@ndla/icons/action';
+import PopupFilter from '../PopupFilter';
+import ActiveFilters from '../ActiveFilters';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var FilterButtonText = _styled("span", {
+  target: "eruebyz0",
+  label: "FilterButtonText"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1ft8vle",
+  styles: "display:inline-block;font-weight:600;margin-right:10px;"
+} : {
+  name: "1ft8vle",
+  styles: "display:inline-block;font-weight:600;margin-right:10px;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN1YmplY3RGaWx0ZXJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQm9DIiwiZmlsZSI6IlN1YmplY3RGaWx0ZXJzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIxLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBQbHVzIGFzIFBsdXNJY29uIH0gZnJvbSAnQG5kbGEvaWNvbnMvYWN0aW9uJztcblxuaW1wb3J0IFBvcHVwRmlsdGVyLCB7IFBvcHVwRmlsdGVyUHJvcHMgfSBmcm9tICcuLi9Qb3B1cEZpbHRlcic7XG5pbXBvcnQgQWN0aXZlRmlsdGVycyBmcm9tICcuLi9BY3RpdmVGaWx0ZXJzJztcbmltcG9ydCB7IEZpbHRlclByb3BzIH0gZnJvbSAnLi4vQWN0aXZlRmlsdGVyQ29udGVudCc7XG5cbmNvbnN0IEZpbHRlckJ1dHRvblRleHQgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBmb250LXdlaWdodDogNjAwO1xuICBtYXJnaW4tcmlnaHQ6IDEwcHg7XG5gO1xuXG50eXBlIFByb2dyYW1tZVByb3BzID0gUG9wdXBGaWx0ZXJQcm9wc1sncHJvZ3JhbW1lcyddICYge1xuICB2YWx1ZXM6IHN0cmluZ1tdO1xuICBvblByb2dyYW1tZVZhbHVlc0NoYW5nZTogKHZhbHVlczogc3RyaW5nW10pID0+IHZvaWQ7XG59O1xuXG50eXBlIFN1YmplY3RDYXRlZ29yaWVzUHJvcHMgPSBQb3B1cEZpbHRlclByb3BzWydzdWJqZWN0Q2F0ZWdvcmllcyddICYge1xuICB2YWx1ZXM6IHN0cmluZ1tdO1xuICBvblN1YmplY3RWYWx1ZXNDaGFuZ2U6ICh2YWx1ZXM6IHN0cmluZ1tdKSA9PiB2b2lkO1xufTtcblxuZXhwb3J0IHR5cGUgU3ViamVjdEZpbHRlclByb3BzID0ge1xuICBmaWx0ZXJzOiB7XG4gICAgcHJvZ3JhbW1lcz86IFByb2dyYW1tZVByb3BzO1xuICAgIHN1YmplY3RDYXRlZ29yaWVzPzogU3ViamVjdENhdGVnb3JpZXNQcm9wcztcbiAgfTtcbiAgYWN0aXZlRmlsdGVycz86IHtcbiAgICBmaWx0ZXJzOiBGaWx0ZXJQcm9wc1tdO1xuICAgIG9uRmlsdGVyUmVtb3ZlOiAodmFsdWU6IHN0cmluZywgbmFtZTogc3RyaW5nKSA9PiB2b2lkO1xuICB9O1xufTtcblxudHlwZSBQcm9wcyA9IHtcbiAgaXNOYXJyb3dTY3JlZW4/OiBib29sZWFuO1xufTtcblxuY29uc3QgU3ViamVjdEZpbHRlcnMgPSAoeyBmaWx0ZXJzLCBhY3RpdmVGaWx0ZXJzLCBpc05hcnJvd1NjcmVlbiB9OiBTdWJqZWN0RmlsdGVyUHJvcHMgJiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IHsgc3ViamVjdENhdGVnb3JpZXMsIHByb2dyYW1tZXMgfSA9IGZpbHRlcnM7XG4gIGNvbnN0IFtzdWJqZWN0VmFsdWVzLCBzZXRTdWJqZWN0VmFsdWVzXSA9IHVzZVN0YXRlPEFycmF5PHN0cmluZz4+KFtdKTtcbiAgY29uc3QgW3Byb2dyYW1tZXNWYWx1ZXMsIHNldFByb2dyYW1tZXNWYWx1ZXNdID0gdXNlU3RhdGU8QXJyYXk8c3RyaW5nPj4oW10pO1xuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IHByZXZJc09wZW5SZWYgPSB1c2VSZWY8Ym9vbGVhbj4oKTtcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBwcmV2SXNPcGVuUmVmLmN1cnJlbnQgPSBpc09wZW47XG4gIH0pO1xuICBjb25zdCBwcmV2SXNPcGVuID0gcHJldklzT3BlblJlZi5jdXJyZW50O1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3BlbiAmJiBpc09wZW4gIT09IHByZXZJc09wZW4pIHtcbiAgICAgIGlmIChzdWJqZWN0Q2F0ZWdvcmllcykge1xuICAgICAgICBzZXRTdWJqZWN0VmFsdWVzKFsuLi5zdWJqZWN0Q2F0ZWdvcmllcy52YWx1ZXNdKTtcbiAgICAgIH1cbiAgICAgIGlmIChwcm9ncmFtbWVzKSB7XG4gICAgICAgIHNldFByb2dyYW1tZXNWYWx1ZXMoWy4uLnByb2dyYW1tZXMudmFsdWVzXSk7XG4gICAgICB9XG4gICAgfVxuICB9LCBbaXNPcGVuLCBwcmV2SXNPcGVuLCBzdWJqZWN0Q2F0ZWdvcmllcywgcHJvZ3JhbW1lc10pO1xuXG4gIGNvbnN0IG9uVG9nZ2xlU3ViamVjdCA9IChzdWJqZWN0SWQ6IHN0cmluZykgPT4ge1xuICAgIGxldCB1cGRhdGVkRmlsdGVyID0gWy4uLnN1YmplY3RWYWx1ZXNdO1xuICAgIGlmICh1cGRhdGVkRmlsdGVyLmluY2x1ZGVzKHN1YmplY3RJZCkpIHtcbiAgICAgIHVwZGF0ZWRGaWx0ZXIgPSBzdWJqZWN0VmFsdWVzLmZpbHRlcigob3B0aW9uKSA9PiBvcHRpb24gIT09IHN1YmplY3RJZCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHVwZGF0ZWRGaWx0ZXIucHVzaChzdWJqZWN0SWQpO1xuICAgIH1cbiAgICBzZXRTdWJqZWN0VmFsdWVzKHVwZGF0ZWRGaWx0ZXIpO1xuICAgIGlmIChzdWJqZWN0Q2F0ZWdvcmllcykge1xuICAgICAgc3ViamVjdENhdGVnb3JpZXMub25TdWJqZWN0VmFsdWVzQ2hhbmdlKHVwZGF0ZWRGaWx0ZXIpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBvblRvZ2dsZVByb2dyYW1tZSA9IChwcm9ncmFtbWVJZDogc3RyaW5nKSA9PiB7XG4gICAgbGV0IHVwZGF0ZWRGaWx0ZXIgPSBbLi4ucHJvZ3JhbW1lc1ZhbHVlc107XG4gICAgaWYgKHVwZGF0ZWRGaWx0ZXIuaW5jbHVkZXMocHJvZ3JhbW1lSWQpKSB7XG4gICAgICB1cGRhdGVkRmlsdGVyID0gcHJvZ3JhbW1lc1ZhbHVlcy5maWx0ZXIoKG9wdGlvbikgPT4gb3B0aW9uICE9PSBwcm9ncmFtbWVJZCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHVwZGF0ZWRGaWx0ZXIucHVzaChwcm9ncmFtbWVJZCk7XG4gICAgfVxuICAgIHNldFByb2dyYW1tZXNWYWx1ZXModXBkYXRlZEZpbHRlcik7XG4gICAgaWYgKHByb2dyYW1tZXMpIHtcbiAgICAgIHByb2dyYW1tZXMub25Qcm9ncmFtbWVWYWx1ZXNDaGFuZ2UodXBkYXRlZEZpbHRlcik7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZVBvcHVwT3BlbiA9ICgpID0+IHtcbiAgICBzZXRJc09wZW4odHJ1ZSk7XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlTW9kYWxDbG9zZSA9ICgpID0+IHtcbiAgICBzZXRJc09wZW4oZmFsc2UpO1xuICB9O1xuXG4gIGNvbnN0IE9wZW5Nb2RhbEJ1dHRvbiA9ICgpID0+IChcbiAgICA8QnV0dG9uIHR5cGU9XCJidXR0b25cIiBzaXplPVwibm9ybWFsXCIgZ3JleUxpZ2h0ZXIgYm9yZGVyU2hhcGU9XCJyb3VuZGVkXCIgb25DbGljaz17aGFuZGxlUG9wdXBPcGVufT5cbiAgICAgIDxGaWx0ZXJCdXR0b25UZXh0Pnt0KCdzZWFyY2hQYWdlLnNlYXJjaEZpbHRlck1lc3NhZ2VzLm5vVmFsdWVzQnV0dG9uVGV4dCcpfTwvRmlsdGVyQnV0dG9uVGV4dD5cbiAgICAgIDxQbHVzSWNvbiAvPlxuICAgIDwvQnV0dG9uPlxuICApO1xuXG4gIGNvbnN0IEFjdGl2ZUZpbHRlcnNFbGVtZW50ID0gKHsgc2hvd01vZGFsQnV0dG9uIH06IHsgc2hvd01vZGFsQnV0dG9uPzogYm9vbGVhbiB9KSA9PiB7XG4gICAgY29uc3QgY3VzdG9tRWxlbWVudHMgPSBzaG93TW9kYWxCdXR0b24gPyBbT3Blbk1vZGFsQnV0dG9uKCldIDogW107XG4gICAgaWYgKCFhY3RpdmVGaWx0ZXJzKSByZXR1cm4gbnVsbDtcbiAgICByZXR1cm4gKFxuICAgICAgPEFjdGl2ZUZpbHRlcnNcbiAgICAgICAgey4uLmFjdGl2ZUZpbHRlcnN9XG4gICAgICAgIHNob3dPblNtYWxsU2NyZWVuPXtpc05hcnJvd1NjcmVlbn1cbiAgICAgICAgb25DbGlja1Nob3dIaWRkZW5TdWJqZWN0cz17aGFuZGxlUG9wdXBPcGVufVxuICAgICAgICBjdXN0b21FbGVtZW50cz17Y3VzdG9tRWxlbWVudHN9XG4gICAgICAvPlxuICAgICk7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge2lzTmFycm93U2NyZWVuID8gKFxuICAgICAgICA8QWN0aXZlRmlsdGVyc0VsZW1lbnQgc2hvd01vZGFsQnV0dG9uIC8+XG4gICAgICApIDogaXNOYXJyb3dTY3JlZW4gPT09IGZhbHNlID8gKFxuICAgICAgICA8PlxuICAgICAgICAgIDxPcGVuTW9kYWxCdXR0b24gLz5cbiAgICAgICAgICA8QWN0aXZlRmlsdGVyc0VsZW1lbnQgLz5cbiAgICAgICAgPC8+XG4gICAgICApIDogdW5kZWZpbmVkfVxuICAgICAgPFBvcHVwRmlsdGVyXG4gICAgICAgIHByb2dyYW1tZXM9e3Byb2dyYW1tZXN9XG4gICAgICAgIHN1YmplY3RDYXRlZ29yaWVzPXtzdWJqZWN0Q2F0ZWdvcmllc31cbiAgICAgICAgc3ViamVjdFZhbHVlcz17c3ViamVjdFZhbHVlc31cbiAgICAgICAgcHJvZ3JhbW1lc1ZhbHVlcz17cHJvZ3JhbW1lc1ZhbHVlc31cbiAgICAgICAgb25DbG9zZT17aGFuZGxlTW9kYWxDbG9zZX1cbiAgICAgICAgb25Ub2dnbGVTdWJqZWN0PXtvblRvZ2dsZVN1YmplY3R9XG4gICAgICAgIG9uVG9nZ2xlUHJvZ3JhbW1lPXtvblRvZ2dsZVByb2dyYW1tZX1cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAvPlxuICAgIDwvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgU3ViamVjdEZpbHRlcnM7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var SubjectFilters = function SubjectFilters(_ref) {
+  var filters = _ref.filters,
+      activeFilters = _ref.activeFilters,
+      isNarrowScreen = _ref.isNarrowScreen;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var subjectCategories = filters.subjectCategories,
+      programmes = filters.programmes;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      subjectValues = _useState2[0],
+      setSubjectValues = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      programmesValues = _useState4[0],
+      setProgrammesValues = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+
+  var prevIsOpenRef = useRef();
+  useEffect(function () {
+    prevIsOpenRef.current = isOpen;
+  });
+  var prevIsOpen = prevIsOpenRef.current;
+  useEffect(function () {
+    if (isOpen && isOpen !== prevIsOpen) {
+      if (subjectCategories) {
+        setSubjectValues(_toConsumableArray(subjectCategories.values));
+      }
+
+      if (programmes) {
+        setProgrammesValues(_toConsumableArray(programmes.values));
+      }
+    }
+  }, [isOpen, prevIsOpen, subjectCategories, programmes]);
+
+  var onToggleSubject = function onToggleSubject(subjectId) {
+    var updatedFilter = _toConsumableArray(subjectValues);
+
+    if (updatedFilter.includes(subjectId)) {
+      updatedFilter = subjectValues.filter(function (option) {
+        return option !== subjectId;
+      });
+    } else {
+      updatedFilter.push(subjectId);
+    }
+
+    setSubjectValues(updatedFilter);
+
+    if (subjectCategories) {
+      subjectCategories.onSubjectValuesChange(updatedFilter);
+    }
+  };
+
+  var onToggleProgramme = function onToggleProgramme(programmeId) {
+    var updatedFilter = _toConsumableArray(programmesValues);
+
+    if (updatedFilter.includes(programmeId)) {
+      updatedFilter = programmesValues.filter(function (option) {
+        return option !== programmeId;
+      });
+    } else {
+      updatedFilter.push(programmeId);
+    }
+
+    setProgrammesValues(updatedFilter);
+
+    if (programmes) {
+      programmes.onProgrammeValuesChange(updatedFilter);
+    }
+  };
+
+  var handlePopupOpen = function handlePopupOpen() {
+    setIsOpen(true);
+  };
+
+  var handleModalClose = function handleModalClose() {
+    setIsOpen(false);
+  };
+
+  var OpenModalButton = function OpenModalButton() {
+    return ___EmotionJSX(Button, {
+      type: "button",
+      size: "normal",
+      greyLighter: true,
+      borderShape: "rounded",
+      onClick: handlePopupOpen
+    }, ___EmotionJSX(FilterButtonText, null, t('searchPage.searchFilterMessages.noValuesButtonText')), ___EmotionJSX(PlusIcon, null));
+  };
+
+  var ActiveFiltersElement = function ActiveFiltersElement(_ref2) {
+    var showModalButton = _ref2.showModalButton;
+    var customElements = showModalButton ? [OpenModalButton()] : [];
+    if (!activeFilters) return null;
+    return ___EmotionJSX(ActiveFilters, _extends({}, activeFilters, {
+      showOnSmallScreen: isNarrowScreen,
+      onClickShowHiddenSubjects: handlePopupOpen,
+      customElements: customElements
+    }));
+  };
+
+  return ___EmotionJSX(React.Fragment, null, isNarrowScreen ? ___EmotionJSX(ActiveFiltersElement, {
+    showModalButton: true
+  }) : isNarrowScreen === false ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OpenModalButton, null), ___EmotionJSX(ActiveFiltersElement, null)) : undefined, ___EmotionJSX(PopupFilter, {
+    programmes: programmes,
+    subjectCategories: subjectCategories,
+    subjectValues: subjectValues,
+    programmesValues: programmesValues,
+    onClose: handleModalClose,
+    onToggleSubject: onToggleSubject,
+    onToggleProgramme: onToggleProgramme,
+    isOpen: isOpen
+  }));
+};
+
+export default SubjectFilters;

package/es/SearchTypeResult/index.js

@@ -10,4 +10,5 @@ import SearchHeader from './SearchHeader';
 import SearchFieldHeader from './SearchFieldHeader';
 import SearchNotionsResult from './SearchNotionsResult';
 import SearchSubjectResult from './SearchSubjectResult';
-export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchNotionsResult, SearchSubjectResult };
+import SearchFilterContent from './SearchFilterContent';
+export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchNotionsResult, SearchSubjectResult, SearchFilterContent };