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

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

@@ -17,7 +17,9 @@ const SelectInput = props => {
     disabled,
     className,
     wrapperClassName,
-    isClearable = true
+    isClearable = true,
+    multiple = false,
+    size
   } = props;
   let {
     selectedOption
@@ -36,10 +38,20 @@ const SelectInput = props => {
   } // If the selected option is not set, find the currently selected option by value.
 
 
-  if (!selectedOption && value) {
-    selectedOption = optionsTransformed.find(option => {
-      return option.value === value;
-    });
+  if (!selectedOption) {
+    if (multiple) {
+      const _value = value !== undefined ? value : defaultValue || [];
+
+      selectedOption = optionsTransformed.filter(option => {
+        return _value.includes(option.value);
+      });
+    } else {
+      const _value = value !== undefined ? value : defaultValue || '';
+
+      selectedOption = optionsTransformed.find(option => {
+        return option.value === _value;
+      });
+    }
   }
 
   return /*#__PURE__*/React.createElement(Field, {
@@ -55,27 +67,44 @@ const SelectInput = props => {
       id: id,
       className: c("Select__select", className),
       classNamePrefix: c("Select__inner", wrapperClassName),
-      value: selectedOption || "",
+      value: selectedOption,
       defaultValue: defaultValue,
       disabled: disabled,
       onChange: e => {
+        let value = '';
+
         if (e) {
-          if (onChange) {
-            onChange(e.value);
+          if (multiple) {
+            value = e.map(item => {
+              return item.value;
+            });
+          } else {
+            value = e.value;
           }
-
-          form.setFieldValue(fieldName, e.value);
         } else {
-          if (onChange) {
-            onChange('');
+          if (multiple) {
+            value = [];
           }
+        }
 
-          form.setFieldValue(fieldName, null);
+        if (onChange) {
+          onChange(value);
         }
+
+        form.setFieldValue(fieldName, value);
       },
       options: optionsTransformed,
+      isMulti: multiple,
       isOptionDisabled: option => {
-        return option.disabled;
+        if (option.disabled) {
+          return true;
+        }
+
+        if (size && selectedOption.length >= size) {
+          return true;
+        }
+
+        return false;
       },
       placeholder: placeholder,
       isClearable: isClearable,

package/dist/components/Form/Select/Input/style.scss

@@ -18,9 +18,6 @@
       }
     }
     &__option {
-      &--is-focused {
-        color: black !important;
-      }
       &--is-selected {
         background-color: transparent !important;
         color: $color--primary !important;

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

@@ -17,7 +17,8 @@ const Select = props => {
     displayRequiredIndicator,
     className,
     wrapperClassName,
-    disabled = false
+    disabled = false,
+    multiple = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
     className: c("Select", wrapperClassName),
@@ -32,7 +33,8 @@ const Select = props => {
     className: c(className, {
       'error': error && touched
     }),
-    disabled: disabled
+    disabled: disabled,
+    multiple: multiple
   })));
 };
 

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

@@ -5,22 +5,49 @@ export default {
   title: 'Molecules/Form'
 };
 export const Select = () => {
-  return /*#__PURE__*/React.createElement(FormikWrapper, {
-    initialValues: {
-      poison: 'beer'
+  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikSelect, {
+    title: "Pick your poison",
+    required: true,
+    description: "This is a test input.",
+    placeholder: "Select a value...",
+    fieldName: "poison",
+    options: {
+      beer: 'Beer',
+      wine: 'Wine',
+      rum: 'Rum',
+      whisky: 'Whisk(e)y'
+    },
+    defaultValue: "wine",
+    validation: value => {
+      let error;
+
+      if (!value) {
+        error = 'Dit is een vereist veld.';
+      }
+
+      return error;
+    },
+    onChange: e => {
+      console.log(e);
     }
-  }, /*#__PURE__*/React.createElement(FormikSelect, {
+  }));
+};
+export const SelectMultiple = () => {
+  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikSelect, {
     title: "Pick your poison",
     required: true,
     description: "This is a test input.",
     placeholder: "Select a value...",
     fieldName: "poison",
+    multiple: true,
+    size: 2,
     options: {
       beer: 'Beer',
       wine: 'Wine',
       rum: 'Rum',
       whisky: 'Whisk(e)y'
     },
+    defaultValue: ['wine'],
     validation: value => {
       let error;
 

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

@@ -1,41 +1,70 @@
-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/SearchResults/index.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import usePrevious from '../../../hooks/usePrevious';
 import { useSearchkitVariables } from '@searchkit/client';
+import PropTypes from 'prop-types';
 
 const SearchResultItemDefault = ({
   item
@@ -14,10 +15,11 @@ 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,6 +32,11 @@ 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
@@ -55,20 +62,30 @@ 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
 
   useEffect(() => {
     setSearchResultItems(items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
+      key: item.id,
       item: item
     })));
-  }, [items]);
+  }, [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, {
@@ -76,4 +93,19 @@ const SearchResults = ({
   }), 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/pages/api/graphql.js

@@ -0,0 +1,25 @@
+import { ApolloServer, gql } from 'apollo-server-micro';
+export const config = {
+  api: {
+    bodyParser: false
+  }
+};
+const typeDefs = [gql`
+    type Query {
+      root: String
+    }
+
+    type Mutation {
+      root: String
+    }
+  `];
+const server = new ApolloServer({
+  typeDefs,
+  resolvers: {},
+  introspection: true,
+  playground: true,
+  context: {}
+});
+export default server.createHandler({
+  path: '/api/graphql'
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -53,11 +53,11 @@
     "next-with-apollo": "^5.2.1",
     "ola": "^1.1.1",
     "path": "^0.12.7",
-    "react": "^16.14.0",
+    "react": "^16 || ^17 || ^18",
     "react-animate-height": "^2.0.23",
     "react-autosuggest": "^10.0.2",
     "react-datepicker": "^3.0.0",
-    "react-dom": "^16.4",
+    "react-dom": "^16 || ^17 || ^18",
     "react-global-configuration": "^1.4.0",
     "react-html-parser": "^2.0.2",
     "react-i18next": "^11.5.0",

package/dist/components/WysiwygField/stories.scss

@@ -1,3 +0,0 @@
-.WysiwygField {
-  margin-right: 200px;
-}

package/dist/helpers/makeSafeForCSS.js

@@ -1,5 +0,0 @@
-const makeSafeForCSS = value => {
-  return encodeURIComponent(value).replace(/\.|%[0-9a-z]{2}/gi, '');
-};
-
-export default makeSafeForCSS;