@mpxjs/webpack-plugin 2.10.14-beta.4 → 2.10.14-beta.5

package/lib/runtime/components/react/nav.tsx

@@ -0,0 +1,172 @@
+/* eslint-disable space-before-function-paren */
+import { createElement, useState, useMemo, memo, useContext, useLayoutEffect } from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { StatusBar, processColor, TouchableWithoutFeedback, Image, View, StyleSheet, Text } from 'react-native'
+import { useNavShared } from './useNavShared'
+
+function convertToHex(color?: string) {
+  try {
+    const intColor = processColor(color) as number | null | undefined
+    if (intColor === null || intColor === undefined) {
+      return null
+    }
+    // 将32位整数颜色值转换为RGBA
+    const r = (intColor >> 16) & 255
+    const g = (intColor >> 8) & 255
+    const b = intColor & 255
+    // 转换为十六进制
+    const hexR = r.toString(16).padStart(2, '0')
+    const hexG = g.toString(16).padStart(2, '0')
+    const hexB = b.toString(16).padStart(2, '0')
+    return `#${hexR}${hexG}${hexB}`
+  } catch (error) {
+    return null
+  }
+}
+
+const titleHeight = 44
+export function useInnerHeaderHeight(pageConfig: PageConfig) {
+  const safeArea = useSafeAreaInsets()
+  if (pageConfig.navigationStyle === 'custom') {
+    return 0
+  } else {
+    const safeAreaTop = safeArea?.top || 0
+    const headerHeight = safeAreaTop + titleHeight
+    return headerHeight
+  }
+}
+
+const styles = StyleSheet.create({
+  header: {
+    elevation: 3
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  backButton: {
+    position: 'absolute',
+    height: '100%',
+    width: 40,
+    left: 0,
+    top: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  backButtonImage: {
+    width: 22,
+    height: 22
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: 600,
+    width: '60%',
+    textAlign: 'center'
+  }
+})
+const NavColor = {
+  White: '#ffffff',
+  Black: '#000000'
+}
+// navigationBarTextStyle 只支持黑白 'white'/'black
+const validBarTextStyle = (textStyle?: string) => {
+  const textStyleColor = convertToHex(textStyle)
+  if (textStyle && textStyleColor && [NavColor.White, NavColor.Black].includes(textStyleColor)) {
+    return textStyleColor
+  } else {
+    return NavColor.White
+  }
+}
+
+export interface MpxNavProps {
+  pageConfig: PageConfig
+  navigation: any
+}
+
+export interface MpxNavFactorOptions {
+  Mpx: any
+}
+
+const BACK_ICON =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg=='
+
+function createMpxNav(options: MpxNavFactorOptions) {
+  const { Mpx } = options
+  const innerNav = memo(({ pageConfig, navigation }: MpxNavProps) => {
+    const [innerPageConfig, setPageConfig] = useState<PageConfig>(pageConfig || {})
+    const [customNav] = useNavShared()
+    const safeAreaTop = useSafeAreaInsets()?.top || 0
+
+    navigation.setPageConfig = (config: PageConfig) => {
+      setPageConfig(Object.assign({}, innerPageConfig, config))
+    }
+    const isCustom = innerPageConfig.navigationStyle === 'custom'
+    const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
+    // 状态栏的颜色
+    const statusBarElement = (
+      <StatusBar
+        translucent
+        backgroundColor='transparent'
+        barStyle={navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content'}></StatusBar>
+    )
+
+    if (isCustom)
+      return (
+        <>
+          {statusBarElement}
+          {customNav}
+        </>
+      )
+    // 假设是栈导航，获取栈的长度
+    const stackLength = navigation.getState()?.routes?.length
+    const onStackTopBack = Mpx.config?.rnConfig?.onStackTopBack
+    const isHandleStackTopBack = typeof onStackTopBack === 'function'
+
+    // 回退按钮与图标
+    // prettier-ignore
+    const backElement = stackLength > 1 || isHandleStackTopBack
+      ? (
+        <TouchableWithoutFeedback
+          onPress={() => {
+            if (stackLength <= 1 && isHandleStackTopBack) {
+              onStackTopBack()
+              return
+            }
+            navigation.goBack()
+          }}>
+          <View style={[styles.backButton]}>
+            <Image style={[styles.backButtonImage, { tintColor: navigationBarTextStyle }]} source={{ uri: BACK_ICON }}></Image>
+          </View>
+        </TouchableWithoutFeedback>
+        )
+      : null
+
+    return (
+      <View
+        style={[
+          styles.header,
+          {
+            paddingTop: safeAreaTop,
+            backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
+          }
+        ]}>
+        {statusBarElement}
+        {/* TODO: 确定 height 的有效性 */}
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-expect-error */}
+        <View style={styles.headerContent} height={titleHeight}>
+          {backElement}
+          <Text style={[styles.title, { color: navigationBarTextStyle }]} numberOfLines={1}>
+            {innerPageConfig.navigationBarTitleText?.trim() || ''}
+          </Text>
+        </View>
+      </View>
+    )
+  })
+
+  innerNav.displayName = 'MpxNav'
+  return innerNav
+}
+
+export default createMpxNav

package/lib/runtime/components/react/types/common.d.ts

@@ -18,3 +18,22 @@ export type ExtendedFunctionComponent = FunctionComponent & {
 }
 
 export type AnyFunc = (...args: ReadonlyArray<any>) => any
+
+declare global {
+  interface PageConfig {
+    /**
+     * 是否自定义导航栏
+     */
+    navigationStyle?: 'custom'
+    /**
+     * 标题栏样式
+     */
+    navigationBarTextStyle?: 'white' | 'black' | '#ffffff' | '#000000'
+    /**
+     * 页面标题
+     */
+    navigationBarTitleText?: string
+
+    [key: string]: any
+  }
+}

package/lib/runtime/components/react/useNavShared.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import { NavSharedContext } from './context'
+
+export function useNavShared () {
+  const navSharedValue = useContext(NavSharedContext)
+
+  return [navSharedValue.customNav, navSharedValue.setCustomNav] as const
+}

package/lib/runtime/components/web/mpx-nav-container.vue

@@ -0,0 +1,13 @@
+<script>
+  export default {
+    name: 'mpx-view',
+    data() {
+      return {}
+    },
+    props: {},
+    render() {
+      return this.$slots.default
+    },
+    methods: {}
+  }
+</script>

package/lib/runtime/components/wx/mpx-nav-container.mpx

@@ -0,0 +1,9 @@
+<template>
+    <slot />
+</template>
+<script type="application/json">
+    {
+        "component": true,
+        "usingComponents": {}
+    }
+</script>

package/lib/utils/dom-tag-config.js

@@ -78,7 +78,7 @@ const isBuildInWebTag = makeMap(
   'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
   'mpx-switch,mpx-web-view,mpx-checkbox,mpx-movable-view,mpx-radio,' +
   'mpx-tab-bar-container,mpx-form,mpx-navigator,mpx-rich-text,mpx-tab-bar,' +
-  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
+  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text,mpx-nav-container'
 )
 
 /**
@@ -91,7 +91,7 @@ const isBuildInReactTag = makeMap(
   'mpx-movable-area,mpx-label,mpx-keyboard-avoiding-view,mpx-input,mpx-inline-text,' +
   'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
   'mpx-rich-text,mpx-portal,mpx-popup,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
-  'mpx-icon,mpx-canvas'
+  'mpx-icon,mpx-canvas,mpx-nav-container'
 )
 
 const isSpace = makeMap('ensp,emsp,nbsp')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.14-beta.4",
+  "version": "2.10.14-beta.5",
   "description": "mpx compile core",
   "keywords": [
     "mpx"