@gm-pc/react 1.11.1-beta.0 → 1.11.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.11.1-beta.0",
+  "version": "1.11.2-beta.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.11.1-beta.0",
+    "@gm-pc/locales": "^1.11.2-beta.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": "6aac986980cb2d9e2f32ac10171846f5b6beea41"
+  "gitHead": "7c8a96ed9ebd309ee37b5b29f69911541b0f788f"
 }

package/src/component/more_select/base.tsx

@@ -275,6 +275,13 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     )
   }
 
+  private _handleMoreSelectClick = () => {
+    const { onClick, selected } = this.props
+    if (typeof onClick === 'function') {
+      return onClick(selected)
+    }
+  }
+
   render() {
     const {
       isInPopup,
@@ -292,6 +299,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     return (
       <div
         ref={this._baseRef}
+        onClick={this._handleMoreSelectClick}
         className={classNames(
           'gm-more-select',
           {

package/src/component/more_select/more_select.tsx

@@ -73,6 +73,7 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
       multiple,
       isGroupList,
       onSearch,
+      onClick,
       renderListFilter,
       ...rest
     } = this.props
@@ -109,6 +110,7 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
     return (
       <MoreSelectBase<V>
         {...rest}
+        onClick={onClick}
         ref={this._moreSelectBaseRef}
         data={oData}
         selected={oSelected}

package/src/component/more_select/stories.tsx

@@ -95,6 +95,9 @@ const store = observable({
   setMulSelected(selected: any) {
     this.mulSelected = selected
   },
+  clickFn(selected: any) {
+    this.selected = selected
+  },
 })
 
 export const ComMoreSelect = () => (
@@ -249,6 +252,23 @@ export const ComMoreSelectWithMultipleByValue = () => (
     />
   </div>
 )
+
+export const ComMoreSelectClick = () => (
+  <>
+    <MoreSelect<number>
+      isGroupList
+      multiple
+      data={store.dataGroup.slice()}
+      onClick={store.clickFn}
+      selected={store.selected}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+    />
+    <div>{_.map(store.selected, (item) => item.text).join('')}</div>
+  </>
+)
+
 export const ComMoreSelectWithMultipleAndOnSearch = () => {
   return (
     <MoreSelect<number>

package/src/component/more_select/types.ts

@@ -70,6 +70,8 @@ interface MoreSelectBaseProps<V extends string | number = string>
 
   /** 搜索回调 */
   onSearch?(searchWord: string, data: MoreSelectGroupDataItem<V>[]): Promise<void> | void
+  /** 点击回调 */
+  onClick?(selected: MoreSelectSelected<V>[]): void
 
   /** 自定义搜索过滤展示的数据 */
   renderListFilter?(
@@ -94,6 +96,8 @@ interface MoreSelectProps<V extends string | number = string>
   onChange?(value: V | V[]): void
   /** 搜索回调 */
   onSearch?(searchWord: string, data: MoreSelectData<V>): Promise<void> | void
+  /** 点击回调 */
+  onClick?(selected: MoreSelectSelected<V>[]): void
 
   /** 自定义搜索过滤展示的数据 */
   renderListFilter?(data: MoreSelectData<V>, searchValue: string): MoreSelectData<V>

package/src/component/select/select.tsx

@@ -91,7 +91,6 @@ class Select<V = any> extends Component<SelectProps<V>, SelectState> {
       className,
       popoverType,
       isInPopup,
-      addonLast,
       ...rest
     } = this.props
     const { willActiveIndex } = this.state
@@ -109,26 +108,15 @@ class Select<V = any> extends Component<SelectProps<V>, SelectState> {
     const selected = newData.find((v) => v.value === value)
 
     const popup = (
-      <>
-        <List
-          data={newData}
-          selected={value}
-          onSelect={this._handleChange}
-          renderItem={renderItem}
-          willActiveIndex={willActiveIndex}
-          className='gm-border-0'
-          style={{ maxHeight: '250px' }}
-        />
-        {addonLast && (
-          <div
-            onClick={() => {
-              this._popupRef.current!.apiDoSetActive()
-            }}
-          >
-            {addonLast}
-          </div>
-        )}
-      </>
+      <List
+        data={newData}
+        selected={value}
+        onSelect={this._handleChange}
+        renderItem={renderItem}
+        willActiveIndex={willActiveIndex}
+        className='gm-border-0'
+        style={{ maxHeight: '250px' }}
+      />
     )
 
     // disabledClose 了，不会触发

package/src/component/select/types.ts

@@ -17,13 +17,6 @@ interface SelectProps<V> {
   className?: string
   style?: CSSProperties
   placeholder?: string
-  /**
-   * 在下拉选项最后自定义内容
-   *
-   * 注意：点击自定义内容时，会将浮层关闭。
-   * 你可以在自定义内容的事件处理函数中添加 `e.preventDefault()` 来阻止这个行为。
-   */
-  addonLast?: ReactNode
 }
 
 export type { SelectProps }

package/src/component/v_browser/types.ts

@@ -14,7 +14,7 @@ export interface VBrowserWindow {
 export interface VBrowserProps {
   /** 窗口数量限制 */
   maxLength?: number
-  /**  */
+  /** 准备就绪 */
   onReady?: Function
   /** 重新打开vBrowser时恢复已打开窗口, 默认为true */
   restore?: boolean
@@ -26,7 +26,12 @@ export interface VBrowserProps {
   ) => void
   /** 窗口打开/切换前调用，返回false会阻止窗口打开/切换 */
   auth?: (from?: VBrowserWindow, to?: VBrowserWindow) => Promise<boolean> | boolean
+  /**
+   * 错误码参考
+   * code: 0, message: '超过最大允许的窗口数量'
+   */
   onError?: (error: { code: number; message: string }) => void
+  /** 打开窗口如果没有传入标题，则使用此方法取标题 */
   autoTitle?: (path: string) => string
 }
 

package/src/component/v_browser/ui/style.less

@@ -18,7 +18,7 @@
     padding: 0 40px;
 
     &::-webkit-scrollbar {
-      display: none; /* for Chrome, Safari, and Opera */
+      display: none;
     }
 
     &-left,

package/src/component/v_browser/v_browser.stories.mdx

@@ -0,0 +1,126 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
+
+<Meta title='窗口/VBrowser(页签)' />
+
+# Vbrowser
+
+VBrowser 即虚拟浏览器，用以实现页签形式的多窗口管理。
+
+## 使用方式
+
+实例化一个 VBrowser, 接受以下参数：
+
+```
+import { VBrowser } from '@gm-pc/react'
+const vbrowser = new VBrowser({
+  /** 窗口数量限制 */
+  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
+})
+```
+
+vbrowser 暴露了以下属性和方法，详细信息见类型声明/代码提示：
+
+属性
+
+- `props`
+
+  实例化传入的参数，可以更改；
+
+- `windows`
+
+  已打开的窗口列表；
+
+- `activeIndex`
+
+  活动窗口索引；
+
+- `activeWindow`
+
+  活动窗口；
+
+- `ui`
+
+  UI 组件，放在页面要显示到的位置，只读；
+
+- `mounted`
+
+  `ui`是否已挂载；
+
+方法
+
+- `open`
+
+  打开窗口；
+
+- `close`
+
+  关闭窗口；
+
+- `switchWindow`
+
+  切换窗口；
+
+- `showTabs`
+
+  显示窗口管理栏；
+
+- `hideTabs`
+
+  隐藏窗口管理栏，可以用于进入全屏模式的场景；
+
+- `on`
+
+  事件监听, `'error' | 'change' | 'close' | 'show'`，分别对应错误、窗口切换、窗口关闭、窗口激活事件；
+
+- `off`
+
+  取消监听；
+
+## Hook 函数
+
+当前提供的 Hook 函数有：
+
+- `useWindowEffect`
+
+  使用方式同 `useEffect`，功能： 窗口激活时、deps 更新时，触发 fn 执行； 窗口失活时执行 fn 返回的销毁函数； 如果子窗口为失活状态，不观察 deps 的更新；
+
+## 路由跳转
+
+erp 中做了向后兼容，可以继续使用原有的`history.push`等方法来跳转页面，其会被表现为打开或切换子窗口，也可以直接使用上述 vbrowser 的方法来跳转页面；
+
+需要注意的是如果想在新浏览器窗口中打开某个页面，不建议使用`window.open`方法，`window.open`打开的浏览器窗口会加载缓存恢复 VBrowser 的子窗口，
+如果其行为不符合预期可以考虑传入 target 到 vbrowser.open 来打开新浏览器窗口：
+
+```
+vbrowser.open('/order/order_manage/create' , { target: '_blank' })
+```
+
+## 注意事项
+
+VBrowser 中打开的窗口中的组件，其生命周期会和预期略有不同：
+
+多窗口中的子页面组件因为被缓存，原来的 `useEffect` 受到影响，即 effect 仅在子窗口创建时触发，销毁函数仅在子窗口关闭时触发；子窗口失活时依然会观察 deps，并触发 effect;
+
+基本大多数情况下可以继续使用 `useEffect`，某些场景下则需要改用 `useWindowEffect`，比如
+
+- 希望窗口激活、失活时初始化数据；
+- 希望失活组件停止观察 useEffect 的 deps，比如在订单列表和商品列表页面都观察了`query.q`，那么订单列表页面的`query.q`变化后商品列表页面会做响应，这是没有必要的；

package/src/component/v_browser/v_browser.tsx

@@ -45,7 +45,7 @@ class VBrowser implements VBrowser {
 
   props!: VBrowserProps
 
-  /** 窗口列表 */
+  /** 子窗口列表 */
   windows: VBrowserWindow[] = []
   /** 选中窗口索引 */
   activeIndex = -1
@@ -73,7 +73,7 @@ class VBrowser implements VBrowser {
     this._stash()
   }
 
-  /** 打开新子窗口,路由已打开则判断query是否相等，相等则切换，不相等则销毁重新加载，未打开则新建子窗口
+  /** 打开新子窗口, 子窗口已存在则判断query是否相等，相等则切换，不相等则隐性销毁重新加载；子窗口不存在则新建子窗口；
    *
    * target为'_blank'时，新开浏览器窗口
    */
@@ -153,7 +153,7 @@ class VBrowser implements VBrowser {
     // #endregion
   }
 
-  /** 关闭窗口 */
+  /** 关闭子窗口 */
   close(i: number | VBrowserWindow) {
     if (typeof i !== 'number') {
       i = this.windows.findIndex((item) => item.path === (i as VBrowserWindow).path)

package/src/component/v_browser/stories.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { observable } from 'mobx'
-
-const store = observable({})
-
-export const ComSwitch = () => <div />
-
-export default {
-  title: '表单/V-Browser',
-}