@mpxjs/webpack-plugin 2.10.3 → 2.10.4

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

@@ -1,147 +1,87 @@
-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] };
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import MpxPickerView from '../mpx-picker-view';
+import MpxPickerViewColumn from '../mpx-picker-view-column';
+const styles = StyleSheet.create({
+    pickerContainer: {
+        height: 240,
+        paddingHorizontal: 10,
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10
+    },
+    pickerIndicator: {
+        height: 45
+    },
+    pickerItem: {
+        fontSize: 18,
+        lineHeight: 45,
+        textAlign: 'center'
     }
-    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++) {
-        const 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 => {
-        const 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;
-                }
-                return ritem;
-            });
-        }
-        else {
-            curRange.map((citem, cindex) => {
-                if (citem.value === item) {
-                    tmpRange = citem.children;
-                }
-                return citem;
-            });
-            curRange = tmpRange;
-        }
-        return item;
-    });
-    return changeIndex;
-}
-const _MultiSelectorPicker = forwardRef((props, ref) => {
-    const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange, style } = props;
-    const formatRange = formatRangeFun(range, props['range-key']);
-    const initValue = getInnerValueByIndex(formatRange, value);
-    // 选中的索引值
-    const [selected, setSelected] = useState(initValue);
-    // range数据源
-    const [data, setData] = useState(formatRange || []);
-    // 存储layout布局信息
-    const layoutRef = useRef({});
-    const viewRef = useRef(null);
+});
+const formatRangeFun = (range, rangeKey = '') => rangeKey ? range.map((item) => item[rangeKey]) : range;
+const formatValueFn = (value) => {
+    return Array.isArray(value) ? value : [value];
+};
+const hasDiff = (a, b) => {
+    return a.length !== b.length || a.some((item, index) => item !== b[index]);
+};
+const PickerMultiSelector = forwardRef((props, ref) => {
+    const { value = [], range = [], bindchange, bindcolumnchange } = props;
+    const _value = formatValueFn(value);
+    const [formatValue, setFormatValue] = useState(_value);
+    const [formatRange, setFormatRange] = useState(formatRangeFun(range, props['range-key']));
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {
-        style
-    });
-    useEffect(() => {
-        if (range) {
-            const newFormatRange = formatRangeFun(range, props['range-key']);
-            setData(newFormatRange);
+    const updateValue = useCallback((value = []) => {
+        let newValue = formatValueFn(value);
+        if (newValue.length === 0) {
+            newValue = formatValue.map(() => 0);
         }
-        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);
+        checkColumnChange(newValue, formatValue);
+        if (hasDiff(newValue, formatValue)) {
+            setFormatValue(newValue);
+        }
+    }, [formatValue]);
+    const updateRange = (newRange) => {
+        const range = formatRangeFun(newRange.slice(), props['range-key']);
+        setFormatRange(range);
     };
-    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 _props = useRef(props);
+    _props.current = props;
+    useImperativeHandle(ref, () => ({
+        updateValue,
+        updateRange,
+        getNodeInstance: () => ({
+            props: _props,
+            nodeRef,
+            instance: {
+                style: {}
+            }
+        })
+    }));
+    const onChange = (e) => {
+        const { value } = e.detail;
+        checkColumnChange(value, formatValue);
+        bindchange?.({ detail: { value: value } });
+        if (hasDiff(value, formatValue)) {
+            setFormatValue(value.slice());
+        }
     };
-    const antPickerProps = {
-        ref: nodeRef,
-        data,
-        value: selected,
-        cols: range.length,
-        defaultValue: initValue,
-        disabled,
-        itemHeight: 40,
-        onChange,
-        onDismiss: bindcancel && bindcancel,
-        onPickerChange: onPickerChange
+    const checkColumnChange = (value, formatValue) => {
+        const index = value.findIndex((v, i) => v !== formatValue[i]);
+        if (index !== -1) {
+            bindcolumnchange?.(index, value[index]);
+        }
     };
-    const touchProps = {
-        onLayout: onElementLayout,
-        ref: viewRef
+    const renderColumn = (columnData, index) => {
+        return (
+        // @ts-expect-error ignore
+        <MpxPickerViewColumn key={index}>
+        {columnData.map((item, index) => (<Text key={index} style={styles.pickerItem}>{item}</Text>))}
+      </MpxPickerViewColumn>);
     };
-    return (<Picker {...antPickerProps}>
-      <TouchableWithoutFeedback>
-        <View {...touchProps}>
-          {children}
-        </View>
-      </TouchableWithoutFeedback>
-    </Picker>);
+    return (<MpxPickerView style={styles.pickerContainer} indicator-style={styles.pickerIndicator} value={formatValue} bindchange={onChange}>
+      {formatRange.map((item, index) => (renderColumn(item, index)))}
+    </MpxPickerView>);
 });
-_MultiSelectorPicker.displayName = 'mpx-picker-multiselector';
-export default _MultiSelectorPicker;
+PickerMultiSelector.displayName = 'MpxPickerMultiSelector';
+export default PickerMultiSelector;

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

@@ -1,99 +1,199 @@
-import { View, TouchableWithoutFeedback } from 'react-native';
-import { Picker } from '@ant-design/react-native';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import MpxPickerView from '../mpx-picker-view';
+import MpxPickerViewColumn from '../mpx-picker-view-column';
 import { regionData } from './regionData';
-import React, { forwardRef, useState, useRef } from 'react';
-import useNodesRef from '../useNodesRef'; // 引入辅助函数
-function formateRegionData(clObj = [], customItem, depth = 2) {
-    const l = depth;
-    // 'PickerData[]' is not assignable to type 'PickerColumn | PickerColumn[]'.
-    // const obj: PickerColumnItem[] = []
-    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];
+import { extendObject, useUpdateEffect } from '../utils';
+const styles = StyleSheet.create({
+    pickerContainer: {
+        height: 240,
+        paddingHorizontal: 10,
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10
+    },
+    pickerIndicator: {
+        height: 45
+    },
+    pickerItem: {
+        fontSize: 16,
+        lineHeight: 45,
+        textAlign: 'center'
+    }
+});
+const rangeProvince = regionData.map(item => item.value);
+const findIndex = (arr, val) => {
+    const res = arr.findIndex(item => item === val);
+    return res === -1 ? 0 : res;
+};
+const getColumnLength = (level) => {
+    if (level === 'province') {
+        return 1;
+    }
+    else if (level === 'city') {
+        return 2;
+    }
+    else {
+        return 3;
+    }
+};
+const valueStr2Obj = (value = [], limit, customItem = '') => {
+    const offsetIndex = customItem ? 1 : 0;
+    let indexProvince = 0;
+    if (customItem && value[0] === customItem) {
+        indexProvince = 0;
+    }
+    else {
+        indexProvince = findIndex(rangeProvince, value[0]) + offsetIndex;
+    }
+    const ans = {
+        indexArr: [indexProvince],
+        rangeArr: [customItem ? [customItem, ...rangeProvince] : rangeProvince]
+    };
+    for (let i = 1, lastIndex = indexProvince, lastData = regionData, lastRange = rangeProvince; i < limit; i++) {
+        if (customItem) {
+            if (lastIndex === 0) {
+                if (i === 1) {
+                    ans.indexArr.push(0, 0);
+                    ans.rangeArr.push([customItem], [customItem]);
+                }
+                else {
+                    ans.indexArr.push(0);
+                    ans.rangeArr.push([customItem]);
+                }
+                return ans;
+            }
         }
-        obj.push(panding);
+        lastData = lastData[lastIndex - offsetIndex].children;
+        lastRange = lastData.map((item) => item.value);
+        lastIndex = findIndex(lastRange, value[i]) + offsetIndex;
+        if (customItem && customItem === value[i]) {
+            lastIndex = 0;
+        }
+        ans.indexArr.push(Math.max(0, lastIndex));
+        ans.rangeArr.push(customItem ? [customItem, ...lastRange] : lastRange);
     }
-    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);
+    return ans;
+};
+const valueChanged2Obj = (currentObj, value, limit = 3, customItem = '') => {
+    const offsetIndex = customItem ? 1 : 0;
+    const newValue = new Array(limit).fill(0);
+    const currentValue = currentObj.indexArr;
+    for (let i = 0; i < limit; i++) {
+        if (i === limit - 1) {
+            return {
+                indexArr: value,
+                rangeArr: currentObj.rangeArr
+            };
+        }
+        newValue[i] = value[i];
+        if (currentValue[i] !== value[i]) {
+            break;
         }
-        obj.push(region);
     }
-    return obj;
-}
-const _RegionPicker = forwardRef((props, ref) => {
-    const { children, value, bindchange, bindcancel, disabled, style } = props;
-    const formatRegionData = formateRegionData(regionData, props['custom-item']);
-    const [regionvalue, setRegionValue] = useState(value);
-    // 存储layout布局信息
-    const layoutRef = useRef({});
-    const viewRef = useRef(null);
-    const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {
-        style
-    });
-    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;
+    const ans = {
+        indexArr: [newValue[0]],
+        rangeArr: [currentObj.rangeArr[0]]
+    };
+    let data = regionData;
+    for (let i = 1; i < limit; i++) {
+        if (customItem) {
+            if (newValue[i - 1] === 0) {
+                if (i === 1) {
+                    ans.indexArr.push(0, 0);
+                    ans.rangeArr.push([customItem], [customItem]);
+                }
+                else {
+                    ans.indexArr.push(0);
+                    ans.rangeArr.push([customItem]);
                 }
+                return ans;
             }
-            return item;
-        }).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 onDismiss = () => {
-        bindcancel && bindcancel();
-    };
-    const regionProps = {
-        ref: nodeRef,
-        data: formatRegionData,
-        value: regionvalue,
-        onChange,
-        disabled,
-        onDismiss
-    };
-    const touchProps = {
-        onLayout: onElementLayout,
-        ref: viewRef
+        }
+        data = data[newValue[i - 1] - offsetIndex].children;
+        const range = data.map(item => item.value);
+        ans.indexArr.push(newValue[i]);
+        ans.rangeArr.push(customItem ? [customItem, ...range] : range);
+    }
+    return ans;
+};
+const valueNum2String = (value, customItem = '') => {
+    let data = regionData;
+    return value.map(index => {
+        if (customItem) {
+            if (index === 0) {
+                return customItem;
+            }
+            else {
+                index -= 1;
+            }
+        }
+        const item = data[index];
+        data = item.children;
+        return item.value;
+    });
+};
+const hasDiff = (currentValue, value, limit = 3) => {
+    for (let i = 0; i < limit; i++) {
+        if (currentValue[i] !== value[i]) {
+            return true;
+        }
+    }
+    return false;
+};
+const PickerRegion = forwardRef((props, ref) => {
+    const { value = [], level = 'region', 'custom-item': customItem = '', bindchange } = props;
+    const nodeRef = useRef(null);
+    const columnLength = useMemo(() => getColumnLength(level), [level]);
+    const [formatObj, setFormatObj] = useState(valueStr2Obj(value, columnLength, customItem));
+    const updateValue = useCallback((value = []) => {
+        const calibratedValue = valueStr2Obj(value, columnLength, customItem);
+        setFormatObj(calibratedValue);
+    }, [columnLength, customItem]);
+    const _props = useRef(props);
+    _props.current = props;
+    useImperativeHandle(ref, () => ({
+        updateValue,
+        getNodeInstance: () => ({
+            props: _props,
+            nodeRef,
+            instance: {
+                style: {}
+            }
+        })
+    }));
+    useUpdateEffect(() => {
+        const calibratedValue = valueStr2Obj(value, columnLength, customItem);
+        if (hasDiff(formatObj.indexArr, calibratedValue.indexArr, columnLength)) {
+            setFormatObj(calibratedValue);
+        }
+    }, [value, columnLength, customItem]);
+    const onChange = useCallback((e) => {
+        const { value } = e.detail;
+        const currentValue = formatObj.indexArr;
+        const newObj = valueChanged2Obj(formatObj, value, columnLength, customItem);
+        if (hasDiff(currentValue, value, columnLength)) {
+            setFormatObj(newObj);
+        }
+        bindchange?.({ detail: { value: valueNum2String(newObj.indexArr, customItem) } });
+    }, [formatObj, columnLength, customItem, bindchange]);
+    const renderColumn = () => {
+        return formatObj.rangeArr?.map((item, index) => (
+        // @ts-expect-error ignore
+        <MpxPickerViewColumn key={index}>
+          {item.map((item, index) => {
+                const len = item.length;
+                const style = extendObject({}, styles.pickerItem, {
+                    fontSize: len > 5 ? 21 - len : 16
+                });
+                return <Text key={index} style={style}>
+              {item}
+            </Text>;
+            })}
+        </MpxPickerViewColumn>));
     };
-    return (<Picker {...regionProps}>
-      <TouchableWithoutFeedback>
-        <View {...touchProps}>{children}</View>
-      </TouchableWithoutFeedback>
-    </Picker>);
+    return (<MpxPickerView style={styles.pickerContainer} indicator-style={styles.pickerIndicator} value={formatObj.indexArr} bindchange={onChange}>
+      {renderColumn()}
+    </MpxPickerView>);
 });
-_RegionPicker.displayName = 'mpx-picker-region';
-export default _RegionPicker;
+PickerRegion.displayName = 'MpxPickerRegion';
+export default PickerRegion;

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

@@ -1,81 +1,66 @@
-/**
- * 普通选择器，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;
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import MpxPickerView from '../mpx-picker-view';
+import MpxPickerViewColumn from '../mpx-picker-view-column';
+import { useUpdateEffect } from '../utils';
+const styles = StyleSheet.create({
+    pickerContainer: {
+        height: 240,
+        paddingHorizontal: 10,
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10
+    },
+    pickerIndicator: {
+        height: 45
+    },
+    pickerItem: {
+        fontSize: 18,
+        lineHeight: 45,
+        textAlign: 'center'
+    }
+});
+const formatRangeFun = (range, rangeKey = '') => rangeKey ? range.map((item) => item[rangeKey]) : range;
+const formatValueFn = (value = 0) => {
+    const _value = Array.isArray(value) ? value[0] : value;
+    return +_value;
 };
-const _SelectorPicker = forwardRef((props, ref) => {
-    const { range, children, value, disabled, bindchange, bindcancel, style } = props;
-    // 格式化数据为Array<*>
+const PickerSelector = forwardRef((props, ref) => {
+    const { value, range = [], bindchange } = props;
+    const [formatValue, setFormatValue] = useState(formatValueFn(value));
     const formatRange = formatRangeFun(range, props['range-key']);
-    // 选中的索引值
-    const [selected, setSelected] = useState(value || 0);
-    // range数据源
-    const [data, setData] = useState(formatRange || []);
-    // 存储layout布局信息
-    const layoutRef = useRef({});
-    const viewRef = useRef(null);
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {
-        style
-    });
-    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 updateValue = (value = 0) => {
+        const newValue = formatValueFn(value);
+        setFormatValue(newValue);
     };
-    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 = {
-        ref: nodeRef,
-        data,
-        value: [selected],
-        cols: 1,
-        defaultValue,
-        itemHeight: 40,
-        onChange,
-        onDismiss: bindcancel && bindcancel
-    };
-    const touchProps = {
-        onLayout: onElementLayout,
-        ref: viewRef
+    useUpdateEffect(() => {
+        updateValue(value);
+    }, [value]);
+    const _props = useRef(props);
+    _props.current = props;
+    useImperativeHandle(ref, () => ({
+        updateValue,
+        getNodeInstance: () => ({
+            props: _props,
+            nodeRef,
+            instance: {
+                style: {}
+            }
+        })
+    }));
+    const onChange = (e) => {
+        const { value } = e.detail;
+        if (formatValue !== value[0]) {
+            setFormatValue(value[0]);
+        }
+        bindchange?.({ detail: { value: value[0] + '' } });
     };
-    return (<Picker {...antPickerProps}>
-        <TouchableWithoutFeedback>
-          <View {...touchProps}>
-            {children}
-          </View>
-        </TouchableWithoutFeedback>
-    </Picker>);
+    return (<MpxPickerView style={styles.pickerContainer} indicator-style={styles.pickerIndicator} value={[formatValue]} bindchange={onChange}>
+      {/* @ts-expect-error ignore */}
+      <MpxPickerViewColumn>
+        {formatRange.map((item, index) => (<Text key={index} style={styles.pickerItem}>{item}</Text>))}
+      </MpxPickerViewColumn>
+    </MpxPickerView>);
 });
-_SelectorPicker.displayName = 'mpx-picker-selector';
-export default _SelectorPicker;
+PickerSelector.displayName = 'MpxPickerSelector';
+export default PickerSelector;