@uncinc/uncinc-react-kitchen-sink 2.2.0 → 2.2.1

package/dist/components/Lottie/stories.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import Lottie from './';
 import LottieAnimationWithMousePosition from './LottieAnimationWithMousePosition';
 import exampleLottie from '../../assets/lottie/example.json';
@@ -10,8 +10,7 @@ export default {
 export const DefaultAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
   id: "example",
   data: exampleLottie,
-  onInit: lottie => console.log(lottie),
-  autoPlay: false
+  onInit: lottie => console.log(lottie)
 }); // Animation active on hover
 
 export const activateOnHoverAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
@@ -34,28 +33,4 @@ export const pauseOnClickAnimation = () => /*#__PURE__*/React.createElement(Lott
 
 export const PathLoad = () => /*#__PURE__*/React.createElement(Lottie, {
   path: "https://maxst.icons8.com/vue-static/landings/animated-icons/icons/checkmark-ok/checkmark-ok.json"
-});
-export const Custom = () => {
-  const l = useRef();
-  const direction = useRef(true);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "fooo",
-    onClick: () => {
-      console.log('click');
-
-      if (direction.current) {
-        direction.current = false;
-        l.current.playSegments([0, 5], true);
-      } else {
-        direction.current = true;
-        l.current.playSegments([5, 0], true);
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Lottie, {
-    id: "example",
-    data: exampleLottie,
-    onInit: lottie => l.current = lottie,
-    autoPlay: false,
-    loop: false
-  }));
-};
+});

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

@@ -0,0 +1,40 @@
+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({
+        size: data.results.hits.page.size,
+        from: parseInt(data.results.hits.page.size) * (parseInt(data.results.hits.page.pageNumber) + 1)
+      });
+      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/SearchResults/index.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import usePrevious from '../../../hooks/usePrevious';
 
 const SearchResultItemDefault = ({
   item
@@ -11,17 +12,35 @@ const SearchResultHeaderDefault = ({
 const SearchResults = ({
   data,
   renderItem,
-  renderHeader
+  renderHeader,
+  appendResults = false
 }) => {
   const SearchResultItem = renderItem || SearchResultItemDefault;
   const SearchResultHeader = renderHeader || SearchResultHeaderDefault;
+  const [items, setItems] = useState([]);
+  const [currentPage, setCurrentPage] = useState(-1);
+  const previousPage = usePrevious(currentPage);
+  const previousItems = usePrevious(items);
+  useEffect(() => {
+    if (!appendResults) {
+      return;
+    }
+
+    if (data && previousPage !== undefined && data.results.hits.page.pageNumber !== previousPage) {
+      setItems([...previousItems, ...data.results.hits.items]);
+      setCurrentPage(data.results.hits.page.pageNumber);
+    }
+  }, [data, previousPage, previousItems, appendResults]);
+  const searchResultItems = appendResults ? data && items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
+    item: item
+  })) : data && data.results.hits.items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
+    item: item
+  }));
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchResults"
   }, data && /*#__PURE__*/React.createElement(SearchResultHeader, {
     data: data
-  }), data && data.results.hits.items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
-    item: item
-  })));
+  }), searchResultItems);
 };
 
 export default SearchResults;

package/dist/components/SearchKit/stories.js

@@ -9,6 +9,7 @@ import SearchFacets from './SearchFacets';
 import SearchSelectedFilters from './SearchSelectedFilters';
 import SearchReset from './SearchReset';
 import SearchSorting from './SearchSorting';
+import SearchLoadMore from './SearchLoadMore';
 export default {
   title: 'Molecules/SearchKit'
 };
@@ -188,15 +189,12 @@ export const Test = () => {
     uri: "http://localhost:4000/api/graphql",
     query: query,
     useRouting: false,
-    defaultFilters: [{
+    filters: [{
       identifier: 'type',
       value: 'article'
     }],
-    defaultQuery: q
-  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchFacets, {
-    data: data,
-    loading: loading
-  }), /*#__PURE__*/React.createElement(SearchResults, {
+    searchQuery: q
+  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
     data: data,
     renderItem: SearchItem,
     renderHeader: SearchHeader
@@ -206,20 +204,44 @@ export const Test = () => {
     uri: "http://localhost:4000/api/graphql",
     query: query,
     useRouting: false,
-    pageSize: 5,
-    defaultFilters: [{
+    filters: [{
       identifier: 'type',
       value: 'landing_page'
     }],
-    defaultQuery: q
-  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchFacets, {
-    data: data,
-    loading: loading
-  }), /*#__PURE__*/React.createElement(SearchResults, {
+    searchQuery: q
+  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
     data: data,
     renderItem: SearchItem,
     renderHeader: SearchHeader
   }), /*#__PURE__*/React.createElement(SearchPagination, {
     data: data
   }))));
+};
+export const LoadMore = () => {
+  const api = useSearchkit();
+  return /*#__PURE__*/React.createElement(SearchKit, {
+    uri: "http://localhost:4000/api/graphql",
+    query: query // useRouting={false}
+    ,
+    pageSize: 5
+  }, (data, loading) => {
+    const toggleFilter = () => {
+      api.toggleFilter({
+        identifier: "type",
+        value: "22"
+      });
+      api.search();
+    };
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      onClick: toggleFilter
+    }, "Toggle"), /*#__PURE__*/React.createElement(SearchResults, {
+      data: data,
+      renderItem: SearchItem,
+      renderHeader: SearchHeader,
+      append: true
+    }), /*#__PURE__*/React.createElement(SearchLoadMore, {
+      data: data
+    }));
+  });
 };

package/dist/components/WysiwygField/index.js

@@ -7,10 +7,17 @@ import Button from '../Button';
 
 const WysiwygField = ({
   html,
+  customElementHandler,
   ...props
 }) => {
   const parsedHtml = ReactHtmlParser(html, {
     transform: node => {
+      const customHandler = customElementHandler(node);
+
+      if (customHandler) {
+        return customHandler;
+      }
+
       switch (node.name) {
         case 'a':
           {
@@ -42,7 +49,12 @@ const WysiwygField = ({
   }, props), parsedHtml);
 };
 
-PropTypes.propTypes = {
-  html: PropTypes.string.isRequired
+WysiwygField.propTypes = {
+  html: PropTypes.string.isRequired,
+  customElementHandler: PropTypes.func
+};
+WysiwygField.defaultProps = {
+  html: '',
+  customElementHandler: () => {}
 };
 export default WysiwygField;

package/dist/components/WysiwygField/stories.js

@@ -6,4 +6,38 @@ export default {
 const html = "<p>This is <em>some</em> example <a href='https://www.uncinc.nl'>HTML</a>.</p>";
 export const Primary = () => /*#__PURE__*/React.createElement(WysiwygField, {
   html: html
+});
+
+const Abbr = ({
+  title,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("abbr", {
+    title: title
+  }, children);
+};
+
+const htmlCustomHandler = `
+  <p>Lorem ipsum dolor sit amet, <abbr title="Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi.">consectetur adipiscing</abbr> elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget.</p>
+  <p>Donec feugiat, nunc vitae euismod posuere, urna nisl elementum nibh, quis ultricies libero leo sed neque. Praesent vel vestibulum sem, eget congue purus. Nunc non volutpat urna, vitae ullamcorper justo. Suspendisse in tortor ex. Phasellus euismod eget neque vitae consequat. Vestibulum sem mi, dictum id consectetur at, hendrerit in massa. Mauris quis sem condimentum, condimentum enim sed, varius sem. Curabitur convallis tempus nulla, eget consectetur quam sagittis at. Nulla a feugiat tortor. Mauris fermentum lectus ac mauris cursus ornare.</p>
+  <p>Nam venenatis est eget lorem laoreet, id tempor urna hendrerit. Quisque suscipit in magna nec condimentum. Duis id tempor nisi. Sed rutrum urna elit, vitae placerat enim volutpat nec. Vivamus volutpat, magna sit amet commodo ultricies, enim turpis pretium libero, quis molestie nibh augue a ex. Nulla vestibulum vestibulum tellus, vel molestie libero vehicula nec. Sed maximus tortor vel ipsum cursus egestas. Proin suscipit tortor id luctus bibendum.</p>
+`;
+export const CustomHandlers = () => /*#__PURE__*/React.createElement(WysiwygField, {
+  html: htmlCustomHandler,
+  customElementHandler: element => {
+    switch (element.name) {
+      case 'abbr':
+        {
+          console.log(element);
+          return /*#__PURE__*/React.createElement(Abbr, {
+            title: element.attribs.title
+          }, element.children[0].data);
+        }
+
+      default:
+        {
+          return null;
+        }
+    }
+  }
 });

package/dist/hooks/useOnScreen.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+export default function useOnScreen(ref) {
+  const [isIntersecting, setIntersecting] = useState(false);
+  const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
+  useEffect(() => {
+    observer.observe(ref.current); // Remove the observer as soon as the component is unmounted
+
+    return () => observer.disconnect();
+  }, [observer, ref]);
+  return isIntersecting;
+}

package/dist/hooks/usePrevious.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+export default function usePrevious(value) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef(); // Store current value in ref
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+
+  return ref.current;
+}
+;

package/dist/hooks/useScrollPosition.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+const useScrollPosition = () => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+  useEffect(() => {
+    const updatePosition = () => {
+      setScrollPosition(window.pageYOffset);
+    };
+
+    window.addEventListener('scroll', updatePosition);
+    updatePosition();
+    return () => window.removeEventListener('scroll', updatePosition);
+  }, []);
+  return scrollPosition;
+};
+
+export default useScrollPosition;

package/dist/hooks/useWindowDimensions.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+  const {
+    innerWidth: width,
+    innerHeight: height
+  } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowDimensions;
+}

package/dist/index.js

@@ -43,4 +43,9 @@ export { default as SearchSorting } from './components/SearchKit/SearchSorting';
 export { default as SearchReset } from './components/SearchKit/SearchReset';
 export { default as SearchResults } from './components/SearchKit/SearchResults';
 export { default as SearchPagination } from './components/SearchKit/SearchPagination';
-export { default as Cookie } from './components/Cookie';
+export { default as SearchLoadMore } from './components/SearchKit/SearchLoadMore';
+export { default as Cookie } from './components/Cookie';
+export { default as useOnScreen } from './hooks/useOnScreen';
+export { default as usePrevious } from './hooks/usePrevious';
+export { default as useScrollPosition } from './hooks/useScrollPosition';
+export { default as useWindowDimensions } from './hooks/useWindowDimensions';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",