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

package/src/components/ItemList/ItemListNew/ItemListNew.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { useQuery } from '@apollo/client';
+import BlazeButton from '@blaze-react/button';
+import { parseUrl } from 'query-string';
+import { getItemList } from '../../../application/query';
+import { useItemListId } from '../hooks';
+import { getItemListData, setItemListId, setParamAndRedirect } from '../helpers';
+import { LIST_ITEM_QUERY_PARAM } from '../constants';
+
+const ItemListNew = ({ listName, modifier, text }) => {
+  const router = useRouter();
+  const { query: { [LIST_ITEM_QUERY_PARAM]: listItemId } = {} } = parseUrl(router.asPath);
+
+  const { listId } = useItemListId({ listName });
+  const listIdToUse = listItemId || listId;
+  const { data, error, loading } = useQuery(getItemList, {
+    variables: { id: listIdToUse },
+    skip: !listIdToUse
+  });
+
+  if (loading) return '';
+  if (error) return error.message;
+
+  const listItems = getItemListData(data);
+  if (!listItems.length) return '';
+
+  const handleClick = () => {
+    setItemListId(listName, '');
+    setParamAndRedirect(router);
+  };
+
+  return (
+    <BlazeButton className={`item-list-new ${modifier}`} onClick={handleClick}>
+      {text}
+    </BlazeButton>
+  );
+};
+
+ItemListNew.propTypes = {
+  listName: PropTypes.string.isRequired,
+  modifier: PropTypes.string,
+  text: PropTypes.string.isRequired
+};
+
+ItemListNew.defaultProps = {
+  modifier: ''
+};
+
+export default ItemListNew;

package/src/components/ItemList/ItemListNew/index.js

@@ -0,0 +1,3 @@
+import ItemListNew from './ItemListNew';
+
+export default ItemListNew;

package/src/components/ItemList/constants.js

@@ -0,0 +1,5 @@
+export const ITEM_LIST_BUTTON = 'itemlistbutton';
+export const ITEM_LIST_COUNTER = 'itemlistcounter';
+export const ITEM_LIST_NEW = 'itemlistnew';
+export const LIST_ITEM_LOCAL_KEY = 'blaze_item_list_';
+export const LIST_ITEM_QUERY_PARAM = 'itemListId';

package/src/components/ItemList/helpers/get-item-list-data.js

@@ -0,0 +1,6 @@
+const getItemListData = data => {
+  if (data && data.getItemList && data.getItemList.listItems) return data.getItemList.listItems;
+  return [];
+};
+
+export default getItemListData;

package/src/components/ItemList/helpers/get-item-list-id.js

@@ -0,0 +1,11 @@
+import { LIST_ITEM_LOCAL_KEY } from '../constants';
+
+const getItemListId = (listName, queryId) => {
+  if (queryId) return queryId;
+  if (!listName || typeof localStorage === 'undefined') return '';
+
+  const localListName = `${LIST_ITEM_LOCAL_KEY}${listName}`;
+  return localStorage.getItem(localListName) || '';
+};
+
+export default getItemListId;

package/src/components/ItemList/helpers/get-item-list-ids.js

@@ -0,0 +1,10 @@
+import getItemListData from './get-item-list-data';
+
+const getItemListIds = data => {
+  const itemListElements = getItemListData(data);
+  return itemListElements.length
+    ? itemListElements.map(({ itemId }) => ({ displayItems: [itemId] }))
+    : null;
+};
+
+export default getItemListIds;

package/src/components/ItemList/helpers/index.js

@@ -0,0 +1,5 @@
+export { default as getItemListId } from './get-item-list-id';
+export { default as getItemListIds } from './get-item-list-ids';
+export { default as getItemListData } from './get-item-list-data';
+export { default as setItemListId } from './set-item-list-id';
+export { default as setParamAndRedirect } from './set-param-and-redirect';

package/src/components/ItemList/helpers/set-item-list-id.js

@@ -0,0 +1,9 @@
+import { LIST_ITEM_LOCAL_KEY } from '../constants';
+
+const setItemListId = (listName, id) => {
+  const localListName = `${LIST_ITEM_LOCAL_KEY}${listName}`;
+  localStorage.setItem(localListName, id);
+  window.dispatchEvent(new Event('storage'));
+};
+
+export default setItemListId;

package/src/components/ItemList/helpers/set-param-and-redirect.js

@@ -0,0 +1,20 @@
+import { LIST_ITEM_QUERY_PARAM } from '../constants';
+
+const placeholderBase = 'https://blazecms.app'; // placeholder for URL, removed later
+
+const setParamAndRedirect = (router, value) => {
+  const currentUrl = new URL(router.asPath, placeholderBase);
+  if (value) {
+    currentUrl.searchParams.set(LIST_ITEM_QUERY_PARAM, value);
+  } else if (!currentUrl.searchParams.get(LIST_ITEM_QUERY_PARAM)) return;
+  else {
+    currentUrl.searchParams.delete(LIST_ITEM_QUERY_PARAM);
+  }
+
+  const newUrl = currentUrl.toString().replace(placeholderBase, '');
+  router.push('/Resolver', newUrl, {
+    shallow: true
+  });
+};
+
+export default setParamAndRedirect;

package/src/components/ItemList/hooks/index.js

@@ -0,0 +1 @@
+export { default as useItemListId } from './use-item-list-id';

package/src/components/ItemList/hooks/use-item-list-id.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { getItemListId } from '../helpers';
+
+const useItemListId = ({ listName }) => {
+  const idFromStorage = getItemListId(listName);
+  const [listId, setListId] = useState(idFromStorage);
+
+  useEffect(
+    () => {
+      const storageEventHandler = () => {
+        const newId = getItemListId(listName);
+        setListId(newId);
+      };
+
+      window.addEventListener('storage', storageEventHandler);
+
+      return () => {
+        window.removeEventListener('storage', storageEventHandler);
+      };
+    },
+    [listName]
+  );
+
+  return { listId };
+};
+
+export default useItemListId;

package/src/components/LazyImage/LazyImage.js

@@ -1,16 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
+import Head from 'next/head';
 import { useInView } from '@blaze-react/utils/lib/customHooks';
 import { IN_VIEW_CONFIG } from '../../constants';
 
 const LazyImage = ({ src, alt, sizeKey, priority, ...props }) => {
   const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
   const shouldRender = priority || isIntersecting;
+  const HeadComponent = priority ? Head : null;
 
   return (
     <span ref={outerRef}>
-      {shouldRender && <ResponsiveImage src={src} alt={alt} sizeKey={sizeKey} {...props} />}
+      {shouldRender && (
+        <ResponsiveImage
+          src={src}
+          alt={alt}
+          sizeKey={sizeKey}
+          HeadComponent={HeadComponent}
+          {...props}
+        />
+      )}
     </span>
   );
 };

package/src/components/List/ListBuilder.js

@@ -52,13 +52,15 @@ const ListBuilder = props => {
     requiredSchema,
     searchValues,
     azFilter,
-    sortProperties
+    sortProperties,
+    itemListIds
   } = props;
   const isInfinite = paginationType === INFINITE;
   const listComponent = getListComponent(isCard, paginationType);
   const propsToDisplayValues = checkPropsToUse(propsToDisplay);
   const entityFields = buildPropsQuery(entitySchema, propsToDisplayValues, props) || '';
-  const limitToUse = limit || itemsToDisplay.length;
+  const itemsToDisplayToUse = itemListIds || itemsToDisplay;
+  const limitToUse = limit || itemsToDisplayToUse.length;
   const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
   const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
@@ -94,7 +96,7 @@ const ListBuilder = props => {
       stringProps
     },
     itemId,
-    itemsToDisplay,
+    itemsToDisplayToUse,
     shouldApplyDefaultSort,
     { shouldReturnAggs: true, isAZ }
   );
@@ -137,7 +139,7 @@ const ListBuilder = props => {
       azFilter
     },
     itemId,
-    itemsToDisplay,
+    itemsToDisplayToUse,
     shouldApplyDefaultSort,
     { shouldReturnAggs: false, isAZ }
   );
@@ -172,6 +174,7 @@ const ListBuilder = props => {
       isAZ={isAZ}
       azFilter={azFilter}
       {...props}
+      itemsToDisplay={itemsToDisplayToUse}
     />
   );
 };
@@ -202,12 +205,14 @@ ListBuilder.propTypes = {
   filterOperator: PropTypes.string.isRequired,
   paginationType: PropTypes.string,
   azFilter: PropTypes.string,
-  sortProperties: PropTypes.array
+  sortProperties: PropTypes.array,
+  itemListIds: PropTypes.array
 };
 
 ListBuilder.defaultProps = {
   entityData: {},
   itemsToDisplay: [],
+  itemListIds: null,
   limit: 0,
   omitWrappers: false,
   offset: 0,

package/src/components/List/ListFactory.js

@@ -4,10 +4,14 @@ 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';
+import { getAzQueryFilter, getSortProps, hasRequiredItemListDetails } from './helpers';
 import {
   getGenericProps,
   getRequiredSchemas,
@@ -21,6 +25,7 @@ import {
   getInheritedFilters,
   getQueryProps
 } from '../../helpers';
+import { getItemListId, getItemListIds } from '../ItemList/helpers';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 import { AND_OPERATOR, TEXT_SEARCH, ID, AND, FULL } from '../../constants';
 
@@ -37,16 +42,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 +62,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 +106,38 @@ 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 (!hasRequiredItemListDetails({ itemListName, router, itemListId, queryItemListId })) return '';
+
+  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 +180,8 @@ const ListFactory = props => {
     paginationIndex,
     entityData,
     inheritedFilters,
-    filterOperator
+    filterOperator,
+    itemListIds
   };
 
   return <ListBuilder {...listProps} />;
@@ -165,7 +199,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 +212,8 @@ ListFactory.defaultProps = {
   sortProperties: [],
   sort: '',
   operator: AND,
-  searchFilter: {}
+  searchFilter: {},
+  itemListName: ''
 };
 
 export default ListFactory;

package/src/components/List/helpers/has-required-item-list-details.js

@@ -0,0 +1,14 @@
+import { setParamAndRedirect } from '../../ItemList/helpers';
+
+const hasRequiredItemListDetails = ({ itemListName, router, itemListId, queryItemListId }) => {
+  if (!itemListName) return true;
+
+  if (!queryItemListId && itemListId) {
+    setParamAndRedirect(router, itemListId);
+    return false;
+  }
+
+  return !!queryItemListId;
+};
+
+export default hasRequiredItemListDetails;

package/src/components/List/helpers/index.js

@@ -5,3 +5,4 @@ export { default as buildAzUrl } from './build-az-url';
 export { default as sortAggs } from './sort-aggs';
 export { default as getItemsPerPageToUse } from './get-items-per-page-to-use';
 export { default as getSortProps } from './get-sort-props';
+export { default as hasRequiredItemListDetails } from './has-required-item-list-details';

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 classnames from 'classnames';
+import { useRouter } from 'next/router';
 import { MdMenu, MdClose } from 'react-icons/md';
-import { useCheckMobileScreen } from '../../hooks';
-import { HIDDEN } from '../../constants';
+import { Link } from '@blaze-cms/nextjs-components';
+import MenuContext from './MenuContext';
 
 const Menu = ({
   children,
@@ -21,65 +23,68 @@ const Menu = ({
   logoOnMobileModifier,
   logoOnDesktopModifier,
   logoOnDesktopAlignment,
-  closeIconModifier,
-  ...rest
+  closeIconModifier
 }) => {
-  const isMobile = useCheckMobileScreen();
+  const router = useRouter();
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
-  const shouldDisplayCollapsed = collapse && isMobile;
-  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;
-  const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
-  const childrenDesktopModifier =
-    shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;
+  useEffect(
+    () => {
+      const handleRouteChange = () => setShowMobileMenu(false);
+      router.events.on('routeChangeStart', handleRouteChange);
 
-  const childrenMobileModifier =
-    shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;
+      return () => {
+        router.events.off('routeChangeStart', handleRouteChange);
+      };
+    },
+    [router.events]
+  );
+
+  const shouldDisplayChildren = collapse ? showMobileMenu : true;
+
+  const childModifiers = classnames({
+    [mobileMenuChildrenModifier]: shouldDisplayChildren,
+    [modifier]: !showMobileMenu
+  });
 
   const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';
+  const menuWrapperClasses = classnames('menu--wrapper', {
+    'menu--wrapper--mobile-open': showMobileMenu,
+    'menu--wrapper--mobile-closed': collapse && !showMobileMenu
+  });
 
   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={menuWrapperClasses}>
+        {collapse && (
+          <div className="menu--mobile-wrapper">
+            <div
+              className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>
+              <BlazeButton
+                className={`menu--mobile-button ${mobileButtonModifier}`}
+                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 && (
+            <Link href="/">
+              <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
+            </Link>
+          )}
 
-      <div className="menu--desktop-wrapper">
-        <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>
-          {logoOnDesktop &&
-            logoOnDesktopAlignment === 'left' && (
-              <a href="/" className="menu--desktop__logo-wrapper">
-                <img
-                  src={logoOnMobileUrl}
-                  alt={logoOnMobileAlt}
-                  className={logoOnDesktopModifier}
-                />
-              </a>
-            )}
-          {children}
-          {logoOnDesktop &&
-            logoOnDesktopAlignment === 'right' && (
-              <a href="/" className="menu--desktop__logo-wrapper">
+        <div className="menu--desktop-wrapper">
+          <ul className={childModifiers}>
+            {logoOnDesktop && (
+              <a href="/" className="">
                 <img
                   src={logoOnMobileUrl}
                   alt={logoOnMobileAlt}
@@ -87,9 +92,11 @@ const Menu = ({
                 />
               </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>
   );
 };