@gm-pc/react 1.13.2 → 1.13.3-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.13.2",
+  "version": "1.13.3-alpha.0",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.13.2",
+    "@gm-pc/locales": "^1.13.3-alpha.0",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "eed0722555286fb4c48d77c9fe1082db7c6ffb7f"
+  "gitHead": "8f4025e778efd916867e985fd61ccdeaa842e441"
 }

package/src/component/v_browser/context/browserWindow.ts

@@ -1,7 +1,7 @@
 import { createContext } from 'react'
 import { VBrowserWindow } from '../types'
 
-const BrowserWindowContext = createContext<VBrowserWindow>(undefined as any)
+const BrowserWindowContext = createContext<string>(undefined as any)
 BrowserWindowContext.displayName = 'VBrowserWindowContext'
 
 export default BrowserWindowContext

package/src/component/v_browser/hooks/useWindowEffect.ts

@@ -12,8 +12,8 @@ type Noop = () => void
  */
 export default function useWindowEffect(fn: () => Noop | void, deps: Array<any>) {
   const browser = useContext(BrowserContext)
-  /** hook所在窗口 */
-  const browserWindow = useContext(BrowserWindowContext)
+  const path = useContext(BrowserWindowContext)
+  const browserWindow = browser.windows.find((w) => w.path === path)!
   const cb = useRef<Noop | void>()
 
   useEffect(() => {
@@ -37,21 +37,15 @@ export default function useWindowEffect(fn: () => Noop | void, deps: Array<any>)
         const deactivate = pre?.path === browserWindow.path
         if (activate) {
           cb.current = fn()
-          console.log('activate', browserWindow.path)
+          // console.log('activate', browserWindow.path)
         }
         if (deactivate) {
           cb.current && cb.current()
-          console.log('deactivate', browserWindow.path)
+          // console.log('deactivate', browserWindow.path)
         }
       }
-      // { fireImmediately: true }
     )
     cb.current = fn()
-    console.log('effect', browserWindow.path, deps)
-    return () => {
-      console.log('dispose', browserWindow.path)
-      dispose()
-      cb.current && cb.current()
-    }
+    return dispose
   }, deps)
 }

package/src/component/v_browser/types.ts

@@ -14,7 +14,7 @@ export interface VBrowserWindow {
 export interface VBrowserProps {
   /** 窗口数量限制 */
   maxLength?: number
-  /** 准备就绪 */
+  /** 准备就绪 (读取Storage) */
   onReady?: Function
   /** 重新打开vBrowser时恢复已打开窗口, 默认为true */
   restore?: boolean

package/src/component/v_browser/ui/index.tsx

@@ -64,7 +64,7 @@ const VBrowserContainer: FC<{ className?: string }> = observer(
       createPortal(
         pages.map((page, i) => {
           return (
-            <BrowserWindowContext.Provider key={i} value={page}>
+            <BrowserWindowContext.Provider key={i} value={page.path}>
               <WindowWrapper key={i} path={page.path} />
             </BrowserWindowContext.Provider>
           )

package/src/component/v_browser/ui/window_wrapper.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable dot-notation */
 import { get } from 'lodash'
 import { observer } from 'mobx-react'
-import React, { createRef, FC, useContext, useEffect } from 'react'
+import React, { createRef, FC, lazy, Suspense, useContext, useEffect } from 'react'
+import { Loading } from '../../loading'
 import { NProgress } from '../../n_progress'
 import BrowserContext from '../context/browser'
+import BrowserWindowContext from '../context/browserWindow'
 import { CacheItem } from '../types'
 import { pages } from '../v_browser'
 
@@ -34,27 +36,27 @@ const WindowWrapper: FC<WindowWrapperProps> = ({ path }) => {
       const page = pages.find((p) => p.path === path)
       if (!page) throw new Error('[VBrowser] page not found: ' + path)
 
-      NProgress.start()
-      page
-        .loader()
-        .then((module) => {
-          const Component = module.default
-          const vNode = (
-            <div
-              className='v-browser-window-content'
-              data-vbrowser-window={path}
-              ref={createRef()}
-            >
-              <Component />
-            </div>
-          ) as CacheItem['vNode']
-          browser['_setCache'](path, { vNode })
-          browser['_fire']('show', w!)
-          return null
-        })
-        .finally(() => {
-          NProgress.done()
-        })
+      const loading = (
+        <div className='tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center'>
+          <Loading size='24' />
+        </div>
+      )
+      const Component = lazy(page.loader)
+      const vNode = (
+        <div
+          className='v-browser-window-content'
+          data-vbrowser-window={path}
+          ref={createRef()}
+        >
+          {/* <BrowserWindowContext.Provider value={page.path}> */}
+          <Suspense fallback={loading}>
+            <Component />
+          </Suspense>
+          {/* </BrowserWindowContext.Provider> */}
+        </div>
+      ) as CacheItem['vNode']
+      browser['_setCache'](path, { vNode })
+      browser['_fire']('show', w!)
       return
     }
 

package/src/component/v_browser/v_browser.tsx

@@ -15,7 +15,7 @@ export const pages = req.keys().map((key) => {
   }
 })
 
-const STORAGE_KEY = 'vbrowser-cache'
+export const VBROWSER_STORAGE_KEY = 'gm_vbrowser-cache'
 
 type EventName = 'error' | 'change' | 'close' | 'show'
 
@@ -151,16 +151,18 @@ class VBrowser implements VBrowser {
     // #region 打开新浏览器窗口
     if (target === '_blank') {
       // 避免继承
-      const currentCache = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}')
+      const currentCache = JSON.parse(
+        sessionStorage.getItem(VBROWSER_STORAGE_KEY) || '{}'
+      )
       const newCache = { windows: [] as VBrowserWindow[], activeIndex: 0 }
       newCache.windows.push(...this.windows.filter((w) => !w.closeable))
       newCache.windows.push(w)
       newCache.activeIndex = newCache.windows.findIndex(
         (item) => item.path === (w as VBrowserWindow).path
       )
-      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(newCache))
+      sessionStorage.setItem(VBROWSER_STORAGE_KEY, JSON.stringify(newCache))
       window.open(`#${w.path}?${stringify(w.query || {})}`, '_blank')
-      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(currentCache))
+      sessionStorage.setItem(VBROWSER_STORAGE_KEY, JSON.stringify(currentCache))
     }
     // #endregion
   }
@@ -219,14 +221,14 @@ class VBrowser implements VBrowser {
       windows,
       activeIndex: this.activeIndex,
     })
-    sessionStorage.setItem(STORAGE_KEY, string)
+    sessionStorage.setItem(VBROWSER_STORAGE_KEY, string)
   }
 
   // 恢复已开窗口
   private async _loadStash() {
     await new Promise((resolve) => setTimeout(resolve, 100))
     const { windows = [], activeIndex = 0 } = JSON.parse(
-      sessionStorage.getItem(STORAGE_KEY) || '{}'
+      sessionStorage.getItem(VBROWSER_STORAGE_KEY) || '{}'
     )
     if (windows.length === 0) return
     this.windows = windows