@blaze-cms/react-page-builder 0.146.0-alpha.57 → 0.146.0-alpha.65

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

@@ -15,90 +15,93 @@ const FiltersList = ({
 }) => {
   const { itemId } = useContext(MainContext);
 
-  return filters.map(({ type, label, propsToDisplay, elementTitle, ...otherProps }, index) => {
-    if (!propsToDisplay && !propsToDisplay.length) return null;
-    const dynamicKey = [itemId, index].join('-');
-    const isDataAvailable = !!data && Object.keys(data).length;
-    const dataAggregations = isDataAvailable ? data : null;
-    const areAggregationsAvailable = isDataAvailable && !!dataAggregations;
+  return filters.map(
+    ({ type, label, propsToDisplay, elementTitle, unit, ...otherProps }, index) => {
+      if (!propsToDisplay && !propsToDisplay.length) return null;
+      const dynamicKey = [itemId, index].join('-');
+      const isDataAvailable = !!data && Object.keys(data).length;
+      const dataAggregations = isDataAvailable ? data : null;
+      const areAggregationsAvailable = isDataAvailable && !!dataAggregations;
 
-    switch (type) {
-      case TEXT_SEARCH:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--search">
-            <TextSearch
-              {...otherProps}
-              label={label}
-              elementTitle={elementTitle}
-              searchValue={filterValues[SEARCH_TERM]}
-              updateFilterValues={updateFilterValues}
-              filterValues={filterValues}
-            />
-          </div>
-        );
-
-      case CHECKBOX:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--checkboxes">
-            <Checkbox
-              {...otherProps}
-              data={data}
-              prop={propsToDisplay[0]}
-              label={label}
-              elementTitle={elementTitle}
-              hasUrl={hasUrl}
-              filterValues={filterValues}
-              updateFilterValues={updateFilterValues}
-              shouldSearch={shouldSearch}
-            />
-          </div>
-        );
+      switch (type) {
+        case TEXT_SEARCH:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--search">
+              <TextSearch
+                {...otherProps}
+                label={label}
+                elementTitle={elementTitle}
+                searchValue={filterValues[SEARCH_TERM]}
+                updateFilterValues={updateFilterValues}
+                filterValues={filterValues}
+              />
+            </div>
+          );
 
-      case SELECT:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--selects">
-            <SelectFilter
-              {...otherProps}
-              data={data}
-              prop={propsToDisplay[0]}
-              label={label}
-              elementTitle={elementTitle}
-              hasUrl={hasUrl}
-              filterValues={filterValues}
-              updateFilterValues={updateFilterValues}
-              shouldSearch={shouldSearch}
-            />
-          </div>
-        );
+        case CHECKBOX:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--checkboxes">
+              <Checkbox
+                {...otherProps}
+                data={data}
+                prop={propsToDisplay[0]}
+                label={label}
+                elementTitle={elementTitle}
+                hasUrl={hasUrl}
+                filterValues={filterValues}
+                updateFilterValues={updateFilterValues}
+                shouldSearch={shouldSearch}
+              />
+            </div>
+          );
 
-      case RANGE:
-        return (
-          !!areAggregationsAvailable && (
-            <div key={dynamicKey} className="range-slider__wrapper">
-              <Range
+        case SELECT:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--selects">
+              <SelectFilter
                 {...otherProps}
-                dataAggregations={dataAggregations}
-                propsToDisplay={propsToDisplay}
+                data={data}
+                prop={propsToDisplay[0]}
                 label={label}
                 elementTitle={elementTitle}
-                entity={entity}
+                hasUrl={hasUrl}
                 filterValues={filterValues}
                 updateFilterValues={updateFilterValues}
                 shouldSearch={shouldSearch}
               />
             </div>
-          )
-        );
-      default:
-        return null;
+          );
+
+        case RANGE:
+          return (
+            !!areAggregationsAvailable && (
+              <div key={dynamicKey} className="range-slider__wrapper">
+                <Range
+                  {...otherProps}
+                  dataAggregations={dataAggregations}
+                  propsToDisplay={propsToDisplay}
+                  label={label}
+                  elementTitle={elementTitle}
+                  unit={unit}
+                  entity={entity}
+                  filterValues={filterValues}
+                  updateFilterValues={updateFilterValues}
+                  shouldSearch={shouldSearch}
+                />
+              </div>
+            )
+          );
+        default:
+          return null;
+      }
     }
-  });
+  );
 };
 
 FiltersList.propTypes = {

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

@@ -18,7 +18,8 @@ const Range = ({
   updateFilterValues,
   filterValues,
   shouldSearch,
-  elementTitle
+  elementTitle,
+  unit
 }) => {
   const router = useRouter();
   const debounceAmount = shouldSearch ? 1200 : 400;
@@ -48,6 +49,11 @@ const Range = ({
     updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);
   }, debounceAmount);
 
+  let displayLabel = '';
+  if (!hasMultipleOptions) {
+    displayLabel = unit ? `${label} (${unit})` : label;
+  }
+
   return (
     <>
       {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
@@ -75,7 +81,7 @@ const Range = ({
       <RangeFilter
         key={`${rangeOption}-${minValue}-${maxValue}`}
         name={rangeOption}
-        label={hasMultipleOptions ? '' : label}
+        label={displayLabel}
         value={valueToUse}
         id={rangeOption}
         onChange={({ value }) => {
@@ -95,14 +101,16 @@ Range.propTypes = {
   rangeInterval: PropTypes.number,
   label: PropTypes.string,
   elementTitle: PropTypes.string,
-  dataAggregations: PropTypes.object.isRequired
+  dataAggregations: PropTypes.object.isRequired,
+  unit: PropTypes.string
 };
 
 Range.defaultProps = {
   shouldSearch: false,
   rangeInterval: 1,
   label: '',
-  elementTitle: ''
+  elementTitle: '',
+  unit: ''
 };
 
 export default Range;

package/src/hooks/use-app-sync-event-hook.js

@@ -1,18 +1,32 @@
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 import { AppContext } from '@blaze-cms/nextjs-components';
 
 const EVENET_PREFIX = 'plugin:page-builder:';
 const EVENET_SUFIX = ':sync';
 
-const useAppSyncEventHook = ({ eventName, data, props }) => {
+const useAppSyncEventHook = ({ eventName, data, props, returnFunction }) => {
   const { blazeApp } = useContext(AppContext);
+
+  const runHook = useCallback(
+    newData => {
+      const eventData = newData || data;
+      blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {
+        data: eventData,
+        props
+      });
+
+      return eventData;
+    },
+    [blazeApp, eventName, data, props]
+  );
+
   if (!blazeApp) return { data };
 
-  blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {
-    data,
-    props
-  });
+  if (returnFunction) {
+    return { data, runHook };
+  }
 
+  runHook();
   return { data };
 };
 

package/tests/unit/src/components/SearchFilter/components/Range.test.js

@@ -96,6 +96,16 @@ describe('Range component', () => {
     expect(component.toJSON()).toMatchSnapshot();
   });
 
+  it('should match snapshot with unit prop', async () => {
+    const mockedProps = getMockedProps({
+      unit: 'm'
+    });
+    const component = await getMockedProvider(Range, {
+      props: { ...mockedProps }
+    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
   it('should match snapshot with adjusted min & max values based on interval', async () => {
     const mockedProps = getMockedProps({
       dataAggregations: {

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

@@ -249,3 +249,53 @@ Array [
   </div>,
 ]
 `;
+
+exports[`Range component should match snapshot with unit prop 1`] = `
+Array [
+  "",
+  <div
+    className="form-field form-field--range "
+  >
+    <label
+      className=""
+    >
+      GLabel (m)
+    </label>
+    <div
+      className="values"
+    >
+      <span>
+        0
+      </span>
+      <span>
+        6600
+      </span>
+    </div>
+    <div
+      className="range__filter name"
+      id="nameRange"
+      max={6600}
+      max-value={6600}
+      min={0}
+      min-value={0}
+      step={100}
+    >
+      <div
+        className="range__filter--left"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--right"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--line"
+      >
+        <span />
+      </div>
+    </div>
+  </div>,
+]
+`;

package/tests/unit/src/hooks/use-app-sync-evet-hook.test.js

@@ -4,17 +4,21 @@ import { AppContext } from '@blaze-cms/nextjs-components';
 import { useAppSyncEventHook } from '../../../../src/hooks';
 
 describe('useAppSyncEventHook', () => {
-  test('should emit event with correct event name and data', () => {
-    const blazeAppMock = {
-      events: {
-        emit: jest.fn()
-      }
-    };
+  const eventName = 'testEvent';
+  const data = { key: 'value' };
+  const props = { someProp: 'value' };
+
+  const blazeAppMock = {
+    events: {
+      emit: jest.fn()
+    }
+  };
 
-    const eventName = 'testEvent';
-    const data = { key: 'value' };
-    const props = { someProp: 'value' };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
+  test('should emit event with correct event name and data', () => {
     const wrapper = ({ children }) => (
       <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
     );
@@ -31,15 +35,31 @@ describe('useAppSyncEventHook', () => {
     expect(result.current.data).toEqual(data);
   });
 
-  test('should return correct data', () => {
-    const blazeAppMock = {
-      events: {
-        emit: jest.fn()
+  test('should not emit event on render when using returnFunction', () => {
+    const wrapper = ({ children }) => (
+      <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
+    );
+
+    const { result } = renderHook(
+      () => useAppSyncEventHook({ eventName, data, props, returnFunction: true }),
+      {
+        wrapper
       }
-    };
+    );
 
-    const data = { key: 'value' };
+    expect(blazeAppMock.events.emit).not.toHaveBeenCalled();
 
+    result.current.runHook();
+
+    expect(blazeAppMock.events.emit).toHaveBeenCalledWith(`plugin:page-builder:${eventName}:sync`, {
+      data,
+      props
+    });
+
+    expect(result.current.data).toEqual(data);
+  });
+
+  test('should return correct data', () => {
     const wrapper = ({ children }) => (
       <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
     );