@gm-mobile/mp 3.9.3-beta.8 → 3.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/mp",
-  "version": "3.9.3-beta.8",
+  "version": "3.9.3",
   "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.8",
-    "@gm-mobile/c-tool": "^3.9.3-beta.8",
-    "@gm-mobile/locales": "^3.9.3-beta.8"
+    "@gm-mobile/c-react": "^3.9.3",
+    "@gm-mobile/c-tool": "^3.9.3",
+    "@gm-mobile/locales": "^3.9.3"
   },
   "peerDependencies": {
     "@tarojs/components": "3.0.18",
@@ -33,5 +33,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "1a399bd891e2971777a509ddf1968d77dcd514a7"
+  "gitHead": "1f1d2b656046efe6479f05f9fde2e34cb99df4de"
 }

package/src/component/page/base.less

@@ -8,3 +8,14 @@
     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

@@ -14,12 +14,15 @@ interface PageProps extends HtmlHTMLAttributes<HTMLDivElement> {
   top?: ReactNode
   /** bottom位置自带底部安全边距，不需要和safeBottom同时使用 */
   bottom?: ReactNode
+  /** 左侧内容 */
+  left?: ReactNode
   pageClassName?: string
   pageStyle?: CSSProperties
   /** 底部安全区域 */
   safeBottom?: boolean
   /** 用于放置绝对定位组件 */
   extra?: ReactNode
+  onRefresh?: () => Promise<any>
 }
 
 const Page: FC<PageProps> = ({
@@ -31,6 +34,7 @@ const Page: FC<PageProps> = ({
   tabbar,
   top,
   bottom,
+  left,
   children,
   className,
   pageClassName,
@@ -75,12 +79,15 @@ 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>
+          <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}

package/src/component/page/page.tsx

@@ -1,19 +1,44 @@
-import React, { useEffect, useRef, FC, useState, ReactNode } 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,
+  ReactNode,
+  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 {
+  /** 最大宽度，默认480(ipad)，对ipad设备做居中变窄处理，设置1025(iPad pro 12.9 inch)可以跳过处理 */
+  maxWidth?: number
+  onRefresh?: () => Promise<any>
+  /** 上滑加载更多事件。如果promise返回一个空数组，表示没有更多了 */
+  onLoadMore?: () => Promise<Array<any> | undefined>
+}
+
+const PageMP: FC<PageMPProps> = ({
+  children,
+  maxWidth = 480,
+  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,50 +49,111 @@ 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,
+      }
+    })
+    try {
+      onRefresh && (await onRefresh())
+    } catch (err) {
+      console.error(err)
+    }
+    setState((state) => {
+      return {
+        ...state,
+        refreshing: false,
       }
-      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

package/src/component/safe_bottom/safe_bottom.tsx

@@ -12,7 +12,7 @@ const SafeBottomMP: FC<SafeBottomMPProps> = memo(
 
     return (
       <View className={classNames(className)} {...rest}>
-        {React.cloneElement(children as React.ReactElement, {
+        {React.cloneElement((children as React.ReactElement) || <View />, {
           style: {
             paddingBottom:
               paddingBottom > 0 ? `${paddingBottom}px!important` : undefined,

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/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) {