@mpxjs/webpack-plugin 2.10.16-beta.5 → 2.10.16-beta.6

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

@@ -0,0 +1,155 @@
+/* eslint-disable space-before-function-paren */
+import { useState, useMemo, memo } from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { StatusBar, processColor, TouchableWithoutFeedback, Image, View, StyleSheet, Text } from 'react-native'
+
+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
+}
+
+const BACK_ICON =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg=='
+
+const MpxNav = memo(({ pageConfig, navigation }: MpxNavProps) => {
+  const [innerPageConfig, setPageConfig] = useState<PageConfig>(pageConfig || {})
+  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
+  // 假设是栈导航，获取栈的长度
+  const stackLength = navigation.getState()?.routes?.length
+  const onStackTopBack = mpxGlobal?.__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>
+  )
+})
+
+MpxNav.displayName = 'MpxNav'
+export default MpxNav

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/style-compiler/strip-conditional-loader.js

@@ -193,7 +193,17 @@ async function stripByPostcss(options) {
   const syntax = styleSyntaxProcesserMap[options.lang]?.()
   const defs = options.defs ?? {}
 
-  const afterConditionStrip = stripCondition(options.css, defs)
+  function stripContentCondition(content) {
+    content = stripCondition(content, defs)
+
+    if (options.lang === 'stylus') {
+      content = content.replace(/\t/g, '  ')
+    }
+
+    return content
+  }
+
+  const afterConditionStrip = stripContentCondition(options.css, defs)
 
     /**
    * @type {import('postcss').AcceptedPlugin[]}
@@ -204,7 +214,7 @@ async function stripByPostcss(options) {
         let content = await fs.readFile(filename, 'utf-8')
         const processer = postcss(plugins)
 
-        content = stripCondition(content, defs)
+        content = stripContentCondition(content, defs)
 
         const { css } = await processer.process(content, {
           syntax,
@@ -228,11 +238,24 @@ async function stripByPostcss(options) {
           })
         })
       }
-    })
+    }),
+    {
+      // less/scss syntax 在 postcss 重新生成 css 后，`//` 注释后面不会保留换行，会和后续的 css 语句和注释连在一起，导致后续语法错误
+      postcssPlugin: 'mpx-strip-conditional-loader-append-command',
+      CommentExit(comment) {
+        if (!comment.raws.right) {
+          comment.raws.right = '\n'
+          return
+        }
+
+        if (!comment.raws.right.startsWith('\n')) {
+          comment.raws.right = '\n' + comment.raws.right
+        }
+      }
+    }
   ]
 
   const processer = postcss(plugins)
-
   return processer.process(afterConditionStrip, {
     from: options.resourcePath,
     syntax

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.16-beta.5",
+  "version": "2.10.16-beta.6",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -30,6 +30,9 @@
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
     "@mpxjs/utils": "^2.10.16",
+    "postcss-less": "^6.0.0",
+    "postcss-scss": "^4.0.9",
+    "postcss-styl": "^0.12.3",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",