@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -4,7 +4,7 @@
  * ✔ plain
  * ✔ disabled
  * ✔ loading
- * ✘ form-type
+ * ✔ form-type
  * - open-type: Partially. Only support `share`、`getUserInfo`
  * ✔ hover-class: Convert hoverClass to hoverStyle.
  * ✔ hover-style
@@ -34,20 +34,22 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import React, { useEffect, useRef, useState, forwardRef, } from 'react';
-import { View, Text, StyleSheet, Animated, Easing, } from 'react-native';
-import { extractTextStyle, isText, every } from './utils';
+import { useEffect, useRef, useState, forwardRef, useContext } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
+import { FormContext } from './context';
 const LOADING_IMAGE_URI = 'data:image/png;base64,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';
 const TypeColorMap = {
     default: ['#F8F8F8', '#DEDEDE', '35,35,35', '#F7F7F7'],
     primary: ['#1AAD19', '#179B16', '26,173,25', '#9ED99D'],
-    warn: ['#E64340', '#CE3C39', '230,67,64', '#EC8B89'],
+    warn: ['#E64340', '#CE3C39', '230,67,64', '#EC8B89']
 };
 const OpenTypeEventsMap = new Map([
     ['share', 'onShareAppMessage'],
-    ['getUserInfo', 'onUserInfo'],
+    ['getUserInfo', 'onUserInfo']
 ]);
 const styles = StyleSheet.create({
     button: {
@@ -61,35 +63,33 @@ const styles = StyleSheet.create({
         marginHorizontal: 'auto' // 按钮默认居中
     },
     buttonMini: {
-        height: 30,
+        height: 30
     },
     text: {
         fontSize: 18,
-        color: '#000000',
+        color: '#000000'
     },
     textMini: {
-        fontSize: 13,
+        fontSize: 13
     },
     loading: {
         width: 20,
-        height: 20,
-    },
+        height: 20
+    }
 });
 const getOpenTypeEvent = (openType) => {
-    // @ts-ignore
-    if (!global?.__mpx?.config?.rnConfig) {
-        console.warn('Environment not supported');
+    if (!global.__mpx?.config?.rnConfig) {
+        warn('Environment not supported');
         return;
     }
     const eventName = OpenTypeEventsMap.get(openType);
     if (!eventName) {
-        console.warn(`open-type not support ${openType}`);
+        warn(`open-type not support ${openType}`);
         return;
     }
-    // @ts-ignore
-    const event = global.__mpx.config.rnConfig?.openTypeHandler?.[eventName];
+    const event = global.__mpx.config.rnConfig.openTypeHandler?.[eventName];
     if (!event) {
-        console.warn(`Unregistered ${eventName} event`);
+        warn(`Unregistered ${eventName} event`);
         return;
     }
     return event;
@@ -98,7 +98,7 @@ const Loading = ({ alone = false }) => {
     const image = useRef(new Animated.Value(0)).current;
     const rotate = image.interpolate({
         inputRange: [0, 1],
-        outputRange: ['0deg', '360deg'],
+        outputRange: ['0deg', '360deg']
     });
     useEffect(() => {
         const animation = Animated.loop(Animated.timing(image, {
@@ -106,33 +106,37 @@ const Loading = ({ alone = false }) => {
             duration: 1000,
             easing: Easing.linear,
             useNativeDriver: true,
-            isInteraction: false,
+            isInteraction: false
         }));
         animation.start();
         return () => {
             animation.stop();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const loadingStyle = {
         ...styles.loading,
         transform: [{ rotate }],
-        marginRight: alone ? 0 : 5,
+        marginRight: alone ? 0 : 5
     };
     return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }}/>;
 };
-const Button = forwardRef((props, ref) => {
-    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = [], 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'enable-offset': enableOffset, style = [], children, bindgetuserinfo, bindtap, catchtap, bindtouchstart, bindtouchend, } = props;
+const Button = forwardRef((buttonProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(buttonProps);
+    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap, bindtouchstart, bindtouchend } = props;
+    const formContext = useContext(FormContext);
+    let submitFn;
+    let resetFn;
+    if (formContext) {
+        submitFn = formContext.submit;
+        resetFn = formContext.reset;
+    }
     const refs = useRef({
         hoverStartTimer: undefined,
-        hoverStayTimer: undefined,
+        hoverStayTimer: undefined
     });
-    const layoutRef = useRef({});
     const [isHover, setIsHover] = useState(false);
     const isMiniSize = size === 'mini';
     const applyHoverEffect = isHover && hoverClass !== 'none';
-    const inheritTextStyle = extractTextStyle(style);
-    const textHoverStyle = extractTextStyle(hoverStyle);
     const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
     const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color;
     const plainBorderColor = disabled
@@ -153,20 +157,34 @@ const Button = forwardRef((props, ref) => {
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: plain ? plainBorderColor : normalBorderColor,
-        backgroundColor: plain ? 'transparent' : normalBackgroundColor,
+        backgroundColor: plain ? 'transparent' : normalBackgroundColor
+    };
+    const defaultViewStyle = {
+        ...styles.button,
+        ...(isMiniSize && styles.buttonMini),
+        ...viewStyle
+    };
+    const defaultTextStyle = {
+        ...styles.text,
+        ...(isMiniSize && styles.textMini),
+        color: plain ? plainTextColor : normalTextColor
     };
-    const textStyle = {
-        color: plain ? plainTextColor : normalTextColor,
-        ...inheritTextStyle
+    const defaultStyle = {
+        ...defaultViewStyle,
+        ...defaultTextStyle
     };
-    const defaultViewStyle = [
-        styles.button,
-        isMiniSize && styles.buttonMini || {},
-        viewStyle,
-    ];
-    const defaultTextStyle = [
-        styles.text, isMiniSize && styles.textMini, textStyle
-    ];
+    const styleObj = {
+        ...defaultStyle,
+        ...style,
+        ...(applyHoverEffect && hoverStyle)
+    };
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Button does not support background image-related styles!');
+    }
     const handleOpenTypeEvent = (evt) => {
         if (!openType)
             return;
@@ -174,14 +192,16 @@ const Button = forwardRef((props, ref) => {
         if (openType === 'share') {
             handleEvent && handleEvent({
                 from: 'button',
-                target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+                target: getCustomEvent('tap', evt, { layoutRef }, props).target
             });
         }
-        if (openType === 'getUserInfo') {
-            const userInfo = handleEvent && handleEvent();
-            if (typeof userInfo === 'object') {
-                bindgetuserinfo && bindgetuserinfo(userInfo);
-            }
+        if (openType === 'getUserInfo' && handleEvent && bindgetuserinfo) {
+            Promise.resolve(handleEvent)
+                .then((userInfo) => {
+                if (typeof userInfo === 'object') {
+                    bindgetuserinfo(userInfo);
+                }
+            });
         }
     };
     const setStayTimer = () => {
@@ -210,60 +230,40 @@ const Button = forwardRef((props, ref) => {
             return;
         setStayTimer();
     };
+    const handleFormTypeFn = () => {
+        if (formType === 'submit') {
+            submitFn && submitFn();
+        }
+        else if (formType === 'reset') {
+            resetFn && resetFn();
+        }
+    };
     const onTap = (evt) => {
         if (disabled)
             return;
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         handleOpenTypeEvent(evt);
-    };
-    const catchTap = (evt) => {
-        if (disabled)
-            return;
-        catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
-    };
-    function wrapChildren(children, textStyle) {
-        if (every(children, (child) => isText(child))) {
-            children = [<Text key='buttonTextWrap' style={textStyle}>{children}</Text>];
-        }
-        else {
-            if (textStyle)
-                console.warn('Text style will be ignored unless every child of the Button is Text node!');
-        }
-        return children;
-    }
-    const { nodeRef } = useNodesRef(props, ref, {
-        defaultStyle: StyleSheet.flatten([
-            ...defaultViewStyle,
-            ...defaultTextStyle,
-        ])
-    });
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
+        handleFormTypeFn();
     };
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
         bindtouchstart: onTouchStart,
         bindtouchend: onTouchEnd,
-        bindtap: onTap,
-        catchtap: catchTap,
-        ...(enableOffset ? { onLayout } : {}),
-    }, [
-        'enable-offset'
-    ], {
-        layoutRef
+        bindtap: onTap
+    }, [], {
+        layoutRef,
+        disableTap: disabled
     });
-    return (<View {...innerProps} style={[
-            ...defaultViewStyle,
-            style,
-            applyHoverEffect && hoverStyle,
-        ]}>
+    return (<View {...innerProps}>
       {loading && <Loading alone={!children}/>}
-      {wrapChildren(children, [
-            ...defaultTextStyle,
-            applyHoverEffect && textHoverStyle,
-        ])}
+      {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
     </View>);
 });
 Button.displayName = 'mpx-button';

package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx

@@ -0,0 +1,82 @@
+/**
+ * ✔ bindchange
+ */
+import { useRef, forwardRef, useContext } from 'react';
+import { View } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import { FormContext, CheckboxGroupContext } from './context';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { useLayout, useTransformStyle, wrapChildren } from './utils';
+const CheckboxGroup = forwardRef((props, ref) => {
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindchange } = props;
+    const formContext = useContext(FormContext);
+    let formValuesMap;
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const groupValue = useRef({}).current;
+    const defaultStyle = {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+    };
+    const styleObj = {
+        ...defaultStyle,
+        ...style
+    };
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const getSelectionValue = () => {
+        const arr = [];
+        for (const key in groupValue) {
+            if (groupValue[key].checked) {
+                arr.push(key);
+            }
+        }
+        return arr;
+    };
+    const getValue = () => {
+        return getSelectionValue();
+    };
+    const resetValue = () => {
+        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 });
+        }
+    }
+    const notifyChange = (evt) => {
+        bindchange &&
+            bindchange(getCustomEvent('tap', evt, {
+                layoutRef,
+                detail: {
+                    value: getSelectionValue()
+                }
+            }, props));
+    };
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        style: { ...normalStyle, ...layoutStyle },
+        ...layoutProps
+    }, [], {
+        layoutRef
+    });
+    return (<View {...innerProps}>
+      <CheckboxGroupContext.Provider value={{ groupValue, notifyChange }}>
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current
+        })}
+      </CheckboxGroupContext.Provider>
+    </View>);
+});
+CheckboxGroup.displayName = 'mpx-checkbox-group';
+export default CheckboxGroup;

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

@@ -0,0 +1,139 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+import { useState, forwardRef, useEffect, useContext } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import Icon from './mpx-icon';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
+import { CheckboxGroupContext, LabelContext } from './context';
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    wrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 24,
+        height: 24,
+        borderColor: '#D1D1D1',
+        borderWidth: 1,
+        borderRadius: 3,
+        backgroundColor: '#ffffff',
+        marginRight: 5
+    },
+    wrapperDisabled: {
+        backgroundColor: '#E1E1E1'
+    },
+    icon: {
+        opacity: 0
+    },
+    iconChecked: {
+        opacity: 1
+    }
+});
+const Checkbox = forwardRef((checkboxProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(checkboxProps);
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, catchtap } = props;
+    const [isChecked, setIsChecked] = useState(!!checked);
+    const groupContext = useContext(CheckboxGroupContext);
+    let groupValue;
+    let notifyChange;
+    const defaultStyle = {
+        ...styles.wrapper,
+        ...(disabled && styles.wrapperDisabled)
+    };
+    const styleObj = {
+        ...styles.container,
+        ...style
+    };
+    const onChange = (evt) => {
+        if (disabled)
+            return;
+        const checked = !isChecked;
+        setIsChecked(checked);
+        if (groupValue) {
+            groupValue[value].checked = checked;
+        }
+        notifyChange && notifyChange(evt);
+    };
+    const onTap = (evt) => {
+        if (disabled)
+            return;
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
+        onChange(evt);
+    };
+    const catchTap = (evt) => {
+        if (disabled)
+            return;
+        catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
+        onChange(evt);
+    };
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle,
+        change: onChange
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Checkbox does not support background image-related styles!');
+    }
+    const labelContext = useContext(LabelContext);
+    if (groupContext) {
+        groupValue = groupContext.groupValue;
+        notifyChange = groupContext.notifyChange;
+    }
+    if (labelContext) {
+        labelContext.current.triggerChange = onChange;
+    }
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
+        bindtap: onTap,
+        catchtap: catchTap
+    }, [], {
+        layoutRef
+    });
+    useEffect(() => {
+        if (groupValue) {
+            groupValue[value] = {
+                checked: checked,
+                setValue: setIsChecked
+            };
+        }
+        return () => {
+            if (groupValue) {
+                delete groupValue[value];
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (checked !== isChecked) {
+            setIsChecked(checked);
+            if (groupValue) {
+                groupValue[value].checked = checked;
+            }
+        }
+    }, [checked]);
+    return (<View {...innerProps}>
+        <View style={defaultStyle}>
+          <Icon type='success_no_circle' size={18} color={disabled ? '#ADADAD' : color} style={isChecked ? styles.iconChecked : styles.icon}/>
+        </View>
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
+      </View>);
+});
+Checkbox.displayName = 'mpx-checkbox';
+export default Checkbox;

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

@@ -0,0 +1,61 @@
+/**
+ * ✘ report-submit
+ * ✘ report-submit-timeout
+ * ✔ bindsubmit
+ * ✔ bindreset
+ */
+import { View } from 'react-native';
+import { useRef, forwardRef } from 'react';
+import useNodesRef from './useNodesRef';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { FormContext } from './context';
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils';
+const _Form = forwardRef((fromProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(fromProps);
+    const formValuesMap = useRef(new Map()).current;
+    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 { textStyle, innerStyle } = splitStyle(normalStyle);
+    const { nodeRef: formRef } = useNodesRef(props, ref);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
+    const submit = () => {
+        const { bindsubmit } = props;
+        const formValue = {};
+        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 reset = () => {
+        const { bindreset } = props;
+        bindreset && bindreset();
+        formValuesMap.forEach(item => item.resetValue());
+    };
+    const innerProps = useInnerProps(props, {
+        style: { ...innerStyle, ...layoutStyle },
+        ref: formRef,
+        ...layoutProps
+    }, [
+        'bindsubmit',
+        'bindreset'
+    ], { layoutRef });
+    return (<View {...innerProps}>
+      <FormContext.Provider value={{ formValuesMap, submit, reset }}>
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
+      </FormContext.Provider>
+    </View>);
+});
+_Form.displayName = 'mpx-form';
+export default _Form;