@mpxjs/webpack-plugin 2.8.25-alpha.21 → 2.8.25-alpha.22

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

@@ -0,0 +1,141 @@
+import { View } from 'react-native';
+import React, { forwardRef, useRef, useContext, useState } from 'react';
+import { warn } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from '../getInnerListeners';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+import Selector from './selector';
+import TimeSelector from './time';
+import DateSelector from './date';
+import MultiSelector from './multiSelector';
+import RegionSelector from './region';
+import { FormContext } from '../context';
+/**
+ * ✔ mode
+ * ✔ disabled
+ * ✔ bindcancel
+ * ✔ bindchange
+ * ✔ range
+ * ✔ range-key
+ * ✔ value
+ * ✔ start
+ * ✔ end
+ * ✔ fields 有效值 year,month,day，表示选择器的粒度
+ * ✔ end
+ * ✔ custom-item
+ * ✔ level 选择器层级 province，city，region，<sub-district不支持>
+ * ✔ level
+ * ✘ header-text
+ * ✘ bindcolumnchange
+ */
+const _Picker = forwardRef((props, ref) => {
+    const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange, style } = props;
+    const innerLayout = useRef({});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef
+    }, [], { layoutRef: innerLayout });
+    const [pickerValue, setPickerValue] = useState(value);
+    const defaultValues = {
+        selector: 0,
+        multiSelector: [0],
+        time: props.start,
+        date: props.start,
+        region: undefined
+    };
+    const formContext = useContext(FormContext);
+    let formValuesMap;
+    // 判断 context 是否存在，存在的话读取 context 中存的 formValuesMap
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const resetValue = () => {
+        const defalutValue = (defaultValues[mode] !== undefined ? defaultValues[mode] : value);
+        setPickerValue(defalutValue);
+    };
+    const getValue = () => {
+        return pickerValue;
+    };
+    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 getInnerLayout = (layout) => {
+        innerLayout.current = layout.current;
+    };
+    const onChange = (event) => {
+        const eventData = getCustomEvent('change', {}, { detail: event.detail, layoutRef: innerLayout });
+        bindchange && bindchange(eventData);
+        setPickerValue(event.detail.value);
+    };
+    const columnChange = (value, index) => {
+        // type: "columnchange", detail: {column: 1, value: 2}
+        const eventData = getCustomEvent('columnchange', {}, { detail: { column: index, value }, layoutRef: innerLayout });
+        bindcolumnchange && bindcolumnchange(eventData);
+    };
+    const commonProps = {
+        ...innerProps,
+        mode,
+        children,
+        bindchange: onChange,
+        bindcolumnchange: columnChange,
+        bindcancel,
+        getInnerLayout
+    };
+    const selectorProps = {
+        ...commonProps,
+        value: pickerValue,
+        range: props.range,
+        'range-key': props['range-key']
+    };
+    const multiProps = {
+        ...commonProps,
+        value: pickerValue,
+        range: props.range,
+        'range-key': props['range-key']
+    };
+    const timeProps = {
+        ...commonProps,
+        value: pickerValue,
+        start: props.start,
+        end: props.end
+    };
+    const dateProps = {
+        ...commonProps,
+        value: pickerValue,
+        start: props.start,
+        end: props.end,
+        fileds: props.fields || 'day'
+    };
+    const regionProps = {
+        ...commonProps,
+        value: pickerValue,
+        level: props.level || 'sub-district'
+    };
+    if (mode === 'selector') {
+        return <Selector {...selectorProps}></Selector>;
+    }
+    else if (mode === 'multiSelector') {
+        return <MultiSelector {...multiProps}></MultiSelector>;
+    }
+    else if (mode === 'time') {
+        return <TimeSelector {...timeProps}></TimeSelector>;
+    }
+    else if (mode === 'date') {
+        return <DateSelector {...dateProps}></DateSelector>;
+    }
+    else if (mode === 'region') {
+        return <RegionSelector {...regionProps}></RegionSelector>;
+    }
+    else {
+        return <View>只支持selector, multiSelector, time, date, region 这些类型</View>;
+    }
+});
+_Picker.displayName = 'mpx-picker';
+export default _Picker;

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

@@ -0,0 +1,147 @@
+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++) {
+        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 nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
+    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 = {
+        ref: nodeRef,
+        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,99 @@
+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;
+    // '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];
+        }
+        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, 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;
+                }
+            }
+            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
+    };
+    return (<Picker {...regionProps}>
+      <TouchableWithoutFeedback>
+        <View {...touchProps}>{children}</View>
+      </TouchableWithoutFeedback>
+    </Picker>);
+});
+_RegionPicker.displayName = 'mpx-picker-region';
+export default _RegionPicker;