@gm-mobile/mp 3.9.2 → 3.9.3-beta.11

package/package.json

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

package/src/component/page/base.less

@@ -0,0 +1,10 @@
+@supports (bottom: constant(safe-area-inset-bottom)) or
+  (bottom: env(safe-area-inset-bottom)) {
+  .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 */
+  }
+}

package/src/component/page/base.tsx

@@ -0,0 +1,98 @@
+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
+  error?: boolean
+  onReload?: () => void
+  white?: boolean
+  header?: ReactNode
+  tabbar?: ReactNode
+  top?: ReactNode
+  /** bottom位置自带底部安全边距，不需要和safeBottom同时使用 */
+  bottom?: ReactNode
+  pageClassName?: string
+  pageStyle?: CSSProperties
+  /** 底部安全区域 */
+  safeBottom?: boolean
+  /** 用于放置绝对定位组件 */
+  extra?: ReactNode
+}
+
+const Page: FC<PageProps> = ({
+  loading,
+  error,
+  onReload,
+  white,
+  header,
+  tabbar,
+  top,
+  bottom,
+  children,
+  className,
+  pageClassName,
+  pageStyle,
+  safeBottom,
+  extra,
+  ...rest
+}) => {
+  return (
+    <Flex
+      {...rest}
+      column
+      className={classNames(
+        'm-page',
+        {
+          'm-page-white': white,
+          'safe-bottom': safeBottom,
+        },
+        className
+      )}
+    >
+      {loading && (
+        <Status
+          className='m-status'
+          type='loading'
+          style={{ marginTop: '40vh' }}
+        />
+      )}
+      {error && (
+        <Status
+          className='m-status'
+          type='error'
+          style={{ marginTop: '40vh' }}
+          onReload={onReload}
+        />
+      )}
+      {!loading && !error && (
+        <>
+          {header && (
+            <Flex column none className='m-page-header m-flex-none'>
+              {header}
+            </Flex>
+          )}
+          {top && <View className='m-top m-flex-none'>{top}</View>}
+          <View
+            className={classNames('m-page-content', pageClassName)}
+            style={pageStyle}
+          >
+            {children}
+          </View>
+          {bottom && (
+            <SafeBottomMP className='m-bottom m-flex-none'>
+              {bottom}
+            </SafeBottomMP>
+          )}
+        </>
+      )}
+      {extra}
+      {tabbar && <View className='m-page-tabbar m-flex-none'>{tabbar}</View>}
+    </Flex>
+  )
+}
+
+export default Page
+export type { PageProps }

package/src/component/page/page.tsx

@@ -1,12 +1,16 @@
-import React, { useEffect, useRef, FC } from 'react'
-import {
-  Page as PageBase,
-  LayoutRoot,
-  LayoutRootV1,
-  PageProps as PageMPProps,
-} from '@gm-mobile/c-react'
+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'
 
-const PageMP: FC<PageMPProps> = (props) => {
+const PageMP: FC<
+  PageMPProps & {
+    onRefresh?: () => Promise<any>
+  }
+> = ({ children, onRefresh, ...props }) => {
+  const [state, setState] = useState({
+    refreshing: false,
+  })
   const refLoading = useRef<boolean | undefined>(false)
   useEffect(() => {
     // 和之前的不一样
@@ -20,10 +24,46 @@ const PageMP: FC<PageMPProps> = (props) => {
       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)
+      }
+      setState((state) => {
+        return {
+          ...state,
+          refreshing: false,
+        }
+      })
+    },
+  }
 
   return (
     <>
-      <PageBase {...props} />
+      <PageBase {...props}>
+        {onRefresh && (
+          <ScrollView
+            className='m-flex'
+            style={{ height: '100%' }}
+            scrollY
+            refresherEnabled
+            refresherBackground='transparent'
+            refresherTriggered={state.refreshing}
+            onRefresherRefresh={methods.refresh}
+          >
+            {children}
+          </ScrollView>
+        )}
+        {!onRefresh && children}
+      </PageBase>
       <LayoutRoot />
       <LayoutRootV1 />
     </>

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/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 }