@blaze-cms/react-page-builder 0.146.0-core-styles.3 → 0.146.0-core-styles.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-core-styles.3",
+  "version": "0.146.0-core-styles.7",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -90,5 +90,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "247f73f1821c9f1e328c7ef04caec75e40afaa99"
+  "gitHead": "b811f3e32b6d7faaaf35fad93a76a0b7bbf76468"
 }

package/src/components/Image/Lightbox/Lightbox.js

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import Modal from '@blaze-react/modal';
 import { useInView } from '@blaze-react/utils/lib/customHooks';
 import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
+import Modal from '../../ModalAdapter';
 import BlazeLink from '../../BlazeLink';
 import { IN_VIEW_CONFIG } from '../../../constants';
 

package/src/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import BlazeModal from '@blaze-react/modal';
+import BlazeModal from '../ModalAdapter';
 import { renderChildren, updateChildrensParent, hasChildren } from '../../helpers';
 
 const Modal = ({ children, elementTitle, onClose, ...otherProps }) => {

package/src/components/ModalAdapter/ModalAdapter.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Modal from '@blaze-react/modal';
+import ReactDOM from 'react-dom';
+import { usePortal } from '../../hooks';
+
+const ModalAdapter = ({ ...props }) => {
+  const target = usePortal();
+
+  return ReactDOM.createPortal(<Modal {...props} />, target);
+};
+
+export default ModalAdapter;

package/src/components/ModalAdapter/index.js

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

package/src/components/SearchFilter/SearchFilter/SearchFilter.js

@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
-
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
+import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
 import { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';
 
 const SearchFilter = ({

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -11,7 +11,8 @@ import {
   buildNewUrl,
   getFilterValues,
   getFilterRangesAndCheckboxesValues,
-  getUpdatedFilterBy
+  getUpdatedFilterBy,
+  buildListNameQuery
 } from './helpers';
 import {
   getEntityData,
@@ -25,23 +26,6 @@ import { SCROLL_OFFSET } from '../../constants';
 import searchFilterReducer from './searchFilterReducer';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 
-const getFiltersUrlQuery = (query, listName) => {
-  if (!listName) return query;
-  const updatedQuery = {};
-  const listKey = `pb[${listName}]`;
-  Object.keys(query).forEach(queryKey => {
-    const isListKey = queryKey.indexOf(`${listName}`) !== -1;
-    if (!isListKey) return;
-    const decodedQueryValue = Array.isArray(query[queryKey])
-      ? query[queryKey].map(value => decodeURIComponent(value))
-      : decodeURIComponent(query[queryKey]);
-    const strippedKey = queryKey.substring(listKey.length + 1, queryKey.length - 1);
-    if (isListKey) updatedQuery[strippedKey] = decodedQueryValue;
-  });
-
-  return updatedQuery;
-};
-
 const SearchFilterContainer = ({
   entity,
   url,
@@ -65,15 +49,20 @@ const SearchFilterContainer = ({
   const [urlPath, setUrlPath] = useState(asPath); // used as asPath can take too long to update
   const [filterValues, dispatch] = useReducer(searchFilterReducer, null);
   const { url: currentUrl, query } = parseUrl(urlPath);
-  const updatedQuery = getFiltersUrlQuery(query, listComponentName);
+  const updatedQuery = buildListNameQuery(query, listComponentName);
   const { itemId: parentId, itemEntity: parentEntity } = parent;
 
   useEffect(
     () => {
-      if (asPath) setUrlPath(asPath);
+      if (!asPath) return;
+      const { query: newQuery } = parseUrl(asPath);
+      const asPathQuery = buildListNameQuery(newQuery, listComponentName);
+      if (asPathQuery) dispatch({ newValues: asPathQuery, shouldSearch: false, type: 'update' });
+      setUrlPath(asPath);
     },
-    [asPath]
+    [asPath, listComponentName]
   );
+
   const { data: mainSchemas = {}, loading: schemasLoading } = useGetEntitySchemasAsObj([
     parentEntity,
     entity

package/src/components/SearchFilter/helpers/build-list-name-query.js

@@ -0,0 +1,18 @@
+const buildListNameQuery = (query, listName) => {
+  if (!listName) return query;
+  const updatedQuery = {};
+  const listKey = `pb[${listName}]`;
+  Object.keys(query).forEach(queryKey => {
+    const isListKey = queryKey.indexOf(`${listName}`) !== -1;
+    if (!isListKey) return;
+    const decodedQueryValue = Array.isArray(query[queryKey])
+      ? query[queryKey].map(value => decodeURIComponent(value))
+      : decodeURIComponent(query[queryKey]);
+    const strippedKey = queryKey.substring(listKey.length + 1, queryKey.length - 1);
+    if (isListKey) updatedQuery[strippedKey] = decodedQueryValue;
+  });
+
+  return updatedQuery;
+};
+
+export default buildListNameQuery;

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

@@ -1,3 +1,4 @@
+import buildListNameQuery from './build-list-name-query';
 import buildNewUrl from './build-new-url';
 import { decodeValue, encodeValue } from './decode-encode';
 import checkIfRangeUpdated from './check-if-range-updated';
@@ -16,6 +17,7 @@ import getUpdatedFilterBy from './get-updated-filter-by';
 import buildUrlQuery from './build-url-query';
 
 export {
+  buildListNameQuery,
   buildNewUrl,
   decodeValue,
   encodeValue,

package/src/components/Video/VideoModal.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Modal from '@blaze-react/modal';
+import Modal from '../ModalAdapter';
 import VideoRender from './VideoRender';
 
 const VideoModal = ({ ...props }) => {

package/src/helpers/build-filters-query.js

@@ -32,7 +32,6 @@ const builFilterObject = ({ queryKey, value, filters, isRange, isInQuery }) => {
 
 const buildFiltersQuery = ({
   shouldAddFilters,
-
   filterBy,
   filterByProperty,
   rangeValues,

package/src/hooks/index.js

@@ -7,3 +7,4 @@ export { default as useGetSingleEntitySchema } from './use-get-single-entity-sch
 export { default as useCheckMobileScreen } from './use-check-mobile-screen';
 export { default as useBannerInsertion } from './use-banner-insertion';
 export { default as useAppSyncEventHook } from './use-app-sync-event-hook';
+export { default as usePortal } from './use-portal';

package/src/hooks/use-portal.js

@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react';
+
+function usePortal() {
+  const rootElemRef = React.useRef(document.createElement('div'));
+
+  useEffect(() => {
+    document.body.appendChild(rootElemRef.current);
+
+    const element = rootElemRef.current;
+    return function removeElement() {
+      element.remove();
+    };
+  }, []);
+
+  return rootElemRef.current;
+}
+
+export default usePortal;

package/tests/unit/src/components/Image/Lightbox/Lightbox.test.js

@@ -10,6 +10,10 @@ jest.mock('../../../../../../src/components/Banner', () =>
   jest.fn().mockImplementation(() => <span>Banner</span>)
 );
 
+jest.mock('../../../../../../src/components/ModalAdapter', () =>
+  jest.fn().mockImplementation(({ children }) => children)
+);
+
 const mockProps = {
   imageUrl: 'some-url',
   altTxt: 'atl text',

package/tests/unit/src/components/Image/Lightbox/__snapshots__/Lightbox.test.js.snap

@@ -3,48 +3,13 @@
 exports[`LightBox component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="overlay"
-  />
-  <div
-    class=" modal modal--show modal--full-screen"
+    class="row row--display-row"
   >
     <div
-      class="modal__header"
-    >
-      <div
-        class="modal__title"
-      />
-      <div
-        class="modal__close"
-        role="button"
-      >
-        <i
-          class="material-icons"
-        >
-          close
-        </i>
-      </div>
-    </div>
-    <div
-      class="modal__content"
-    >
-      <div
-        class="row row--display-row"
-      >
-        <div
-          class="column column--two-thirds"
-        >
-          <div
-            class="image"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="modal__footer"
+      class="column column--two-thirds"
     >
       <div
-        class="modal__button"
+        class="image"
       />
     </div>
   </div>

package/tests/unit/src/components/Modal/Modal.test.js

@@ -19,6 +19,10 @@ const props = {
   ]
 };
 
+jest.mock('../../../../../src/components/ModalAdapter', () =>
+  jest.fn().mockImplementation(({ children }) => children)
+);
+
 describe('Modal component', () => {
   it('should be defined', () => {
     expect(Modal).toBeDefined();

package/tests/unit/src/components/Modal/__snapshots__/Modal.test.js.snap

@@ -3,50 +3,15 @@
 exports[`Modal component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="overlay"
-  />
+    class="child_1"
+  >
+    some stuff
+  </div>
   <div
-    class=" modal modal--show"
+    class="child_2"
+    modifier="child-modi"
   >
-    <div
-      class="modal__header"
-    >
-      <div
-        class="modal__title"
-      />
-      <div
-        class="modal__close"
-        role="button"
-      >
-        <i
-          class="material-icons"
-        >
-          close
-        </i>
-      </div>
-    </div>
-    <div
-      class="modal__content"
-    >
-      <div
-        class="child_1"
-      >
-        some stuff
-      </div>
-      <div
-        class="child_2"
-        modifier="child-modi"
-      >
-        another child
-      </div>
-    </div>
-    <div
-      class="modal__footer"
-    >
-      <div
-        class="modal__button"
-      />
-    </div>
+    another child
   </div>
 </DocumentFragment>
 `;

package/tests/unit/src/components/SearchFilter/__snapshots__/SearchFilterContainer.test.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SearchFilter container should match snapshot 1`] = `<DocumentFragment />`;
+exports[`SearchFilter container should match snapshot 1`] = `
+<DocumentFragment>
+  <div>
+    Mocked component
+  </div>
+</DocumentFragment>
+`;
 
 exports[`SearchFilter container should return null if no filters are passed 1`] = `<DocumentFragment />`;