@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.71

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+
+type MaskProps = {
+  itemHeight: number
+  maskContainerStyle?: StyleProp<ViewStyle>
+}
+
+const _PickerViewMask = ({
+  itemHeight,
+  maskContainerStyle
+}: MaskProps) => {
+  return (
+    <View style={[styles.maskContainer, maskContainerStyle]} pointerEvents={'none'}>
+      <LinearGradient colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.5)']} style={{ flex: 1 }} />
+      <View style={{ height: itemHeight }} />
+      <LinearGradient colors={['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)']} style={{ flex: 1 }} />
+    </View>
+  )
+}
+const styles = StyleSheet.create({
+  maskContainer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 100
+  }
+})
+
+_PickerViewMask.displayName = 'MpxPickerViewMask'
+export default _PickerViewMask

package/lib/runtime/components/react/types/{getInnerListeners.ts → getInnerListeners.d.ts}

@@ -13,6 +13,8 @@ type RemoveProps = string[];
 
 type NativeTouchEvent = NativeSyntheticEvent<NativeEvent>
 
+type Navigation = Record<string, any>
+
 interface NativeEvent {
   timestamp: number;
   pageX: number;
@@ -36,10 +38,6 @@ interface InnerRef {
     bubble: null | ReturnType<typeof setTimeout>;
     capture: null | ReturnType<typeof setTimeout>;
   };
-  needPress: {
-    bubble: boolean;
-    capture: boolean;
-  };
   mpxPressInfo: {
     detail: {
       x: number;
@@ -65,5 +63,6 @@ export {
   InnerRef,
   LayoutRef,
   SetTimeoutReturnType,
-  DataSetType
+  DataSetType,
+  Navigation
 }

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

@@ -19,10 +19,21 @@ declare module '@mpxjs/utils' {
       bottom: number
       left: number
       right: number
-    }
+    },
+    layout: {
+      x: number
+      y: number
+      width: number
+      height: number
+    },
+    setOptions: (params: Record<string, any>) => void
   } | undefined
 }
 
 declare let global: {
   __formatValue (value: string): string | number
 } & Record<string, any>
+
+declare module '@react-navigation/native' {
+   export function useNavigation (): Record<string, any>
+}

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

@@ -13,6 +13,7 @@ import {
   WithTimingConfig,
   AnimationCallback
 } from 'react-native-reanimated'
+import { error } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -83,12 +84,34 @@ const InitialValue: ExtendedViewStyle = Object.assign({
 const TransformOrigin = 'transformOrigin'
 // transform
 const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
+// 多value解析
+const parseValues = (str: string, char = ' ') => {
+  let stack = 0
+  let temp = ''
+  const result = []
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '(') {
+      stack++
+    } else if (str[i] === ')') {
+      stack--
+    }
+    // 非括号内 或者 非分隔字符且非空
+    if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+      temp += str[i]
+    }
+    if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+      result.push(temp)
+      temp = ''
+    }
+  }
+  return result
+}
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 const parseTransform = (transformStr: string) => {
-  const values = transformStr.trim().split(/\s+/)
+  const values = parseValues(transformStr)
   const transform: {[propName: string]: string|number|number[]}[] = []
   values.forEach(item => {
-    const match = item.match(/([/\w]+)\(([^)]+)\)/)
+    const match = item.match(/([/\w]+)\((.+)\)/)
     if (match && match.length >= 3) {
       let key = match[1]
       const val = match[2]
@@ -109,7 +132,7 @@ const parseTransform = (transformStr: string) => {
           break
         case 'matrix':
         case 'matrix3d':
-          transform.push({ [key]: val.split(',').map(val => +val) })
+          transform.push({ [key]: parseValues(val, ',').map(val => +val) })
           break
         case 'translate':
         case 'scale':
@@ -120,8 +143,8 @@ const parseTransform = (transformStr: string) => {
         {
           // 2 个以上的值处理
           key = key.replace('3d', '')
-          const vals = val.split(',', key === 'rotate' ? 4 : 3)
-          // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+          const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
+          // scale(.5) === scaleX(.5) scaleY(.5)
           if (vals.length === 1 && key === 'scale') {
             vals.push(vals[0])
           }
@@ -144,20 +167,32 @@ const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
   })
 }
 
-export default function useAnimationHooks<T, P> (props: _ViewProps) {
-  const { style = {}, animation } = props
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
+  const { style = {}, animation, enableAnimation } = props
+
+  const enableStyleAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableStyleAnimation)
+  if (enableAnimationRef.current !== enableStyleAnimation) {
+    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+
+  if (!enableAnimationRef.current) return { enableStyleAnimation: false }
+
   const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedStyleKeys = useSharedValue([] as (string|string[])[])
   // 记录动画key的style样式值 没有的话设置为false
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean})
   // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
   // ** 全量 style prop sharedValue
   // 不能做增量的原因：
   // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
   // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const shareValMap = useMemo(() => {
     return Object.keys(InitialValue).reduce((valMap, key) => {
       const defaultVal = getInitialVal(key, isTransform(key))
@@ -166,6 +201,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
   }, [])
   // ** 获取动画样式prop & 驱动动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     if (id === -1) return
     // 更新动画样式 key map
@@ -186,6 +222,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
   //   })
   // }, [style])
   // ** 清空动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     return () => {
       Object.values(shareValMap).forEach((value) => {
@@ -218,12 +255,14 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       }
       // 添加每个key的多次step动画
       animatedKeys.forEach(key => {
-        let toVal = (rules.get(key) || transform.get(key))
+        const ruleV = isTransform(key) ? transform.get(key) : rules.get(key)
         // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-        if (toVal === undefined) {
-          toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value
-        }
-        const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
+        const toVal = ruleV !== undefined
+          ? ruleV
+          : index > 0
+            ? lastValueMap[key]
+            : shareValMap[key].value
+        const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
         needSetCallback = false
         if (!sequence[key]) {
           sequence[key] = [animation]
@@ -231,7 +270,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
           sequence[key].push(animation)
         }
         // 更新一下 lastValueMap
-        lastValueMap[key] = toVal
+        lastValueMap[key] = toVal!
       })
       // 赋值驱动动画
       animatedKeys.forEach((key) => {
@@ -311,7 +350,8 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     }, {} as { [propName: string]: string | number })
   }
   // ** 生成动画样式
-  return useAnimatedStyle(() => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const animationStyle = useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
     return animatedStyleKeys.value.reduce((styles, key) => {
       // console.info('getAnimationStyles', key, shareValMap[key].value)
@@ -327,6 +367,11 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
         styles[key] = shareValMap[key].value
       }
       return styles
-    }, Object.assign({}, originalStyle) as ExtendedViewStyle)
+    }, {} as ExtendedViewStyle)
   })
+
+  return {
+    enableStyleAnimation: enableAnimationRef.current,
+    animationStyle
+  }
 }

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

@@ -1,11 +1,14 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
-import { VarContext } from './context'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image, Platform } from 'react-native'
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
+import { VarContext, ScrollViewContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
+import { useNavigation } from '@react-navigation/native'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
-import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
+import type { AnyFunc, ExtendedFunctionComponent, ExtendedViewStyle } from './types/common'
+import { runOnJS } from 'react-native-reanimated'
+import { Gesture } from 'react-native-gesture-handler'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -18,8 +21,15 @@ export const HIDDEN_STYLE = {
   opacity: 0
 }
 
-const varDecRegExp = /^--.*/
+declare const __mpx_mode__: 'ios' | 'android'
+
+export const isIOS = __mpx_mode__ === 'ios'
+export const isAndroid = __mpx_mode__ === 'android'
+
+const varDecRegExp = /^--/
 const varUseRegExp = /var\(/
+const unoVarDecRegExp = /^--un-/
+const unoVarUseRegExp = /var\(--un-/
 const calcUseRegExp = /calc\(/
 const envUseRegExp = /env\(/
 
@@ -30,14 +40,13 @@ const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
   'safe-area-inset-left': 'left'
 }
 
-function getSafeAreaInset (name: string) {
-  const navigation = getFocusedNavigation()
+function getSafeAreaInset (name: string, navigation: Record<string, any>) {
   const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets)
   return insets[safeAreaInsetMap[name]]
 }
 
 export function omit<T, K extends string> (obj: T, fields: K[]): Omit<T, K> {
-  const shallowCopy: any = Object.assign({}, obj)
+  const shallowCopy: any = extendObject({}, obj)
   for (let i = 0; i < fields.length; i += 1) {
     const key = fields[i]
     delete shallowCopy[key]
@@ -77,7 +86,7 @@ export const parseInlineStyle = (inlineStyle = ''): Record<string, string> => {
     const [k, v, ...rest] = style.split(':')
     if (rest.length || !v || !k) return styleObj
     const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase())
-    return Object.assign(styleObj, { [key]: global.__formatValue(v.trim()) })
+    return extendObject(styleObj, { [key]: global.__formatValue(v.trim()) })
   }, {})
 }
 
@@ -230,7 +239,7 @@ function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<s
   })
 }
 
-function transformEnv (styleObj: Record<string, any>, envKeyPaths: Array<Array<string>>) {
+function transformEnv (styleObj: Record<string, any>, envKeyPaths: Array<Array<string>>, navigation: Record<string, any>) {
   envKeyPaths.forEach((envKeyPath) => {
     setStyle(styleObj, envKeyPath, ({ target, key, value }) => {
       const parsed = parseFunc(value, 'env')
@@ -238,7 +247,7 @@ function transformEnv (styleObj: Record<string, any>, envKeyPaths: Array<Array<s
       parsed.forEach(({ start, end, args }) => {
         const name = args[0]
         const fallback = args[1] || ''
-        const value = '' + (getSafeAreaInset(name) ?? global.__formatValue(fallback))
+        const value = '' + (getSafeAreaInset(name, navigation) ?? global.__formatValue(fallback))
         replaced.replace(start, end - 1, value)
       })
       target[key] = global.__formatValue(replaced.source())
@@ -286,20 +295,27 @@ interface TransformStyleConfig {
 
 export function useTransformStyle (styleObj: Record<string, any> = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig) {
   const varStyle: Record<string, any> = {}
+  const unoVarStyle: Record<string, any> = {}
   const normalStyle: Record<string, any> = {}
+  const normalStyleRef = useRef<Record<string, any>>({})
+  const normalStyleChangedRef = useRef(false)
   let hasVarDec = false
   let hasVarUse = false
   let hasSelfPercent = false
   const varKeyPaths: Array<Array<string>> = []
+  const unoVarKeyPaths: Array<Array<string>> = []
   const percentKeyPaths: Array<Array<string>> = []
   const calcKeyPaths: Array<Array<string>> = []
   const envKeyPaths: Array<Array<string>> = []
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
+  const navigation = useNavigation()
 
   function varVisitor ({ key, value, keyPath }: VisitorArg) {
     if (keyPath.length === 1) {
-      if (varDecRegExp.test(key)) {
+      if (unoVarDecRegExp.test(key)) {
+        unoVarStyle[key] = value
+      } else if (varDecRegExp.test(key)) {
         hasVarDec = true
         varStyle[key] = value
       } else {
@@ -308,25 +324,32 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       }
     }
     // 对于var定义中使用的var无需替换值，可以通过resolveVar递归解析出值
-    if (!varDecRegExp.test(key) && varUseRegExp.test(value)) {
-      hasVarUse = true
-      varKeyPaths.push(keyPath.slice())
+    if (!varDecRegExp.test(key)) {
+      // 一般情况下一个样式属性中不会混用unocss var和普通css var，可分开进行互斥处理
+      if (unoVarUseRegExp.test(value)) {
+        unoVarKeyPaths.push(keyPath.slice())
+      } else if (varUseRegExp.test(value)) {
+        hasVarUse = true
+        varKeyPaths.push(keyPath.slice())
+      }
     }
   }
 
-  // traverse var
+  // traverse var & generate normalStyle
   traverseStyle(styleObj, [varVisitor])
+
   hasVarDec = hasVarDec || !!externalVarContext
   enableVar = enableVar || hasVarDec || hasVarUse
   const enableVarRef = useRef(enableVar)
   if (enableVarRef.current !== enableVar) {
     error('css variable use/declare should be stable in the component lifecycle, or you can set [enable-var] with true.')
   }
-  // apply var
+  // apply css var
   const varContextRef = useRef({})
   if (enableVarRef.current) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const varContext = useContext(VarContext)
-    const newVarContext = Object.assign({}, varContext, externalVarContext, varStyle)
+    const newVarContext = extendObject({}, varContext, externalVarContext, varStyle)
     // 缓存比较newVarContext是否发生变化
     if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
       varContextRef.current = newVarContext
@@ -334,70 +357,86 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     transformVar(normalStyle, varKeyPaths, varContextRef.current)
   }
 
-  function envVisitor ({ value, keyPath }: VisitorArg) {
-    if (envUseRegExp.test(value)) {
-      envKeyPaths.push(keyPath.slice())
-    }
+  // apply unocss var
+  if (unoVarKeyPaths.length) {
+    transformVar(normalStyle, unoVarKeyPaths, unoVarStyle)
   }
 
-  function calcVisitor ({ value, keyPath }: VisitorArg) {
-    if (calcUseRegExp.test(value)) {
-      calcKeyPaths.push(keyPath.slice())
-    }
+  const { clone, diff } = diffAndCloneA(normalStyle, normalStyleRef.current)
+  if (diff) {
+    normalStyleRef.current = clone
+    normalStyleChangedRef.current = !normalStyleChangedRef.current
   }
 
-  function percentVisitor ({ key, value, keyPath }: VisitorArg) {
-    if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-      hasSelfPercent = true
-      percentKeyPaths.push(keyPath.slice())
-    } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
-      percentKeyPaths.push(keyPath.slice())
+  const memoResult = useMemo(() => {
+    // transform can be memoized
+    function envVisitor ({ value, keyPath }: VisitorArg) {
+      if (envUseRegExp.test(value)) {
+        envKeyPaths.push(keyPath.slice())
+      }
     }
-  }
 
-  // traverse env & calc & percent
-  traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor])
+    function calcVisitor ({ value, keyPath }: VisitorArg) {
+      if (calcUseRegExp.test(value)) {
+        calcKeyPaths.push(keyPath.slice())
+      }
+    }
 
-  const percentConfig = {
-    width,
-    height,
-    fontSize: normalStyle.fontSize,
-    parentWidth,
-    parentHeight,
-    parentFontSize
-  }
+    function percentVisitor ({ key, value, keyPath }: VisitorArg) {
+      if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
+        hasSelfPercent = true
+        percentKeyPaths.push(keyPath.slice())
+      } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+        percentKeyPaths.push(keyPath.slice())
+      }
+    }
 
-  // apply env
-  transformEnv(normalStyle, envKeyPaths)
-  // apply percent
-  transformPercent(normalStyle, percentKeyPaths, percentConfig)
-  // apply calc
-  transformCalc(normalStyle, calcKeyPaths, (value: string, key: string) => {
-    if (PERCENT_REGEX.test(value)) {
-      const resolved = resolvePercent(value, key, percentConfig)
-      return typeof resolved === 'number' ? resolved : 0
-    } else {
-      const formatted = global.__formatValue(value)
-      if (typeof formatted === 'number') {
-        return formatted
+    // traverse env & calc & percent
+    traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor])
+
+    const percentConfig = {
+      width,
+      height,
+      fontSize: normalStyle.fontSize,
+      parentWidth,
+      parentHeight,
+      parentFontSize
+    }
+
+    // apply env
+    transformEnv(normalStyle, envKeyPaths, navigation)
+    // apply percent
+    transformPercent(normalStyle, percentKeyPaths, percentConfig)
+    // apply calc
+    transformCalc(normalStyle, calcKeyPaths, (value: string, key: string) => {
+      if (PERCENT_REGEX.test(value)) {
+        const resolved = resolvePercent(value, key, percentConfig)
+        return typeof resolved === 'number' ? resolved : 0
       } else {
-        warn('calc() only support number, px, rpx, % temporarily.')
-        return 0
+        const formatted = global.__formatValue(value)
+        if (typeof formatted === 'number') {
+          return formatted
+        } else {
+          warn('calc() only support number, px, rpx, % temporarily.')
+          return 0
+        }
       }
+    })
+    // transform number enum stringify
+    transformStringify(normalStyle)
+
+    return {
+      normalStyle,
+      hasSelfPercent
     }
-  })
-  // transform number enum stringify
-  transformStringify(normalStyle)
+  }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize])
 
-  return {
-    normalStyle,
-    hasSelfPercent,
+  return extendObject({
     hasVarDec,
-    enableVarRef,
     varContextRef,
     setWidth,
     setHeight
-  }
+  }, memoResult)
 }
 
 export interface VisitorArg {
@@ -477,7 +516,7 @@ interface LayoutConfig {
 export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }: LayoutConfig) => {
   const layoutRef = useRef({})
   const hasLayoutRef = useRef(false)
-  const layoutStyle: Record<string, any> = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}
+  const layoutStyle = useMemo(() => { return !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {} }, [hasLayoutRef.current])
   const layoutProps: Record<string, any> = {}
   const enableOffset = props['enable-offset']
   if (hasSelfPercent || onLayout || enableOffset) {
@@ -534,13 +573,14 @@ export const debounce = <T extends AnyFunc> (
 ): ((...args: Parameters<T>) => void) & { clear: () => void } => {
   let timer: any
   const wrapper = (...args: ReadonlyArray<any>) => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
     timer = setTimeout(() => {
       func(...args)
     }, delay)
   }
   wrapper.clear = () => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
+    timer = null
   }
   return wrapper
 }
@@ -564,8 +604,8 @@ export const useStableCallback = <T extends AnyFunc | null | undefined> (
   )
 }
 
-export const usePrevious = <T, > (value: T): T | undefined => {
-  const ref = useRef<T | undefined>(undefined)
+export function usePrevious<T> (value: T): T | undefined {
+  const ref = useRef<T | undefined>()
   const prev = ref.current
   ref.current = value
   return prev
@@ -610,3 +650,67 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
     return acc
   }, {})
 }
+
+export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+  const enableHoverRef = useRef(enableHover)
+  if (enableHoverRef.current !== enableHover) {
+    error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
+  }
+
+  if (!enableHoverRef.current) return { isHover: false }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const gestureRef = useContext(ScrollViewContext).gestureRef
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [isHover, setIsHover] = useState(false)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dataRef = useRef<{
+    startTimer?: ReturnType<typeof setTimeout>
+    stayTimer?: ReturnType<typeof setTimeout>
+  }>({})
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    return () => {
+      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    }
+  }, [])
+
+  const setStartTimer = () => {
+    if (disabled) return
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.startTimer = setTimeout(() => {
+      setIsHover(true)
+    }, +hoverStartTime)
+  }
+
+  const setStayTimer = () => {
+    if (disabled) return
+    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.stayTimer = setTimeout(() => {
+      setIsHover(false)
+    }, +hoverStayTime)
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const gesture = useMemo(() => {
+    return Gesture.Pan()
+      .onTouchesDown(() => {
+        'worklet'
+        runOnJS(setStartTimer)()
+      })
+      .onTouchesUp(() => {
+        'worklet'
+        runOnJS(setStayTimer)()
+      })
+  }, [])
+
+  if (gestureRef) {
+    gesture.simultaneousWithExternalGesture(gestureRef)
+  }
+
+  return {
+    isHover,
+    gesture
+  }
+}

package/lib/runtime/components/web/mpx-checkbox.vue

@@ -30,10 +30,10 @@
             if (this.disabled) {
               return
             }
+            this.isChecked = !this.isChecked
             if (this.group) {
               this.group.notifyChange()
             }
-            this.isChecked = !this.isChecked
           }
         },
         force: true