@mpxjs/webpack-plugin 2.9.59 → 2.9.62

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

@@ -0,0 +1,139 @@
+import { View, TouchableWithoutFeedback } from 'react-native';
+import { Picker } from '@ant-design/react-native';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+function convertToObj(item, rangeKey = '') {
+    if (typeof item === 'object') {
+        return { value: item[rangeKey], label: item[rangeKey] };
+    }
+    else {
+        return { value: item, label: item };
+    }
+}
+// eslint-disable-next-line default-param-last
+function formatRangeFun(range = [], rangeKey) {
+    const result = (range[0] || []).map(item => {
+        return convertToObj(item, rangeKey);
+    });
+    let tmp = result;
+    for (let i = 1; i < range.length; i++) {
+        let child = Array.isArray(range[i]) ? range[i] : [];
+        const nextColData = child.map(item => {
+            return convertToObj(item, rangeKey);
+        });
+        tmp.forEach(item => {
+            item.children = nextColData;
+        });
+        tmp = nextColData;
+    }
+    return result;
+}
+function getIndexByValues(range = [], value = []) {
+    let tmp = range;
+    return value.map(v => {
+        for (let i = 0; i < tmp.length; i++) {
+            if (tmp[i].value === v) {
+                tmp = tmp[i].children || [];
+                return i;
+            }
+        }
+        return 0;
+    });
+}
+// [1,1,2] 寻找出[]
+function getInnerValueByIndex(range = [], value = []) {
+    let tmp = range;
+    return value.map(v => {
+        let current = tmp[v].value;
+        tmp = tmp[v].children;
+        return current;
+    });
+}
+// column = 1 value = ['无脊柱动物', '扁性动物', '吸血虫'] 根据column 和value 获取到当前列变动选择的值所在当前列的索引
+function getColumnIndexByValue(range = [], column, value = []) {
+    let curRange = range;
+    let changeIndex = 0;
+    let tmpRange = [];
+    value.map((item, index) => {
+        if (column === index) {
+            curRange.map((ritem, rindex) => {
+                if (ritem.value === item) {
+                    changeIndex = rindex;
+                }
+            });
+        }
+        else {
+            curRange.map((citem, cindex) => {
+                if (citem.value === item) {
+                    tmpRange = citem.children;
+                }
+            });
+            curRange = tmpRange;
+        }
+    });
+    return changeIndex;
+}
+const _MultiSelectorPicker = forwardRef((props, ref) => {
+    const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange } = props;
+    let formatRange = formatRangeFun(range, props['range-key']);
+    let initValue = getInnerValueByIndex(formatRange, value);
+    // 选中的索引值
+    const [selected, setSelected] = useState(initValue);
+    // 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);
+        }
+        const newValue = getInnerValueByIndex(formatRange, value);
+        value && setSelected(newValue);
+    }, [range, value]);
+    const onChange = (value) => {
+        // e.detail.value 都是索引multi
+        const strIndex = getIndexByValues(data, value);
+        bindchange && bindchange({
+            detail: {
+                value: strIndex
+            }
+        });
+    };
+    const onPickerChange = (value, column) => {
+        // onPickerChange--- ["无脊柱动物", "节肢动物", "吸血虫"] 1  拿着column
+        const changeIndex = getColumnIndexByValue(data, column, value);
+        bindcolumnchange && bindcolumnchange(changeIndex, column);
+    };
+    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 antPickerProps = {
+        data,
+        value: selected,
+        cols: range.length,
+        defaultValue: initValue,
+        disabled,
+        itemHeight: 40,
+        onChange,
+        onDismiss: bindcancel && bindcancel,
+        onPickerChange: onPickerChange
+    };
+    const touchProps = {
+        onLayout: onElementLayout,
+        ref: viewRef
+    };
+    return (<Picker {...antPickerProps}>
+      <TouchableWithoutFeedback>
+        <View {...touchProps}>
+          {children}
+        </View>
+      </TouchableWithoutFeedback>
+    </Picker>);
+});
+_MultiSelectorPicker.displayName = 'mpx-picker-multiselector';
+export default _MultiSelectorPicker;

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

@@ -0,0 +1,90 @@
+import { View, TouchableWithoutFeedback } from 'react-native';
+import { Picker } from '@ant-design/react-native';
+import { regionData } from './regionData';
+import React, { forwardRef, useState, useRef } from 'react';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+function formateRegionData(clObj = [], customItem, depth = 2) {
+    const l = depth;
+    const obj = [];
+    if (customItem) {
+        const objClone = {
+            value: customItem,
+            label: customItem,
+            children: []
+        };
+        const panding = { ...objClone };
+        let loop = panding;
+        while (depth-- > 0) {
+            loop.children = [{ ...objClone }];
+            loop = loop.children[0];
+        }
+        obj.push(panding);
+    }
+    for (let i = 0; i < clObj.length; i++) {
+        const region = {
+            value: clObj[i].value,
+            label: clObj[i].value,
+        };
+        if (clObj[i].children) {
+            region.children = formateRegionData(clObj[i].children, customItem, l - 1);
+        }
+        obj.push(region);
+    }
+    return obj;
+}
+const _RegionPicker = forwardRef((props, ref) => {
+    const { children, value, bindchange, bindcancel, disabled } = props;
+    let formatRegionData = formateRegionData(regionData, props['custom-item']);
+    const [regionvalue, setRegionValue] = useState(value);
+    // 存储layout布局信息
+    const layoutRef = useRef({});
+    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    const onChange = (value) => {
+        // 通过 value 查找 code
+        let tmp = regionData;
+        const postcode = [];
+        const code = value.map((item) => {
+            for (let i = 0; i < tmp.length; i++) {
+                if (tmp[i].value === item) {
+                    const code = tmp[i].code;
+                    postcode.push(tmp[i].postcode);
+                    tmp = tmp[i].children || [];
+                    return code;
+                }
+            }
+        }).filter(code => !!code);
+        const detail = { value, code };
+        if (postcode[2])
+            detail.postcode = postcode[2];
+        setRegionValue(value);
+        bindchange && bindchange({
+            detail
+        });
+    };
+    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 regionProps = {
+        data: formatRegionData,
+        value: regionvalue,
+        onChange,
+        disabled,
+        onDismiss: bindcancel && bindcancel
+    };
+    const touchProps = {
+        onLayout: onElementLayout,
+        ref: viewRef
+    };
+    return (
+    // @ts-ignore
+    <Picker {...regionProps}>
+      <TouchableWithoutFeedback>
+        <View {...touchProps}>{children}</View>
+      </TouchableWithoutFeedback>
+    </Picker>);
+});
+_RegionPicker.displayName === 'mpx-picker-region';
+export default _RegionPicker;