@blaze-cms/react-page-builder 0.146.0-node18-core-styles-tooltips.5 → 0.146.0-node18-core-styles-tooltips.11

package/src/system-components/EditorMode/PbWrapper.js

@@ -0,0 +1,30 @@
+import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useMainContext } from '@blaze-cms/nextjs-components';
+import addEditorModeEventListeners from './helpers/add-editor-mode-event-listeners';
+import BlazeLogo from './BlazeLogo';
+
+const PbWrapper = ({ name, type = 'start' }) => {
+  const ref = useRef(null);
+  const [logoProps, setLogoProps] = useState(null);
+  const { debugOptions: { adminHref } = {} } = useMainContext();
+
+  useEffect(
+    () => {
+      const unmount = addEditorModeEventListeners({ ref, name, adminHref, type, setLogoProps });
+
+      return unmount;
+    },
+    [adminHref, name, type]
+  );
+
+  const TagName = `pb-wrapper-${type}`;
+  return (
+    <>
+      <TagName ref={ref} pb-component-name={name} />
+      {logoProps && createPortal(<BlazeLogo {...logoProps} />, document.body)}
+    </>
+  );
+};
+
+export default PbWrapper;

package/src/system-components/EditorMode/constants.js

@@ -0,0 +1,2 @@
+export const EDITOR_MODE_HIGHLIGHT_CLASS = 'blaze-pb-editor-highlight';
+export const EDITOR_MODE_ICON_CLASS = 'blaze-pb-editor-icon';

package/src/system-components/EditorMode/helpers/add-editor-mode-event-listeners.js

@@ -0,0 +1,83 @@
+import { getComponentId } from '../../../helpers';
+import { EDITOR_MODE_HIGHLIGHT_CLASS } from '../constants';
+
+const addEditorModeEventListeners = ({ ref, name, adminHref, type, setLogoProps }) => {
+  const listeners = [];
+
+  // ignore start tags and if parent not found
+  if (type !== 'end' || !ref.current || !ref.current.parentNode) return listeners;
+
+  const siblings = ref.current.parentNode.children;
+
+  const foundChildren = [];
+  let foundStart = false;
+  // eslint-disable-next-line no-restricted-syntax, no-unused-vars
+  for (const child of siblings) {
+    if (!foundStart) {
+      // find start tag
+      if (child.getAttribute('pb-component-name') === name) {
+        foundStart = true;
+      }
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    if (child === ref.current) {
+      // end tag found
+      break;
+    }
+
+    foundChildren.push(child); // all nodes between start and end tags - PB component nodes
+  }
+
+  const cleanUpFunctions = Object.values(siblings).map(childNode => {
+    const componentId = getComponentId(name);
+    const clickItemId = `click-${componentId}`;
+    const click = e => {
+      e.stopPropagation();
+      e.preventDefault();
+      window.open(`${adminHref}#${componentId}`, adminHref);
+    };
+    const mouseenter = e => {
+      document.querySelectorAll(`.${EDITOR_MODE_HIGHLIGHT_CLASS}`).forEach(node => {
+        node.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);
+      });
+      childNode.classList.add(EDITOR_MODE_HIGHLIGHT_CLASS);
+
+      setLogoProps({
+        id: clickItemId,
+        'aria-label': `Edit ${name}`,
+        childNode,
+        onclick: click
+      });
+    };
+    const mouseleave = e => {
+      childNode.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);
+      setLogoProps(null);
+    };
+
+    childNode.addEventListener('click', click); // todo: remove listener and trigger on icon click
+    childNode.addEventListener('mouseenter', mouseenter);
+    childNode.addEventListener('mouseleave', mouseleave);
+
+    listeners.push([childNode, { click, mouseenter, mouseleave }]);
+
+    const nodeCleanup = () => {
+      listeners.forEach(([, events]) => {
+        Object.entries(events).forEach(([event, handler]) => {
+          childNode.removeEventListener(event, handler);
+        });
+      });
+    };
+
+    return nodeCleanup;
+  });
+
+  const unmount = () => {
+    cleanUpFunctions.forEach(fn => fn());
+  };
+
+  return unmount;
+};
+
+export default addEditorModeEventListeners;

package/src/system-components/index.js

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export const PbWrapper = dynamic(() => import('./EditorMode/PbWrapper'));

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

@@ -96,6 +96,16 @@ describe('Range component', () => {
     expect(component).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

@@ -234,3 +234,53 @@ exports[`Range component should match snapshot with interval and rounded min & m
   </div>
 </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>
     );