@gm-pc/frame 1.25.1-beta.1 → 1.26.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/frame",
-  "version": "1.25.1-beta.1",
+  "version": "1.26.0-beta.1",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/react": "^1.25.1-beta.1",
+    "@gm-pc/react": "^1.26.0-beta.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19"
   },
@@ -31,5 +31,5 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   },
-  "gitHead": "5dd0c3577285d50f79d819477ca636ab6839d276"
+  "gitHead": "82ab129147eec88f029e08f984a261849de3d9a7"
 }

package/src/component/breadcrumb.tsx

@@ -1,119 +1,119 @@
-import React, { FC } from 'react'
-import _ from 'lodash'
-import { is } from '@gm-common/tool'
-import { NavData } from '@gm-pc/react'
-
-type NavConfig = NavData
-
-interface BreadCrumbsItem {
-  name: string
-  link?: string
-  sub?: BreadCrumbsItem[]
-}
-
-type BreadCrumb = string[] | BreadCrumbsItem[]
-
-interface BreadcrumbProps {
-  breadcrumbs: BreadCrumb
-  pathname: string
-  navConfig: NavConfig[]
-  onSelect(selected: BreadCrumbsItem): void
-}
-
-const nav2BreadCrumb = (
-  breadcrumbs: BreadCrumb,
-  pathname: string,
-  navConfig: NavConfig[]
-): BreadCrumbsItem[] => {
-  const result: BreadCrumbsItem[] = []
-
-  _.find(navConfig, (one) => {
-    _.find(one.sub, (two) => {
-      return _.find(two.sub, (three) => {
-        if (pathname.includes(three.link)) {
-          result.push(one)
-          result.push(two as any)
-          result.push(three as any)
-
-          return true
-        }
-        return false
-      })
-    })
-  })
-
-  _.forEach(breadcrumbs, (v) => {
-    if (_.isString(v)) {
-      result.push({ name: v })
-    } else {
-      // @ts-ignore
-      result.push({ name: v.name, link: v.link || pathname })
-    }
-  })
-
-  return result
-}
-
-const Breadcrumb: FC<BreadcrumbProps> = ({
-  breadcrumbs,
-  pathname,
-  navConfig,
-  onSelect,
-}) => {
-  const data = nav2BreadCrumb(breadcrumbs, pathname, navConfig)
-
-  if (!data || data.length === 0) {
-    return <div className='gm-framework-breadcrumb-default' />
-  }
-
-  const last = data[data.length - 1]
-
-  const arr = (
-    <>
-      {_.map(data.slice(0, -1), (v, i) => (
-        <a
-          key={i + '_' + v.link}
-          href={v.link}
-          onClick={(e) => {
-            e.preventDefault()
-            if (i === 0) {
-              // @ts-ignore
-              onSelect(data[0].sub[0].sub[0])
-            } else if (i === 1) {
-              // @ts-ignore
-              onSelect(data[1].sub[0])
-            } else if (i === 2) {
-              onSelect(data[2])
-            } else {
-              onSelect(v)
-            }
-          }}
-        >
-          {v.name}
-        </a>
-      ))}
-    </>
-  )
-
-  return (
-    <div className='gm-framework-breadcrumb-default'>
-      {!is.phone() && arr}
-      {last.link ? (
-        <a
-          href={last.link}
-          onClick={(event) => {
-            event.preventDefault()
-            onSelect(last)
-          }}
-        >
-          {last.name}
-        </a>
-      ) : (
-        <span>{last.name}</span>
-      )}
-    </div>
-  )
-}
-
-export default Breadcrumb
-export type { BreadcrumbProps, BreadCrumbsItem }
+import React, { FC } from 'react'
+import _ from 'lodash'
+import { is } from '@gm-common/tool'
+import { NavData } from '@gm-pc/react'
+
+type NavConfig = NavData
+
+interface BreadCrumbsItem {
+  name: string
+  link?: string
+  sub?: BreadCrumbsItem[]
+}
+
+type BreadCrumb = string[] | BreadCrumbsItem[]
+
+interface BreadcrumbProps {
+  breadcrumbs: BreadCrumb
+  pathname: string
+  navConfig: NavConfig[]
+  onSelect(selected: BreadCrumbsItem): void
+}
+
+const nav2BreadCrumb = (
+  breadcrumbs: BreadCrumb,
+  pathname: string,
+  navConfig: NavConfig[]
+): BreadCrumbsItem[] => {
+  const result: BreadCrumbsItem[] = []
+
+  _.find(navConfig, (one) => {
+    _.find(one.sub, (two) => {
+      return _.find(two.sub, (three) => {
+        if (pathname.includes(three.link)) {
+          result.push(one)
+          result.push(two as any)
+          result.push(three as any)
+
+          return true
+        }
+        return false
+      })
+    })
+  })
+
+  _.forEach(breadcrumbs, (v) => {
+    if (_.isString(v)) {
+      result.push({ name: v })
+    } else {
+      // @ts-ignore
+      result.push({ name: v.name, link: v.link || pathname })
+    }
+  })
+
+  return result
+}
+
+const Breadcrumb: FC<BreadcrumbProps> = ({
+  breadcrumbs,
+  pathname,
+  navConfig,
+  onSelect,
+}) => {
+  const data = nav2BreadCrumb(breadcrumbs, pathname, navConfig)
+
+  if (!data || data.length === 0) {
+    return <div className='gm-framework-breadcrumb-default' />
+  }
+
+  const last = data[data.length - 1]
+
+  const arr = (
+    <>
+      {_.map(data.slice(0, -1), (v, i) => (
+        <a
+          key={i + '_' + v.link}
+          href={v.link}
+          onClick={(e) => {
+            e.preventDefault()
+            if (i === 0) {
+              // @ts-ignore
+              onSelect(data[0].sub[0].sub[0])
+            } else if (i === 1) {
+              // @ts-ignore
+              onSelect(data[1].sub[0])
+            } else if (i === 2) {
+              onSelect(data[2])
+            } else {
+              onSelect(v)
+            }
+          }}
+        >
+          {v.name}
+        </a>
+      ))}
+    </>
+  )
+
+  return (
+    <div className='gm-framework-breadcrumb-default'>
+      {!is.phone() && arr}
+      {last.link ? (
+        <a
+          href={last.link}
+          onClick={(event) => {
+            event.preventDefault()
+            onSelect(last)
+          }}
+        >
+          {last.name}
+        </a>
+      ) : (
+        <span>{last.name}</span>
+      )}
+    </div>
+  )
+}
+
+export default Breadcrumb
+export type { BreadcrumbProps, BreadCrumbsItem }

package/src/component/framework.tsx

@@ -1,102 +1,102 @@
-import React, { useEffect, FC, ReactNode } from 'react'
-import { Flex, EVENT_TYPE } from '@gm-pc/react'
-import classNames from 'classnames'
-import _ from 'lodash'
-
-interface FrameworkProps {
-  menu: ReactNode
-  rightTop: ReactNode
-  scrollTop?: void
-  showMobileMenu?: boolean
-  isFullScreen?: boolean
-  children: ReactNode
-  className?: string
-}
-
-interface FrameworkStatic {
-  scrollTop(): void
-}
-
-function useWindowEventListener(
-  type: string,
-  listener: EventListenerOrEventListenerObject
-) {
-  useEffect(() => {
-    window.addEventListener(type, listener)
-
-    return () => {
-      window.removeEventListener(type, listener)
-    }
-  }, [type, listener])
-}
-
-const Framework: FC<FrameworkProps> & FrameworkStatic = ({
-  showMobileMenu,
-  isFullScreen,
-  menu,
-  rightTop,
-  children,
-  className,
-}) => {
-  const addOverflowClass = () => {
-    let flag: any = window.document.body.dataset.overflowFlag || 0
-    flag++
-    window.document.body.dataset.overflowFlag = flag
-
-    if (flag === 1) {
-      window.document.body.classList.add('gm-overflow-hidden')
-    }
-  }
-
-  const removeOverflowClass = () => {
-    let flag: any = window.document.body.dataset.overflowFlag || 0
-    flag--
-    window.document.body.dataset.overflowFlag = flag
-    if (flag === 0) {
-      window.document.body.classList.remove('gm-overflow-hidden')
-    }
-  }
-
-  const doScroll = _.throttle(() => {
-    window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.BROWSER_SCROLL))
-  }, 200)
-
-  useWindowEventListener(EVENT_TYPE.MODAL_SHOW, addOverflowClass)
-  useWindowEventListener(EVENT_TYPE.MODAL_HIDE, removeOverflowClass)
-  useWindowEventListener('scroll', doScroll)
-
-  return (
-    <div
-      className={classNames(
-        'gm-framework',
-        {
-          'gm-framework-mobile-menu': showMobileMenu,
-        },
-        className
-      )}
-    >
-      <div className='gm-framework-inner'>
-        {isFullScreen ? (
-          children
-        ) : (
-          <div className='gm-framework-full-height'>
-            <Flex className='gm-framework-container'>
-              {menu && <div className='gm-framework-left'>{menu}</div>}
-              <Flex flex column className='gm-framework-right'>
-                {rightTop && <div className='gm-framework-right-top'>{rightTop}</div>}
-                <div className='gm-framework-content'>{children}</div>
-              </Flex>
-            </Flex>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-Framework.scrollTop = () => {
-  window.scroll(0, 0)
-}
-
-export default Framework
-export type { FrameworkProps, FrameworkStatic }
+import React, { useEffect, FC, ReactNode } from 'react'
+import { Flex, EVENT_TYPE } from '@gm-pc/react'
+import classNames from 'classnames'
+import _ from 'lodash'
+
+interface FrameworkProps {
+  menu: ReactNode
+  rightTop: ReactNode
+  scrollTop?: void
+  showMobileMenu?: boolean
+  isFullScreen?: boolean
+  children: ReactNode
+  className?: string
+}
+
+interface FrameworkStatic {
+  scrollTop(): void
+}
+
+function useWindowEventListener(
+  type: string,
+  listener: EventListenerOrEventListenerObject
+) {
+  useEffect(() => {
+    window.addEventListener(type, listener)
+
+    return () => {
+      window.removeEventListener(type, listener)
+    }
+  }, [type, listener])
+}
+
+const Framework: FC<FrameworkProps> & FrameworkStatic = ({
+  showMobileMenu,
+  isFullScreen,
+  menu,
+  rightTop,
+  children,
+  className,
+}) => {
+  const addOverflowClass = () => {
+    let flag: any = window.document.body.dataset.overflowFlag || 0
+    flag++
+    window.document.body.dataset.overflowFlag = flag
+
+    if (flag === 1) {
+      window.document.body.classList.add('gm-overflow-hidden')
+    }
+  }
+
+  const removeOverflowClass = () => {
+    let flag: any = window.document.body.dataset.overflowFlag || 0
+    flag--
+    window.document.body.dataset.overflowFlag = flag
+    if (flag === 0) {
+      window.document.body.classList.remove('gm-overflow-hidden')
+    }
+  }
+
+  const doScroll = _.throttle(() => {
+    window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.BROWSER_SCROLL))
+  }, 200)
+
+  useWindowEventListener(EVENT_TYPE.MODAL_SHOW, addOverflowClass)
+  useWindowEventListener(EVENT_TYPE.MODAL_HIDE, removeOverflowClass)
+  useWindowEventListener('scroll', doScroll)
+
+  return (
+    <div
+      className={classNames(
+        'gm-framework',
+        {
+          'gm-framework-mobile-menu': showMobileMenu,
+        },
+        className
+      )}
+    >
+      <div className='gm-framework-inner'>
+        {isFullScreen ? (
+          children
+        ) : (
+          <div className='gm-framework-full-height'>
+            <Flex className='gm-framework-container'>
+              {menu && <div className='gm-framework-left'>{menu}</div>}
+              <Flex flex column className='gm-framework-right'>
+                {rightTop && <div className='gm-framework-right-top'>{rightTop}</div>}
+                <div className='gm-framework-content'>{children}</div>
+              </Flex>
+            </Flex>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+Framework.scrollTop = () => {
+  window.scroll(0, 0)
+}
+
+export default Framework
+export type { FrameworkProps, FrameworkStatic }

package/src/component/full_tabs.tsx

@@ -1,104 +1,104 @@
-import React, { FC, useState, CSSProperties, ReactNode } from 'react'
-import classNames from 'classnames'
-import { Flex, FlexProps } from '@gm-pc/react'
-import _ from 'lodash'
-
-interface FullTabsItem {
-  text: string
-  value: string
-  children: ReactNode
-}
-
-interface FullTabsProps extends Omit<FlexProps, 'onChange'> {
-  tabs: FullTabsItem[]
-  defaultActive?: string
-  active?: string
-  onChange?(value: string): void
-  keep?: boolean
-  className?: string
-  column?: boolean
-  /** 使用 row，需要手动将 column 设置为false, Tip: 因为 column 默认为 true，column 会于 row 冲突 */
-  row?: boolean
-  style?: CSSProperties
-}
-/**
- * 请使用Tabs,配置full
- * @deprecated
- */
-const FullTabs: FC<FullTabsProps> = ({
-  tabs,
-  active,
-  defaultActive,
-  keep,
-  onChange,
-  className,
-  column = true,
-  ...rest
-}) => {
-  if (active !== undefined && defaultActive !== undefined) {
-    console.warn('prop `active` and prop `defaultActive` can not exist at the same time!')
-  }
-
-  if (active !== undefined && !onChange) {
-    console.warn('prop `active` `onChange` must exist at the same time!')
-  }
-
-  const [selected, setSelected] = useState(defaultActive || active)
-
-  const handleClick = (value: string) => {
-    setSelected(value)
-    onChange && onChange(value)
-  }
-
-  const tabsChildrenKeep = () => (
-    <>
-      {_.map(tabs, (tab: FullTabsItem) => (
-        <div
-          key={tab.value}
-          className={classNames('gm-framework-full-tabs-content-item', {
-            'gm-hidden': selected !== tab.value,
-          })}
-        >
-          {tab.children}
-        </div>
-      ))}
-    </>
-  )
-
-  const tabsChildren = () => {
-    const item = _.find(tabs, (tab) => tab.value === selected)
-    return (
-      <div className='gm-framework-full-tabs-content-item'>{item && item.children}</div>
-    )
-  }
-
-  return (
-    <Flex
-      {...rest}
-      column={column}
-      className={classNames('gm-framework-full-tabs', className)}
-    >
-      <div className='gm-framework-full-tabs-head-fix'>
-        <Flex alignEnd className='gm-framework-full-tabs-head'>
-          {_.map(tabs, (tab) => (
-            <div
-              key={tab.value}
-              className={classNames('gm-framework-full-tabs-head-item', {
-                active: selected === tab.value,
-              })}
-              onClick={() => handleClick(tab.value)}
-            >
-              {tab.text}
-            </div>
-          ))}
-        </Flex>
-      </div>
-      <Flex flex column className='gm-framework-full-tabs-content'>
-        {keep ? tabsChildrenKeep() : tabsChildren()}
-      </Flex>
-    </Flex>
-  )
-}
-
-export default FullTabs
-export type { FullTabsProps, FullTabsItem }
+import React, { FC, useState, CSSProperties, ReactNode } from 'react'
+import classNames from 'classnames'
+import { Flex, FlexProps } from '@gm-pc/react'
+import _ from 'lodash'
+
+interface FullTabsItem {
+  text: string
+  value: string
+  children: ReactNode
+}
+
+interface FullTabsProps extends Omit<FlexProps, 'onChange'> {
+  tabs: FullTabsItem[]
+  defaultActive?: string
+  active?: string
+  onChange?(value: string): void
+  keep?: boolean
+  className?: string
+  column?: boolean
+  /** 使用 row，需要手动将 column 设置为false, Tip: 因为 column 默认为 true，column 会于 row 冲突 */
+  row?: boolean
+  style?: CSSProperties
+}
+/**
+ * 请使用Tabs,配置full
+ * @deprecated
+ */
+const FullTabs: FC<FullTabsProps> = ({
+  tabs,
+  active,
+  defaultActive,
+  keep,
+  onChange,
+  className,
+  column = true,
+  ...rest
+}) => {
+  if (active !== undefined && defaultActive !== undefined) {
+    console.warn('prop `active` and prop `defaultActive` can not exist at the same time!')
+  }
+
+  if (active !== undefined && !onChange) {
+    console.warn('prop `active` `onChange` must exist at the same time!')
+  }
+
+  const [selected, setSelected] = useState(defaultActive || active)
+
+  const handleClick = (value: string) => {
+    setSelected(value)
+    onChange && onChange(value)
+  }
+
+  const tabsChildrenKeep = () => (
+    <>
+      {_.map(tabs, (tab: FullTabsItem) => (
+        <div
+          key={tab.value}
+          className={classNames('gm-framework-full-tabs-content-item', {
+            'gm-hidden': selected !== tab.value,
+          })}
+        >
+          {tab.children}
+        </div>
+      ))}
+    </>
+  )
+
+  const tabsChildren = () => {
+    const item = _.find(tabs, (tab) => tab.value === selected)
+    return (
+      <div className='gm-framework-full-tabs-content-item'>{item && item.children}</div>
+    )
+  }
+
+  return (
+    <Flex
+      {...rest}
+      column={column}
+      className={classNames('gm-framework-full-tabs', className)}
+    >
+      <div className='gm-framework-full-tabs-head-fix'>
+        <Flex alignEnd className='gm-framework-full-tabs-head'>
+          {_.map(tabs, (tab) => (
+            <div
+              key={tab.value}
+              className={classNames('gm-framework-full-tabs-head-item', {
+                active: selected === tab.value,
+              })}
+              onClick={() => handleClick(tab.value)}
+            >
+              {tab.text}
+            </div>
+          ))}
+        </Flex>
+      </div>
+      <Flex flex column className='gm-framework-full-tabs-content'>
+        {keep ? tabsChildrenKeep() : tabsChildren()}
+      </Flex>
+    </Flex>
+  )
+}
+
+export default FullTabs
+export type { FullTabsProps, FullTabsItem }