@mpxjs/webpack-plugin 2.9.59 → 2.9.62

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,11 +34,13 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import React, { useEffect, useRef, useState, forwardRef, } from 'react';
+import { useEffect, useRef, useState, forwardRef, useContext } from 'react';
 import { View, Text, StyleSheet, Animated, Easing, } from 'react-native';
-import { extractTextStyle, isText, every } from './utils';
+import { splitStyle, isText, every, splitProps, throwReactWarning, transformTextStyle } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
+import { FormContext } from './context';
+import { isEmptyObject } from '@mpxjs/utils';
 const LOADING_IMAGE_URI = 'data:image/png;base64,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';
 const TypeColorMap = {
     default: ['#F8F8F8', '#DEDEDE', '35,35,35', '#F7F7F7'],
@@ -78,18 +80,18 @@ const styles = StyleSheet.create({
 const getOpenTypeEvent = (openType) => {
     // @ts-ignore
     if (!global?.__mpx?.config?.rnConfig) {
-        console.warn('Environment not supported');
+        throwReactWarning('[Mpx runtime warn]: Environment not supported');
         return;
     }
     const eventName = OpenTypeEventsMap.get(openType);
     if (!eventName) {
-        console.warn(`open-type not support ${openType}`);
+        throwReactWarning(`[Mpx runtime warn]: open-type not support ${openType}`);
         return;
     }
     // @ts-ignore
     const event = global.__mpx.config.rnConfig?.openTypeHandler?.[eventName];
     if (!event) {
-        console.warn(`Unregistered ${eventName} event`);
+        throwReactWarning(`[Mpx runtime warn]: Unregistered ${eventName} event`);
         return;
     }
     return event;
@@ -122,7 +124,14 @@ const Loading = ({ alone = false }) => {
     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 { 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, 'form-type': formType, 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,
@@ -131,8 +140,11 @@ const Button = forwardRef((props, ref) => {
     const [isHover, setIsHover] = useState(false);
     const isMiniSize = size === 'mini';
     const applyHoverEffect = isHover && hoverClass !== 'none';
-    const inheritTextStyle = extractTextStyle(style);
-    const textHoverStyle = extractTextStyle(hoverStyle);
+    const { textStyle, imageStyle, innerStyle } = splitStyle(style);
+    const { textStyle: hoverTextStyle, imageStyle: hoverImageStyle, innerStyle: hoverInnerStyle } = splitStyle(hoverStyle);
+    if (imageStyle || hoverImageStyle) {
+        throwReactWarning('[Mpx runtime warn]: Button does not support background image-related styles!');
+    }
     const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
     const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color;
     const plainBorderColor = disabled
@@ -155,18 +167,16 @@ const Button = forwardRef((props, ref) => {
         borderColor: plain ? plainBorderColor : normalBorderColor,
         backgroundColor: plain ? 'transparent' : normalBackgroundColor,
     };
-    const textStyle = {
+    const defaultViewStyle = {
+        ...styles.button,
+        ...(isMiniSize && styles.buttonMini),
+        ...viewStyle,
+    };
+    const defaultTextStyle = {
+        ...styles.text,
+        ...(isMiniSize && styles.textMini),
         color: plain ? plainTextColor : normalTextColor,
-        ...inheritTextStyle
     };
-    const defaultViewStyle = [
-        styles.button,
-        isMiniSize && styles.buttonMini || {},
-        viewStyle,
-    ];
-    const defaultTextStyle = [
-        styles.text, isMiniSize && styles.textMini, textStyle
-    ];
     const handleOpenTypeEvent = (evt) => {
         if (!openType)
             return;
@@ -177,11 +187,13 @@ const Button = forwardRef((props, ref) => {
                 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,32 +222,42 @@ 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);
+        handleFormTypeFn();
     };
-    const catchTap = (evt) => {
-        if (disabled)
-            return;
-        catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
-    };
-    function wrapChildren(children, textStyle) {
+    function wrapChildren(children, defaultTextStyle, textStyle) {
+        if (!children)
+            return children;
+        const hasTextStyle = !isEmptyObject(textStyle);
+        const { textProps } = splitProps(props);
         if (every(children, (child) => isText(child))) {
-            children = [<Text key='buttonTextWrap' style={textStyle}>{children}</Text>];
+            transformTextStyle(textStyle);
+            children = <Text key='buttonTextWrap' style={{ ...defaultTextStyle, ...textStyle }} {...(textProps || {})}>{children}</Text>;
         }
         else {
-            if (textStyle)
-                console.warn('Text style will be ignored unless every child of the Button is Text node!');
+            if (hasTextStyle)
+                throwReactWarning('[Mpx runtime 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([
+        defaultStyle: {
             ...defaultViewStyle,
             ...defaultTextStyle,
-        ])
+            ...textStyle
+        }
     });
     const onLayout = () => {
         nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
@@ -247,23 +269,23 @@ const Button = forwardRef((props, ref) => {
         bindtouchstart: onTouchStart,
         bindtouchend: onTouchEnd,
         bindtap: onTap,
-        catchtap: catchTap,
         ...(enableOffset ? { onLayout } : {}),
     }, [
         'enable-offset'
     ], {
-        layoutRef
+        layoutRef,
+        disableTap: disabled
     });
-    return (<View {...innerProps} style={[
+    return (<View {...innerProps} style={{
             ...defaultViewStyle,
-            style,
-            applyHoverEffect && hoverStyle,
-        ]}>
+            ...innerStyle,
+            ...(applyHoverEffect && hoverInnerStyle),
+        }}>
       {loading && <Loading alone={!children}/>}
-      {wrapChildren(children, [
-            ...defaultTextStyle,
-            applyHoverEffect && textHoverStyle,
-        ])}
+      {wrapChildren(children, defaultTextStyle, {
+            ...textStyle,
+            ...(applyHoverEffect && hoverTextStyle),
+        })}
     </View>);
 });
 Button.displayName = 'mpx-button';

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

@@ -0,0 +1,81 @@
+/**
+ * ✔ bindchange
+ */
+import { useRef, forwardRef, useContext } from 'react';
+import { View } from 'react-native';
+import { FormContext, CheckboxGroupContext } from './context';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { throwReactWarning } from './utils';
+const CheckboxGroup = forwardRef((props, ref) => {
+    const { style = {}, 'enable-offset': enableOffset, children, bindchange } = props;
+    const layoutRef = useRef({});
+    const formContext = useContext(FormContext);
+    let formValuesMap;
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const groupValue = useRef({}).current;
+    const defaultStyle = {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        ...style
+    };
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle
+    });
+    const onLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    const getSelectionValue = () => {
+        const arr = [];
+        for (let 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) {
+            throwReactWarning('[Mpx runtime 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: defaultStyle,
+        ...(enableOffset ? { onLayout } : {})
+    }, ['enable-offset'], {
+        layoutRef
+    });
+    return (<View {...innerProps}>
+      <CheckboxGroupContext.Provider value={{ groupValue, notifyChange }}>
+        {children}
+      </CheckboxGroupContext.Provider>
+    </View>);
+});
+CheckboxGroup.displayName = 'mpx-checkbox-group';
+export default CheckboxGroup;

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

@@ -0,0 +1,152 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+import { useRef, useState, forwardRef, useEffect, useContext } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import Icon from './mpx-icon';
+import { every, splitStyle, isText, splitProps, throwReactWarning } 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((props, ref) => {
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-offset': enableOffset, children, bindtap, catchtap, } = props;
+    const layoutRef = useRef({});
+    const [isChecked, setIsChecked] = useState(!!checked);
+    const { textStyle, imageStyle, innerStyle } = splitStyle(style);
+    if (imageStyle) {
+        throwReactWarning('[Mpx runtime warn]: Checkbox does not support background image-related styles!');
+    }
+    const groupContext = useContext(CheckboxGroupContext);
+    let groupValue;
+    let notifyChange;
+    const defaultStyle = {
+        ...styles.wrapper,
+        ...(disabled && styles.wrapperDisabled),
+    };
+    const viewStyle = {
+        ...defaultStyle,
+        ...innerStyle
+    };
+    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 { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle,
+        change: onChange
+    });
+    const onLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    const wrapChildren = (children, textStyle) => {
+        if (!children)
+            return children;
+        const { textProps } = splitProps(props);
+        if (every(children, (child) => isText(child))) {
+            if (textStyle || textProps) {
+                children = <Text key='checkboxTextWrap' style={textStyle || {}} {...(textProps || {})}>{children}</Text>;
+            }
+        }
+        else {
+            if (textStyle) {
+                throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Checkbox is Text node!');
+            }
+        }
+        return children;
+    };
+    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: styles.container,
+        bindtap: onTap,
+        catchtap: catchTap,
+        ...(enableOffset ? { onLayout } : {})
+    }, ['enable-offset'], {
+        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={viewStyle}>
+          <Icon type='success_no_circle' size={18} color={disabled ? '#ADADAD' : color} style={isChecked ? styles.iconChecked : styles.icon}/>
+        </View>
+        {wrapChildren(children, textStyle)}
+      </View>);
+});
+Checkbox.displayName = 'mpx-checkbox';
+export default Checkbox;

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

@@ -0,0 +1,59 @@
+/**
+ * ✘ 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';
+const _Form = forwardRef((props, ref) => {
+    const { children, style } = props;
+    const layoutRef = useRef({});
+    const formValuesMap = useRef(new Map()).current;
+    const { nodeRef: formRef } = useNodesRef(props, ref);
+    const onLayout = (e) => {
+        formRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    const submit = () => {
+        const { bindsubmit } = props;
+        const formValue = {};
+        for (let 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, {
+        ref: formRef,
+        style,
+        onLayout
+    }, [
+        'children',
+        'style',
+        'bindsubmit',
+        'bindreset'
+    ], { layoutRef });
+    return (<View {...innerProps}>
+      <FormContext.Provider value={{ formValuesMap, submit, reset }}>
+        {children}
+      </FormContext.Provider>
+    </View>);
+});
+_Form.displayName = 'mpx-form';
+export default _Form;