@gm-mobile/mp 3.9.3-beta.22 → 3.9.3-beta.26

package/package.json

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

package/src/component/page/page.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, FC, useState, ReactNode } from 'react'
-import { Flex, LayoutRoot, LayoutRootV1 } from '@gm-mobile/c-react'
+import { Flex, LayoutRoot, LayoutRootV1, Loading } from '@gm-mobile/c-react'
 import { ScrollView } from '@tarojs/components'
 import PageBase, { PageProps } from './base'
-import { debounce } from 'lodash'
+import { pxTransform } from '@tarojs/taro'
 
 interface PageMPProps extends PageProps {
   onRefresh?: () => Promise<any>
-  onLoadMore?: () => Promise<any>
+  /** 上滑加载更多事件。如果promise返回一个空数组，表示没有更多了 */
+  onLoadMore?: () => Promise<Array<any> | undefined>
 }
 
 const PageMP: FC<PageMPProps> = ({
@@ -19,9 +20,10 @@ const PageMP: FC<PageMPProps> = ({
     refreshing: false,
     loadingMore: false,
   })
+
+  // Page加载状态
   const refLoading = useRef<boolean | undefined>(false)
   useEffect(() => {
-    // 和之前的不一样
     if (props.loading !== refLoading.current) {
       if (props.loading) {
         wx.showNavigationBarLoading()
@@ -32,49 +34,45 @@ const PageMP: FC<PageMPProps> = ({
       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,
+      }
+    })
+  }
+
+  const loadMore = async () => {
+    setState((state) => {
+      return {
+        ...state,
+        loadingMore: true,
+      }
+    })
+    try {
+      onLoadMore && (await onLoadMore())
+    } catch (err) {
+      console.error(err)
+    }
+    setState((state) => {
+      return {
+        ...state,
+        loadingMore: false,
       }
-      setState((state) => {
-        return {
-          ...state,
-          refreshing: false,
-        }
-      })
-    },
-    loadMore: debounce(
-      async () => {
-        setState((state) => {
-          return {
-            ...state,
-            refreshing: true,
-          }
-        })
-        try {
-          onLoadMore && (await onLoadMore())
-        } catch (err) {
-          console.error(err)
-        }
-        setState((state) => {
-          return {
-            ...state,
-            refreshing: false,
-          }
-        })
-      },
-      1000,
-      { leading: true }
-    ),
+    })
   }
 
   return (
@@ -88,20 +86,17 @@ const PageMP: FC<PageMPProps> = ({
             scrollY
             refresherEnabled
             scrollWithAnimation
+            scrollAnchoring
             refresherBackground='transparent'
             refresherTriggered={state.refreshing}
             lowerThreshold={50}
-            onRefresherRefresh={() => methods.refresh()}
-            onScrollToLower={() => methods.loadMore()}
+            onRefresherRefresh={() => refresh()}
+            onScrollToLower={() => loadMore()}
           >
             {children}
             {state.loadingMore && (
-              <Flex
-                className='loading-more m-margin-tb-20 m-text-placeholder'
-                alignCenter
-                justifyCenter
-              >
-                加载中...
+              <Flex height={pxTransform(60)} alignCenter justifyCenter>
+                <Loading style={{ opacity: 0.5 }} />
               </Flex>
             )}
           </ScrollView>

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)