@uncinc/uncinc-react-kitchen-sink 2.3.2 → 2.3.4

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

@@ -1,43 +1,61 @@
-import React, { useRef } from 'react';
-import { useSearchkit, useSearchkitQueryValue } from '@searchkit/client';
-import TextField from '../../Form/TextField';
+import React, { useRef } from "react";
+import { useSearchkit, useSearchkitQueryValue } from "@searchkit/client";
 import FormikWrapper from '../../Form/FormikWrapper';
-
+import Button from '../../Button';
+import TextField from '../../Form/TextField';
 const SearchField = ({
-  timeout
+  timeout,
+  autoSearch = true,
+  buttonText,
+  placeholder
 }) => {
   const [query, setQuery] = useSearchkitQueryValue();
   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(() => {
-      setQuery(e.target.value);
-      api.setQuery(e.target.value);
-      api.search();
+      searchQuery(e.target.value);
     }, timeout);
   };
-
+  const handleEnter = event => {
+    if (event.key === 'Enter') {
+      onSubmit();
+    }
+  };
   return /*#__PURE__*/React.createElement(FormikWrapper, {
     initialValues: {
       query: query
     },
     displayRequiredIndicator: "required",
-    enableReinitialize: true
+    enableReinitialize: true,
+    onSubmit: onSubmit
   }, /*#__PURE__*/React.createElement(TextField, {
     fieldName: "query",
-    title: "Search",
-    onChange: onChange
-  }));
+    title: fieldLabel,
+    placeholder: placeholder,
+    onChange: autoSearch ? () => onChange : () => handleEnter
+  }), !autoSearch && /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    primary: true
+  }, buttonText));
 };
-
 SearchField.defaultProps = {
-  timeout: 1000
+  timeout: 1000,
+  autoSearch: true,
+  buttonText: '',
+  placeholder: ''
 };
 export default SearchField;

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

@@ -1,23 +1,22 @@
 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,
   renderHeader,
-  appendResults = false
+  appendResults = false,
+  scrollView = null
 }) => {
-  const SearchResultItem = renderItem || SearchResultItemDefault;
-  const SearchResultHeader = renderHeader || SearchResultHeaderDefault;
+  const SearchResultItem = renderItem;
+  const SearchResultHeader = renderHeader;
   const variables = useSearchkitVariables();
   const [items, setItems] = useState([]);
   const [currentPage, setCurrentPage] = useState(-1);
@@ -30,12 +29,15 @@ const SearchResults = ({
   const previousItems = usePrevious(items);
   useEffect(() => {
     if (typeof data.results === 'undefined') return;
-
+    setCurrentPage(data.results.hits.page.pageNumber);
+    setPreviousQuery(variables.query);
+    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;
@@ -45,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
@@ -55,25 +58,49 @@ const SearchResults = ({
         // Append data if the page has changed and we have previousItems
         setItems([...previousItems, ...data.results.hits.items]);
       }
-
-      setCurrentPage(data.results.hits.page.pageNumber);
-      setPreviousQuery(variables.query);
-      setPreviousSortBy(variables.sortBy);
-      setPreviousActiveFilters(variables.filters);
-      setCurrentData(JSON.stringify(data));
     }
-  }, [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.
+  useEffect(() => {
+    if (!currentData) {
+      return;
+    }
+    const currentPageNumber = currentData.results.hits.page.pageNumber;
+    if (appendResults === false && scrollView && scrollView.current && currentPageNumber !== 0) {
+      scrollView.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  }, [currentData]);
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchResults"
   }, data && /*#__PURE__*/React.createElement(SearchResultHeader, {
     data: data
   }), searchResultItems);
 };
-
+SearchResults.defaultProps = {
+  renderItem: SearchResultItemDefault,
+  renderHeader: SearchResultHeaderDefault,
+  appendResults: false,
+  scrollView: null
+};
+SearchResults.propTypes = {
+  // its turned off due to complex struxture of the object
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired,
+  renderItem: PropTypes.elementType,
+  renderHeader: PropTypes.elementType,
+  appendResults: PropTypes.bool,
+  scrollView: PropTypes.element
+};
 export default SearchResults;

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

@@ -3,14 +3,12 @@ import React, { useState, useEffect } from 'react';
 import SelectStyled from 'react-select';
 import FormikWrapper from '../../Form/FormikWrapper';
 import Select from '../../Form/Select';
-
 const useInitialValues = () => {
   const parsed = useSearchkitVariables();
   return {
     'sortBy': parsed.sortBy
   };
 };
-
 export const SearchSorting = ({
   data,
   loading

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, {

package/dist/components/Share/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { EmailShareButton, FacebookShareButton, LinkedinShareButton, TwitterShareButton, WhatsappShareButton } from "react-share";
 import './style.scss';
-
 const ShareButton = ({
   type,
   pageTitle,
@@ -28,7 +27,6 @@ const ShareButton = ({
     className: `icon icon-${type} icon-variant-3`
   }))));
 };
-
 const Share = ({
   title,
   pageTitle,
@@ -56,7 +54,6 @@ const Share = ({
     className: "Share__buttons"
   }, buttons)));
 };
-
 Share.defaultProps = {
   title: "Share this page:",
   pageTitle: "",

package/dist/components/Sliders/SliderRelated/index.js

@@ -1,10 +1,8 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React from 'react';
 import Slider from "react-slick";
 import useValueForCurrentViewPort from '../../../helpers/useValueForCurrentViewPort';
 import './style.scss';
-
 const SliderNextArrow = ({
   onClick
 }) => {
@@ -13,7 +11,6 @@ const SliderNextArrow = ({
     onClick: onClick
   });
 };
-
 const SliderPrevArrow = ({
   onClick
 }) => {
@@ -22,7 +19,6 @@ const SliderPrevArrow = ({
     onClick: onClick
   });
 };
-
 const SliderRelated = props => {
   const {
     children,
@@ -38,7 +34,6 @@ const SliderRelated = props => {
     ref: sliderRef
   }), children);
 };
-
 SliderRelated.defaultProps = {
   title: null,
   slidesToShow: 3,

package/dist/components/Sliders/SliderRelated/stories.js

@@ -1,5 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React from 'react';
 import SliderRelated from '.';
 import Button from '../../Button';
@@ -16,7 +15,6 @@ export default d;
 const defaultProps = {
   autoplay: false
 };
-
 const Teaser = ({
   title,
   image,
@@ -51,7 +49,6 @@ const Teaser = ({
   primary: false,
   href: buttonLink
 }, buttonText))));
-
 const children = Array.from(Array(6).keys()).map(i => {
   const image = ["https://dummyimage.com/600x400/000/fff", "https://dummyimage.com/600x400/f00/fff", "https://dummyimage.com/600x400/ddd/fff"];
   const title = "Title";

package/dist/components/Webform/WebformActions/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import c from 'classnames';
 import Button from '../../Button';
-
 const WebformActions = props => {
   const {
     entity,
@@ -17,5 +16,4 @@ const WebformActions = props => {
     type: "submit"
   }, entity.get('#submit__label')));
 };
-
 export default WebformActions;

package/dist/components/Webform/WebformCheckbox/index.js

@@ -1,10 +1,8 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Checkbox from '../../Form/Checkbox';
 import withStates from '../withStates';
-
 const WebformCheckbox = props => {
   const {
     entity,
@@ -21,17 +19,13 @@ const WebformCheckbox = props => {
   const placeholder = entity.get('#placeholder');
   const requiredError = entity.get('#required_error');
   const key = entity.get('#webform_key');
-
   function validation(value) {
     let error;
-
     if (required && !value) {
       error = requiredError || t('Dit is een vereist veld.');
     }
-
     return error;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: "WebformCheckbox"
   }, /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
@@ -46,5 +40,4 @@ const WebformCheckbox = props => {
     value: props.values[key]
   })));
 };
-
 export default withStates(WebformCheckbox);

package/dist/components/Webform/WebformCheckboxes/index.js

@@ -1,11 +1,9 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Immutable from 'immutable';
 import Checkboxes from '../../Form/Checkboxes';
 import withStates from '../withStates';
-
 const WebformCheckboxes = props => {
   const {
     entity,
@@ -26,21 +24,16 @@ const WebformCheckboxes = props => {
   const otherLabel = entity.get('#other__option_label');
   const otherPlaceholder = entity.get('#other__placeholder');
   let options = entity.get('#options', Immutable.Map());
-
   if (showOther) {
     options = options.set('__other__', 'Anders');
   }
-
   function validation(value) {
     let error;
-
     if (required && !value) {
       error = requiredError || t('Dit is een vereist veld.');
     }
-
     return error;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: "WebformCheckboxes"
   }, /*#__PURE__*/React.createElement(Checkboxes, _extends({}, fieldProps, {
@@ -58,5 +51,4 @@ const WebformCheckboxes = props => {
     otherPlaceholder: otherPlaceholder
   })));
 };
-
 export default withStates(WebformCheckboxes);

package/dist/components/Webform/WebformContainer/index.js

@@ -1,25 +1,24 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React from 'react';
-
 const WebformContainer = props => {
   const {
     entity,
     WebformMapper
-  } = props; // Remove all non-element children.
+  } = props;
 
+  // Remove all non-element children.
   let children = entity;
   children.keySeq().forEach(k => {
     if (k.indexOf('#') === 0) {
       children = children.delete(k);
     }
-  }); // Recursively render children.
+  });
 
+  // Recursively render children.
   return /*#__PURE__*/React.createElement("div", {
     className: "WebformContainer"
   }, /*#__PURE__*/React.createElement(WebformMapper, _extends({}, props, {
     entities: children
   })));
 };
-
 export default WebformContainer;