@mpxjs/webpack-plugin 2.9.66 → 2.9.69-beta.0

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

@@ -1,56 +1,52 @@
 /**
  * ✘ for
  */
-import { useRef, forwardRef } from 'react';
+import { useRef, forwardRef, useCallback, createElement } from 'react';
 import { View } from 'react-native';
 import { noop, warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 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'
     };
-    const styleObj = {
-        ...defaultStyle,
-        ...style
-    };
+    const styleObj = extendObject({}, defaultStyle, style);
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, { defaultStyle });
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
     if (backgroundStyle) {
         warn('Label does not support background image-related styles!');
     }
     const contextRef = useRef({
         triggerChange: noop
     });
-    const onTap = (evt) => {
-        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
-        contextRef.current.triggerChange?.(evt);
-    };
-    const innerProps = useInnerProps(props, {
+    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, extendObject({
         ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
+        style: extendObject({}, innerStyle, layoutStyle)
+    }, layoutProps, {
         bindtap: onTap
-    }, [], {
+    }), [], {
         layoutRef
     });
-    return <View {...innerProps}>
-      <LabelContext.Provider value={contextRef}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-      </LabelContext.Provider>
-    </View>;
+    return createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
 });
-Label.displayName = 'mpx-label';
+Label.displayName = 'MpxLabel';
 export default Label;

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

@@ -2,41 +2,31 @@
  * ✘ scale-area
  */
 import { View } from 'react-native';
-import { useState, useEffect, forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useMemo, createElement } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, wrapChildren, useLayout } from './utils';
+import { useTransformStyle, wrapChildren, useLayout, extendObject } 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 innerProps = useInnerProps(props, {
-        style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle },
-        ref: movableViewRef,
-        ...layoutProps
-    }, [], { layoutRef });
-    return (<MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
-      <View {...innerProps}>
-      {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-      </View>
-    </MovableAreaContext.Provider>);
+    useNodesRef(props, ref, movableViewRef, {
+        style: normalStyle
+    });
+    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, extendObject({
+        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+        ref: movableViewRef
+    }, layoutProps), [], { layoutRef });
+    return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    })));
 });
-_MovableArea.displayName = 'mpx-movable-area';
+_MovableArea.displayName = 'MpxMovableArea';
 export default _MovableArea;