@uncinc/uncinc-react-kitchen-sink 2.3.3 → 2.3.5

package/dist/components/NavigationScroll/index.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import './style.scss';
-
 const NavigationScroll = props => {
   const node = useRef(null);
   const [state, setState] = useState({
@@ -18,41 +17,34 @@ const NavigationScroll = props => {
       window.removeEventListener('scroll', handleScroll);
     };
   });
-
   const getScrollPos = element => {
     if (typeof element.pageYOffset !== 'undefined') {
       return element.pageYOffset;
     }
-
     return element.scrollTop;
   };
-
   const getElementHeight = element => {
     let deductHeight = 0;
-
     if (document.getElementsByClassName('Header__subMenu').length !== 0) {
       deductHeight = document.getElementsByClassName('Header__subMenu')[0].clientHeight;
     }
-
     return element.offsetHeight - deductHeight;
   };
-
   const handleScroll = () => {
     const scrollPos = getScrollPos(window);
     let elementHeight = getElementHeight(node.current);
     let newPos = 0;
-
     if (scrollPos > 0) {
       const diff = state._previousPos - scrollPos;
       newPos = state.pos + diff;
       newPos = Math.max(-elementHeight, Math.min(0, newPos));
     }
-
     const isVisible = newPos > -elementHeight;
     const hasReachedTop = scrollPos < 5 && isVisible;
     const hasReachedBottom = Math.round(scrollPos + window.innerHeight) >= document.body.clientHeight;
     const scrolledPastNavHeight = scrollPos > elementHeight;
-    setState(prevState => ({ ...prevState,
+    setState(prevState => ({
+      ...prevState,
       pos: hasReachedBottom ? 0 : newPos,
       reachedTop: hasReachedTop,
       scrolledPastNavHeight,
@@ -60,7 +52,6 @@ const NavigationScroll = props => {
       _previousPos: scrollPos
     }));
   };
-
   const {
     reachedTop,
     reachedBottom,
@@ -85,7 +76,6 @@ const NavigationScroll = props => {
     }
   }, children);
 };
-
 NavigationScroll.propTypes = {
   children: PropTypes.element.isRequired,
   onUpdate: PropTypes.func

package/dist/components/Pagination/index.js

@@ -4,7 +4,6 @@ import c from 'classnames';
 import './style.scss';
 import PropTypes from 'prop-types';
 import withMapping from '../../Context/withMapping';
-
 const Pagination = ({
   currentPage,
   totalPages,
@@ -24,19 +23,15 @@ const Pagination = ({
       setCurrentPage(data.selected + 1);
     }
   };
-
   if (totalPages === 0) {
     return null;
   }
-
   if (totalPages === 1 && !showWhenOnePage) {
     return null;
   }
-
   if (currentPage > totalPages) {
     currentPage = totalPages;
   }
-
   if (!previousLabel || !nextLabel) {
     previousLabel = /*#__PURE__*/React.createElement("a", {
       className: "Pagination__previous__icon"
@@ -45,7 +40,6 @@ const Pagination = ({
       className: "Pagination__next__icon"
     });
   }
-
   const containerClasses = c('Pagination__container', containerClassName);
   const breakClasses = c('Pagination__break', breakClassName);
   const disabledClasses = c('disabled', disabledClassName);
@@ -67,7 +61,6 @@ const Pagination = ({
     activeClassName: activeClasses
   }));
 };
-
 Pagination.propTypes = {
   currentPage: PropTypes.number.isRequired,
   totalPages: PropTypes.number.isRequired,

package/dist/components/SearchKit/Facets/ChipFacet/index.js

@@ -2,11 +2,9 @@ import React from 'react';
 import { useSearchkit } from '@searchkit/client';
 import Button from '../../../Button';
 import classNames from 'classnames';
-
 const makeSafeForCSS = value => {
   return encodeURIComponent(value).replace(/\.|%[0-9a-z]{2}/gi, '');
 };
-
 export const ChipFacet = ({
   facet
 }) => {

package/dist/components/SearchKit/Facets/HierarchicalFilterFacet/index.js

@@ -1,7 +1,6 @@
 import React, { Fragment, useRef } from 'react';
 import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
 import { useSearchkit, FilterLink } from '@searchkit/client';
-
 const EntriesList = ({
   entries,
   loading,
@@ -48,7 +47,6 @@ const EntriesList = ({
   });
   return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
 };
-
 export const HierarchicalFilterFacet = ({
   facet,
   loading

package/dist/components/SearchKit/Facets/HierarchicalMenuFacet/index.js

@@ -1,7 +1,6 @@
 import React, { Fragment, useRef } from 'react';
 import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
 import { useSearchkit, FilterLink } from '@searchkit/client';
-
 const EntriesList = ({
   entries,
   loading,
@@ -48,7 +47,6 @@ const EntriesList = ({
   });
   return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
 };
-
 export const HierarchicalMenuFacet = ({
   facet,
   loading

package/dist/components/SearchKit/Facets/SelectFacet/index.js

@@ -4,20 +4,16 @@ import Select from '../../../Form/Select';
 import FormikWrapper from '../../../Form/FormikWrapper';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-
 const useInitialValues = () => {
   const parsed = useSearchkitVariables();
   const filters = {};
-
   if (parsed.filters) {
     parsed.filters.forEach(filter => {
       filters[filter.identifier] = filter.value;
     });
   }
-
   return filters;
 };
-
 export const SelectFacet = ({
   facet
 }) => {
@@ -49,14 +45,12 @@ export const SelectFacet = ({
       api.setPage({
         from: 0
       });
-
       if (value) {
         api.addFilter({
           identifier: facet.identifier,
           value: value
         });
       }
-
       api.search();
     }
   })));

package/dist/components/SearchKit/Query/index.js

@@ -2,7 +2,6 @@ import React, { useMemo, useState, useEffect } from 'react';
 import { gql, useQuery } from '@apollo/client';
 import { useSearchkitVariables } from '@searchkit/client';
 import SearchPage from '../SearchPage';
-
 function Query({
   query,
   useRouting,
@@ -21,21 +20,19 @@ function Query({
     loading
   } = useQuery(graphQuery, {
     variables
-  }); // In between searches, Searchkit will empty it's results, resulting
-  // in a re-render with an empty screen. Use a local state to prevent this.
+  });
 
+  // In between searches, Searchkit will empty it's results, resulting
+  // in a re-render with an empty screen. Use a local state to prevent this.
   const [dataLoaded, setDataLoaded] = useState(null);
   useEffect(() => {
     if (data) {
       setDataLoaded(data);
     }
   }, [data]);
-
   if (!useRouting) {
     return /*#__PURE__*/React.createElement("div", null, children(dataLoaded, loading));
   }
-
   return /*#__PURE__*/React.createElement(SearchPage, null, children(dataLoaded, loading));
 }
-
 export default Query;

package/dist/components/SearchKit/SearchFacets/index.js

@@ -4,7 +4,6 @@ import { ListFacet } from '../Facets/ListFacet';
 import { ChipFacet } from '../Facets/ChipFacet';
 import { HierarchicalFilterFacet } from '../Facets/HierarchicalFilterFacet';
 import { HierarchicalMenuFacet } from '../Facets/HierarchicalMenuFacet';
-
 const FacetList = (components = []) => {
   const FacetsMapper = [HierarchicalFilterFacet, HierarchicalMenuFacet, SelectFacet, ChipFacet, ListFacet, ...components].reduce((sum, component) => {
     sum[component.DISPLAY] = component;
@@ -18,11 +17,9 @@ const FacetList = (components = []) => {
       className: "SearchFacets"
     }, data && data.facets && data.facets.map(facet => {
       const Facet = FacetsMapper[facet.display];
-
       if (!Facet) {
         throw new Error(facet.display + ' not available');
       }
-
       return /*#__PURE__*/React.createElement(Facet, {
         facet: facet,
         loading: loading
@@ -30,18 +27,15 @@ const FacetList = (components = []) => {
     }));
   };
 };
-
 const SearchFacets = ({
   data,
   loading,
   facets
 }) => {
   const Facets = FacetList(facets);
-
   if (!data) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchFacets"
   }, /*#__PURE__*/React.createElement(Facets, {
@@ -49,7 +43,6 @@ const SearchFacets = ({
     loading: loading
   }));
 };
-
 SearchFacets.defaultProps = {
   data: null,
   loading: false,

package/dist/components/SearchKit/SearchField/index.js

@@ -3,7 +3,6 @@ import { useSearchkit, useSearchkitQueryValue } from "@searchkit/client";
 import FormikWrapper from '../../Form/FormikWrapper';
 import Button from '../../Button';
 import TextField from '../../Form/TextField';
-
 const SearchField = ({
   timeout,
   autoSearch = true,
@@ -14,35 +13,28 @@ const SearchField = ({
   const api = useSearchkit();
   const timeoutRef = useRef();
   const fieldLabel = false;
-
   const searchQuery = query => {
     setQuery(query);
     api.setQuery(query);
     api.search();
   };
-
   const onSubmit = (values, form) => {
     searchQuery(values.query);
   };
-
   const onChange = e => {
     e.persist();
-
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
-
     timeoutRef.current = setTimeout(() => {
       searchQuery(e.target.value);
     }, timeout);
   };
-
   const handleEnter = event => {
     if (event.key === 'Enter') {
       onSubmit();
     }
   };
-
   return /*#__PURE__*/React.createElement(FormikWrapper, {
     initialValues: {
       query: query
@@ -60,7 +52,6 @@ const SearchField = ({
     primary: true
   }, buttonText));
 };
-
 SearchField.defaultProps = {
   timeout: 1000,
   autoSearch: true,

package/dist/components/SearchKit/SearchLoadMore/index.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import { useSearchkit } from '@searchkit/client';
 import Button from '../../Button';
-
 const SearchLoadMore = ({
   data,
   label,
   className
 }) => {
   const api = useSearchkit();
-
   if (!data) {
     return null;
   }
-
   const setNextPage = () => {
     if (data) {
       api.setPage({
@@ -22,19 +19,15 @@ const SearchLoadMore = ({
       api.search();
     }
   };
-
   const currentPage = data.results.hits.page.pageNumber;
   const lastPage = data.results.hits.page.totalPages;
-
   if (currentPage + 1 >= lastPage) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: setNextPage
   }, label));
 };
-
 export default SearchLoadMore;

package/dist/components/SearchKit/SearchPage/index.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import { withSearchkitRouting } from '@searchkit/client';
 import { EuiPage } from '@elastic/eui';
-
 const SearchPage = ({
   children
 }) => /*#__PURE__*/React.createElement(EuiPage, null, children);
-
 export const routeToStateFn = routeState => {
   const value = {
     query: routeState.query || '',
@@ -15,37 +13,33 @@ export const routeToStateFn = routeState => {
       size: Number(routeState.size) || 10,
       from: Number(routeState.from) || 0
     }
-  }; // Map Number values for min and max filters. By default they
+  };
+
+  // Map Number values for min and max filters. By default they
   // are parsed as strings, which does not comply to the schema.
   // The 'qs' package is at fault here.
   // @see https://github.com/ljharb/qs/issues/91
-
   value.filters = value.filters.map(item => {
     if (item.min) {
       item.min = Number(item.min);
     }
-
     if (item.max) {
       item.max = Number(item.max);
     }
-
     if (item.boolValue) {
       item.boolValue = !!item.boolValue;
     }
-
     if (item.geoBoundingBox) {
       item.geoBoundingBox.topLeft.lat = Number(item.geoBoundingBox.topLeft.lat);
       item.geoBoundingBox.topLeft.lon = Number(item.geoBoundingBox.topLeft.lon);
       item.geoBoundingBox.bottomRight.lat = Number(item.geoBoundingBox.bottomRight.lat);
       item.geoBoundingBox.bottomRight.lon = Number(item.geoBoundingBox.bottomRight.lon);
     }
-
     if (item.geoRadius) {
       item.geoRadius.radius = Number(item.geoRadius.radius);
       item.geoRadius.center.lat = Number(item.geoRadius.center.lat);
       item.geoRadius.center.lon = Number(item.geoRadius.center.lon);
     }
-
     return item;
   });
   return value;

package/dist/components/SearchKit/SearchPagination/index.js

@@ -1,16 +1,13 @@
 import React from 'react';
 import { useSearchkit } from '@searchkit/client';
 import Pagination from '../../Pagination';
-
 const SearchPagination = ({
   data
 }) => {
   const api = useSearchkit();
-
   if (!data) {
     return null;
   }
-
   const setCurrentPage = page => {
     if (data && page) {
       api.setPage({
@@ -20,12 +17,10 @@ const SearchPagination = ({
       api.search();
     }
   };
-
   return /*#__PURE__*/React.createElement(Pagination, {
     setCurrentPage: setCurrentPage,
     totalPages: data.results.hits.page.totalPages,
     currentPage: data.results.hits.page.pageNumber + 1
   });
 };
-
 export default SearchPagination;

package/dist/components/SearchKit/SearchReset/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ResetSearchButton } from '@searchkit/elastic-ui';
-
 const SearchReset = ({
   data,
   loading
@@ -11,5 +10,4 @@ const SearchReset = ({
     loading: loading
   }));
 };
-
 export default SearchReset;

package/dist/components/SearchKit/SearchResults/index.js

@@ -2,15 +2,12 @@ import React, { useState, useEffect } from 'react';
 import usePrevious from '../../../hooks/usePrevious';
 import { useSearchkitVariables } from '@searchkit/client';
 import PropTypes from 'prop-types';
-
 const SearchResultItemDefault = ({
   item
 }) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, item.fields.title[0]));
-
 const SearchResultHeaderDefault = ({
   data
 }) => /*#__PURE__*/React.createElement("h2", null, data.results.summary.total, " Results");
-
 const SearchResults = ({
   data,
   renderItem,
@@ -37,12 +34,10 @@ const SearchResults = ({
     setPreviousSortBy(variables.sortBy);
     setPreviousActiveFilters(variables.filters);
     setCurrentData(JSON.stringify(data));
-
     if (!appendResults) {
       // Set items directly if not appendResults
       return setItems([...data.results.hits.items]);
     }
-
     const currentPageNumber = data.results.hits.page.pageNumber;
     const currentQuery = variables.query;
     const currentFiltersLength = variables.filters.length;
@@ -52,8 +47,9 @@ const SearchResults = ({
     const filtersChanged = previousActiveFilters.length !== currentFiltersLength;
     const sortByChanged = currentSortBy !== previousSortBy;
     const pageChanged = currentPageNumber !== previousPage;
-    const dataChanged = currentData !== newData; // Determine if we have to reset the results, or should append them to the results
+    const dataChanged = currentData !== newData;
 
+    // Determine if we have to reset the results, or should append them to the results
     if (dataChanged && (queryChanged || filtersChanged || pageChanged || sortByChanged)) {
       if (typeof previousItems === 'undefined' || queryChanged || filtersChanged || sortByChanged) {
         // Overwrite data when Query, Filters or SortBy has changed
@@ -63,36 +59,33 @@ const SearchResults = ({
         setItems([...previousItems, ...data.results.hits.items]);
       }
     }
-  }, [data, appendResults, variables]); // Set the search results when items have changed
+  }, [data, appendResults, variables]);
 
+  // Set the search results when items have changed
   useEffect(() => {
     setSearchResultItems(items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
       key: item.id,
       item: item
     })));
-  }, [items]); // Scroll to top on every page.
+  }, [items]);
 
+  // Scroll to top on every page.
   useEffect(() => {
-    if (!currentData) {
-      return;
-    }
-
-    const currentPageNumber = currentData.results.hits.page.pageNumber;
-
+    if (typeof data.results === 'undefined') return;
+    const currentPageNumber = data?.results?.hits?.page?.pageNumber;
     if (appendResults === false && scrollView && scrollView.current && currentPageNumber !== 0) {
       scrollView.current.scrollIntoView({
         behavior: 'smooth',
         block: 'start'
       });
     }
-  }, [currentData]);
+  }, [data, appendResults, scrollView]);
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchResults"
   }, data && /*#__PURE__*/React.createElement(SearchResultHeader, {
     data: data
   }), searchResultItems);
 };
-
 SearchResults.defaultProps = {
   renderItem: SearchResultItemDefault,
   renderHeader: SearchResultHeaderDefault,

package/dist/components/SearchKit/SearchSelectedFilters/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useSearchkit } from '@searchkit/client';
 import { SelectedFilters } from '@searchkit/elastic-ui';
 import Button from '../../Button';
-
 const SearchSelectedFilters = ({
   data,
   loading
@@ -19,11 +18,9 @@ const SearchSelectedFilters = ({
       }
     }, filter.label, ": ", filter.value);
   };
-
   if (!data) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchSelectedFilters"
   }, /*#__PURE__*/React.createElement(SelectedFilters, {
@@ -37,5 +34,4 @@ const SearchSelectedFilters = ({
     }
   }));
 };
-
 export default SearchSelectedFilters;

package/dist/components/SearchKit/SearchSorting/index.js

@@ -1,16 +1,13 @@
 import { useSearchkit, useSearchkitVariables } from '@searchkit/client';
-import React, { useState, useEffect } from 'react';
-import SelectStyled from 'react-select';
+import React from 'react';
 import FormikWrapper from '../../Form/FormikWrapper';
 import Select from '../../Form/Select';
-
 const useInitialValues = () => {
   const parsed = useSearchkitVariables();
   return {
     'sortBy': parsed.sortBy
   };
 };
-
 export const SearchSorting = ({
   data,
   loading
@@ -26,6 +23,7 @@ export const SearchSorting = ({
   }, /*#__PURE__*/React.createElement(Select, {
     fieldName: "sortBy",
     isClearable: false,
+    isSearchable: false,
     options: options,
     isLoading: loading,
     onChange: value => {

package/dist/components/SearchKit/index.js

@@ -8,7 +8,6 @@ import SearchPagination from './SearchPagination';
 import SearchResults from './SearchResults';
 import SearchFacets from './SearchFacets';
 import SearchSelectedFilters from './SearchFacets';
-
 const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement(SearchFacets, {
   data: data,
   loading: loading
@@ -20,7 +19,6 @@ const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(Reac
 }), /*#__PURE__*/React.createElement(SearchPagination, {
   data: data
 }));
-
 const SearchKit = ({
   query,
   uri,
@@ -60,7 +58,6 @@ const SearchKit = ({
     useRouting: useRouting
   }, (data, loading) => children ? children(data, loading) : defaultChildren(data, loading))));
 };
-
 SearchKit.propTypes = {
   queryString: PropTypes.string,
   uri: PropTypes.string,

package/dist/components/SearchKit/stories.js

@@ -91,15 +91,12 @@ const query = `
     }
   }
 `;
-
 const SearchItem = ({
   item
 }) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, item.fields.title[0]));
-
 const SearchHeader = ({
   data
 }) => /*#__PURE__*/React.createElement("h2", null, data.results.summary.total, " Resultaten");
-
 export const Default = () => /*#__PURE__*/React.createElement(SearchKit, {
   uri: "http://localhost:4000/api/graphql",
   query: query
@@ -121,7 +118,6 @@ export const Default = () => /*#__PURE__*/React.createElement(SearchKit, {
 }), /*#__PURE__*/React.createElement(SearchPagination, {
   data: data
 })));
-
 const ListFacet = ({
   facet
 }) => {
@@ -153,7 +149,6 @@ const ListFacet = ({
     }, "- ", entry.label, " (", entry.count, ")"));
   })));
 };
-
 ListFacet.DISPLAY = 'ListFacet';
 export const CustomFacets = () => {
   const customFacets = [ListFacet];
@@ -221,7 +216,8 @@ export const LoadMore = () => {
   const api = useSearchkit();
   return /*#__PURE__*/React.createElement(SearchKit, {
     uri: "http://localhost:4000/api/graphql",
-    query: query // useRouting={false}
+    query: query
+    // useRouting={false}
     ,
     pageSize: 5
   }, (data, loading) => {
@@ -232,7 +228,6 @@ export const LoadMore = () => {
       });
       api.search();
     };
-
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
       onClick: toggleFilter
     }, "Toggle"), /*#__PURE__*/React.createElement(SearchResults, {