@gm-mobile/mp 3.9.3-beta.3 → 3.9.3-beta.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/mp",
-  "version": "3.9.3-beta.3",
+  "version": "3.9.3-beta.33",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-mobile#readme",
@@ -21,9 +21,9 @@
     "url": "https://github.com/gmfe/gm-mobile/issues"
   },
   "dependencies": {
-    "@gm-mobile/c-react": "^3.9.3-beta.3",
-    "@gm-mobile/c-tool": "^3.9.3-beta.3",
-    "@gm-mobile/locales": "^3.9.3-beta.3"
+    "@gm-mobile/c-react": "^3.9.3-beta.33",
+    "@gm-mobile/c-tool": "^3.9.3-beta.33",
+    "@gm-mobile/locales": "^3.9.3-beta.33"
   },
   "peerDependencies": {
     "@tarojs/components": "3.0.18",
@@ -33,5 +33,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "9f44aa37c49971d60bc29358ce64aaf0c0d15ed8"
+  "gitHead": "038d343fd258aaa0c64146a958e6ed17baf3212d"
 }

package/src/component/page/base.less

@@ -1,6 +1,21 @@
 @supports (bottom: constant(safe-area-inset-bottom)) or
   (bottom: env(safe-area-inset-bottom)) {
-  .m-page.without-safe-bottom {
-    padding-bottom: 0 !important;
+  .m-page {
+    padding-bottom: 0;
+  }
+  .m-page.safe-bottom {
+    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
+    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
+  }
+}
+
+.transformer {
+  background-color: rgba(0, 0, 0, 0.9);
+  width: 100vw;
+  height: 100vh;
+  .transformed-page {
+    .m-page {
+      position: absolute;
+    }
   }
 }

package/src/component/page/base.tsx

@@ -2,6 +2,7 @@ import React, { CSSProperties, FC, HtmlHTMLAttributes, ReactNode } from 'react'
 import classNames from 'classnames'
 import { Flex, Status, View } from '@gm-mobile/c-react/src'
 import './base.less'
+import SafeBottomMP from '../safe_bottom/safe_bottom'
 
 interface PageProps extends HtmlHTMLAttributes<HTMLDivElement> {
   loading?: boolean
@@ -11,11 +12,17 @@ interface PageProps extends HtmlHTMLAttributes<HTMLDivElement> {
   header?: ReactNode
   tabbar?: ReactNode
   top?: ReactNode
+  /** bottom位置自带底部安全边距，不需要和safeBottom同时使用 */
   bottom?: ReactNode
+  /** 左侧内容 */
+  left?: ReactNode
   pageClassName?: string
   pageStyle?: CSSProperties
-  /** 去掉底部安全区域 */
-  withoutSafeBottom?: boolean
+  /** 底部安全区域 */
+  safeBottom?: boolean
+  /** 用于放置绝对定位组件 */
+  extra?: ReactNode
+  onRefresh?: () => Promise<any>
 }
 
 const Page: FC<PageProps> = ({
@@ -27,15 +34,15 @@ const Page: FC<PageProps> = ({
   tabbar,
   top,
   bottom,
+  left,
   children,
   className,
   pageClassName,
   pageStyle,
-  withoutSafeBottom,
+  safeBottom,
+  extra,
   ...rest
 }) => {
-  const { safeArea, screenHeight } = wx.getSystemInfoSync()
-  const paddingBottom = screenHeight - safeArea.bottom
   return (
     <Flex
       {...rest}
@@ -44,7 +51,7 @@ const Page: FC<PageProps> = ({
         'm-page',
         {
           'm-page-white': white,
-          'without-safe-bottom': withoutSafeBottom,
+          'safe-bottom': safeBottom,
         },
         className
       )}
@@ -72,26 +79,23 @@ const Page: FC<PageProps> = ({
             </Flex>
           )}
           {top && <View className='m-top m-flex-none'>{top}</View>}
-          <View
-            className={classNames('m-page-content', pageClassName)}
-            style={pageStyle}
-          >
-            {children}
-          </View>
-          {bottom && (
-            <View className='m-bottom m-flex-none'>
-              {React.cloneElement(bottom as React.ReactElement, {
-                style: {
-                  paddingBottom:
-                    paddingBottom > 0
-                      ? `${paddingBottom}px!important`
-                      : undefined,
-                },
-              })}
+          <Flex auto className='m-page-wrapper'>
+            <View className='m-page-side'>{left}</View>
+            <View
+              className={classNames('m-page-content', pageClassName)}
+              style={pageStyle}
+            >
+              {children}
             </View>
+          </Flex>
+          {bottom && (
+            <SafeBottomMP className='m-bottom m-flex-none'>
+              {bottom}
+            </SafeBottomMP>
           )}
         </>
       )}
+      {extra}
       {tabbar && <View className='m-page-tabbar m-flex-none'>{tabbar}</View>}
     </Flex>
   )

package/src/component/page/page.tsx

@@ -1,19 +1,37 @@
-import React, { useEffect, useRef, FC, useState } from 'react'
-import { LayoutRoot, LayoutRootV1 } from '@gm-mobile/c-react'
-import { ScrollView } from '@tarojs/components'
-import PageBase, { PageProps as PageMPProps } from './base'
+import React, { useEffect, useRef, FC, useState, CSSProperties } from 'react'
+import { Flex, LayoutRoot, LayoutRootV1, Loading } from '@gm-mobile/c-react'
+import { ScrollView, View } from '@tarojs/components'
+import PageBase, { PageProps } from './base'
+import { pxTransform } from '@tarojs/taro'
+
+interface PageMPProps extends PageProps {
+  /** 最大宽度，对超过最大宽度的页面做做居中变窄处理 */
+  maxWidth?: number
+  onRefresh?: () => Promise<any>
+  /** 上滑加载更多事件。如果promise返回一个空数组，表示没有更多了 */
+  onLoadMore?: () => Promise<Array<any> | undefined>
+}
+
+const PageMP: FC<PageMPProps> = ({
+  children,
+  maxWidth = 2048,
+  onRefresh,
+  onLoadMore,
+  style,
+  ...props
+}) => {
+  const { screenWidth } = wx.getSystemInfoSync()
+  const transformRatio = maxWidth / screenWidth
+  const transform = screenWidth > maxWidth
 
-const PageMP: FC<
-  PageMPProps & {
-    onRefresh?: () => Promise<any>
-  }
-> = ({ children, onRefresh, ...props }) => {
   const [state, setState] = useState({
     refreshing: false,
+    loadingMore: false,
   })
+
+  // Page加载状态
   const refLoading = useRef<boolean | undefined>(false)
   useEffect(() => {
-    // 和之前的不一样
     if (props.loading !== refLoading.current) {
       if (props.loading) {
         wx.showNavigationBarLoading()
@@ -24,51 +42,125 @@ const PageMP: FC<
       refLoading.current = props.loading
     }
   }, [props.loading])
-  const methods = {
-    async refresh() {
-      setState((state) => {
-        return {
-          ...state,
-          refreshing: true,
-        }
-      })
-      try {
-        onRefresh && (await onRefresh())
-      } catch (err) {
-        console.error(err)
+
+  const refresh = async () => {
+    setState((state) => {
+      return {
+        ...state,
+        refreshing: true,
       }
-      setState((state) => {
-        return {
-          ...state,
-          refreshing: false,
-        }
-      })
-    },
+    })
+    try {
+      onRefresh && (await onRefresh())
+    } catch (err) {
+      console.error(err)
+    }
+    setState((state) => {
+      return {
+        ...state,
+        refreshing: false,
+      }
+    })
   }
 
-  return (
+  const loadMore = async () => {
+    console.log('load more')
+    setState((state) => {
+      return {
+        ...state,
+        loadingMore: true,
+      }
+    })
+    try {
+      onLoadMore && (await onLoadMore())
+    } catch (err) {
+      console.error(err)
+    }
+    setState((state) => {
+      return {
+        ...state,
+        loadingMore: false,
+      }
+    })
+  }
+  const withScrollView = !!onRefresh || !!onLoadMore
+
+  const layoutStyle: CSSProperties = transform
+    ? {
+        position: 'absolute',
+        width: '100%',
+        height: `calc(100vh / ${transformRatio})`,
+      }
+    : {}
+
+  const page = (
     <>
-      <PageBase {...props}>
-        {onRefresh && (
+      <PageBase
+        {...props}
+        style={{
+          ...style,
+          height: transform ? `calc(100vh / ${transformRatio})` : undefined,
+        }}
+      >
+        {withScrollView && (
           <ScrollView
             className='m-flex'
             style={{ height: '100%' }}
+            enableBackToTop
             scrollY
-            refresherEnabled
+            refresherEnabled={!!onRefresh}
+            scrollWithAnimation
+            scrollAnchoring
             refresherBackground='transparent'
             refresherTriggered={state.refreshing}
-            onRefresherRefresh={methods.refresh}
+            lowerThreshold={50}
+            onRefresherRefresh={onRefresh ? () => refresh() : undefined}
+            onScrollToLower={onLoadMore ? () => loadMore() : undefined}
           >
             {children}
+            {state.loadingMore && (
+              <Flex height={pxTransform(60)} alignCenter justifyCenter>
+                <Loading style={{ opacity: 0.5 }} />
+              </Flex>
+            )}
           </ScrollView>
         )}
-        {!onRefresh && children}
+        {!withScrollView && children}
       </PageBase>
-      <LayoutRoot />
-      <LayoutRootV1 />
+      <LayoutRoot style={layoutStyle} />
+      <LayoutRootV1 style={layoutStyle} />
     </>
   )
+
+  if (transform) {
+    return (
+      <View className='transformer'>
+        <View
+          className='transformed-page'
+          style={{
+            transform: `scale(${transformRatio})`,
+          }}
+        >
+          {page}
+        </View>
+      </View>
+    )
+  }
+  return page
 }
 
 export default PageMP
 export type { PageMPProps }
+
+/** 适配后的高度，考虑ipad 大屏裁剪宽度后的比例 */
+export function calcPageHeightWithMaxWidth(maxWidth = 480) {
+  const { screenWidth } = wx.getSystemInfoSync()
+  const transformRatio = maxWidth / screenWidth
+  return `calc(100vh / ${transformRatio})`
+}
+
+export function calcPageWidthWithMaxWidth(maxWidth = 800) {
+  const { screenWidth } = wx.getSystemInfoSync()
+  const transformRatio = maxWidth / screenWidth
+  return `calc(100vw / ${transformRatio})`
+}

package/src/component/safe_bottom/index.ts

@@ -0,0 +1 @@
+export { default as SafeBottom } from './safe_bottom'

package/src/component/safe_bottom/safe_bottom.tsx

@@ -0,0 +1,27 @@
+import React, { memo, FC } from 'react'
+import { View } from '@tarojs/components'
+import classNames from 'classnames'
+import { ViewProps } from '@tarojs/components/types/View'
+
+type SafeBottomMPProps = ViewProps
+
+const SafeBottomMP: FC<SafeBottomMPProps> = memo(
+  ({ className, children, ...rest }) => {
+    const { safeArea, screenHeight } = wx.getSystemInfoSync()
+    const paddingBottom = screenHeight - safeArea.bottom
+
+    return (
+      <View className={classNames(className)} {...rest}>
+        {React.cloneElement((children as React.ReactElement) || <View />, {
+          style: {
+            paddingBottom:
+              paddingBottom > 0 ? `${paddingBottom}px!important` : undefined,
+          },
+        })}
+      </View>
+    )
+  }
+)
+
+export default SafeBottomMP
+export type { SafeBottomMPProps }

package/src/component/status_bar/status_bar.tsx

@@ -5,10 +5,9 @@ import UtilMP from '../../util'
 export type StatusBarMPProps = HTMLAttributes<HTMLDivElement>
 
 const StatusBarMP: FC<StatusBarMPProps> = memo((style, ...rest) => {
-  const [height, setHeight] = useState(20)
+  const [height, setHeight] = useState(wx.getSystemInfoSync().statusBarHeight)
   useEffect(() => {
     const rect = UtilMP.getMenuButtonBoundingClientRect()
-
     UtilMP.getSystemInfo().then((res) => {
       // 不一定能读到胶囊,或者胶囊占据整个宽， 此时不需要设置statusBar
       return setHeight(rect?.left ? res.statusBarHeight : 0)

package/src/index.ts

@@ -12,5 +12,6 @@ export * from './component/counter'
 export * from './component/status_bar'
 export * from './component/swiper'
 export * from './component/safe_header'
+export * from './component/safe_bottom'
 
 export { LocalStorage, useFirstDidShow, Router, upload }

package/src/router/index.ts

@@ -54,7 +54,7 @@ export default class Router {
   } = {}
 
   /** navigateTo传入的{data:值} */
-  private _data?: any
+  private _data: { [key: string]: any } = {}
 
   /** 最近一次的路由跳转动作是 */
   currentAction?:
@@ -67,6 +67,7 @@ export default class Router {
   /** 当前路由信息 */
   get route() {
     const page = getCurrentPages().reverse()[0]
+    const data = this._data['/' + this._urlToPath(page.route)]
     return {
       /** 页面config而配置的标题 */
       title: page.config.navigationBarTitleText as string,
@@ -75,7 +76,7 @@ export default class Router {
       /** url参数 */
       options: page.options,
       /** navigateTo传入的{data:值} */
-      data: this._data,
+      data,
     }
   }
 
@@ -122,7 +123,9 @@ export default class Router {
         const data = typeof option === 'object' ? option.data : undefined
         // @ts-ignore
         data && delete parsed.data
-        this._data = data
+        this._data[to] = data
+      } else {
+        this._data[to] = undefined
       }
       this._beforeChange(option, () => Taro.navigateTo(parsed))
     })

package/src/router/stories.tsx

@@ -16,8 +16,6 @@ Normal.parameters = {
       code: `
 import { Router } from '@gm-mobile/mp'
 const router = new Router({
-/** 开发模式，会在代码变化界面刷新后，自动恢复刷新前的页面 */
-dev: true,
 /** 路由变化前调用，返回false停止路由跳转 */
 auth(from, to) {
   if (!globalStore) {