changed overlaySwapper method

src/components/Layout/Overlay/components/layout/Primary.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import * as antd from 'antd'
 import { LeftOutlined } from 'components/Icons'
-import { Swapper } from '../../index.js'
 
 export interface overlay_primary_props {
     y?: number;
@@ -12,7 +11,12 @@ export interface overlay_primary_props {
     closable: boolean;
 }
 
-const renderExit = <antd.Button className={window.classToStyle("overlay_backButton")}type="ghost" icon={<LeftOutlined />} onClick={() => Swapper.closeAll()}> Back </antd.Button>
+const renderExit = <antd.Button
+    className={window.classToStyle("overlay_backButton")}
+    type="ghost"
+    icon={<LeftOutlined />}
+    onClick={() => window.overlaySwap.close()}
+> Back </antd.Button>
 
 const overlay_primary = (props: overlay_primary_props) => {
     const { fragment, mode, isMobile } = props

src/components/Layout/Overlay/index.js

@@ -7,36 +7,25 @@ import {
   Primary
 } from './components'
 
-export let Swapper = {
-  isOpen: (...props) => {
-    window.OverlayComponent.swap.isOpen(...props)
-  },
-  closeAll: (...props) => {
-    window.OverlayComponent.swap.closeAll(...props)
-  },
-  openFragment: (...props) => {
-    window.OverlayComponent.swap.openFragment(...props)
-  }
-}
-
 @connect(({ app }) => ({ app }))
 export default class Overlay extends React.Component {
   constructor(props) {
-    super(props);
+    super(props)
     this.state = {
       loading: true,
-    };
-    this.setWrapperRef = this.setWrapperRef.bind(this);
-    this.handleClickOutside = this.handleClickOutside.bind(this);
-    this.keydownFilter = this.keydownFilter.bind(this);
-    window.OverlayComponent = this;
+    }
+    this.setWrapperRef = this.setWrapperRef.bind(this)
+    this.handleClickOutside = this.handleClickOutside.bind(this)
+    this.keydownFilter = this.keydownFilter.bind(this)
+
+    window.overlaySwap = this.swap
   }
 
   swap = {
     isOpen: () => {
       return this.props.app.overlayActive
     },
-    closeAll: () => {
+    close: () => {
       this.props.dispatch({
         type: 'app/updateState',
         payload: {
@@ -45,7 +34,7 @@ export default class Overlay extends React.Component {
         },
       });
     },
-    openFragment: (payload) => {
+    open: (payload) => {
       if (!payload) return false;
       verbosity(['Dispatching fragment =>', payload])
       this.props.dispatch({
@@ -60,17 +49,16 @@ export default class Overlay extends React.Component {
 
   keydownFilter(event) {
     if (event.keyCode === 27) {
-      this.swap.closeAll()
+      this.swap.close()
     }
   }
 
   handleClickOutside(event) {
     if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
-      this.swap.closeAll()
+      this.swap.close()
     }
   }
 
-
   componentDidUpdate() {
     if (this.props.app.overlayElement) {
       document.addEventListener('keydown', this.keydownFilter, false)
@@ -79,14 +67,11 @@ export default class Overlay extends React.Component {
       document.removeEventListener('mousedown', this.handleClickOutside);
     }
   }
-  /**
-  * Set the wrapper ref
-  */
+
   setWrapperRef(node) {
     this.wrapperRef = node;
   }
 
-
   render() {
     const { overlayElement, overlayActive } = this.props.app
 

src/core/models/helpers/index.js

@@ -0,0 +1,9 @@
+export function goLive(payload) {
+    window.overlaySwap.open({
+        id: 'search',
+        mode: 'full',
+        element: <div>
+            SomeSomeSomeSomeSomeSomeSomeSomeSomeSome
+        </div>
+    })
+}

src/core/models/overlay/index.js

@@ -1,6 +1,7 @@
-
-import { Swapper } from 'components/Layout/Overlay'
-
-export function newSearch(payload){
-    Swapper.openFragment({ id: 'search', position: 'primary' ,mode: 'half', element: <div>NAH</div> })
-}
+export function newSearch(payload) {
+    window.overlaySwap.open({
+        id: 'search',
+        mode: 'half',
+        element: <div>NAH</div>
+    })
+}

src/theme/base/index.less

@@ -233,6 +233,8 @@ body {
 .app_overlay_content_body{
   height: 100%;
   width: 100%;
+  word-break: break-all;
+  
   > div {
     margin-bottom: 35px;
   }