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

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

@@ -1,14 +1,29 @@
-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();
@@ -18,26 +33,38 @@ const SearchField = ({
     }
 
     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.2",
+  "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;