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

package/src/components/Button.js

@@ -1,10 +1,11 @@
 import React, { useState, Fragment } from 'react';
 import { useCookies } from 'react-cookie';
 import { useRouter } from 'next/router';
+import classnames from 'classnames';
 import BlazeButton from '@blaze-react/button';
 import { handleLogout } from '@blaze-cms/core-auth-ui';
 import { useApolloClient } from '@apollo/client';
-import PropTypes from 'prop-types';
+import PropTypes, { bool, string } from 'prop-types';
 import ClickWrapper from './ClickWrapper';
 import BlazeLink from './BlazeLink';
 import { withTitle } from '../HOC';
@@ -18,7 +19,19 @@ import {
 } from '../helpers';
 
 const Button = props => {
-  const { type, text, url, icon, name, style, children, clickAction, ...otherProps } = props;
+  const {
+    type,
+    text,
+    url,
+    icon,
+    name,
+    style,
+    children,
+    clickAction,
+    childSeoVisibility,
+    afterClickText,
+    ...otherProps
+  } = props;
   const client = useApolloClient();
   const router = useRouter();
   const isLogoutButton = clickAction === LOGOUT;
@@ -54,13 +67,18 @@ const Button = props => {
   const { shouldUseClickWrapper, wrapperProps } = getClickWrapperOptions(children, props);
   const Wrapper = shouldUseClickWrapper ? ClickWrapper : Fragment;
 
+  const contentClassName = classnames('button__content', {
+    'button__content--show': showChildren
+  });
+
   return (
     <Wrapper {...wrapperProps}>
+      {childSeoVisibility && <div className={contentClassName}>{renderedChildren}</div>}
+      {!childSeoVisibility && showChildren && renderedChildren}
       <DynamicButton className={modifiers} onClick={handleClick} {...currentProps}>
         {icon && <i className={icon} />}
-        {text}
+        {showChildren ? afterClickText : text}
       </DynamicButton>
-      {showChildren && renderedChildren}
     </Wrapper>
   );
 };
@@ -68,25 +86,29 @@ const Button = props => {
 Button.propTypes = {
   clickAction: PropTypes.string,
   text: PropTypes.string,
+  afterClickText: string,
   name: PropTypes.string,
   type: PropTypes.string,
   url: PropTypes.string,
   size: PropTypes.string,
   icon: PropTypes.string,
   style: PropTypes.string,
+  childSeoVisibility: bool,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
 Button.defaultProps = {
   clickAction: '',
   text: '',
+  afterClickText: '',
   name: '',
   type: '',
   url: null,
   size: '',
   icon: '',
   style: '',
-  children: []
+  children: [],
+  childSeoVisibility: false
 };
 
 export default withTitle(Button);

package/src/components/Card/CardContainer.js

@@ -31,7 +31,6 @@ const CardContainer = ({
   enableAutoScroll,
   enableOverlay,
   autoScrollTimer,
-  arrowSize,
   overlayModifier,
   titleOverlayModifier,
   ...cardProps
@@ -88,7 +87,6 @@ const CardContainer = ({
             displayThumbnail={displayThumbnail}
             displayTitle={displayTitle}
             priority={priority}
-            arrowSize={arrowSize}
             enableOverlay={enableOverlay}
             overlayModifier={overlayModifier}
             titleOverlayModifier={titleOverlayModifier}
@@ -122,8 +120,7 @@ CardContainer.propTypes = {
   enableOverlay: PropTypes.bool,
   overlayModifier: PropTypes.string,
   titleOverlayModifier: PropTypes.string,
-  autoScrollTimer: PropTypes.number,
-  arrowSize: PropTypes.string
+  autoScrollTimer: PropTypes.number
 };
 
 CardContainer.defaultProps = {
@@ -146,8 +143,7 @@ CardContainer.defaultProps = {
   enableOverlay: false,
   autoScrollTimer: 0,
   overlayModifier: '',
-  titleOverlayModifier: '',
-  arrowSize: ''
+  titleOverlayModifier: ''
 };
 
 export default withTitle(CardContainer);

package/src/components/Card/CardFactory.js

@@ -6,7 +6,7 @@ import CardRender from './CardRender';
 import { buildPropsQuery, getGenericProps, checkPropsToUse } from '../../helpers';
 import { WITH_BANNER } from '../../constants';
 
-const CardFactory = ({ entity, propsToDisplay, itemsToDisplay, ...cardProps }) => {
+const CardFactory = ({ entity, propsToDisplay, itemsToDisplay, itemListName, ...cardProps }) => {
   const { data, error, loading } = useQuery(getSingleEntitySchema, {
     variables: { id: entity }
   });
@@ -36,12 +36,14 @@ const CardFactory = ({ entity, propsToDisplay, itemsToDisplay, ...cardProps }) =
 CardFactory.propTypes = {
   entity: PropTypes.string.isRequired,
   propsToDisplay: PropTypes.array,
-  itemsToDisplay: PropTypes.array
+  itemsToDisplay: PropTypes.array,
+  itemListName: PropTypes.string
 };
 
 CardFactory.defaultProps = {
   propsToDisplay: [],
-  itemsToDisplay: []
+  itemsToDisplay: [],
+  itemListName: ''
 };
 
 export default CardFactory;

package/src/components/CarouselWrapper.js

@@ -80,7 +80,7 @@ const CarouselWrapper = ({
               setShouldAutoScroll(false);
               handleButtonNavigation();
             }}>
-            <i className="carousel--arrow-left" />
+            <i className="cards-carousel--arrow cards-carousel--arrow__left" />
           </button>
         )}
       </div>
@@ -93,7 +93,7 @@ const CarouselWrapper = ({
               setShouldAutoScroll(false);
               handleButtonNavigation(true);
             }}>
-            <i className="carousel--arrow-left" />
+            <i className="cards-carousel--arrow cards-carousel--arrow__right" />
           </button>
         )}
       </div>

package/src/components/Image/ImageRender.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Head from 'next/head';
 import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
 import Lightbox from './Lightbox';
 
@@ -22,6 +23,7 @@ const ImageRender = ({
   ...otherProps
 }) => {
   const imageStyle = enableLightbox ? { cursor: 'pointer' } : style;
+  const HeadComponent = priority ? Head : null;
 
   return (
     <>
@@ -31,6 +33,7 @@ const ImageRender = ({
         src={imageUrl}
         onClick={handleEnableLightbox}
         style={imageStyle}
+        HeadComponent={HeadComponent}
       />
       {displayLightbox && (
         <Lightbox

package/src/components/ItemList/ItemListButton/ItemListButton.js

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  BsBookmarkStarFill,
+  BsBookmarkCheckFill,
+  BsBookmarkStar,
+  BsBookmarkXFill
+} from 'react-icons/bs';
+import { useQuery, useMutation } from '@apollo/client';
+import { getItemList, addItemsToList, removeItemsFromList } from '../../../application/query';
+import { getItemListData, setItemListId } from '../helpers';
+import { useItemListId } from '../hooks';
+
+const ItemListButton = ({ listName, parent, modifier }) => {
+  const { itemId, itemEntity } = parent;
+  const [isHover, setIsHover] = useState(false);
+  const { listId } = useItemListId({ listName });
+
+  const getIcon = () => {
+    if (isInList) return isHover ? BsBookmarkXFill : BsBookmarkCheckFill;
+    return isHover ? BsBookmarkStarFill : BsBookmarkStar;
+  };
+
+  const { data, error, loading } = useQuery(getItemList, {
+    variables: { id: listId },
+    skip: !listId
+  });
+
+  const [addListItem] = useMutation(addItemsToList, {
+    onCompleted: ({ addItemsToList: listAddResult }) => {
+      const {
+        result: { id }
+      } = listAddResult;
+
+      if (!listId) {
+        setItemListId(listName, id);
+      }
+    }
+  });
+
+  const [removeListItem] = useMutation(removeItemsFromList);
+
+  const clickHandler = () => {
+    setIsHover(false);
+    isInList
+      ? removeListItem({
+          variables: { listId, listItems: [{ itemId, itemEntity }] },
+          skip: !listId
+        })
+      : addListItem({
+          variables: { name: listName, id: listId, listItems: [{ itemId, itemEntity }] },
+          skip: !listId
+        });
+  };
+
+  if (loading) return '';
+  if (error) return error.message;
+
+  const listItems = getItemListData(data);
+  const isInList = !!listItems.find(
+    ({ itemId: idToCheck, itemEntity: entityToCheck }) =>
+      idToCheck === itemId && entityToCheck === itemEntity
+  );
+  const Icon = getIcon();
+  const stateClassName = isInList ? 'item-list-button--selected' : '';
+  const className = ['item-list-button', stateClassName, modifier].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={className}
+      role="button"
+      onClick={clickHandler}
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}>
+      <i>
+        <Icon />
+      </i>
+    </div>
+  );
+};
+
+ItemListButton.propTypes = {
+  parent: PropTypes.object,
+  listName: PropTypes.string,
+  modifier: PropTypes.string
+};
+
+ItemListButton.defaultProps = {
+  parent: {},
+  listName: '',
+  modifier: ''
+};
+
+export default ItemListButton;

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

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

package/src/components/ItemList/ItemListCounter/ItemListCounter.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { useQuery } from '@apollo/client';
+import { BsBookmarkStarFill, BsBookmarkStar } from 'react-icons/bs';
+import { getItemList } from '../../../application/query';
+import { useItemListId } from '../hooks';
+import { getItemListData } from '../helpers';
+
+const ItemListCounter = ({ listName, modifier, url }) => {
+  const router = useRouter();
+  const { listId } = useItemListId({ listName });
+
+  const { data, error, loading } = useQuery(getItemList, {
+    variables: { id: listId },
+    skip: !listId
+  });
+
+  if (loading) return '';
+  if (error) return error.message;
+
+  const listItems = getItemListData(data);
+  const listLength = listItems.length;
+  const CounterIcon = listLength ? BsBookmarkStarFill : BsBookmarkStar;
+
+  const handleClick = () => router.push('/Resolver', `${url}?itemListId=${listId}`);
+
+  return (
+    <div
+      role="button"
+      type="button"
+      className={`item-list-counter ${modifier}`}
+      onClick={handleClick}>
+      <CounterIcon />
+      <span className="item-list-counter__badge">{listLength}</span>
+    </div>
+  );
+};
+
+ItemListCounter.propTypes = {
+  url: PropTypes.string,
+  listName: PropTypes.string,
+  modifier: PropTypes.string
+};
+
+ItemListCounter.defaultProps = {
+  url: '',
+  listName: '',
+  modifier: ''
+};
+
+export default ItemListCounter;

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

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

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,