@blaze-cms/react-page-builder 0.124.0-alpha.3 → 0.124.0-alpha.32

package/src/components/List/ListFactory.js

@@ -4,7 +4,11 @@ import { parseUrl } from 'query-string';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { MainContext } from '@blaze-cms/nextjs-components';
-import { getSingleEntitySchema, generateSingleItemQuery } from '../../application/query';
+import {
+  getSingleEntitySchema,
+  generateSingleItemQuery,
+  getItemList
+} from '../../application/query';
 import ListBuilder from './ListBuilder';
 import { AZ_LIST_TYPE } from './constants';
 import { getAzQueryFilter, getSortProps } from './helpers';
@@ -19,7 +23,9 @@ import {
   buildSearchValuesText,
   getQueryFilters,
   getInheritedFilters,
-  getQueryProps
+  getQueryProps,
+  getItemListId,
+  getItemListIds
 } from '../../helpers';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 import { AND_OPERATOR, TEXT_SEARCH, ID, AND, FULL } from '../../constants';
@@ -37,16 +43,18 @@ const ListFactory = props => {
     sort: defaultSort,
     searchFilter,
     operator: filterOperator,
-    sortProperties
+    sortProperties,
+    itemListName
   } = props;
-
   const { isPreview } = useContext(MainContext);
   const router = useRouter();
   const { asPath } = router;
   const parsedQuery = asPath.replace(/%5D/g, ']').replace(/%5B/g, '[');
-  const { query, url, query: { sort: querySort, sortby: querySortBy } = {} } = parseUrl(
-    parsedQuery
-  );
+  const {
+    query,
+    url,
+    query: { sort: querySort, sortby: querySortBy, itemListId: queryItemListId } = {}
+  } = parseUrl(parsedQuery);
   const { sortbyFilters, updatedSortProperties } = getSortProps({
     querySort,
     sortProperties,
@@ -55,6 +63,7 @@ const ListFactory = props => {
     defaultSortBy
   });
 
+  const itemListId = getItemListId(itemListName, queryItemListId);
   const { itemEntity, itemId } = parent;
   const itemEntityUpdated = getUnpublishedEntityName(itemEntity);
   const paginationIndex = getPaginationIndex(query, name);
@@ -98,13 +107,39 @@ const ListFactory = props => {
     variables: { id: itemId },
     skip: schemasLoading || (!inheritedFilters.length && queryProps === ID)
   });
-  const errorsToCheck = [schemaError, schemasError, requiredSchemaError, itemQueryError];
+
+  const { data: itemListData = {}, error: itemListError, loading: itemListLoading } = useQuery(
+    getItemList,
+    {
+      variables: { id: itemListId },
+      skip: !itemListId
+    }
+  );
+  if (!queryItemListId && itemListId) {
+    router.push('/Resolver', `${asPath}?itemListId=${itemListId}`, { shallow: true });
+  }
+
+  const errorsToCheck = [
+    schemaError,
+    schemasError,
+    requiredSchemaError,
+    itemQueryError,
+    itemListError
+  ];
   const { hasErr, errMsg } = checkForError(errorsToCheck);
 
-  if (requiredSchemaLoading || schemasLoading || schemaLoading || itemQueryLoading) return '';
+  if (
+    requiredSchemaLoading ||
+    schemasLoading ||
+    schemaLoading ||
+    itemQueryLoading ||
+    itemListLoading
+  )
+    return '';
   if (hasErr) return errMsg;
   if (!entitySchema) return null;
 
+  const itemListIds = getItemListIds(itemListData);
   const isCard = type !== FULL;
   const isAZ = type === AZ_LIST_TYPE;
   const genericProps = getGenericProps(props);
@@ -147,7 +182,8 @@ const ListFactory = props => {
     paginationIndex,
     entityData,
     inheritedFilters,
-    filterOperator
+    filterOperator,
+    itemListIds
   };
 
   return <ListBuilder {...listProps} />;
@@ -165,7 +201,8 @@ ListFactory.propTypes = {
   sortby: PropTypes.array,
   sort: PropTypes.string,
   searchFilter: PropTypes.object,
-  sortProperties: PropTypes.array
+  sortProperties: PropTypes.array,
+  itemListName: PropTypes.string
 };
 
 ListFactory.defaultProps = {
@@ -177,7 +214,8 @@ ListFactory.defaultProps = {
   sortProperties: [],
   sort: '',
   operator: AND,
-  searchFilter: {}
+  searchFilter: {},
+  itemListName: ''
 };
 
 export default ListFactory;

package/src/components/Menu/Menu.js

@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import BlazeButton from '@blaze-react/button';
+import { useRouter } from 'next/router';
 import { MdMenu, MdClose } from 'react-icons/md';
 import { useCheckMobileScreen } from '../../hooks';
 import { HIDDEN } from '../../constants';
+import MenuContext from './MenuContext';
 
 const Menu = ({
   children,
@@ -24,12 +26,28 @@ const Menu = ({
   closeIconModifier,
   ...rest
 }) => {
+  const router = useRouter();
   const isMobile = useCheckMobileScreen();
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
+  useEffect(
+    () => {
+      const handleRouteChange = () => setShowMobileMenu(false);
+      router.events.on('routeChangeStart', handleRouteChange);
+
+      return () => {
+        router.events.off('routeChangeStart', handleRouteChange);
+      };
+    },
+    [router.events]
+  );
+
   const shouldDisplayCollapsed = collapse && isMobile;
+
   const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;
+
   const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
+
   const childrenDesktopModifier =
     shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;
 
@@ -39,36 +57,37 @@ const Menu = ({
   const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';
 
   return (
-    <>
-      {collapse && (
-        <div className="menu--mobile-wrapper">
-          <div
-            className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>
-            <BlazeButton
-              className={mobileButtonClass}
-              onClick={() => setShowMobileMenu(!showMobileMenu)}>
-              <i>
-                {showMobileMenu ? (
-                  <MdClose className={closeIconModifier} />
-                ) : (
-                  <MdMenu className={hamburgerIconModifier} />
-                )}
-              </i>
-            </BlazeButton>
+    <MenuContext.Provider value={{ showMobileMenu }}>
+      <div className="menu--wrapper">
+        {collapse && (
+          <div className="menu--mobile-wrapper">
+            <div
+              className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>
+              <BlazeButton
+                className={mobileButtonClass}
+                onClick={() => setShowMobileMenu(!showMobileMenu)}>
+                <i>
+                  {showMobileMenu ? (
+                    <MdClose className={closeIconModifier} />
+                  ) : (
+                    <MdMenu className={hamburgerIconModifier} />
+                  )}
+                </i>
+              </BlazeButton>
+            </div>
           </div>
-        </div>
-      )}
-      {logoOnMobile && (
-        <a href="/">
-          <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
-        </a>
-      )}
+        )}
+        {logoOnMobile &&
+          !showMobileMenu && (
+            <a href="/">
+              <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
+            </a>
+          )}
 
-      <div className="menu--desktop-wrapper">
-        <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>
-          {logoOnDesktop &&
-            logoOnDesktopAlignment === 'left' && (
-              <a href="/" className="menu--desktop__logo-wrapper">
+        <div className="menu--desktop-wrapper">
+          <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>
+            {logoOnDesktop && (
+              <a href="/" className="">
                 <img
                   src={logoOnMobileUrl}
                   alt={logoOnMobileAlt}
@@ -76,20 +95,11 @@ const Menu = ({
                 />
               </a>
             )}
-          {children}
-          {logoOnDesktop &&
-            logoOnDesktopAlignment === 'right' && (
-              <a href="/" className="menu--desktop__logo-wrapper">
-                <img
-                  src={logoOnMobileUrl}
-                  alt={logoOnMobileAlt}
-                  className={logoOnDesktopModifier}
-                />
-              </a>
-            )}
-        </ul>
+            {children}
+          </ul>
+        </div>
       </div>
-    </>
+    </MenuContext.Provider>
   );
 };
 

package/src/components/Menu/MenuContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const MenuContext = React.createContext({ showMobileMenu: false });
+
+export default MenuContext;

package/src/components/MenuItem/MenuItem.js

@@ -1,35 +1,60 @@
-import React, { useState } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, CLICK, HIDDEN } from '../../constants';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
 import { hasChildren } from '../../helpers';
 import BlazeLink from '../BlazeLink';
+import MenuContext from '../Menu/MenuContext';
 
 const MenuItem = ({ children, eventType, text, modifier, url }) => {
   const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
+
+  useEffect(
+    () => {
+      if (!showMobileMenu) setDisplayChildren(false);
+    },
+    [showMobileMenu]
+  );
+
   const isHoverEvent = eventType === HOVER;
   const childrenDisplayClass = displayChildren ? '' : HIDDEN;
 
   const handleItemEvent = ({ type }) => {
     if (isHoverEvent) {
-      if (type === MOUSE_ENTER) setDisplayChildren(true);
-      if (type === MOUSE_LEAVE) setDisplayChildren(false);
-    }
-    if (type === CLICK && eventType === CLICK && !url) {
-      setDisplayChildren(!displayChildren);
+      if (type === MOUSE_ENTER) {
+        setDisplayChildren(true);
+      }
+      if (type === MOUSE_LEAVE) {
+        setDisplayChildren(false);
+      }
     }
   };
   const hasValidChildren = hasChildren(children);
 
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
-      {url ? (
-        <BlazeLink href={url}>{text}</BlazeLink>
-      ) : (
-        <span role="button" onClick={handleItemEvent}>
-          {text}
-        </span>
+      <div className="menu--item--link">
+        {url ? (
+          <BlazeLink href={url}>{text}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {text}
+          </span>
+        )}
+        {hasValidChildren && (
+          <i
+            role="button"
+            className="menu--item--link--icon"
+            onClick={() => setDisplayChildren(!displayChildren)}>
+            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
+          </i>
+        )}
+      </div>
+
+      {hasValidChildren && (
+        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
       )}
-      {hasValidChildren && <div className={childrenDisplayClass}>{children}</div>}
     </li>
   );
 };

package/src/components/SearchContent/SearchContent.js

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
+import SearchContentResults from './SearchContentResults';
+import SearchContentToggleIcon from './SearchContentToggleIcon';
+
+const SearchContent = ({
+  entities,
+  searchInputAlignment,
+  searchInputWrapperMobile,
+  searchInputWrapperDesktop,
+  collapsible,
+  isMobile,
+  placeholder,
+  modifier
+}) => {
+  const [collapsed, setCollapsed] = useState(collapsible);
+  const router = useRouter();
+
+  const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
+    entities,
+    initialSearchTerm: '',
+    resultKeys: 'id, name, image { url }, url'
+  });
+
+  useEffect(
+    () => {
+      const handleRouteChange = () => setSearchTerm('');
+      router.events.on('routeChangeStart', handleRouteChange);
+
+      return () => {
+        router.events.off('routeChangeStart', handleRouteChange);
+      };
+    },
+    [router.events, setSearchTerm]
+  );
+
+  const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
+
+  const handleClick = (e, url) => {
+    e.preventDefault();
+    router.push(url);
+  };
+
+  const handleKeyPress = e => {
+    if (e.key === 'Enter' && e.target.value !== '') {
+      router.push(`/search?search_term=${e.target.value}`);
+    }
+  };
+
+  const handleOnBlur = () => {
+    if (!collapsible) return;
+    if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
+  };
+
+  const handleClearSearchResults = () => {
+    setSearchTerm('');
+  };
+
+  const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
+  return collapsed ? (
+    <div className={className}>
+      <div className="search-content--collapse__wrapper">
+        <label className="search-content--collapse__label">
+          <span className="search-content--collapse__icon_wrapper">
+            <svg className="search-content--collapse__icon" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </span>
+          <input
+            onFocus={() => setCollapsed(false)}
+            onChange={e => setSearchTerm(e.target.value)}
+            type="text"
+            name="search"
+            className="search-content--collapse__input"
+          />
+        </label>
+      </div>
+    </div>
+  ) : (
+    <>
+      <div className={className}>
+        <div className="search-content--expanded__wrapper">
+          <label className="search-content--expanded__label">
+            <span className="search-content--expanded__icon_wrapper">
+              <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />
+            </span>
+            <input
+              type="text"
+              name="search"
+              onChange={e => setSearchTerm(e.target.value)}
+              onKeyPress={handleKeyPress}
+              className="search-content--expanded__input"
+              placeholder={placeholder}
+              value={searchTerm}
+              onBlur={handleOnBlur}
+            />
+          </label>
+        </div>
+        <SearchContentResults
+          results={results}
+          debouncedSearchTerm={debouncedSearchTerm}
+          handleClick={handleClick}
+        />
+      </div>
+    </>
+  );
+};
+
+SearchContent.propTypes = {
+  searchInputAlignment: PropTypes.string,
+  searchInputWrapperMobile: PropTypes.string,
+  searchInputWrapperDesktop: PropTypes.string,
+  placeholder: PropTypes.string,
+  isMobile: PropTypes.bool,
+  collapsible: PropTypes.bool,
+  entities: PropTypes.array.isRequired,
+  modifier: PropTypes.string
+};
+
+SearchContent.defaultProps = {
+  searchInputAlignment: '',
+  searchInputWrapperMobile: '',
+  searchInputWrapperDesktop: '',
+  placeholder: '',
+  isMobile: false,
+  collapsible: false,
+  modifier: ''
+};
+
+export default SearchContent;

package/src/components/SearchContent/SearchContentItems.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import BlazeLink from '../BlazeLink';
+import LazyImage from '../LazyImage';
+
+const SearchContentItems = ({ results = [], onClick }) =>
+  results.map(item => {
+    if (!item.url) return null;
+
+    const { id, name, image, url } = item;
+
+    return (
+      <BlazeLink href={url} onClick={onClick} key={id}>
+        <div className="search-content--results__wrapper">
+          {image?.url ? (
+            <LazyImage
+              src={image.url}
+              alt={name}
+              className="search-content--results__image"
+              sizeKey="search-result"
+            />
+          ) : null}
+          <span className="search-content--results__title">{name}</span>
+        </div>
+      </BlazeLink>
+    );
+  });
+
+export default SearchContentItems;

package/src/components/SearchContent/SearchContentResults.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import BlazeLink from '../BlazeLink';
+import SearchContentItems from './SearchContentItems';
+
+const SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {
+  if (debouncedSearchTerm !== '') {
+    return (
+      <div className="search-content--results__wrapper">
+        <div className="search-content--results__wrapper--message">
+          <div className="search-content--results__content">
+            {results.length === 0 && (
+              <div className="search-content--results__message">
+                <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>
+                  {`Search all results for: ${debouncedSearchTerm}`}
+                </BlazeLink>
+              </div>
+            )}
+            {results.length > 0 && <SearchContentItems results={results} onClick={onClick} />}
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return null;
+};
+
+export default SearchContentResults;

package/src/components/SearchContent/SearchContentToggleIcon.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const SearchContentToggleIcon = ({ results, onClear }) => {
+  if (results && results.length > 0) {
+    return (
+      <svg className="search-content--expanded__icon" viewBox="0 0 20 20" onClick={onClear}>
+        <path
+          fillRule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
+      <path
+        fillRule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default SearchContentToggleIcon;