@gm-mobile/mp 3.9.3-beta.27 → 3.9.3-beta.30

package/package.json

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

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/page.tsx

@@ -1,10 +1,19 @@
-import React, { useEffect, useRef, FC, useState, ReactNode } from 'react'
+import React, {
+  useEffect,
+  useRef,
+  FC,
+  useState,
+  ReactNode,
+  CSSProperties,
+} from 'react'
 import { Flex, LayoutRoot, LayoutRootV1, Loading } from '@gm-mobile/c-react'
-import { ScrollView } from '@tarojs/components'
+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>
@@ -12,10 +21,16 @@ interface PageMPProps extends PageProps {
 
 const PageMP: FC<PageMPProps> = ({
   children,
+  maxWidth = 480,
   onRefresh,
   onLoadMore,
+  style,
   ...props
 }) => {
+  const { screenWidth } = wx.getSystemInfoSync()
+  const transformRatio = maxWidth / screenWidth
+  const transform = screenWidth > maxWidth
+
   const [state, setState] = useState({
     refreshing: false,
     loadingMore: false,
@@ -56,6 +71,7 @@ const PageMP: FC<PageMPProps> = ({
   }
 
   const loadMore = async () => {
+    console.log('load more')
     setState((state) => {
       return {
         ...state,
@@ -74,24 +90,39 @@ const PageMP: FC<PageMPProps> = ({
       }
     })
   }
+  const withScrollView = !!onRefresh || !!onLoadMore
+
+  const layoutStyle: CSSProperties = transform
+    ? {
+        position: 'absolute',
+        width: '100%',
+        height: `calc(100vh / ${transformRatio})`,
+      }
+    : {}
 
-  return (
+  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}
             lowerThreshold={50}
-            onRefresherRefresh={() => refresh()}
-            onScrollToLower={() => loadMore()}
+            onRefresherRefresh={onRefresh ? () => refresh() : undefined}
+            onScrollToLower={onLoadMore ? () => loadMore() : undefined}
           >
             {children}
             {state.loadingMore && (
@@ -101,12 +132,28 @@ const PageMP: FC<PageMPProps> = ({
             )}
           </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