@uncinc/uncinc-react-kitchen-sink 2.1.3 → 2.1.7

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,18 +56,21 @@ 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,
+      isOptionDisabled: option => {
+        return option.disabled;
+      },
       placeholder: placeholder,
       isClearable: true,
       theme: {

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/ChipFacet/index.js

@@ -1,17 +1,18 @@
-import React, { useState } from 'react';
+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
 }) => {
   const api = useSearchkit();
-
-  const makeSafeForCSS = value => {
-    return encodeURIComponent(value).replace(/\.|%[0-9a-z]{2}/gi, '');
-  };
-
   return /*#__PURE__*/React.createElement("div", {
+    className: "Facet ChipFacet",
     key: facet.identifier
   }, /*#__PURE__*/React.createElement("span", null, facet.label), /*#__PURE__*/React.createElement("div", null, facet.entries.map(entry => {
     const isSelected = api.isFilterSelected({
@@ -21,9 +22,9 @@ export const ChipFacet = ({
     const classes = classNames('Button--Chip', makeSafeForCSS(`Button--${entry.label}`), {
       'Button--selected': isSelected
     });
-    console.log(entry);
     return /*#__PURE__*/React.createElement(Button, {
       className: classes,
+      disabled: parseInt(entry.count) === 0,
       onClick: () => {
         api.toggleFilter({
           identifier: facet.identifier,

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/Facets/{UnorderedListFacet → ListFacet}/index.js

@@ -1,18 +1,24 @@
 import React from 'react';
 import { useSearchkit } from '@searchkit/client';
-export const UnorderedListFacet = ({
+import classNames from 'classnames';
+export const ListFacet = ({
   facet
 }) => {
   const api = useSearchkit();
   return /*#__PURE__*/React.createElement("div", {
+    className: "Facet ListFacet",
     key: facet.identifier
   }, /*#__PURE__*/React.createElement("span", null, facet.label), /*#__PURE__*/React.createElement("ul", null, facet.entries.map(entry => {
     const isSelected = api.isFilterSelected({
       identifier: facet.identifier,
       value: entry.label
     });
+    const classes = classNames({
+      selected: isSelected,
+      disabled: parseInt(entry.count) === 0
+    });
     return /*#__PURE__*/React.createElement("li", {
-      className: isSelected ? 'selected' : '',
+      className: classes,
       key: entry.label
     }, /*#__PURE__*/React.createElement("button", {
       onClick: () => {
@@ -21,8 +27,9 @@ export const UnorderedListFacet = ({
           value: entry.label
         });
         api.search();
-      }
+      },
+      disabled: parseInt(entry.count) === 0
     }, entry.label, " (", entry.count, ")"));
   })));
 };
-UnorderedListFacet.DISPLAY = 'UnorderedListFacet';
+ListFacet.DISPLAY = 'ListFacet';

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useSearchkit } from '@searchkit/client';
 import Select from '../../../Form/Select';
 import FormikWrapper from '../../../Form/FormikWrapper';
@@ -8,9 +8,11 @@ export const SelectFacet = ({
   const api = useSearchkit();
   const options = facet.entries.map(entry => ({
     value: entry.label,
-    label: entry.label
+    label: entry.label,
+    disabled: parseInt(entry.count) === 0
   }));
   return /*#__PURE__*/React.createElement("div", {
+    className: "Facet SelectFacet",
     key: facet.identifier
   }, /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(Select, {
     title: facet.label,
@@ -19,7 +21,6 @@ export const SelectFacet = ({
     fieldName: facet.identifier,
     options: options,
     onChange: value => {
-      console.log(value);
       api.toggleFilter({
         identifier: facet.identifier,
         value: value

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

@@ -1,14 +1,47 @@
 import React from 'react';
 import { SelectFacet } from '../Facets/SelectFacet';
-import { UnorderedListFacet } from '../Facets/UnorderedListFacet';
+import { ListFacet } from '../Facets/ListFacet';
 import { ChipFacet } from '../Facets/ChipFacet';
-import { FacetsList } from '@searchkit/elastic-ui';
+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;
+    return sum;
+  }, {});
+  return ({
+    data,
+    loading
+  }) => {
+    return /*#__PURE__*/React.createElement("div", {
+      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
+      });
+    }));
+  };
+};
 
 const SearchFacets = ({
   data,
-  loading
+  loading,
+  facets
 }) => {
-  const Facets = FacetsList([SelectFacet, UnorderedListFacet, ChipFacet]);
+  const Facets = FacetList(facets);
+
+  if (!data) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchFacets"
   }, /*#__PURE__*/React.createElement(Facets, {
@@ -17,4 +50,9 @@ const SearchFacets = ({
   }));
 };
 
+SearchFacets.defaultProps = {
+  data: null,
+  loading: false,
+  facets: []
+};
 export default SearchFacets;

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

@@ -6,4 +6,51 @@ const SearchPage = ({
   children
 }) => /*#__PURE__*/React.createElement(EuiPage, null, children);
 
-export default withSearchkitRouting(SearchPage);
+console.log('W', typeof withSearchkitRouting, withSearchkitRouting.getInitialProps);
+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.toString() === 'true');
+    }
+
+    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

@@ -20,6 +20,10 @@ const SearchSelectedFilters = ({
     }, filter.label, ": ", filter.value);
   };
 
+  if (!data) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchSelectedFilters"
   }, /*#__PURE__*/React.createElement(SelectedFilters, {
@@ -27,8 +31,9 @@ const SearchSelectedFilters = ({
     loading: loading,
     customFilterComponents: {
       SelectFacet: ValueFilter,
-      UnorderedListFacet: ValueFilter,
-      ChipFacet: ValueFilter
+      ListFacet: ValueFilter,
+      ChipFacet: ValueFilter,
+      HierarchicalFilterFacet: ValueFilter
     }
   }));
 };

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

@@ -5,6 +5,10 @@ const SearchSorting = ({
   data,
   loading
 }) => {
+  if (!data) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchSorting"
   }, /*#__PURE__*/React.createElement(SortingSelector, {

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useSearchkit } from '@searchkit/client';
+import classNames from 'classnames';
 import SearchKit from '.';
 import SearchField from './SearchField';
 import SearchPagination from './SearchPagination';
@@ -24,6 +26,10 @@ const query = `
           identifier
           display
           label
+          ... on HierarchicalValueSelectedFilter {
+            level
+            value
+          }
           ... on DateRangeSelectedFilter {
             dateMin
             dateMax
@@ -68,6 +74,17 @@ const query = `
         entries {
           label
           count
+          level
+          entries {
+            label
+            count
+            level
+            entries {
+              label
+              count
+              level
+            }
+          }
         }
       }
     }
@@ -102,4 +119,63 @@ export const Default = () => /*#__PURE__*/React.createElement(SearchKit, {
   renderHeader: SearchHeader
 }), /*#__PURE__*/React.createElement(SearchPagination, {
   data: data
-})));
+})));
+
+const ListFacet = ({
+  facet
+}) => {
+  const api = useSearchkit();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Facet ListFacet",
+    key: facet.identifier
+  }, /*#__PURE__*/React.createElement("span", null, "CUSTOM ", facet.label), /*#__PURE__*/React.createElement("div", null, facet.entries.map(entry => {
+    const isSelected = api.isFilterSelected({
+      identifier: facet.identifier,
+      value: entry.label
+    });
+    const classes = classNames({
+      selected: isSelected,
+      disabled: parseInt(entry.count) === 0
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes,
+      key: entry.label
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: () => {
+        api.toggleFilter({
+          identifier: facet.identifier,
+          value: entry.label
+        });
+        api.search();
+      },
+      disabled: parseInt(entry.count) === 0
+    }, "- ", entry.label, " (", entry.count, ")"));
+  })));
+};
+
+ListFacet.DISPLAY = 'ListFacet';
+export const CustomFacets = () => {
+  const customFacets = [ListFacet];
+  return /*#__PURE__*/React.createElement(SearchKit, {
+    uri: "http://localhost:4000/api/graphql",
+    query: query
+  }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement(SearchFacets, {
+    data: data,
+    loading: loading,
+    facets: customFacets
+  }), /*#__PURE__*/React.createElement(SearchSelectedFilters, {
+    data: data,
+    loading: loading
+  }), /*#__PURE__*/React.createElement(SearchSorting, {
+    data: data,
+    loading: loading
+  }), /*#__PURE__*/React.createElement(SearchReset, {
+    loading: loading
+  }), /*#__PURE__*/React.createElement(SearchResults, {
+    data: data,
+    renderItem: SearchItem,
+    renderHeader: SearchHeader
+  }), /*#__PURE__*/React.createElement(SearchPagination, {
+    data: data
+  })));
+};

package/package.json

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