@uncinc/uncinc-react-kitchen-sink 2.1.5 → 2.1.6

package/dist/components/ApiAutocomplete/index.js

@@ -2,6 +2,19 @@ import React, { useState } from 'react';
 import Autosuggest from 'react-autosuggest';
 import './style.scss';
 
+function abortableFetch(request, opts) {
+  const controller = new AbortController();
+  const signal = controller.signal;
+  return {
+    abort: () => controller.abort(),
+    ready: fetch(request, { ...opts,
+      signal
+    })
+  };
+}
+
+let currentFetch = null;
+
 const ApiAutocomplete = ({
   endpoint,
   placeholder,
@@ -16,7 +29,13 @@ const ApiAutocomplete = ({
 
   const getSuggestions = query => {
     const url = `${endpoint}?${queryParameter}=${query}`;
-    fetch(url).then(response => {
+
+    if (currentFetch) {
+      currentFetch.abort();
+    }
+
+    currentFetch = abortableFetch(url);
+    currentFetch.ready.then(response => {
       return response.json();
     }).then(response => {
       const ajaxResults = response.map((item, index) => {
@@ -24,6 +43,7 @@ const ApiAutocomplete = ({
         return item;
       });
       setResults(ajaxResults);
+    }).catch(e => {// Catch the error so the browser does not output errors.
     });
   };
 

package/dist/components/ApiAutocomplete/stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ApiAutocomplete from './';
+export default {
+  title: 'Organisms/Autocomplete'
+};
+export const Default = () => {
+  return /*#__PURE__*/React.createElement(ApiAutocomplete, {
+    endpoint: "http://nldoet.devinc.eu/autocomplete/json",
+    renderItem: item => {
+      console.log(item);
+      return /*#__PURE__*/React.createElement("div", null, item.name);
+    },
+    onSelectItem: item => {
+      console.log('Selected', item);
+    },
+    inputProps: {
+      label: 'test'
+    }
+  });
+};

package/dist/components/Form/Checkbox/index.js

@@ -17,7 +17,8 @@ const Checkbox = props => {
     touched,
     error,
     value,
-    displayRequiredIndicator
+    displayRequiredIndicator,
+    onChange
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
     className: "Checkbox",
@@ -49,9 +50,16 @@ const Checkbox = props => {
       name: fieldName,
       type: "checkbox",
       id: id,
-      checked: field.value
+      checked: field.value,
+      onChange: e => {
+        field.onChange(e);
+        onChange(!field.value);
+      }
     })), title);
   }));
 };
 
+Checkbox.defaultProps = {
+  onChange: () => {}
+};
 export default withMapping(Checkbox);

package/dist/components/Form/Checkbox/stories.js

@@ -22,6 +22,9 @@ export const Checkbox = () => {
       }
 
       return error;
+    },
+    onChange: e => {
+      console.log('change', e);
     }
   }));
 };

package/dist/components/Form/Select/Input/index.js

@@ -56,15 +56,15 @@ const SelectInput = props => {
         if (e) {
           if (onChange) {
             onChange(e.value);
-          } else {
-            form.setFieldValue(fieldName, e.value);
           }
+
+          form.setFieldValue(fieldName, e.value);
         } else {
           if (onChange) {
             onChange('');
-          } else {
-            form.setFieldValue(fieldName, null);
           }
+
+          form.setFieldValue(fieldName, null);
         }
       },
       options: optionsTransformed,

package/dist/components/Form/Select/stories.js

@@ -5,7 +5,11 @@ export default {
   title: 'Molecules/Form'
 };
 export const Select = () => {
-  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikSelect, {
+  return /*#__PURE__*/React.createElement(FormikWrapper, {
+    initialValues: {
+      poison: 'beer'
+    }
+  }, /*#__PURE__*/React.createElement(FormikSelect, {
     title: "Pick your poison",
     required: true,
     description: "This is a test input.",
@@ -25,6 +29,9 @@ export const Select = () => {
       }
 
       return error;
+    },
+    onChange: e => {
+      console.log(e);
     }
   }));
 };

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

@@ -0,0 +1,62 @@
+import React, { Fragment, useRef } from 'react';
+import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
+import { useSearchkit, FilterLink } from '@searchkit/client';
+
+const EntriesList = ({
+  entries,
+  loading,
+  facet
+}) => {
+  console.log('entries', entries);
+  const api = useSearchkit();
+  const entriesElements = entries.map(entry => {
+    const ref = useRef();
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: entry.label
+    }, /*#__PURE__*/React.createElement(EuiFacetButton, {
+      style: {
+        height: '28px',
+        marginTop: 0,
+        marginBottom: 0
+      },
+      quantity: entry.count,
+      isSelected: api.isFilterSelected({
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }),
+      isLoading: loading,
+      onClick: e => {
+        ref.current.onClick(e);
+      }
+    }, /*#__PURE__*/React.createElement(FilterLink, {
+      ref: ref,
+      filter: {
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }
+    }, entry.label)), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginLeft: '10px'
+      }
+    }, entry.entries && /*#__PURE__*/React.createElement(EntriesList, {
+      entries: entry.entries,
+      loading: loading,
+      facet: facet
+    })));
+  });
+  return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
+};
+
+export const HierarchicalFilterFacet = ({
+  facet,
+  loading
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EuiTitle, {
+  size: "xxs"
+}, /*#__PURE__*/React.createElement("h3", null, facet.label)), /*#__PURE__*/React.createElement(EntriesList, {
+  entries: facet.entries,
+  facet: facet,
+  loading: loading
+}));
+HierarchicalFilterFacet.DISPLAY = 'HierarchicalFilterFacet';

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

@@ -0,0 +1,62 @@
+import React, { Fragment, useRef } from 'react';
+import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
+import { useSearchkit, FilterLink } from '@searchkit/client';
+
+const EntriesList = ({
+  entries,
+  loading,
+  facet
+}) => {
+  console.log('entries', entries);
+  const api = useSearchkit();
+  const entriesElements = entries.map(entry => {
+    const ref = useRef();
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: entry.label
+    }, /*#__PURE__*/React.createElement(EuiFacetButton, {
+      style: {
+        height: '28px',
+        marginTop: 0,
+        marginBottom: 0
+      },
+      quantity: entry.count,
+      isSelected: api.isFilterSelected({
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }),
+      isLoading: loading,
+      onClick: e => {
+        ref.current.onClick(e);
+      }
+    }, /*#__PURE__*/React.createElement(FilterLink, {
+      ref: ref,
+      filter: {
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }
+    }, entry.label)), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginLeft: '10px'
+      }
+    }, entry.entries && /*#__PURE__*/React.createElement(EntriesList, {
+      entries: entry.entries,
+      loading: loading,
+      facet: facet
+    })));
+  });
+  return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
+};
+
+export const HierarchicalMenuFacet = ({
+  facet,
+  loading
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EuiTitle, {
+  size: "xxs"
+}, /*#__PURE__*/React.createElement("h3", null, facet.label)), /*#__PURE__*/React.createElement(EntriesList, {
+  entries: facet.entries,
+  facet: facet,
+  loading: loading
+}));
+HierarchicalMenuFacet.DISPLAY = 'HierarchicalMenuFacet';

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

@@ -3,8 +3,9 @@ import { gql, useQuery } from '@apollo/client';
 import { useSearchkitVariables } from '@searchkit/client';
 import SearchPage from '../SearchPage';
 
-function App({
+function Query({
   query,
+  useRouting,
   children
 }) {
   const graphQuery = useMemo(() => {
@@ -21,7 +22,12 @@ function App({
   } = useQuery(graphQuery, {
     variables
   });
+
+  if (!useRouting) {
+    return /*#__PURE__*/React.createElement("div", null, children(data, loading));
+  }
+
   return /*#__PURE__*/React.createElement(SearchPage, null, children(data, loading));
 }
 
-export default App;
+export default Query;

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

@@ -2,9 +2,11 @@ import React from 'react';
 import { SelectFacet } from '../Facets/SelectFacet';
 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 = [SelectFacet, ChipFacet, ListFacet, ...components].reduce((sum, component) => {
+  const FacetsMapper = [HierarchicalFilterFacet, HierarchicalMenuFacet, SelectFacet, ChipFacet, ListFacet, ...components].reduce((sum, component) => {
     sum[component.DISPLAY] = component;
     return sum;
   }, {});

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

@@ -6,4 +6,50 @@ const SearchPage = ({
   children
 }) => /*#__PURE__*/React.createElement(EuiPage, null, children);
 
-export default withSearchkitRouting(SearchPage);
+export const routeToStateFn = routeState => {
+  const value = {
+    query: routeState.query || '',
+    sortBy: routeState.sort || '',
+    filters: routeState.filters || [],
+    page: {
+      size: Number(routeState.size) || 10,
+      from: Number(routeState.from) || 0
+    }
+  }; // 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;
+};
+export default withSearchkitRouting(SearchPage, {
+  routeToState: routeToStateFn
+});

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

@@ -32,7 +32,8 @@ const SearchSelectedFilters = ({
     customFilterComponents: {
       SelectFacet: ValueFilter,
       ListFacet: ValueFilter,
-      ChipFacet: ValueFilter
+      ChipFacet: ValueFilter,
+      HierarchicalFilterFacet: ValueFilter
     }
   }));
 };

package/dist/components/SearchKit/index.js

@@ -24,7 +24,9 @@ const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(Reac
 const SearchKit = ({
   query,
   uri,
-  children
+  children,
+  pageSize = 5,
+  useRouting = true
 }) => {
   const client = new ApolloClient({
     uri: uri,
@@ -36,7 +38,8 @@ const SearchKit = ({
   }, /*#__PURE__*/React.createElement(SearchkitProvider, {
     client: skClient
   }, /*#__PURE__*/React.createElement(Query, {
-    query: query
+    query: query,
+    useRouting: useRouting
   }, (data, loading) => children ? children(data, loading) : defaultChildren(data, loading))));
 };
 

package/dist/components/SearchKit/stories.js

@@ -26,6 +26,10 @@ const query = `
           identifier
           display
           label
+          ... on HierarchicalValueSelectedFilter {
+            level
+            value
+          }
           ... on DateRangeSelectedFilter {
             dateMin
             dateMax
@@ -70,6 +74,17 @@ const query = `
         entries {
           label
           count
+          level
+          entries {
+            label
+            count
+            level
+            entries {
+              label
+              count
+              level
+            }
+          }
         }
       }
     }

package/package.json

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