@gm-pc/react 1.27.0 → 1.27.1-beta.0

package/src/component/uploader/types.ts

@@ -1,25 +1,25 @@
-import { ChangeEvent, CSSProperties, DragEvent } from 'react'
-import { FlexProps } from '../flex'
-
-interface UploaderFile extends File {
-  preview: string
-}
-
-interface UploaderProps {
-  onUpload(
-    files: UploaderFile[],
-    event: ChangeEvent<HTMLInputElement> | DragEvent<HTMLInputElement>
-  ): void
-  disabled?: boolean
-  accept?: string
-  multiple?: boolean
-  className?: string
-  style?: CSSProperties
-}
-
-// FlexProps 有待考虑
-type DefaultContainerProps = FlexProps
-
-type DefaultImageProps = DefaultContainerProps
-
-export type { UploaderProps, UploaderFile, DefaultContainerProps, DefaultImageProps }
+import { ChangeEvent, CSSProperties, DragEvent } from 'react'
+import { FlexProps } from '../flex'
+
+interface UploaderFile extends File {
+  preview: string
+}
+
+interface UploaderProps {
+  onUpload(
+    files: UploaderFile[],
+    event: ChangeEvent<HTMLInputElement> | DragEvent<HTMLInputElement>
+  ): void
+  disabled?: boolean
+  accept?: string
+  multiple?: boolean
+  className?: string
+  style?: CSSProperties
+}
+
+// FlexProps 有待考虑
+type DefaultContainerProps = FlexProps
+
+type DefaultImageProps = DefaultContainerProps
+
+export type { UploaderProps, UploaderFile, DefaultContainerProps, DefaultImageProps }

package/src/component/uploader/uploader.tsx

@@ -1,62 +1,62 @@
-import React, { ChangeEvent, FC, useCallback, useRef, DragEvent } from 'react'
-import { is } from '@gm-common/tool'
-import classNames from 'classnames'
-import { UploaderFile, UploaderProps } from './types'
-import DefaultContainer from './default_container'
-
-const Uploader: FC<UploaderProps> = ({
-  onUpload,
-  accept,
-  multiple,
-  className,
-  children,
-  disabled,
-  ...rest
-}) => {
-  const refInput = useRef<HTMLInputElement>(null)
-
-  const handleClick = useCallback((): void => {
-    if (disabled) {
-      return
-    }
-    refInput.current!.click()
-  }, [disabled])
-
-  const handleUpload = useCallback(
-    (event: ChangeEvent<HTMLInputElement> | DragEvent<HTMLInputElement>) => {
-      event.preventDefault()
-
-      const uploadFiles = (event as DragEvent<HTMLInputElement>).dataTransfer
-        ? (event as DragEvent<HTMLInputElement>).dataTransfer.files
-        : (event as ChangeEvent<HTMLInputElement>).target.files!
-      const files: UploaderFile[] = Array.from(uploadFiles).map((file) =>
-        Object.assign(file, { preview: window.URL.createObjectURL(file) })
-      )
-      onUpload(files, event)
-
-      // @ts-ignore
-      event.target.value = ''
-    },
-    [onUpload]
-  )
-
-  return (
-    <div
-      {...rest}
-      className={classNames('gm-uploader', { disabled }, className)}
-      onClick={handleClick}
-    >
-      {children ?? <DefaultContainer />}
-      <input
-        ref={refInput}
-        type='file'
-        className='gm-uploader-input'
-        multiple={!is.weixin() && multiple}
-        accept={accept}
-        onChange={handleUpload}
-      />
-    </div>
-  )
-}
-
-export default Uploader
+import React, { ChangeEvent, FC, useCallback, useRef, DragEvent } from 'react'
+import { is } from '@gm-common/tool'
+import classNames from 'classnames'
+import { UploaderFile, UploaderProps } from './types'
+import DefaultContainer from './default_container'
+
+const Uploader: FC<UploaderProps> = ({
+  onUpload,
+  accept,
+  multiple,
+  className,
+  children,
+  disabled,
+  ...rest
+}) => {
+  const refInput = useRef<HTMLInputElement>(null)
+
+  const handleClick = useCallback((): void => {
+    if (disabled) {
+      return
+    }
+    refInput.current!.click()
+  }, [disabled])
+
+  const handleUpload = useCallback(
+    (event: ChangeEvent<HTMLInputElement> | DragEvent<HTMLInputElement>) => {
+      event.preventDefault()
+
+      const uploadFiles = (event as DragEvent<HTMLInputElement>).dataTransfer
+        ? (event as DragEvent<HTMLInputElement>).dataTransfer.files
+        : (event as ChangeEvent<HTMLInputElement>).target.files!
+      const files: UploaderFile[] = Array.from(uploadFiles).map((file) =>
+        Object.assign(file, { preview: window.URL.createObjectURL(file) })
+      )
+      onUpload(files, event)
+
+      // @ts-ignore
+      event.target.value = ''
+    },
+    [onUpload]
+  )
+
+  return (
+    <div
+      {...rest}
+      className={classNames('gm-uploader', { disabled }, className)}
+      onClick={handleClick}
+    >
+      {children ?? <DefaultContainer />}
+      <input
+        ref={refInput}
+        type='file'
+        className='gm-uploader-input'
+        multiple={!is.weixin() && multiple}
+        accept={accept}
+        onChange={handleUpload}
+      />
+    </div>
+  )
+}
+
+export default Uploader

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

@@ -1,7 +1,7 @@
-import { createContext } from 'react'
-import VBrowser from '../v_browser'
-
-const BrowserContext = createContext<VBrowser>(undefined as any)
-BrowserContext.displayName = 'VBrowserContext'
-
-export default BrowserContext
+import { createContext } from 'react'
+import VBrowser from '../v_browser'
+
+const BrowserContext = createContext<VBrowser>(undefined as any)
+BrowserContext.displayName = 'VBrowserContext'
+
+export default BrowserContext

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)
-BrowserWindowContext.displayName = 'VBrowserWindowContext'
-
-export default BrowserWindowContext
+import { createContext } from 'react'
+import { VBrowserWindow } from '../types'
+
+const BrowserWindowContext = createContext<VBrowserWindow>(undefined as any)
+BrowserWindowContext.displayName = 'VBrowserWindowContext'
+
+export default BrowserWindowContext

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

@@ -1,53 +1,53 @@
-import { reaction } from 'mobx'
-import React, { useEffect, useContext, useRef } from 'react'
-import BrowserContext from '../context/browser'
-import BrowserWindowContext from '../context/browserWindow'
-
-type Noop = () => void
-/**
- * 多窗口中的子页面组件因为被缓存，原来的useEffect受到影响： effect仅在子窗口创建时触发，销毁函数仅在窗口关闭时触发；子窗口失活时依然会观察deps，并触发effect；
- *
- * 根据情况可以考虑使用useWindowEffect来替换useEffect，功能： 窗口激活时、deps更新时，触发fn执行； 窗口失活时执行fn返回的销毁函数； 如果子窗口为失活状态，不观察deps的更新；
- *
- */
-export default function useWindowEffect(fn: () => Noop | void, deps: Array<any> = []) {
-  const browser = useContext(BrowserContext)
-  /** hook所在窗口 */
-  const browserWindow = useContext(BrowserWindowContext)
-  const cb = useRef<Noop | void>()
-
-  useEffect(() => {
-    if (!browser || !browserWindow) {
-      console.warn('useWindowEffect需要在VBrowser中使用, 否则将回退到useEffect')
-      cb.current = fn()
-      return cb.current
-    }
-
-    const alive = browserWindow.path === browser.activeWindow?.path
-    if (!alive) return
-
-    // 激活\失活
-    const dispose = reaction(
-      () => browser.activeWindow,
-      (cur, pre) => {
-        if (pre?.path !== browserWindow.path && cur?.path !== browserWindow.path) {
-          return
-        }
-        const activate = cur?.path === browserWindow.path
-        const deactivate = pre?.path === browserWindow.path
-        if (activate) {
-          cb.current = fn()
-        }
-        if (deactivate) {
-          cb.current && cb.current()
-        }
-      }
-      // { fireImmediately: true }
-    )
-    cb.current = fn()
-    return () => {
-      dispose()
-      cb.current && cb.current()
-    }
-  }, deps)
-}
+import { reaction } from 'mobx'
+import React, { useEffect, useContext, useRef } from 'react'
+import BrowserContext from '../context/browser'
+import BrowserWindowContext from '../context/browserWindow'
+
+type Noop = () => void
+/**
+ * 多窗口中的子页面组件因为被缓存，原来的useEffect受到影响： effect仅在子窗口创建时触发，销毁函数仅在窗口关闭时触发；子窗口失活时依然会观察deps，并触发effect；
+ *
+ * 根据情况可以考虑使用useWindowEffect来替换useEffect，功能： 窗口激活时、deps更新时，触发fn执行； 窗口失活时执行fn返回的销毁函数； 如果子窗口为失活状态，不观察deps的更新；
+ *
+ */
+export default function useWindowEffect(fn: () => Noop | void, deps: Array<any> = []) {
+  const browser = useContext(BrowserContext)
+  /** hook所在窗口 */
+  const browserWindow = useContext(BrowserWindowContext)
+  const cb = useRef<Noop | void>()
+
+  useEffect(() => {
+    if (!browser || !browserWindow) {
+      console.warn('useWindowEffect需要在VBrowser中使用, 否则将回退到useEffect')
+      cb.current = fn()
+      return cb.current
+    }
+
+    const alive = browserWindow.path === browser.activeWindow?.path
+    if (!alive) return
+
+    // 激活\失活
+    const dispose = reaction(
+      () => browser.activeWindow,
+      (cur, pre) => {
+        if (pre?.path !== browserWindow.path && cur?.path !== browserWindow.path) {
+          return
+        }
+        const activate = cur?.path === browserWindow.path
+        const deactivate = pre?.path === browserWindow.path
+        if (activate) {
+          cb.current = fn()
+        }
+        if (deactivate) {
+          cb.current && cb.current()
+        }
+      }
+      // { fireImmediately: true }
+    )
+    cb.current = fn()
+    return () => {
+      dispose()
+      cb.current && cb.current()
+    }
+  }, deps)
+}

package/src/component/v_browser/index.ts

@@ -1,4 +1,4 @@
-export { default as VBrowser } from './v_browser'
-export { default as IframePortal } from './ui/iframe_portal'
-export type { VBrowserProps } from './types'
-export { default as useWindowEffect } from './hooks/useWindowEffect'
+export { default as VBrowser } from './v_browser'
+export { default as IframePortal } from './ui/iframe_portal'
+export type { VBrowserProps } from './types'
+export { default as useWindowEffect } from './hooks/useWindowEffect'

package/src/component/v_browser/types.ts

@@ -1,46 +1,46 @@
-import { ReactNode } from 'react'
-
-export interface VBrowserWindow {
-  path: string
-  query?: { [key: string]: string }
-  /** 窗口图标 */
-  faviconURL?: string
-  /** 窗口名，如果不存在将尝试从vBrowser的autoTitle中取 */
-  title?: ReactNode | Element
-  /** 可否关闭，默认为true */
-  closeable?: boolean
-}
-
-export interface VBrowserProps {
-  /** 窗口数量限制 */
-  maxLength?: number
-  /** 准备就绪 */
-  onReady?: Function
-  /** 重新打开vBrowser时恢复已打开窗口, 默认为true */
-  restore?: boolean
-  /** 窗口变化事件 */
-  onChange?: (
-    from: VBrowserWindow | undefined,
-    to: VBrowserWindow,
-    windows: VBrowserWindow[]
-  ) => void
-  /** 窗口打开/切换前调用，返回false会阻止窗口打开/切换 */
-  auth?: (from?: VBrowserWindow, to?: VBrowserWindow) => Promise<boolean> | boolean
-  /**
-   * 错误码参考
-   * code: 0, message: '超过最大允许的窗口数量'
-   */
-  onError?: (error: { code: number; message: string }) => void
-  /** 打开窗口如果没有传入标题，则使用此方法取标题 */
-  autoTitle?: (path: string) => string
-  /** 不以子窗口形式展示的页面名单（视觉上）, 这些页面会子窗口形式打开，但是视觉上会隐藏子窗口标签栏，且在离开页面时自动close掉，以达到子页面不在vbrowser中的视觉效果 */
-  ignoredPath?: Array<string | RegExp>
-}
-
-export interface CacheItem {
-  vNode: JSX.Element & {
-    ref: {
-      current: HTMLDivElement | undefined
-    }
-  }
-}
+import { ReactNode } from 'react'
+
+export interface VBrowserWindow {
+  path: string
+  query?: { [key: string]: string }
+  /** 窗口图标 */
+  faviconURL?: string
+  /** 窗口名，如果不存在将尝试从vBrowser的autoTitle中取 */
+  title?: ReactNode | Element
+  /** 可否关闭，默认为true */
+  closeable?: boolean
+}
+
+export interface VBrowserProps {
+  /** 窗口数量限制 */
+  maxLength?: number
+  /** 准备就绪 */
+  onReady?: Function
+  /** 重新打开vBrowser时恢复已打开窗口, 默认为true */
+  restore?: boolean
+  /** 窗口变化事件 */
+  onChange?: (
+    from: VBrowserWindow | undefined,
+    to: VBrowserWindow,
+    windows: VBrowserWindow[]
+  ) => void
+  /** 窗口打开/切换前调用，返回false会阻止窗口打开/切换 */
+  auth?: (from?: VBrowserWindow, to?: VBrowserWindow) => Promise<boolean> | boolean
+  /**
+   * 错误码参考
+   * code: 0, message: '超过最大允许的窗口数量'
+   */
+  onError?: (error: { code: number; message: string }) => void
+  /** 打开窗口如果没有传入标题，则使用此方法取标题 */
+  autoTitle?: (path: string) => string
+  /** 不以子窗口形式展示的页面名单（视觉上）, 这些页面会子窗口形式打开，但是视觉上会隐藏子窗口标签栏，且在离开页面时自动close掉，以达到子页面不在vbrowser中的视觉效果 */
+  ignoredPath?: Array<string | RegExp>
+}
+
+export interface CacheItem {
+  vNode: JSX.Element & {
+    ref: {
+      current: HTMLDivElement | undefined
+    }
+  }
+}

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

@@ -1,28 +1,28 @@
-import React, { FC, useEffect, useState } from 'react'
-import { pages } from '../v_browser'
-
-interface IframePortalProps {}
-
-/**
- * 此组件使用在Switch中，用来访问任意子页面，子页面路径通过url参数path指定
- */
-const IframePortal: FC<IframePortalProps> = () => {
-  const [component, setComponent] = useState<JSX.Element | null>(null)
-
-  useEffect(() => {
-    const query = new URLSearchParams(location.href.split('?')[1] || '')
-    const path = query.get('path')
-    const page = pages.find((p) => p.path === path)
-    if (!page) throw new Error('[VWindow] page not found: ' + path)
-    page.loader().then((module) => {
-      const Component = module.default
-      setComponent(<Component />)
-      console.timeEnd('IframePortal')
-      return null
-    })
-  }, [])
-
-  return component
-}
-
-export default IframePortal
+import React, { FC, useEffect, useState } from 'react'
+import { pages } from '../v_browser'
+
+interface IframePortalProps {}
+
+/**
+ * 此组件使用在Switch中，用来访问任意子页面，子页面路径通过url参数path指定
+ */
+const IframePortal: FC<IframePortalProps> = () => {
+  const [component, setComponent] = useState<JSX.Element | null>(null)
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.href.split('?')[1] || '')
+    const path = query.get('path')
+    const page = pages.find((p) => p.path === path)
+    if (!page) throw new Error('[VWindow] page not found: ' + path)
+    page.loader().then((module) => {
+      const Component = module.default
+      setComponent(<Component />)
+      console.timeEnd('IframePortal')
+      return null
+    })
+  }, [])
+
+  return component
+}
+
+export default IframePortal