chore: cr提交

didi · Nov 5, 2024 · 7c1170c · 7c1170c
1 parent e2b0511
commit 7c1170c
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 154 deletions.
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx
@@ -8,7 +8,8 @@ import {
   ReactNode,
   useContext,
   useCallback,
-  useMemo
+  useMemo,
+  useEffect
 } from 'react'
 import {
   View,
@@ -84,7 +85,7 @@ const CheckboxGroup = forwardRef<
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-  const getSelectionValue = useCallback((): string[] => {
+  const getValue = useCallback((): string[] => {
     const arr: string[] = []
     for (const key in groupValue) {
       if (groupValue[key].checked) {
@@ -94,44 +95,28 @@ const CheckboxGroup = forwardRef<
     return arr
   }, [])
 
-  const getValue = useCallback(() => {
-    return getSelectionValue()
-  }, [getSelectionValue])
-
   const resetValue = useCallback(() => {
     Object.keys(groupValue).forEach((key) => {
       groupValue[key].checked = false
       groupValue[key].setValue(false)
     })
   }, [])
 
-  if (formValuesMap) {
-    if (!props.name) {
-      warn('If a form component is used, the name attribute is required.')
-    } else {
-      formValuesMap.set(props.name, { getValue, resetValue })
+  useEffect(() => {
+    if (formValuesMap) {
+      if (!props.name) {
+        warn('If a form component is used, the name attribute is required.')
+      } else {
+        formValuesMap.set(props.name, { getValue, resetValue })
+      }
+    }
+    return () => {
+      if (formValuesMap && props.name) {
+        formValuesMap.delete(props.name)
+      }
     }
-  }
-
-  const notifyChange = useCallback((
-    evt: NativeSyntheticEvent<TouchEvent>
-  ) => {
-    const { bindchange } = propsRef.current
-    bindchange &&
-      bindchange(
-        getCustomEvent(
-          'tap',
-          evt,
-          {
-            layoutRef,
-            detail: {
-              value: getSelectionValue()
-            }
-          },
-          propsRef.current
-        )
-      )
   }, [])
+
 
   const innerProps = useInnerProps(
     props,
@@ -147,11 +132,30 @@ const CheckboxGroup = forwardRef<
   )
 
   const contextValue = useMemo(() => {
+    const notifyChange = (
+      evt: NativeSyntheticEvent<TouchEvent>
+    ) => {
+      const { bindchange } = propsRef.current
+      bindchange &&
+        bindchange(
+          getCustomEvent(
+            'tap',
+            evt,
+            {
+              layoutRef,
+              detail: {
+                value: getValue()
+              }
+            },
+            propsRef.current
+          )
+        )
+    }
     return {
       groupValue,
       notifyChange
     }
-  }, [notifyChange])
+  }, [])
   return (
     <View {...innerProps}>
       <CheckboxGroupContext.Provider value={contextValue}>

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx
@@ -29,7 +29,6 @@ interface FormProps {
 
 const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: FormProps, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(fromProps)
-  const formValuesMap = useRef(new Map()).current
   const {
     style,
     'enable-var': enableVar,
@@ -58,33 +57,6 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 
-  const submit = useCallback(() => {
-    const { bindsubmit } = propsRef.current
-    const formValue: Record<string, any> = {}
-    for (const name of formValuesMap.keys()) {
-      if (formValuesMap.get(name).getValue) {
-        formValue[name] = formValuesMap.get(name).getValue()
-      }
-    }
-    bindsubmit && bindsubmit(getCustomEvent(
-      'submit',
-      {},
-      {
-        detail: {
-          value: formValue
-        },
-        layoutRef
-      },
-      propsRef.current
-    ))
-  }, [])
-
-  const reset = useCallback(() => {
-    const { bindreset } = propsRef.current
-    bindreset && bindreset()
-    formValuesMap.forEach(item => item.resetValue())
-  }, [])
-
   const innerProps = useInnerProps(props, {
     style: { ...innerStyle, ...layoutStyle },
     ref: formRef,
@@ -95,12 +67,39 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
   ], { layoutRef })
 
   const contextValue = useMemo(() => {
+    const formValuesMap = new Map()
+    const submit = () => {
+      const { bindsubmit } = propsRef.current
+      const formValue: Record<string, any> = {}
+      for (const name of formValuesMap.keys()) {
+        if (formValuesMap.get(name).getValue) {
+          formValue[name] = formValuesMap.get(name).getValue()
+        }
+      }
+      bindsubmit && bindsubmit(getCustomEvent(
+        'submit',
+        {},
+        {
+          detail: {
+            value: formValue
+          },
+          layoutRef
+        },
+        propsRef.current
+      ))
+    }
+
+    const reset = () => {
+      const { bindreset } = propsRef.current
+      bindreset && bindreset()
+      formValuesMap.forEach(item => item.resetValue())
+    }
     return {
       formValuesMap,
       submit,
       reset
     }
-  }, [submit, reset])
+  }, [])
   return (
     <View
       {...innerProps}
@@ -116,7 +115,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
               textProps
             }
           )
-      }
+        }
       </FormContext.Provider>
     </View>
   )

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx
@@ -362,13 +362,21 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     return inputValue
   }
 
-  if (formValuesMap) {
-    if (!props.name) {
-      warn('If a form component is used, the name attribute is required.')
-    } else {
-      formValuesMap.set(props.name, { getValue, resetValue })
+  useEffect(() => {
+    if (formValuesMap) {
+      if (!props.name) {
+        warn('If a form component is used, the name attribute is required.')
+      } else {
+        formValuesMap.set(props.name, { getValue, resetValue })
+      }
     }
-  }
+    return () => {
+      if (formValuesMap && props.name) {
+        formValuesMap.delete(props.name)
+      }
+    }
+  }, [])
+
 
   useUpdateEffect(() => {
     if (!nodeRef?.current) {

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx
@@ -74,7 +74,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     const onTap = useCallback((evt: NativeSyntheticEvent<TouchEvent>) => {
       const { bindtap } = propsRef.current
       bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }))
-      contextRef.current.triggerChange?.(evt)
+      contextRef.current.triggerChange(evt)
     }, [])
 
     const innerProps = useInnerProps(

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx
@@ -38,9 +38,9 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
   useNodesRef(props, ref, movableViewRef)
 
   const contextValue = useMemo(() => ({
-    height: style.height || 10,
-    width: style.width || 10
-  }), [style.width, style.height])
+    height: normalStyle.height || 10,
+    width: normalStyle.width || 10
+  }), [normalStyle.width, normalStyle.height])
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef })
 

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
@@ -118,7 +118,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     varContextRef,
     setWidth,
     setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const { textStyle, innerStyle } = splitStyle(normalStyle)
 
@@ -145,7 +145,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   const nodeRef = useRef<View>(null)
 
   useNodesRef(props, ref, nodeRef, {
-    defaultStyle: styles.container,
+    defaultStyle: normalStyle,
     gestureRef: movableGestureRef
   })
 
@@ -250,8 +250,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     const maxY = MovableAreaLayout.height - scaledHeight - top
     const maxX = MovableAreaLayout.width - scaledWidth - left
 
-    let xRange:[min: number, max: number]
-    let yRange:[min: number, max: number]
+    let xRange: [min: number, max: number]
+    let yRange: [min: number, max: number]
 
     if (MovableAreaLayout.width < scaledWidth) {
       xRange = [maxX, 0]
@@ -329,46 +329,45 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     e.touches = e.allTouches
   }, [])
 
-  const handleTriggerStart = (e: any) => {
-    'worklet'
-    extendEvent(e)
-    bindtouchstart && runOnJS(bindtouchstart)(e)
-    catchtouchstart && runOnJS(catchtouchstart)(e)
-  }
+  const gesture = useMemo(() => {
+    const handleTriggerStart = (e: any) => {
+      'worklet'
+      extendEvent(e)
+      bindtouchstart && runOnJS(bindtouchstart)(e)
+      catchtouchstart && runOnJS(catchtouchstart)(e)
+    }
 
-  const handleTriggerMove = (e: any) => {
-    'worklet'
-    extendEvent(e)
-    const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove
-    const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove
-
-    if (hasTouchmove) {
-      if (touchEvent.value === 'htouchmove') {
-        bindhtouchmove && runOnJS(bindhtouchmove)(e)
-      } else if (touchEvent.value === 'vtouchmove') {
-        bindvtouchmove && runOnJS(bindvtouchmove)(e)
+    const handleTriggerMove = (e: any) => {
+      'worklet'
+      extendEvent(e)
+      const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove
+      const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove
+
+      if (hasTouchmove) {
+        if (touchEvent.value === 'htouchmove') {
+          bindhtouchmove && runOnJS(bindhtouchmove)(e)
+        } else if (touchEvent.value === 'vtouchmove') {
+          bindvtouchmove && runOnJS(bindvtouchmove)(e)
+        }
+        bindtouchmove && runOnJS(bindtouchmove)(e)
       }
-      bindtouchmove && runOnJS(bindtouchmove)(e)
-    }
 
-    if (hasCatchTouchmove) {
-      if (touchEvent.value === 'htouchmove') {
-        catchhtouchmove && runOnJS(catchhtouchmove)(e)
-      } else if (touchEvent.value === 'vtouchmove') {
-        catchvtouchmove && runOnJS(catchvtouchmove)(e)
+      if (hasCatchTouchmove) {
+        if (touchEvent.value === 'htouchmove') {
+          catchhtouchmove && runOnJS(catchhtouchmove)(e)
+        } else if (touchEvent.value === 'vtouchmove') {
+          catchvtouchmove && runOnJS(catchvtouchmove)(e)
+        }
+        catchtouchmove && runOnJS(catchtouchmove)(e)
       }
-      catchtouchmove && runOnJS(catchtouchmove)(e)
     }
-  }
-
-  const handleTriggerEnd = (e: any) => {
-    'worklet'
-    extendEvent(e)
-    bindtouchend && runOnJS(bindtouchend)(e)
-    catchtouchend && runOnJS(catchtouchend)(e)
-  }
 
-  const gesture = useMemo(() => {
+    const handleTriggerEnd = (e: any) => {
+      'worklet'
+      extendEvent(e)
+      bindtouchend && runOnJS(bindtouchend)(e)
+      catchtouchend && runOnJS(catchtouchend)(e)
+    }
     return Gesture.Pan()
       .onTouchesDown((e: GestureTouchEvent) => {
         'worklet'
@@ -463,7 +462,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         }
       })
       .withRef(movableGestureRef)
-  }, [disabled, direction, inertia, outOfBounds, handleTriggerMove, handleTriggerStart, handleTriggerEnd])
+  }, [disabled, direction, inertia, outOfBounds])
 
   if (simultaneousHandlers && simultaneousHandlers.length) {
     gesture.simultaneousWithExternalGesture(...simultaneousHandlers)
@@ -508,7 +507,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       <Animated.View
         ref={nodeRef}
         onLayout={onLayout}
-        style={[styles.container, innerStyle, animatedStyles, layoutStyle]}
+        style={[innerStyle, animatedStyles, layoutStyle]}
         {...catchEventHandlers}
       >
         {
@@ -521,7 +520,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
               textProps
             }
           )
-      }
+        }
       </Animated.View>
     </GestureDetector>
   )