force default pointer events when search enabled

Author: Maciej Warszawski

integration/index.tsx

@@ -106,7 +106,7 @@ namespace App {
 ReactDom.render(
   <App languages={['en', 'pl']}>
     <IntlNamespaceProvider namespace="App">
-      <div style={{ margin: '20px' }}>
+      <div style={{ margin: '20px', pointerEvents: 'none' }}>
         <Component1 />
         <FormattedMessage id="main-section" defaultMessage="App main section" />
         <div>

packages/react-intl-namespaces-locize-editor/src/Components/Editor.css

@@ -0,0 +1,3 @@
+body.searchEnabled * {
+  pointer-events: auto !important;
+}

packages/react-intl-namespaces-locize-editor/src/Components/Editor.test.tsx

@@ -33,11 +33,18 @@ const options: Editor.RequiredProps = {
 };
 describe('Editor', () => {
   function createMocks() {
+    const ClassListMock = jest.fn(() => ({
+      add: jest.fn(),
+      remove: jest.fn(),
+    }));
+    const classListMock = new ClassListMock();
+
     const BodyMock = jest.fn<HTMLBodyElement>(() => ({
       addEventListener: jest.fn((type, listener) =>
         document.body.addEventListener(type, listener),
       ),
       appendChild: jest.fn(newChild => document.body.appendChild(newChild)),
+      classList: classListMock,
       removeChild: jest.fn(oldChild => document.body.removeChild(oldChild)),
       removeEventListener: jest.fn((type, ev, options) =>
         document.body.removeEventListener(type, ev, options),

packages/react-intl-namespaces-locize-editor/src/Components/Editor.tsx

@@ -6,6 +6,8 @@ import { DOMHelpers } from '../DOMHelpers';
 import { EditorPanel } from './EditorPanel';
 import { EditorWindow } from './EditorWindow';
 
+import styles from './Editor.css';
+
 export class Editor extends React.Component<
   Editor.RequiredProps & Partial<Editor.OptionalProps>
 > {
@@ -18,13 +20,13 @@ export class EditorComponent extends React.Component<
   Editor.State
 > {
   private message: (ev: MessageEvent) => void;
-  // prettier-ignore
+
   private keypress: (ev: KeyboardEvent) => void;
-  // prettier-ignore
+
   private click: (e: MouseEvent) => void;
+
   // prettier-ignore
   private postMessage!: Promise<EditorWindow.PostMessage>;
-  // prettier-ignore
 
   private editor: HTMLElement;
 
@@ -53,6 +55,7 @@ export class EditorComponent extends React.Component<
         this.onToggleSearch();
       }
     };
+    this.setSearchDomState(this.state.searchEnabled);
 
     this.editor = DOMHelpers.Editor.createTargetElement(
       this.props.document,
@@ -101,8 +104,17 @@ export class EditorComponent extends React.Component<
     );
   }
   private onTogglePinned() {
-    this.setState({ pinned: !this.state.pinned });
+    const pinned = !this.state.pinned;
+    this.setState({ pinned });
+  }
+  private setSearchDomState(searchEnabled: boolean) {
+    DOMHelpers.Editor.toggleClass(
+      this.props.document.body,
+      searchEnabled,
+      styles.searchEnabled,
+    );
   }
+
   private onShowIds() {
     const { showIds: oldShowIds, ...rest } = this.state;
     const showIds = !oldShowIds;
@@ -156,8 +168,10 @@ export class EditorComponent extends React.Component<
   }
 
   private onToggleSearch() {
-    const { searchEnabled } = this.state;
-    this.setState({ searchEnabled: !searchEnabled });
+    const searchEnabled = !this.state.searchEnabled;
+    this.setState({ searchEnabled });
+
+    this.setSearchDomState(searchEnabled);
   }
   private onRefresh() {
     this.props.onRefresh();

packages/react-intl-namespaces-locize-editor/src/Components/__snapshots__/Editor.test.tsx.snap

@@ -47,6 +47,22 @@ Object {
           ],
         ],
       },
+      "classList": Object {
+        "add": [MockFunction] {
+          "calls": Array [
+            Array [
+              "searchEnabled",
+            ],
+          ],
+        },
+        "remove": [MockFunction] {
+          "calls": Array [
+            Array [
+              "searchEnabled",
+            ],
+          ],
+        },
+      },
       "removeChild": [MockFunction] {
         "calls": Array [
           Array [
@@ -149,6 +165,16 @@ Object {
           ],
         ],
       },
+      "classList": Object {
+        "add": [MockFunction] {
+          "calls": Array [
+            Array [
+              "searchEnabled",
+            ],
+          ],
+        },
+        "remove": [MockFunction],
+      },
       "removeChild": [MockFunction] {
         "calls": Array [
           Array [

packages/react-intl-namespaces-locize-editor/src/DOMHelpers.ts

@@ -6,6 +6,17 @@ function delay(timeout: number = 0) {
 
 export namespace DOMHelpers {
   export namespace Editor {
+    export function toggleClass(
+      element: HTMLElement,
+      state: boolean,
+      cssClass: string,
+    ) {
+      if (state) {
+        element.classList.add(cssClass);
+      } else {
+        element.classList.remove(cssClass);
+      }
+    }
     export function createTargetElement(document: Document, id: string) {
       let editor = document.getElementById(id);
       if (editor == null) {