@mpxjs/webpack-plugin 2.9.59 → 2.9.62

package/lib/runtime/components/react/dist/mpx-picker/selector.jsx

@@ -0,0 +1,76 @@
+/**
+ * 普通选择器，range可以是Array<Obj> 也可以是Array
+ */
+import { View, TouchableWithoutFeedback } from 'react-native';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { Picker } from '@ant-design/react-native';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+const formatRangeFun = (range, rangeKey = '') => {
+    let newRange = [];
+    newRange = (range || []).map((item, index) => {
+        if (typeof item === 'object') {
+            return { value: index, label: item[rangeKey] };
+        }
+        else {
+            return { value: index, label: item };
+        }
+    });
+    return newRange;
+};
+const _SelectorPicker = forwardRef((props, ref) => {
+    const { range, children, value, disabled, bindchange, bindcancel } = props;
+    // 格式化数据为Array<*>
+    let formatRange = formatRangeFun(range, props['range-key']);
+    // 选中的索引值
+    const [selected, setSelected] = useState(value || 0);
+    // range数据源
+    const [data, setData] = useState(formatRange || []);
+    // 存储layout布局信息
+    const layoutRef = useRef({});
+    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    useEffect(() => {
+        if (range) {
+            const newFormatRange = formatRangeFun(range, props['range-key']);
+            setData(newFormatRange);
+        }
+        setSelected(() => {
+            return value;
+        });
+    }, [range, value]);
+    const defaultValue = [value];
+    const onChange = (value) => {
+        bindchange && bindchange({
+            detail: {
+                value: value && value[0]
+            }
+        });
+    };
+    const onElementLayout = (layout) => {
+        viewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            props.getInnerLayout && props.getInnerLayout(layoutRef);
+        });
+    };
+    const antPickerProps = {
+        data,
+        value: [selected],
+        cols: 1,
+        defaultValue,
+        itemHeight: 40,
+        onChange,
+        onDismiss: bindcancel && bindcancel
+    };
+    const touchProps = {
+        onLayout: onElementLayout,
+        ref: viewRef
+    };
+    return (<Picker {...antPickerProps}>
+        <TouchableWithoutFeedback>
+          <View {...touchProps}>
+            {children}
+          </View>
+        </TouchableWithoutFeedback>
+    </Picker>);
+});
+_SelectorPicker.displayName = 'mpx-picker-selector';
+export default _SelectorPicker;

package/lib/runtime/components/react/dist/mpx-picker/time.jsx

@@ -0,0 +1,244 @@
+import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
+import { PickerView } from '@ant-design/react-native';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+// 可见应用窗口的大小。
+// const { height: dHeight, width: dWidth } = Dimensions.get('window');
+//  modal属性: {"height": 298.33331298828125, "offsetLeft": 0, "offsetTop": 513.6666870117188, "width": 375, "x": 0, "y": 513.6666870117188}
+// const { height: sHeight, width: sWidth } = Dimensions.get('screen');
+// 	设备屏幕的大小。 screen
+const styles = {
+    showModal: {
+        backgroundColor: "black",
+        opacity: 0.5,
+        position: "absolute",
+        width: "100%"
+    },
+    hideModal: {
+        opacity: 1,
+        height: 0
+    },
+    modal: {
+        backgroundColor: "black",
+        opacity: 0.5
+    },
+    centeredView: {
+        position: 'absolute',
+        bottom: 0,
+        width: "100%",
+        overflow: 'scroll'
+    },
+    btnLine: {
+        width: "100%",
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        borderColor: 20,
+        borderBottomWidth: 1,
+        backgroundColor: "white",
+        paddingLeft: 40,
+        paddingRight: 40
+    },
+    cancel: {
+        height: 50,
+        display: "flex",
+        justifyContent: 'center'
+    },
+    ok: {
+        height: 50,
+        display: "flex",
+        justifyContent: 'center'
+    },
+    btntext: {
+        color: '#0ae',
+        fontSize: 18
+    }
+};
+function formatStrToInt(timestr) {
+    let [start, end] = timestr.split(':');
+    return [parseInt(start), parseInt(end)];
+}
+// [9, 59] to 09:59
+function formatStr(arr) {
+    let [hour, minute] = arr;
+    if (hour < 10) {
+        hour = '0' + hour;
+    }
+    if (minute < 10) {
+        minute = '0' + minute;
+    }
+    return hour + ':' + minute;
+}
+function generateMinute() {
+    let arrMinute = [];
+    for (let i = 0; i <= 59; i++) {
+        let obj = {
+            label: toSingleStr(i),
+            value: i,
+            children: []
+        };
+        arrMinute.push(obj);
+    }
+    return arrMinute;
+}
+function generateColumns() {
+    let pickData = [];
+    for (let i = 0; i <= 23; i++) {
+        let obj = {
+            label: toSingleStr(i),
+            value: i,
+            children: generateMinute()
+        };
+        pickData.push(obj);
+    }
+    return pickData;
+}
+function toSingleStr(str) {
+    return str < 10 ? '0' + str : str;
+}
+function toStr(time) {
+    const [hour, minute] = formatStrToInt(time);
+    const newHour = toSingleStr(hour);
+    const newMinute = toSingleStr(minute);
+    return '' + newHour + newMinute;
+}
+function checkSelectedIsValid(strStart, strEnd, selected) {
+    const strSel = '' + toSingleStr(selected[0]) + toSingleStr(selected[1]);
+    if (strSel < strStart || strSel > strEnd)
+        return false;
+    return true;
+}
+/**
+ * [{label:'', value: '', key: '', children: []}]
+  label: string | ReactNode
+  value: string | number
+  key?: string | number
+  children?: PickerColumnItem[]
+*/
+// start="02:10" end = 23:01
+const _TimePicker = forwardRef((props, ref) => {
+    const { children, start, end, value, bindchange, bindcancel, disabled } = props;
+    const defaultProps = {
+        start: '00:10',
+        end: '23:59'
+    };
+    const defaultValue = formatStrToInt(value);
+    const [timevalue, setTimeValue] = useState(defaultValue);
+    // 存储layout布局信息
+    const layoutRef = useRef({});
+    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    // 存储modal的布局信息
+    const modalLayoutRef = useRef({});
+    const { nodeRef: modalRef } = useNodesRef(props, ref, {});
+    const [visible, setVisible] = useState(false);
+    const columnData = generateColumns();
+    const [data, setData] = useState(columnData);
+    const [offsetTop, setOffsetTop] = useState(0);
+    const strStart = toStr(start);
+    const strEnd = toStr(end);
+    useEffect(() => {
+        const newColumnData = generateColumns();
+        setData(newColumnData);
+    }, [start, end]);
+    useEffect(() => {
+        if (value) {
+            const nValue = formatStrToInt(value);
+            nValue && setTimeValue(nValue);
+        }
+    }, [value]);
+    // console.log('---------------visible---', visible, JSON.stringify(columnData))
+    const handleModalStatus = (status) => {
+        setVisible(status);
+    };
+    const handleConfirm = () => {
+        handleModalStatus(false);
+        bindchange && bindchange({
+            detail: {
+                value: formatStr(timevalue)
+            }
+        });
+    };
+    const handleCancel = () => {
+        handleModalStatus(false);
+        bindcancel && bindcancel();
+    };
+    const handleChildClick = () => {
+        handleModalStatus(true);
+    };
+    const handlePickChange = (date) => {
+        // 不是有效的值
+        if (!checkSelectedIsValid(strStart, strEnd, date)) {
+            setTimeValue(timevalue);
+        }
+        else {
+            // [9, 13]
+            setTimeValue(date);
+            const strDate = formatStr(date);
+            bindchange && bindchange({
+                detail: {
+                    value: strDate
+                }
+            });
+        }
+    };
+    const onElementLayout = () => {
+        viewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            props.getInnerLayout && props.getInnerLayout(layoutRef);
+        });
+    };
+    const onModalLayout = () => {
+        modalRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            modalLayoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            setOffsetTop(offsetTop);
+        });
+    };
+    const renderModalChildren = () => {
+        const pickerProps = {
+            data,
+            value: timevalue,
+            defaultValue: timevalue,
+            cols: 2,
+            onChange: handlePickChange
+        };
+        return (<View style={styles.centeredView} ref={modalRef} onLayout={onModalLayout}>
+        <View style={styles.btnLine}>
+          <View style={styles.cancel}>
+            <TouchableWithoutFeedback onPress={handleCancel}>
+              <Text style={styles.btntext}>取消</Text>
+            </TouchableWithoutFeedback>
+          </View>
+          <View style={styles.ok}>
+            <TouchableWithoutFeedback onPress={handleConfirm}>
+              <Text style={styles.btntext}>确定</Text>
+            </TouchableWithoutFeedback>
+          </View>
+        </View>
+        <PickerView {...pickerProps}></PickerView>
+      </View>);
+    };
+    const renderChildren = () => {
+        const touchProps = {
+            onLayout: onElementLayout,
+            ref: viewRef
+        };
+        return <View>
+      <TouchableWithoutFeedback onPress={handleChildClick}>
+        <View {...touchProps}>{children}</View>
+      </TouchableWithoutFeedback>
+    </View>;
+    };
+    const strStyle = visible ? styles['showModal'] : styles['hideModal'];
+    const mheight = Math.floor(offsetTop);
+    // Animated.View
+    return (<>
+    <View style={{ ...strStyle, height: visible ? mheight : 0, bottom: 0 }}>
+      <Modal animationType="slide" transparent={true} visible={visible}>
+        {renderModalChildren()}
+      </Modal>
+    </View>
+    {renderChildren()}
+  </>);
+});
+_TimePicker.displayName = 'mpx-picker-time';
+export default _TimePicker;

package/lib/runtime/components/react/dist/mpx-picker/type.js

@@ -0,0 +1 @@
+export {};

package/lib/runtime/components/react/dist/mpx-picker-view-column.jsx

@@ -0,0 +1,15 @@
+import { View } from 'react-native';
+import React, { forwardRef, useRef } from 'react';
+import useInnerProps from './getInnerListeners';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+const _PickerViewColumn = forwardRef((props, ref) => {
+    const { children } = props;
+    const layoutRef = useRef({});
+    const { nodeRef } = useNodesRef(props, ref, {});
+    const innerProps = useInnerProps(props, {}, [], { layoutRef });
+    return (<View ref={nodeRef} {...innerProps}>
+    {children}
+    </View>);
+});
+_PickerViewColumn.displayName = 'mpx-picker-view-column';
+export default _PickerViewColumn;

package/lib/runtime/components/react/dist/mpx-picker-view.jsx

@@ -0,0 +1,68 @@
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { PickerView } from '@ant-design/react-native';
+import useInnerProps from './getInnerListeners';
+import { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+const _PickerView = forwardRef((props, ref) => {
+    const { children, ...restProps } = props;
+    const layoutRef = useRef({});
+    const { nodeRef } = useNodesRef(props, ref, {});
+    const [value, setValue] = useState(props.value);
+    useEffect(() => {
+        // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
+        setValue(props.value);
+    }, [props.value]);
+    const onLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    const innerProps = useInnerProps(props, {}, [], { layoutRef });
+    const onChange = (val) => {
+        const eventData = getCustomEvent('change', {}, { detail: { value: val, source: 'touch' }, layoutRef: layoutRef });
+        setValue(val);
+        props.bindchange && props.bindchange(eventData);
+    };
+    const joinString = (data) => {
+        return (Array.isArray(data) ? data : [data]).join('');
+    };
+    const getLabelFromChildren = (child) => {
+        return child.props && child.props.children ? getLabelFromChildren(child.props.children) : joinString(child);
+    };
+    const handleChildren = (children) => {
+        return children.map((child, index) => {
+            return {
+                label: getLabelFromChildren(child),
+                value: index
+            };
+        });
+    };
+    const getDataFromChildren = (children) => {
+        return (Array.isArray(children) ? children : [children]).map((child) => {
+            return handleChildren(child.props && child.props.children ? child.props.children : [child]);
+        });
+    };
+    const columns = Array.isArray(children) ? children.length : 1;
+    const originData = getDataFromChildren(children);
+    // 子节点默认的序号，这里是更新默认值的
+    const subChildLength = originData.map((item) => {
+        return item.length;
+    });
+    const defaultValue = (props.value || []).map((item, index) => {
+        if (item > subChildLength[index]) {
+            return subChildLength[index] - 1;
+        }
+        else {
+            return item;
+        }
+    });
+    return (<PickerView {...restProps} cols={columns} 
+    // 默认选中项
+    defaultValue={defaultValue} 
+    // 内部维护选中项
+    value={value} 
+    // data数据源column
+    data={originData} onChange={onChange} cascade={false}/>);
+});
+_PickerView.displayName = 'mpx-picker-view';
+export default _PickerView;

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

@@ -0,0 +1,79 @@
+/**
+ * ✔ bindchange
+ */
+import { useRef, forwardRef, useContext } from 'react';
+import { View } from 'react-native';
+import { FormContext, RadioGroupContext } from './context';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { throwReactWarning } from './utils';
+const radioGroup = 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 = () => {
+        for (let key in groupValue) {
+            if (groupValue[key].checked) {
+                return key;
+            }
+        }
+    };
+    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}>
+      <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
+        {children}
+      </RadioGroupContext.Provider>
+    </View>);
+});
+radioGroup.displayName = 'mpx-radio-group';
+export default radioGroup;

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

@@ -0,0 +1,169 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+import { useRef, useState, forwardRef, useEffect, useContext } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { LabelContext, RadioGroupContext } from './context';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils';
+import Icon from './mpx-icon';
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    wrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 24,
+        height: 24,
+        borderColor: '#D1D1D1',
+        borderWidth: 1,
+        borderRadius: 12,
+        backgroundColor: '#ffffff',
+        marginRight: 5,
+        overflow: 'hidden'
+    },
+    wrapperChecked: {
+        borderWidth: 0
+    },
+    wrapperDisabled: {
+        backgroundColor: '#E1E1E1'
+    },
+    icon: {
+        opacity: 0
+    },
+    iconDisabled: {
+        backgroundColor: '#ADADAD'
+    },
+    iconChecked: {
+        opacity: 1
+    }
+});
+const Radio = 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 groupContext = useContext(RadioGroupContext);
+    let groupValue;
+    let notifyChange;
+    const labelContext = useContext(LabelContext);
+    const { textStyle, imageStyle, innerStyle } = splitStyle(style);
+    if (imageStyle) {
+        throwReactWarning('[Mpx runtime warn]: Radio does not support background image-related styles!');
+    }
+    const defaultStyle = {
+        ...styles.wrapper,
+        ...(isChecked && styles.wrapperChecked),
+        ...(disabled && styles.wrapperDisabled),
+    };
+    const viewStyle = {
+        ...defaultStyle,
+        ...innerStyle
+    };
+    const onChange = (evt) => {
+        if (disabled || isChecked)
+            return;
+        setIsChecked(!isChecked);
+        if (groupValue) {
+            for (const [key, radio] of Object.entries(groupValue)) {
+                if (!radio)
+                    continue;
+                radio.setValue(key === value);
+                radio.checked = key === value;
+            }
+        }
+        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));
+    };
+    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='radioTextWrap' style={textStyle || {}} {...(textProps || {})}>
+            {children}
+          </Text>;
+            }
+        }
+        else {
+            if (textStyle) {
+                throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Radio is Text node!');
+            }
+        }
+        return children;
+    };
+    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' size={24} color={disabled ? '#E1E1E1' : color} style={{
+            ...styles.icon,
+            ...(isChecked && styles.iconChecked),
+            ...(disabled && styles.iconDisabled)
+        }}/>
+        </View>
+        {wrapChildren(children, textStyle)}
+      </View>);
+});
+Radio.displayName = 'mpx-radio';
+export default Radio;

package/lib/runtime/components/react/dist/mpx-root-portal.jsx

@@ -0,0 +1,11 @@
+import { Portal } from '@ant-design/react-native';
+const _RootPortal = (props) => {
+    const { children, enable = true } = props;
+    return enable ? (
+    // @ts-ignore
+    <Portal>
+      {children}
+    </Portal>) : (<>{children}</>);
+};
+_RootPortal.displayName = 'mpx-root-portal';
+export default _RootPortal;