@mpxjs/webpack-plugin 2.9.65 → 2.9.67

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

@@ -4,16 +4,15 @@
  * ✔ bindsubmit
  * ✔ bindreset
  */
-
 import { View } from 'react-native'
-import { JSX, useRef, forwardRef, ReactNode } from 'react'
+import { JSX, useRef, forwardRef, ReactNode, useMemo, useCallback } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
 import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils'
 interface FormProps {
   style?: Record<string, any>;
-  children: ReactNode;
+  children?: ReactNode;
   'enable-offset'?: boolean;
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>;
@@ -30,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,
@@ -54,34 +52,10 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
   const formRef = useRef(null)
   useNodesRef(props, ref, formRef)
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
-
-  const submit = () => {
-    const { bindsubmit } = props
-    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
-      },
-      props
-    ))
-  }
+  const propsRef = useRef<FormProps>({})
+  propsRef.current = props
 
-  const reset = () => {
-    const { bindreset } = props
-    bindreset && bindreset()
-    formValuesMap.forEach(item => item.resetValue())
-  }
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 
   const innerProps = useInnerProps(props, {
     style: { ...innerStyle, ...layoutStyle },
@@ -92,11 +66,45 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
     'bindreset'
   ], { 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
+    }
+  }, [])
   return (
     <View
       {...innerProps}
     >
-      <FormContext.Provider value={{ formValuesMap, submit, reset }}>
+      <FormContext.Provider value={contextValue}>
         {
           wrapChildren(
             props,
@@ -107,12 +115,12 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
               textProps
             }
           )
-      }
+        }
       </FormContext.Provider>
     </View>
   )
 })
 
-_Form.displayName = 'mpx-form'
+_Form.displayName = 'MpxForm'
 
 export default _Form

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

@@ -102,6 +102,6 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
   }
 )
 
-Icon.displayName = 'mpx-icon'
+Icon.displayName = 'MpxIcon'
 
 export default Icon

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

@@ -298,8 +298,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   [],
   {
     layoutRef
-  }
-  )
+  })
 
   // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) {
   //   return (
@@ -341,6 +340,6 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   )
 })
 
-Image.displayName = 'mpx-image'
+Image.displayName = 'MpxImage'
 
 export default Image

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

@@ -246,44 +246,41 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onInputFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    bindfocus &&
-      bindfocus(
-        getCustomEvent(
-          'focus',
-          evt,
-          {
-            detail: {
-              value: tmpValue.current || ''
-            },
-            layoutRef
+    bindfocus!(
+      getCustomEvent(
+        'focus',
+        evt,
+        {
+          detail: {
+            value: tmpValue.current || ''
           },
-          props
-        )
+          layoutRef
+        },
+        props
       )
+    )
   }
 
   const onInputBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    bindblur &&
-      bindblur(
-        getCustomEvent(
-          'blur',
-          evt,
-          {
-            detail: {
-              value: tmpValue.current || '',
-              cursor: cursorIndex.current
-            },
-            layoutRef
+    bindblur!(
+      getCustomEvent(
+        'blur',
+        evt,
+        {
+          detail: {
+            value: tmpValue.current || '',
+            cursor: cursorIndex.current
           },
-          props
-        )
+          layoutRef
+        },
+        props
       )
+    )
   }
 
   const onKeyPress = (evt: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-    bindconfirm &&
-      evt.nativeEvent.key === 'Enter' &&
-      bindconfirm(
+    evt.nativeEvent.key === 'Enter' &&
+      bindconfirm!(
         getCustomEvent(
           'confirm',
           evt,
@@ -299,21 +296,36 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onSubmitEditing = (evt: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
-    bindconfirm &&
-      multiline &&
-      bindconfirm(
-        getCustomEvent(
-          'confirm',
-          evt,
-          {
-            detail: {
-              value: tmpValue.current || ''
-            },
-            layoutRef
+    bindconfirm!(
+      getCustomEvent(
+        'confirm',
+        evt,
+        {
+          detail: {
+            value: tmpValue.current || ''
           },
-          props
-        )
+          layoutRef
+        },
+        props
       )
+    )
+  }
+
+  const onSelectionChange = (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+    bindselectionchange!(
+      getCustomEvent(
+        'selectionchange',
+        evt,
+        {
+          detail: {
+            selectionStart: evt.nativeEvent.selection.start,
+            selectionEnd: evt.nativeEvent.selection.end
+          },
+          layoutRef
+        },
+        props
+      )
+    )
   }
 
   const onContentSizeChange = (evt: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
@@ -342,24 +354,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     }
   }
 
-  const onSelectionChange = (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
-    bindselectionchange &&
-      bindselectionchange(
-        getCustomEvent(
-          'selectionchange',
-          evt,
-          {
-            detail: {
-              selectionStart: evt.nativeEvent.selection.start,
-              selectionEnd: evt.nativeEvent.selection.end
-            },
-            layoutRef
-          },
-          props
-        )
-      )
-  }
-
   const resetValue = () => {
     setInputValue('')
   }
@@ -376,6 +370,14 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     }
   }
 
+  useEffect(() => {
+    return () => {
+      if (formValuesMap && props.name) {
+        formValuesMap.delete(props.name)
+      }
+    }
+  }, [])
+
   useUpdateEffect(() => {
     if (!nodeRef?.current) {
       return
@@ -396,7 +398,12 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         height: Math.max((composeStyle as any)?.minHeight || 35, contentHeight)
       }
     },
-    ...layoutProps
+    ...layoutProps,
+    onFocus: bindfocus && onInputFocus,
+    onBlur: bindblur && onInputBlur,
+    onKeyPress: bindconfirm && onKeyPress,
+    onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
+    onSelectionChange: bindselectionchange && onSelectionChange
   },
   [],
   {
@@ -423,16 +430,11 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       multiline={!!multiline}
       onTextInput={onTextInput}
       onChange={onChange}
-      onFocus={onInputFocus}
-      onBlur={onInputBlur}
-      onKeyPress={onKeyPress}
-      onSubmitEditing={onSubmitEditing}
       onContentSizeChange={onContentSizeChange}
-      onSelectionChange={onSelectionChange}
     />
   )
 })
 
-Input.displayName = 'mpx-input'
+Input.displayName = 'MpxInput'
 
 export default Input

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

@@ -1,7 +1,7 @@
 /**
  * ✘ for
  */
-import { JSX, useRef, forwardRef, ReactNode } from 'react'
+import { JSX, useRef, forwardRef, ReactNode, useCallback } from 'react'
 import { View, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { noop, warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
@@ -25,6 +25,7 @@ export interface LabelProps {
 const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
   (labelProps, ref): JSX.Element => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps)
+    const propsRef = useRef<any>({})
 
     const {
       style = {},
@@ -32,10 +33,11 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       'external-var-context': externalVarContext,
       'parent-font-size': parentFontSize,
       'parent-width': parentWidth,
-      'parent-height': parentHeight,
-      bindtap
+      'parent-height': parentHeight
     } = props
 
+    propsRef.current = props
+
     const defaultStyle = {
       flexDirection: 'row'
     }
@@ -69,10 +71,11 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       triggerChange: noop
     })
 
-    const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-      bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
-      contextRef.current.triggerChange?.(evt)
-    }
+    const onTap = useCallback((evt: NativeSyntheticEvent<TouchEvent>) => {
+      const { bindtap } = propsRef.current
+      bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }))
+      contextRef.current.triggerChange(evt)
+    }, [])
 
     const innerProps = useInnerProps(
       props,
@@ -106,6 +109,6 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
   }
 )
 
-Label.displayName = 'mpx-label'
+Label.displayName = 'MpxLabel'
 
 export default Label

package/lib/runtime/components/react/mpx-movable-area.tsx

@@ -2,8 +2,8 @@
  * ✘ scale-area
  */
 
-import { View, LayoutChangeEvent } from 'react-native'
-import { JSX, useState, useEffect, forwardRef, ReactNode, useRef } from 'react'
+import { View } from 'react-native'
+import { JSX, forwardRef, ReactNode, useRef, useMemo } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
@@ -23,14 +23,7 @@ interface MovableAreaProps {
 }
 
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
-  const { style = {}, width = 10, height = 10, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
-  const [areaWidth, setAreaWidth] = useState(0)
-  const [areaHeight, setAreaHeight] = useState(0)
-
-  useEffect(() => {
-    setAreaWidth(width)
-    setAreaHeight(height)
-  }, [width, height])
+  const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
 
   const {
     hasSelfPercent,
@@ -44,22 +37,21 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
   const movableViewRef = useRef(null)
   useNodesRef(props, ref, movableViewRef)
 
-  const onLayout = (e: LayoutChangeEvent) => {
-    const { width = 10, height = 10 } = e.nativeEvent.layout
-    setAreaWidth(width)
-    setAreaHeight(height)
-  }
+  const contextValue = useMemo(() => ({
+    height: normalStyle.height || 10,
+    width: normalStyle.width || 10
+  }), [normalStyle.width, normalStyle.height])
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout })
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef })
 
   const innerProps = useInnerProps(props, {
-    style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle },
+    style: { height: contextValue.height, width: contextValue.width, overflow: 'hidden', ...normalStyle, ...layoutStyle },
     ref: movableViewRef,
     ...layoutProps
   }, [], { layoutRef })
 
   return (
-    <MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
+    <MovableAreaContext.Provider value={contextValue}>
       <View
         {...innerProps}
       >
@@ -77,6 +69,6 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
   )
 })
 
-_MovableArea.displayName = 'mpx-movable-area'
+_MovableArea.displayName = 'MpxMovableArea'
 
 export default _MovableArea