@mpxjs/webpack-plugin 2.10.3 → 2.10.4

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

@@ -1,7 +1,7 @@
 import { useRef, useMemo, RefObject } from 'react'
 import { hasOwn, collectDataset } from '@mpxjs/utils'
 import { omit, extendObject, useNavigation } from './utils'
-import eventConfigMap, { TAP_EVENTS } from './event.config'
+import eventConfigMap, { TAP_EVENTS, LONGPRESS_EVENTS } from './event.config'
 import {
   Props,
   AdditionalProps,
@@ -10,7 +10,7 @@ import {
   InnerRef,
   SetTimeoutReturnType,
   LayoutRef,
-  NativeTouchEvent,
+  ExtendedNativeTouchEvent,
   Navigation
 } from './types/getInnerListeners'
 
@@ -20,7 +20,7 @@ const globalEventState = {
 
 const getTouchEvent = (
   type: string,
-  event: NativeTouchEvent,
+  event: ExtendedNativeTouchEvent,
   props: Props,
   config: UseInnerPropsConfig,
   navigation: Navigation
@@ -110,7 +110,7 @@ export const getCustomEvent = (
 function handleEmitEvent (
   events: string[],
   type: string,
-  oe: NativeTouchEvent,
+  oe: ExtendedNativeTouchEvent,
   propsRef: Record<string, any>,
   config: UseInnerPropsConfig,
   navigation: Navigation
@@ -118,8 +118,22 @@ function handleEmitEvent (
   events.forEach((event) => {
     if (propsRef.current[event]) {
       const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
+      // 检查是否已经被上层的 catch 阻止
+      if ((type === 'tap' || type === 'longpress') && oe._stoppedEventTypes?.has(type)) {
+        return
+      }
       if (match) {
-        oe.stopPropagation()
+        const eventBase = match[2] || ''
+        if (eventBase === 'tap' || eventBase === 'longpress') {
+          // 为 tap、longpress 添加标记，影响后续的冒泡
+          if (!oe._stoppedEventTypes) {
+            oe._stoppedEventTypes = new Set()
+          }
+          oe._stoppedEventTypes.add(eventBase)
+        } else {
+          // 原生 touch 事件使用 stopPropagation
+          oe.stopPropagation()
+        }
       }
       propsRef.current[event](
         getTouchEvent(type, oe, propsRef.current, config, navigation)
@@ -128,7 +142,7 @@ function handleEmitEvent (
   })
 }
 
-function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>) {
+function checkIsNeedPress (e: ExtendedNativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>) {
   const tapDetailInfo = ref.current!.mpxPressInfo.detail || { x: 0, y: 0 }
   const nativeEvent = e.nativeEvent
   const currentPageX = nativeEvent.changedTouches[0].pageX
@@ -144,7 +158,7 @@ function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
   }
 }
 
-function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
+function handleTouchstart (e: ExtendedNativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
   e.persist()
   const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
   const bubblePressEvent = ['catchlongpress', 'bindlongpress']
@@ -168,18 +182,7 @@ function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
   const currentPressEvent =
         type === 'bubble' ? bubblePressEvent : capturePressEvent
   handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation)
-  const {
-    catchlongpress,
-    bindlongpress,
-    'capture-catchlongpress': captureCatchlongpress,
-    'capture-bindlongpress': captureBindlongpress
-  } = propsRef.current
-  if (
-    catchlongpress ||
-        bindlongpress ||
-        captureCatchlongpress ||
-        captureBindlongpress
-  ) {
+  if (LONGPRESS_EVENTS.some(eventName => propsRef.current[eventName])) {
     ref.current!.startTimer[type] = setTimeout(() => {
       // 只要触发过longpress, 全局就不再触发tap
       globalEventState.needPress = false
@@ -188,7 +191,7 @@ function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
   }
 }
 
-function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
+function handleTouchmove (e: ExtendedNativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
   const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
   const captureTouchEvent = [
     'capture-catchtouchmove',
@@ -202,7 +205,7 @@ function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
   }
 }
 
-function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
+function handleTouchend (e: ExtendedNativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
   // move event may not be triggered
   if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
     checkIsNeedPress(e, type, ref)
@@ -231,7 +234,7 @@ function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: R
 }
 
 function handleTouchcancel (
-  e: NativeTouchEvent,
+  e: ExtendedNativeTouchEvent,
   type: 'bubble' | 'capture',
   ref: RefObject<InnerRef>,
   propsRef: Record<string, any>,
@@ -252,7 +255,7 @@ function handleTouchcancel (
 }
 
 function createTouchEventHandler (eventName: 'onTouchStart'|'onTouchMove'|'onTouchEnd'|'onTouchCancel', type: 'bubble' | 'capture') {
-  return (e: NativeTouchEvent, ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) => {
+  return (e: ExtendedNativeTouchEvent, ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) => {
     const handlerMap = {
       onTouchStart: handleTouchstart,
       onTouchMove: handleTouchmove,
@@ -341,11 +344,11 @@ const useInnerProps = (
       return acc
     }, [])
     const finalEventKeys = [...new Set(transformedEventKeys)]
-    const events: Record<string, (e: NativeTouchEvent) => void> = {}
+    const events: Record<string, (e: ExtendedNativeTouchEvent) => void> = {}
 
     touchEventList.forEach((item) => {
       if (finalEventKeys.includes(item.eventName)) {
-        events[item.eventName] = (e: NativeTouchEvent) =>
+        events[item.eventName] = (e: ExtendedNativeTouchEvent) =>
           item.handler(e, ref, propsRef, config, navigation)
       }
     })

package/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -251,8 +251,8 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     context: context2D
   })
 
-  if (Platform.OS === 'android') {
-    const isAndroid9 = Platform.Version >= 28
+  if (__mpx_mode__ !== 'ios') {
+    const isAndroid9 = Platform.Version as number >= 28
     return createElement(View, innerProps, createElement(
       WebView,
       {

package/lib/runtime/components/react/mpx-inline-text.tsx

@@ -0,0 +1,18 @@
+import { Text, TextProps } from 'react-native'
+import { JSX, createElement } from 'react'
+
+import { extendObject } from './utils'
+
+const InlineText = (props: TextProps): JSX.Element => {
+  const {
+    allowFontScaling = false
+  } = props
+
+  return createElement(Text, extendObject({}, props, {
+    allowFontScaling
+  }))
+}
+
+InlineText.displayName = 'MpxInlineText'
+
+export default InlineText

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

@@ -54,7 +54,7 @@ import {
   TextInputSubmitEditingEventData
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
@@ -121,11 +121,7 @@ const keyboardTypeMap: Record<Type, string> = {
   text: 'default',
   number: 'numeric',
   idcard: 'default',
-  digit:
-    Platform.select({
-      ios: 'decimal-pad',
-      android: 'numeric'
-    }) || ''
+  digit: isIOS ? 'decimal-pad' : 'numeric'
 }
 
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {

package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx

@@ -3,6 +3,7 @@ import { DimensionValue, EmitterSubscription, Keyboard, Platform, View, ViewStyl
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated'
 import { GestureDetector, Gesture } from 'react-native-gesture-handler'
 import { KeyboardAvoidContext } from './context'
+import { isIOS } from './utils'
 
 type KeyboardAvoidViewProps = {
   children?: ReactNode
@@ -11,7 +12,6 @@ type KeyboardAvoidViewProps = {
 }
 
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: KeyboardAvoidViewProps) => {
-  const isIOS = Platform.OS === 'ios'
   const duration = isIOS ? 250 : 300
   const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad)
 

package/lib/runtime/components/react/mpx-picker/date.tsx

@@ -1,86 +1,243 @@
-import { View, TouchableWithoutFeedback } from 'react-native'
-import { DatePicker } from '@ant-design/react-native'
-import React, { forwardRef, useState, useRef, useEffect } from 'react'
-import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { DateProps, LayoutType } from './type'
-
-function formatTimeStr (time = ''): Date {
-  let [year, month, day]: any = time.split('-')
-  year = ~~year || 2000
-  month = ~~month || 1
-  day = ~~day || 1
-  return new Date(year, month - 1, day)
+import React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import MpxPickerView from '../mpx-picker-view'
+import MpxPickerViewColumn from '../mpx-picker-view-column'
+import { DateProps, TimeValue } from './type'
+import { HandlerRef } from '../useNodesRef'
+import { useUpdateEffect } from '../utils'
+import { years, months, daysInMonth, wrapDate, daysInMonthLength, START_YEAR, END_YEAR } from './dateData'
+
+type FormatObj = {
+  indexArr: number[]
+  rangeArr: string[][]
+  nameArr?: string[]
 }
 
-function dateToString (date: Date, fields: 'day' | 'month' | 'year' = 'day'): string {
-  const yyyy: string = date.getFullYear() + ''
-  const MM: string = ('0' + (date.getMonth() + 1)).slice(-2)
-  const dd: string = ('0' + date.getDate()).slice(-2)
-  let ret: string = yyyy
-  if (fields === 'month' || fields === 'day') {
-    ret += `-${MM}`
-    if (fields === 'day') {
-      ret += `-${dd}`
-    }
+const START_DATE: TimeValue = `${START_YEAR}-01-01`
+const END_DATE: TimeValue = `${END_YEAR}-12-31`
+const START_DATE_ARR = [START_YEAR, 1, 1]
+const END_DATE_ARR = [END_YEAR, 12, 31]
+
+const styles = StyleSheet.create({
+  pickerContainer: {
+    height: 240,
+    paddingHorizontal: 10,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10
+  },
+  pickerIndicator: {
+    height: 45
+  },
+  pickerItem: {
+    fontSize: 16,
+    lineHeight: 45,
+    textAlign: 'center'
+  }
+})
+
+const getColumnLength = (fields: DateProps['fields'] = 'day') => {
+  return fields === 'year' ? 1 : fields === 'month' ? 2 : 3
+}
+
+const compareDateStr = (date1: TimeValue | number[], date2: TimeValue | number[]) => {
+  const [y1 = START_YEAR, m1 = 0, d1 = 0] = typeof date1 === 'string' ? date1.split('-').map(Number) : date1
+  const [y2 = START_YEAR, m2 = 0, d2 = 0] = typeof date2 === 'string' ? date2.split('-').map(Number) : date2
+  const num1 = y1 * 10000 + m1 * 100 + d1
+  const num2 = y2 * 10000 + m2 * 100 + d2
+  if (num1 === num2) {
+    return 0
   }
-  return ret
+  return num1 > num2 ? 1 : -1
 }
 
-const _DatePicker = forwardRef<HandlerRef<View, DateProps>, DateProps>((props: DateProps, ref): React.JSX.Element => {
-  const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields, style } = props
-  const [datevalue, setDateValue] = useState(value)
-  // 存储layout布局信息
-  const layoutRef = useRef({})
-  const viewRef = useRef<View>(null)
-  const nodeRef = useRef<View>(null)
-  useNodesRef<View, DateProps>(props, ref, nodeRef, {
-    style
-  })
+const getDateArr = (date: TimeValue | number[]): number[] => {
+  const [y, m, d] = typeof date === 'string' ? date.split('-').map(Number) : date
+  return [y || 0, m || 0, d || 0]
+}
 
-  useEffect(() => {
-    value && setDateValue(value)
-  }, [value])
-
-  const onChange = (date: Date): void => {
-    const { fields = 'day' } = props
-    const ret = dateToString(date, fields)
-    setDateValue(ret)
-    bindchange && bindchange({ detail: { value: ret } })
+const calibrateDate = (date: TimeValue | number[], start: TimeValue, end: TimeValue): number[] => {
+  let startArr = getDateArr(start)
+  let endArr = getDateArr(end)
+  let dateArr = getDateArr(date)
+  if (compareDateStr(startArr, endArr) > 0) {
+    startArr = START_DATE_ARR
+  }
+  if (compareDateStr(endArr, startArr) < 0) {
+    endArr = END_DATE_ARR
+  }
+  if (compareDateStr(start, end) > 0) {
+    startArr = START_DATE_ARR
+    endArr = END_DATE_ARR
   }
+  if (compareDateStr(dateArr, endArr) > 0) {
+    dateArr = endArr
+  }
+  if (compareDateStr(dateArr, startArr) < 0) {
+    dateArr = startArr
+  }
+  return dateArr
+}
 
-  const onDismiss = (): void => {
-    bindcancel && bindcancel()
+const initDateStr2Arr = (dateStr: TimeValue | number[], start: TimeValue, end: TimeValue): number[] => {
+  if (!dateStr) {
+    const today = new Date()
+    const todayYear = today.getFullYear()
+    const todayMonth = today.getMonth() + 1
+    const todayDay = today.getDate()
+    dateStr = [todayYear, todayMonth, todayDay]
   }
+  const [y, m, d] = getDateArr(dateStr)
+  const year = Math.min(Math.max(START_YEAR, y), END_YEAR)
+  const month = Math.min(Math.max(1, m), 12)
+  const day = Math.min(Math.max(1, d), daysInMonthLength(year, month))
+  const res = [year, month, day]
+  return calibrateDate(res, start, end)
+}
 
-  const onElementLayout = (layout: LayoutType) => {
-    viewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-      props.getInnerLayout && props.getInnerLayout(layoutRef)
-    })
+const valueStr2Obj = (
+  _value: TimeValue | number[] = '', // eg: 2025-2-12
+  limit: number,
+  start: TimeValue,
+  end: TimeValue
+): FormatObj => {
+  const [y, m, d] = initDateStr2Arr(_value, start, end)
+  const ans = {
+    indexArr: [y - START_YEAR],
+    rangeArr: [years]
+  }
+  if (limit === 2) {
+    ans.indexArr.push(m - 1)
+    ans.rangeArr.push(months)
+  } else if (limit === 3) {
+    const days = daysInMonth(y, m)
+    ans.indexArr.push(m - 1, d - 1)
+    ans.rangeArr.push(months, days)
   }
+  return ans
+}
+
+const valueChanged2Obj = (currentObj: FormatObj, value: number[], limit = 3) => {
+  const currentValue = currentObj.indexArr
+  const rangeArr = currentObj.rangeArr
 
-  const dateProps = {
-    ref: nodeRef,
-    precision: fields,
-    value: formatTimeStr(datevalue),
-    minDate: formatTimeStr(start),
-    maxDate: formatTimeStr(end),
-    onChange,
-    onDismiss,
-    disabled
+  if (limit === 3 && (currentValue[0] !== value[0] || currentValue[1] !== value[1])) {
+    const days = daysInMonth(value[0], value[1] + 1)
+    rangeArr[2] = days
+    const maxIndex = days.length - 1
+    if (value[2] > maxIndex) {
+      value[2] = maxIndex
+    }
   }
-  const touchProps = {
-    onLayout: onElementLayout,
-    ref: viewRef
+
+  return {
+    indexArr: value,
+    rangeArr
   }
+}
+
+const valueChanged2Obj2 = (value: number[], limit = 3, start: TimeValue, end: TimeValue) => {
+  const y = value[0] + START_YEAR
+  const m = value[1] + 1
+  const d = value[2] + 1
+  return valueStr2Obj([y, m, d], limit, start, end)
+}
+
+const valueNum2String = (value: number[]) => {
+  return value.map((item, index) => {
+    if (index === 0) {
+      return item + START_YEAR
+    } else {
+      return wrapDate()(item + 1)
+    }
+  }).join('-')
+}
+
+const hasDiff = (currentValue: number[], value: number[], limit = 3) => {
+  for (let i = 0; i < limit; i++) {
+    if (currentValue[i] !== value[i]) {
+      return true
+    }
+  }
+  return false
+}
+
+const PickerDate = forwardRef<
+  HandlerRef<View, DateProps>,
+  DateProps
+>((props: DateProps, ref): React.JSX.Element => {
+  const { value = '', start = START_DATE, end = END_DATE, fields, bindchange } = props
+  const nodeRef = useRef(null)
+  const columnLength = useMemo(() => getColumnLength(fields), [fields])
+  const [formatObj, setFormatObj] = useState<FormatObj>(valueStr2Obj(value, columnLength, start, end))
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    return () => {
+      timerRef.current && clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  useUpdateEffect(() => {
+    const calibratedValue = valueStr2Obj(value, columnLength, start, end)
+    setFormatObj(calibratedValue)
+  }, [value, columnLength, start, end])
+
+  const updateValue = useCallback((value: TimeValue = '') => {
+    const calibratedValue = valueStr2Obj(value, columnLength, start, end)
+    setFormatObj(calibratedValue)
+  }, [columnLength, start, end])
+
+  const _props = useRef(props)
+  _props.current = props
+  useImperativeHandle(ref, () => ({
+    updateValue,
+    getNodeInstance: () => ({
+      props: _props,
+      nodeRef,
+      instance: {
+        style: {}
+      }
+    })
+  }))
+
+  const onChange = useCallback((e: { detail: { value: number[] } }) => {
+    const { value } = e.detail
+    const currentValue = formatObj.indexArr
+    const newObj = valueChanged2Obj(formatObj, value, columnLength)
+    if (hasDiff(currentValue, value, columnLength)) {
+      setFormatObj(newObj)
+      const newObj2 = valueChanged2Obj2(value, columnLength, start, end)
+      if (hasDiff(newObj.indexArr, newObj2.indexArr, columnLength)) {
+        timerRef.current && clearTimeout(timerRef.current)
+        timerRef.current = setTimeout(() => setFormatObj(newObj2))
+      }
+    }
+    bindchange?.({ detail: { value: valueNum2String(newObj.indexArr) } })
+  }, [formatObj, columnLength, bindchange, start, end])
+
+  const renderColumn = () => {
+    return formatObj.rangeArr?.map((item, index) => (
+      // @ts-expect-error ignore
+      <MpxPickerViewColumn key={index}>
+        {item.map((item, index) => {
+          return <Text key={index} style={styles.pickerItem}>
+            {item}
+          </Text>
+        })}
+      </MpxPickerViewColumn>
+    ))
+  }
+
   return (
-    <DatePicker {...dateProps}>
-      <TouchableWithoutFeedback>
-        <View {...touchProps}>{children}</View>
-      </TouchableWithoutFeedback>
-    </DatePicker>
-  )
+    <MpxPickerView
+      style={styles.pickerContainer}
+      indicator-style={styles.pickerIndicator}
+      value={formatObj.indexArr}
+      bindchange={onChange}
+    >
+      {renderColumn()}
+    </MpxPickerView>)
 })
 
-_DatePicker.displayName = 'mpx-picker-date'
-export default _DatePicker
+PickerDate.displayName = 'MpxPickerDate'
+export default PickerDate

package/lib/runtime/components/react/mpx-picker/dateData.ts

@@ -0,0 +1,22 @@
+export const wrapDate = (union = '') => (num: number) => String(num).padStart(2, '0') + union
+
+export const START_YEAR = 1900
+export const END_YEAR = 2099
+
+export const years = Array.from({ length: 200 }, (_, index) => index + START_YEAR + '年')
+
+export const months = Array.from({ length: 12 }, (_, index) => index + 1).map(wrapDate('月'))
+
+export const daysInMonthLength = (year: number, month: number) => {
+  return month === 2
+    ? year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)
+      ? 29
+      : 28
+    : [4, 6, 9, 11].includes(month)
+        ? 30
+        : 31
+}
+
+export const daysInMonth = (year: number, month: number) => {
+  return Array.from({ length: daysInMonthLength(year, month) }, (_, index) => index + 1).map(wrapDate('日'))
+}