@mpxjs/webpack-plugin 2.10.3 → 2.10.4-beta.11

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

@@ -1,14 +1,16 @@
-import { View } from 'react-native';
-import React, { forwardRef, useRef, useContext, useState } from 'react';
+import React, { forwardRef, useRef, useContext, useEffect } from 'react';
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
 import { warn } from '@mpxjs/utils';
+import PickerSelector from './selector';
+import PickerMultiSelector from './multiSelector';
+import PickerTime from './time';
+import PickerDate from './date';
+import PickerRegion from './region';
+import { FormContext, RouteContext } from '../context';
+import useNodesRef from '../useNodesRef';
 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';
+import { extendObject } from '../utils';
+import { createPopupManager } from '../mpx-popup';
 /**
  * ✔ mode
  * ✔ disabled
@@ -24,40 +26,118 @@ import { FormContext } from '../context';
  * ✔ custom-item
  * ✔ level 选择器层级 province，city，region，<sub-district不支持>
  * ✔ level
- * ✘ header-text
- * ✘ bindcolumnchange
+ * ✔ header-text
+ * ✔ bindcolumnchange
  */
-const _Picker = forwardRef((props, ref) => {
-    const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange, style } = props;
+const styles = StyleSheet.create({
+    header: {
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#eeeeee'
+    },
+    headerText: {
+        color: '#333333',
+        fontSize: 18,
+        textAlign: 'center'
+    },
+    footer: {
+        gap: 20,
+        height: 50,
+        marginBottom: 20,
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center'
+    },
+    footerItem: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 40,
+        width: 110,
+        borderRadius: 5
+    },
+    cancelButton: {
+        backgroundColor: '#eeeeee'
+    },
+    confirmButton: {
+        backgroundColor: '#1AAD19'
+    },
+    cancelText: {
+        color: 'green',
+        fontSize: 18,
+        textAlign: 'center'
+    },
+    confirmText: {
+        color: '#FFFFFF',
+        fontSize: 18,
+        textAlign: 'center'
+    }
+});
+const pickerModalMap = {
+    ["selector" /* PickerMode.SELECTOR */]: PickerSelector,
+    ["multiSelector" /* PickerMode.MULTI_SELECTOR */]: PickerMultiSelector,
+    ["time" /* PickerMode.TIME */]: PickerTime,
+    ["date" /* PickerMode.DATE */]: PickerDate,
+    ["region" /* PickerMode.REGION */]: PickerRegion
+};
+const getDefaultValue = (mode) => {
+    switch (mode) {
+        case "selector" /* PickerMode.SELECTOR */:
+        case "multiSelector" /* PickerMode.MULTI_SELECTOR */:
+        case "region" /* PickerMode.REGION */:
+            return [];
+        case "time" /* PickerMode.TIME */:
+        case "date" /* PickerMode.DATE */:
+        default:
+            return '';
+    }
+};
+const buttonTextMap = {
+    'zh-CN': {
+        cancel: '取消',
+        confirm: '确定'
+    },
+    'en-US': {
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    }
+};
+const Picker = forwardRef((props, ref) => {
+    const { mode, value, range = null, children, disabled, bindcancel, bindchange, 'header-text': headerText = '' } = props;
+    const { pageId } = useContext(RouteContext) || {};
+    const buttonText = buttonTextMap[global.__mpx?.i18n?.locale || 'zh-CN'];
+    const pickerValue = useRef(value);
+    pickerValue.current = Array.isArray(value) ? value.slice() : value;
     const innerLayout = useRef({});
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {
-        style
-    });
-    const innerProps = useInnerProps(props, {
+    const pickerRef = useRef(null);
+    const { open, show, hide, remove } = useRef(createPopupManager()).current;
+    useNodesRef(props, ref, nodeRef);
+    const innerProps = useInnerProps(extendObject({}, props, {
         ref: nodeRef
-    }, [], { layoutRef: innerLayout });
-    const [pickerValue, setPickerValue] = useState(value);
-    const defaultValues = {
-        selector: 0,
-        multiSelector: [0],
-        time: props.start,
-        date: props.start,
-        region: undefined
+    }), [], { layoutRef: innerLayout });
+    const getInnerLayout = (layout) => {
+        innerLayout.current = layout.current;
+    };
+    useEffect(() => {
+        if (range && pickerRef.current && mode === "multiSelector" /* PickerMode.MULTI_SELECTOR */) {
+            pickerRef.current.updateRange?.(range);
+        }
+    }, [JSON.stringify(range)]);
+    /** --- form 表单组件内部方法 --- */
+    const getValue = () => {
+        return pickerValue.current;
+    };
+    const resetValue = () => {
+        const defalutValue = getDefaultValue(mode); // 默认值
+        pickerRef.current.updateValue?.(defalutValue);
     };
     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.');
@@ -66,76 +146,78 @@ const _Picker = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
-    const getInnerLayout = (layout) => {
-        innerLayout.current = layout.current;
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
+    /** --- form 表单组件内部方法 --- */
+    const onChange = (e) => {
+        const { value } = e.detail;
+        pickerValue.current = value;
+    };
+    const onColumnChange = (columnIndex, value) => {
+        if (mode !== "multiSelector" /* PickerMode.MULTI_SELECTOR */) {
+            return;
+        }
+        const eventData = getCustomEvent('columnchange', {}, { detail: { column: columnIndex, value }, layoutRef: innerLayout });
+        props.bindcolumnchange?.(eventData);
     };
-    const onChange = (event) => {
-        const eventData = getCustomEvent('change', {}, { detail: event.detail, layoutRef: innerLayout });
-        bindchange && bindchange(eventData);
-        setPickerValue(event.detail.value);
+    const onCancel = () => {
+        bindcancel?.();
+        hide();
     };
-    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 onConfirm = () => {
+        const eventData = getCustomEvent('change', {}, { detail: { value: pickerValue.current }, layoutRef: innerLayout });
+        bindchange?.(eventData);
+        hide();
     };
-    const commonProps = {
-        ...innerProps,
+    const specificProps = extendObject(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'
+        bindcolumnchange: onColumnChange,
+        getInnerLayout,
+        getRange: () => range
+    });
+    const renderPickerContent = () => {
+        if (disabled) {
+            return null;
+        }
+        const _mode = mode ?? "selector" /* PickerMode.SELECTOR */;
+        if (!(_mode in pickerModalMap)) {
+            return warn(`[Mpx runtime warn]: Unsupported <picker> mode: ${mode}`);
+        }
+        const _value = value;
+        const PickerModal = pickerModalMap[_mode];
+        const renderPickerModal = (<>
+          {headerText && (<View style={[styles.header]}>
+              <Text style={[styles.headerText]}>{headerText}</Text>
+            </View>)}
+          <PickerModal {...specificProps} value={_value} ref={pickerRef}></PickerModal>
+          <View style={[styles.footer]}>
+            <View onTouchEnd={onCancel} style={[styles.footerItem, styles.cancelButton]}>
+              <Text style={[styles.cancelText]}>{buttonText.cancel}</Text>
+            </View>
+            <View onTouchEnd={onConfirm} style={[styles.footerItem, styles.confirmButton]}>
+              <Text style={[styles.confirmText]}>{buttonText.confirm}</Text>
+            </View>
+          </View>
+        </>);
+        const contentHeight = headerText ? 350 : 310;
+        open(renderPickerModal, pageId, { contentHeight });
     };
-    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>;
-    }
+    useEffect(() => {
+        renderPickerContent();
+        return () => {
+            remove();
+        };
+    }, []);
+    return (<TouchableWithoutFeedback onPress={show}>
+        {children}
+      </TouchableWithoutFeedback>);
 });
-_Picker.displayName = 'mpx-picker';
-export default _Picker;
+Picker.displayName = 'MpxPicker';
+export default Picker;

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;