@gm-pc/react 1.8.0-alpha.1 → 1.8.1-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.8.0-alpha.1",
+  "version": "1.8.1-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.8.0-alpha.1",
+    "@gm-pc/locales": "^1.8.1-alpha.0",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -46,5 +46,5 @@
     "react-dom": "^16.14.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "9bce7f92e1098221071c39a89a77d6080e5909b0"
+  "gitHead": "47f2c19560d4fb25c095d71310e0defab725f4a4"
 }

package/src/component/nav/nav_item.tsx

@@ -49,10 +49,6 @@ const NavItem: FC<NavItemProps> = ({
     setRect(null)
   }
 
-  const handlePushCreate = (data: NavDataLevel2) => {
-    onPushCreate(data)
-  }
-
   let iconE = icon
   if ((rect || active) && iconActive) {
     iconE = iconActive
@@ -85,7 +81,7 @@ const NavItem: FC<NavItemProps> = ({
               data={sub}
               selected={selected}
               onSelect={handleSelect}
-              onPushCreate={handlePushCreate}
+              onPushCreate={(data) => onPushCreate(data)}
             />
           )}
         </Portal>

package/src/component/nav/popup.tsx

@@ -22,15 +22,18 @@ const Popup: FC<PopupProps> = ({
     }
   }, [parentRect])
 
-  // 获取不同数量二级菜单的宽度
+  /**
+   * 在 对应的 div 设置了 最大宽度 900 px
+   * @description UI 图是超过五个换行, 现在无论多少模块都在一行, 根据UI图对宽度进行处理
+   * @param number 二级菜单的个数
+   * @returns popup 的宽度
+   */
   const setPopupWidth = (number: number): string => {
+    // 只有一个的基本宽度, 根据 UI图, 一个三级路由占据的 宽度 + 左右margin
     const baseWidth = 212
-    const arr: number[] = []
-    for (let i = 1; i < 20; i++) {
-      arr.push(baseWidth + i * 172)
-    }
-    const widthArray = [baseWidth].concat(arr).map((i) => i + 'px')
-    return widthArray[number - 1]
+    // 有多个模块 半句的最大宽段, 超出 900 换行
+    const maxWidth = baseWidth + (number - 1) * 172
+    return maxWidth + 'px'
   }
 
   const handleMouseEnter: MouseEventHandler<HTMLDivElement> = (e) => {

package/src/component/nav/style.less

@@ -17,7 +17,6 @@
     text-align: center;
     cursor: pointer;
     background-color: #fff;
-    padding-bottom: 4px;
     box-shadow: inset -1px 0 0 0 #e8ecf3;
   }
 

package/src/component/nav/types.ts

@@ -1,8 +1,16 @@
-import React, { CSSProperties, ReactNode, MouseEvent, ReactElement } from 'react'
+import { CSSProperties, ReactNode, MouseEvent } from 'react'
+
+interface NavExtraProps {
+  /** 直接到达新建页面 */
+  onPushCreate(data: NavDataLevel3): void
+  /** 底部一级菜单显示图片 */
+  footerImage?: ReactNode
+}
 
 interface NavDataLevel3 {
   link: string
   name: string
+  /** 配置跳转到对应新建页的 提示 和 地址 */
   toCreate?: {
     tip: string
     href: string
@@ -24,7 +32,7 @@ interface NavData {
   sub: NavDataLevel2[]
 }
 
-interface NavProps {
+interface NavProps extends NavExtraProps {
   logo?: ReactNode
   /** 三级菜单 没有sub就没有浮层 */
   data: NavData[]
@@ -32,28 +40,23 @@ interface NavProps {
   selected: string
   /** 如果是选中一二级，会直接返回改分级下第三级的 item */
   onSelect(data: NavDataLevel3): void
-  /** 直接到达新建页面 */
-  onPushCreate(data: NavDataLevel3): void
   /** 控制 浮层的线上，如商品库传 merchandise */
   showActive?: string
   other?: ReactNode
   className?: string
   style?: CSSProperties
-  // 底部 iot 图片 & 数据
-  footerImage?: ReactNode
+  /** 底部 iot 图片 & 数据 */
   footerConfig?: NavData[]
 }
 
-interface NavItemProps {
+interface NavItemProps extends NavExtraProps {
   data: NavData
   selected: string
   onSelect(data: NavDataLevel3): void
-  onPushCreate(data: NavDataLevel3): void
   /** onMouseMove 的回调 */
   onMouseMove(event: MouseEvent, link: string): void
   /** 控制子导航列表的显示 */
   showSub?: boolean
-  footerImage?: ReactNode
 }
 
 interface PopupProps {