@mpxjs/webpack-plugin 2.9.65 → 2.9.67

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -121,27 +121,24 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const onInputFocus = (evt) => {
-        bindfocus &&
-            bindfocus(getCustomEvent('focus', evt, {
-                detail: {
-                    value: tmpValue.current || ''
-                },
-                layoutRef
-            }, props));
+        bindfocus(getCustomEvent('focus', evt, {
+            detail: {
+                value: tmpValue.current || ''
+            },
+            layoutRef
+        }, props));
     };
     const onInputBlur = (evt) => {
-        bindblur &&
-            bindblur(getCustomEvent('blur', evt, {
-                detail: {
-                    value: tmpValue.current || '',
-                    cursor: cursorIndex.current
-                },
-                layoutRef
-            }, props));
+        bindblur(getCustomEvent('blur', evt, {
+            detail: {
+                value: tmpValue.current || '',
+                cursor: cursorIndex.current
+            },
+            layoutRef
+        }, props));
     };
     const onKeyPress = (evt) => {
-        bindconfirm &&
-            evt.nativeEvent.key === 'Enter' &&
+        evt.nativeEvent.key === 'Enter' &&
             bindconfirm(getCustomEvent('confirm', evt, {
                 detail: {
                     value: tmpValue.current || ''
@@ -150,14 +147,21 @@ const Input = forwardRef((props, ref) => {
             }, props));
     };
     const onSubmitEditing = (evt) => {
-        bindconfirm &&
-            multiline &&
-            bindconfirm(getCustomEvent('confirm', evt, {
-                detail: {
-                    value: tmpValue.current || ''
-                },
-                layoutRef
-            }, props));
+        bindconfirm(getCustomEvent('confirm', evt, {
+            detail: {
+                value: tmpValue.current || ''
+            },
+            layoutRef
+        }, props));
+    };
+    const onSelectionChange = (evt) => {
+        bindselectionchange(getCustomEvent('selectionchange', evt, {
+            detail: {
+                selectionStart: evt.nativeEvent.selection.start,
+                selectionEnd: evt.nativeEvent.selection.end
+            },
+            layoutRef
+        }, props));
     };
     const onContentSizeChange = (evt) => {
         const { width, height } = evt.nativeEvent.contentSize;
@@ -178,16 +182,6 @@ const Input = forwardRef((props, ref) => {
             setContentHeight(height);
         }
     };
-    const onSelectionChange = (evt) => {
-        bindselectionchange &&
-            bindselectionchange(getCustomEvent('selectionchange', evt, {
-                detail: {
-                    selectionStart: evt.nativeEvent.selection.start,
-                    selectionEnd: evt.nativeEvent.selection.end
-                },
-                layoutRef
-            }, props));
-    };
     const resetValue = () => {
         setInputValue('');
     };
@@ -202,6 +196,13 @@ const Input = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
     useUpdateEffect(() => {
         if (!nodeRef?.current) {
             return;
@@ -220,11 +221,16 @@ const Input = forwardRef((props, ref) => {
                 height: Math.max(composeStyle?.minHeight || 35, contentHeight)
             }
         },
-        ...layoutProps
+        ...layoutProps,
+        onFocus: bindfocus && onInputFocus,
+        onBlur: bindblur && onInputBlur,
+        onKeyPress: bindconfirm && onKeyPress,
+        onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
+        onSelectionChange: bindselectionchange && onSelectionChange
     }, [], {
         layoutRef
     });
-    return (<TextInput {...innerProps} keyboardType={keyboardType} secureTextEntry={!!password} defaultValue={defaultValue} value={inputValue} maxLength={maxlength === -1 ? undefined : maxlength} editable={!disabled} autoFocus={!!autoFocus || !!focus} returnKeyType={confirmType} selection={selection} selectionColor={cursorColor} blurOnSubmit={!multiline && !confirmHold} underlineColorAndroid="rgba(0,0,0,0)" textAlignVertical={textAlignVertical} placeholderTextColor={placeholderTextColor} multiline={!!multiline} onTextInput={onTextInput} onChange={onChange} onFocus={onInputFocus} onBlur={onInputBlur} onKeyPress={onKeyPress} onSubmitEditing={onSubmitEditing} onContentSizeChange={onContentSizeChange} onSelectionChange={onSelectionChange}/>);
+    return (<TextInput {...innerProps} keyboardType={keyboardType} secureTextEntry={!!password} defaultValue={defaultValue} value={inputValue} maxLength={maxlength === -1 ? undefined : maxlength} editable={!disabled} autoFocus={!!autoFocus || !!focus} returnKeyType={confirmType} selection={selection} selectionColor={cursorColor} blurOnSubmit={!multiline && !confirmHold} underlineColorAndroid="rgba(0,0,0,0)" textAlignVertical={textAlignVertical} placeholderTextColor={placeholderTextColor} multiline={!!multiline} onTextInput={onTextInput} onChange={onChange} onContentSizeChange={onContentSizeChange}/>);
 });
-Input.displayName = 'mpx-input';
+Input.displayName = 'MpxInput';
 export default Input;

package/lib/runtime/components/react/dist/mpx-label.jsx

@@ -1,7 +1,7 @@
 /**
  * ✘ for
  */
-import { useRef, forwardRef } from 'react';
+import { useRef, forwardRef, useCallback } from 'react';
 import { View } from 'react-native';
 import { noop, warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
@@ -10,7 +10,9 @@ import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } fr
 import { LabelContext } from './context';
 const Label = forwardRef((labelProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps);
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap } = props;
+    const propsRef = useRef({});
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    propsRef.current = props;
     const defaultStyle = {
         flexDirection: 'row'
     };
@@ -29,10 +31,11 @@ const Label = forwardRef((labelProps, ref) => {
     const contextRef = useRef({
         triggerChange: noop
     });
-    const onTap = (evt) => {
-        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
-        contextRef.current.triggerChange?.(evt);
-    };
+    const onTap = useCallback((evt) => {
+        const { bindtap } = propsRef.current;
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
+        contextRef.current.triggerChange(evt);
+    }, []);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: { ...innerStyle, ...layoutStyle },
@@ -52,5 +55,5 @@ const Label = forwardRef((labelProps, ref) => {
       </LabelContext.Provider>
     </View>;
 });
-Label.displayName = 'mpx-label';
+Label.displayName = 'MpxLabel';
 export default Label;

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -2,34 +2,27 @@
  * ✘ scale-area
  */
 import { View } from 'react-native';
-import { useState, useEffect, forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useMemo } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, wrapChildren, useLayout } from './utils';
 const _MovableArea = forwardRef((props, ref) => {
-    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, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const movableViewRef = useRef(null);
     useNodesRef(props, ref, movableViewRef);
-    const onLayout = (e) => {
-        const { width = 10, height = 10 } = e.nativeEvent.layout;
-        setAreaWidth(width);
-        setAreaHeight(height);
-    };
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout });
+    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 });
     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 }}>
+    return (<MovableAreaContext.Provider value={contextValue}>
       <View {...innerProps}>
       {wrapChildren(props, {
             hasVarDec,
@@ -38,5 +31,5 @@ const _MovableArea = forwardRef((props, ref) => {
       </View>
     </MovableAreaContext.Provider>);
 });
-_MovableArea.displayName = 'mpx-movable-area';
+_MovableArea.displayName = 'MpxMovableArea';
 export default _MovableArea;