@mpxjs/webpack-plugin 2.10.16-beta.9 → 2.10.16-xp.1

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

@@ -1,275 +0,0 @@
-import React, { forwardRef, useRef, useCallback, useContext, useState, useEffect } from 'react'
-// import { Camera, useCameraDevice, useCodeScanner, useCameraFormat } from 'react-native-vision-camera'
-import { getCustomEvent } from './getInnerListeners'
-import { noop } from '@mpxjs/utils'
-import { RouteContext } from './context'
-
-const qualityValue = {
-  high: 90,
-  normal: 75,
-  low: 50,
-  original: 100
-}
-
-interface CameraProps {
-  mode?: 'normal' | 'scanCode'
-  resolution?: 'low' | 'medium' | 'high'
-  devicePosition?: 'front' | 'back'
-  flash?: 'auto' | 'on' | 'off'
-  frameSize?: 'small' | 'medium' | 'large'
-  style?: Record<string, any>
-  bindstop?: () => void
-  binderror?: (error: { message: string }) => void
-  bindinitdone?: (result: { type: string, data: string }) => void
-  bindscancode?: (result: { type: string, data: string }) => void
-}
-
-interface TakePhotoOptions {
-  quality?: 'high' | 'normal' | 'low' | 'original'
-  success?: (result: { errMsg: string, tempImagePath: string }) => void
-  fail?: (result: { errMsg: string }) => void
-  complete?: (result: { errMsg: string, tempImagePath?: string }) => void
-}
-
-interface RecordOptions {
-  timeout?: number
-  success?: (result: { errMsg: string }) => void
-  fail?: (result: { errMsg: string, error?: any }) => void
-  complete?: (result: { errMsg: string }) => void
-  timeoutCallback?: (result: { errMsg: string, error?: any }) => void
-}
-
-interface StopRecordOptions {
-  success?: (result: { errMsg: string, tempVideoPath: string, duration: number }) => void
-  fail?: (result: { errMsg: string }) => void
-  complete?: (result: { errMsg: string, tempVideoPath?: string, duration?: number }) => void
-}
-
-interface CameraRef {
-  setZoom: (zoom: number) => void
-  takePhoto: (options?: TakePhotoOptions) => void
-  startRecord: (options?: RecordOptions) => void
-  stopRecord: (options?: StopRecordOptions) => void
-}
-
-type HandlerRef<T, P> = {
-  current: T | null
-}
-
-let RecordRes: any = null
-
-const _camera = forwardRef<HandlerRef<any, CameraProps>, CameraProps>((props: CameraProps, ref): JSX.Element | null => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { Camera, useCameraDevice, useCodeScanner, useCameraFormat } = require('react-native-vision-camera')
-  const cameraRef = useRef<any>(null)
-  const {
-    mode = 'normal',
-    resolution = 'medium',
-    devicePosition = 'back',
-    flash = 'auto',
-    frameSize = 'medium',
-    bindinitdone,
-    bindstop,
-    bindscancode
-  } = props
-
-  const isPhoto = mode === 'normal'
-  const device = useCameraDevice(devicePosition || 'back')
-  const { navigation } = useContext(RouteContext) || {}
-  const [zoomValue, setZoomValue] = useState<number>(1)
-  const [hasPermission, setHasPermission] = useState<boolean | null>(null)
-  const hasCamera = useRef(false)
-
-  // 先定义常量，避免在条件判断后使用
-  const maxZoom = device?.maxZoom || 1
-  const RESOLUTION_MAPPING: Record<string, { width: number, height: number }> = {
-    low: { width: 640, height: 480 },
-    medium: { width: 1280, height: 720 },
-    high: { width: 1920, height: 1080 }
-  }
-  const FRAME_SIZE_MAPPING: Record<string, { width: number, height: number }> = {
-    small: { width: 480, height: 360 },
-    medium: { width: 720, height: 540 },
-    large: { width: 1080, height: 810 }
-  }
-
-  // 所有 Hooks 必须在条件判断之前调用
-  const format = useCameraFormat(device, [
-    {
-      photoResolution: RESOLUTION_MAPPING[resolution],
-      videoResolution: FRAME_SIZE_MAPPING[frameSize] || RESOLUTION_MAPPING[resolution]
-    }
-  ])
-
-  const codeScanner = useCodeScanner({
-    codeTypes: ['qr', 'ean-13'],
-    onCodeScanned: (codes: any[]) => {
-      const result = codes.map(code => code.value).join(',')
-      bindscancode && bindscancode(getCustomEvent('scancode', {}, {
-        detail: {
-          result: codes.map(code => code.value).join(',')
-        }
-      }))
-    }
-  })
-
-  const onInitialized = useCallback(() => {
-    bindinitdone && bindinitdone(getCustomEvent('initdone', {}, {
-      detail: {
-        maxZoom
-      }
-    }))
-  }, [bindinitdone, maxZoom])
-
-  const onStopped = useCallback(() => {
-    bindstop && bindstop()
-  }, [bindstop])
-
-  const camera: CameraRef = {
-    setZoom: (zoom: number) => {
-      setZoomValue(zoom)
-    },
-    takePhoto: (options: TakePhotoOptions = {}) => {
-      const { success = noop, fail = noop, complete = noop } = options
-      cameraRef.current?.takePhoto?.({
-        quality: qualityValue[options.quality || 'normal'] as number
-      } as any).then((res: { path: any }) => {
-        const result = {
-          errMsg: 'takePhoto:ok',
-          tempImagePath: res.path
-        }
-        success(result)
-        complete(result)
-      }).catch(() => {
-        const result = {
-          errMsg: 'takePhoto:fail'
-        }
-        fail(result)
-        complete(result)
-      })
-    },
-    startRecord: (options: RecordOptions = {}) => {
-      let { timeout = 30, success = noop, fail = noop, complete = noop, timeoutCallback = noop } = options
-      timeout = timeout > 300 ? 300 : timeout
-      let recordTimer: NodeJS.Timeout | null = null
-      let isTimeout = false
-      try {
-        const result = {
-          errMsg: 'startRecord:ok'
-        }
-        success(result)
-        complete(result)
-
-        cameraRef.current?.startRecording?.({
-          onRecordingError: (error: any) => {
-            if (recordTimer) clearTimeout(recordTimer)
-            const errorResult = {
-              errMsg: 'startRecord:fail during recording',
-              error: error
-            }
-            timeoutCallback(errorResult)
-          },
-          onRecordingFinished: (video: any) => {
-            RecordRes = video
-            if (recordTimer) clearTimeout(recordTimer)
-          }
-        })
-
-        recordTimer = setTimeout(() => { // 超时自动停止
-          isTimeout = true
-          cameraRef.current?.stopRecording().catch(() => {
-            // 忽略停止录制时的错误
-          })
-        }, timeout * 1000)
-      } catch (error: any) {
-        if (recordTimer) clearTimeout(recordTimer)
-        const result = {
-          errMsg: 'startRecord:fail ' + (error.message || 'unknown error')
-        }
-        fail(result)
-        complete(result)
-      }
-    },
-    stopRecord: (options: StopRecordOptions = {}) => {
-      const { success = noop, fail = noop, complete = noop } = options
-      try {
-        cameraRef.current?.stopRecording().then(() => {
-          setTimeout(() => {
-            if (RecordRes) {
-              const result = {
-                errMsg: 'stopRecord:ok',
-                tempVideoPath: RecordRes?.path,
-                duration: RecordRes.duration * 1000 // 转成ms
-              }
-              RecordRes = null
-              success(result)
-              complete(result)
-            }
-          }, 200) // 延时200ms，确保录制结果已准备好
-        }).catch((e: any) => {
-          const result = {
-            errMsg: 'stopRecord:fail ' + (e.message || 'promise rejected')
-          }
-          fail(result)
-          complete(result)
-        })
-      } catch (error: any) {
-        const result = {
-          errMsg: 'stopRecord:fail ' + (error.message || 'unknown error')
-        }
-        fail(result)
-        complete(result)
-      }
-    }
-  }
-  useEffect(() => {
-    if (navigation) {
-      if (navigation && !navigation.camera) {
-        navigation.camera = camera
-      } else {
-        hasCamera.current = true
-        navigation.camera.multi = true
-      }
-    }
-    const checkCameraPermission = async () => {
-      try {
-        const cameraPermission = global?.__mpx?.config?.rnConfig?.cameraPermission
-        if (typeof cameraPermission === 'function') {
-          const permissionResult = await cameraPermission()
-          setHasPermission(permissionResult === true)
-        } else {
-          setHasPermission(true)
-        }
-      } catch (error) {
-        setHasPermission(false)
-      }
-    }
-    checkCameraPermission()
-  }, [])
-
-  if (!hasPermission || hasCamera.current || !device) {
-    return null
-  }
-
-  return (
-    <Camera
-      ref={cameraRef}
-      isActive={true}
-      photo={true}
-      video={true}
-      onInitialized={onInitialized}
-      onStopped={onStopped}
-      device={device}
-      flash={flash}
-      format={format}
-      codeScanner={!isPhoto ? codeScanner : undefined}
-      style={{ flex: 1 }}
-      zoom={zoomValue}
-      {...props}
-    />
-  )
-})
-
-_camera.displayName = 'MpxCamera'
-
-export default _camera

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

@@ -1,155 +0,0 @@
-/* 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/mpx-picker-view-column/pickerViewColumnItemLite.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import { LayoutChangeEvent, View } from 'react-native'
-import { extendObject } from '../utils'
-import { usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext'
-
-interface PickerColumnItemProps {
-  item: React.ReactElement
-  index: number
-  itemHeight: number
-  itemWidth?: number | '100%'
-  textStyle: Record<string, any>
-  textProps?: any
-  onItemLayout?: (e: LayoutChangeEvent) => void
-}
-
-const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
-  item,
-  index,
-  itemHeight,
-  itemWidth = '100%',
-  textStyle,
-  textProps,
-  onItemLayout
-}) => {
-  const textStyleFromAncestor = usePickerViewStyleContext()
-  const strKey = `picker-column-item-${index}`
-  const restProps = index === 0 ? { onLayout: onItemLayout } : {}
-  const itemProps = extendObject(
-    {
-      style: extendObject(
-        { height: itemHeight, width: '100%' },
-        textStyleFromAncestor,
-        textStyle,
-        item.props.style
-      )
-    },
-    textProps,
-    restProps
-  )
-  const realItem = React.cloneElement(item, itemProps)
-
-  return (
-    <View
-      key={strKey}
-      style={[
-        { height: itemHeight, width: itemWidth, pointerEvents: 'none' }
-      ]}
-    >
-      {realItem}
-    </View>
-  )
-}
-
-PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem'
-export default PickerViewColumnItem

package/lib/utils/get-build-tag-component.js

@@ -1,35 +0,0 @@
-const normalize = require('./normalize')
-const { isBuildInWebTag, isBuildInReactTag } = require('./dom-tag-config')
-
-module.exports = function getBuildInTagComponent (mode, tag) {
-  const aliBuildTag = ['view', 'text'].reduce((obj, name) => {
-    obj[name] = {
-      name: `mpx-${name}`,
-      resource: normalize.lib(`runtime/components/ali/mpx-${name}.mpx`)
-    }
-    return obj
-  }, {})
-
-  switch (mode) {
-    case 'ali':
-      return aliBuildTag[tag]
-    case 'web':
-      if (isBuildInWebTag(`mpx-${tag}`)) {
-        return {
-          name: `mpx-${tag}`,
-          resource: normalize.lib(`runtime/components/web/mpx-${tag}.vue`)
-        }
-      }
-      return undefined
-    case 'ios':
-    case 'android':
-    case 'harmony':
-      if (isBuildInReactTag(`mpx-${tag}`)) {
-        return {
-          name: `mpx-${tag}`,
-          resource: normalize.lib(`runtime/components/react/dist/mpx-${tag}.jsx`)
-        }
-      }
-      return undefined
-  }
-}