@mpxjs/webpack-plugin 2.10.3 → 2.10.4

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

@@ -1,74 +1,200 @@
-import { View, TouchableWithoutFeedback } from 'react-native';
-import { DatePicker } from '@ant-design/react-native';
-import React, { forwardRef, useState, useRef, useEffect } from 'react';
-import useNodesRef from '../useNodesRef'; // 引入辅助函数
-function formatTimeStr(time = '') {
-    let [year, month, day] = time.split('-');
-    year = ~~year || 2000;
-    month = ~~month || 1;
-    day = ~~day || 1;
-    return new Date(year, month - 1, day);
-}
-function dateToString(date, fields = 'day') {
-    const yyyy = date.getFullYear() + '';
-    const MM = ('0' + (date.getMonth() + 1)).slice(-2);
-    const dd = ('0' + date.getDate()).slice(-2);
-    let ret = yyyy;
-    if (fields === 'month' || fields === 'day') {
-        ret += `-${MM}`;
-        if (fields === 'day') {
-            ret += `-${dd}`;
+import React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle } 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';
+import { years, months, daysInMonth, wrapDate, daysInMonthLength, START_YEAR, END_YEAR } from './dateData';
+const START_DATE = `${START_YEAR}-01-01`;
+const END_DATE = `${END_YEAR}-12-31`;
+const START_DATE_ARR = [START_YEAR, 1, 1];
+const END_DATE_ARR = [END_YEAR, 12, 31];
+const styles = StyleSheet.create({
+    pickerContainer: {
+        height: 240,
+        paddingHorizontal: 10,
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10
+    },
+    pickerIndicator: {
+        height: 45
+    },
+    pickerItem: {
+        fontSize: 16,
+        lineHeight: 45,
+        textAlign: 'center'
+    }
+});
+const getColumnLength = (fields = 'day') => {
+    return fields === 'year' ? 1 : fields === 'month' ? 2 : 3;
+};
+const compareDateStr = (date1, date2) => {
+    const [y1 = START_YEAR, m1 = 0, d1 = 0] = typeof date1 === 'string' ? date1.split('-').map(Number) : date1;
+    const [y2 = START_YEAR, m2 = 0, d2 = 0] = typeof date2 === 'string' ? date2.split('-').map(Number) : date2;
+    const num1 = y1 * 10000 + m1 * 100 + d1;
+    const num2 = y2 * 10000 + m2 * 100 + d2;
+    if (num1 === num2) {
+        return 0;
+    }
+    return num1 > num2 ? 1 : -1;
+};
+const getDateArr = (date) => {
+    const [y, m, d] = typeof date === 'string' ? date.split('-').map(Number) : date;
+    return [y || 0, m || 0, d || 0];
+};
+const calibrateDate = (date, start, end) => {
+    let startArr = getDateArr(start);
+    let endArr = getDateArr(end);
+    let dateArr = getDateArr(date);
+    if (compareDateStr(startArr, endArr) > 0) {
+        startArr = START_DATE_ARR;
+    }
+    if (compareDateStr(endArr, startArr) < 0) {
+        endArr = END_DATE_ARR;
+    }
+    if (compareDateStr(start, end) > 0) {
+        startArr = START_DATE_ARR;
+        endArr = END_DATE_ARR;
+    }
+    if (compareDateStr(dateArr, endArr) > 0) {
+        dateArr = endArr;
+    }
+    if (compareDateStr(dateArr, startArr) < 0) {
+        dateArr = startArr;
+    }
+    return dateArr;
+};
+const initDateStr2Arr = (dateStr, start, end) => {
+    if (!dateStr) {
+        const today = new Date();
+        const todayYear = today.getFullYear();
+        const todayMonth = today.getMonth() + 1;
+        const todayDay = today.getDate();
+        dateStr = [todayYear, todayMonth, todayDay];
+    }
+    const [y, m, d] = getDateArr(dateStr);
+    const year = Math.min(Math.max(START_YEAR, y), END_YEAR);
+    const month = Math.min(Math.max(1, m), 12);
+    const day = Math.min(Math.max(1, d), daysInMonthLength(year, month));
+    const res = [year, month, day];
+    return calibrateDate(res, start, end);
+};
+const valueStr2Obj = (_value = '', // eg: 2025-2-12
+limit, start, end) => {
+    const [y, m, d] = initDateStr2Arr(_value, start, end);
+    const ans = {
+        indexArr: [y - START_YEAR],
+        rangeArr: [years]
+    };
+    if (limit === 2) {
+        ans.indexArr.push(m - 1);
+        ans.rangeArr.push(months);
+    }
+    else if (limit === 3) {
+        const days = daysInMonth(y, m);
+        ans.indexArr.push(m - 1, d - 1);
+        ans.rangeArr.push(months, days);
+    }
+    return ans;
+};
+const valueChanged2Obj = (currentObj, value, limit = 3) => {
+    const currentValue = currentObj.indexArr;
+    const rangeArr = currentObj.rangeArr;
+    if (limit === 3 && (currentValue[0] !== value[0] || currentValue[1] !== value[1])) {
+        const days = daysInMonth(value[0], value[1] + 1);
+        rangeArr[2] = days;
+        const maxIndex = days.length - 1;
+        if (value[2] > maxIndex) {
+            value[2] = maxIndex;
+        }
+    }
+    return {
+        indexArr: value,
+        rangeArr
+    };
+};
+const valueChanged2Obj2 = (value, limit = 3, start, end) => {
+    const y = value[0] + START_YEAR;
+    const m = value[1] + 1;
+    const d = value[2] + 1;
+    return valueStr2Obj([y, m, d], limit, start, end);
+};
+const valueNum2String = (value) => {
+    return value.map((item, index) => {
+        if (index === 0) {
+            return item + START_YEAR;
+        }
+        else {
+            return wrapDate()(item + 1);
+        }
+    }).join('-');
+};
+const hasDiff = (currentValue, value, limit = 3) => {
+    for (let i = 0; i < limit; i++) {
+        if (currentValue[i] !== value[i]) {
+            return true;
         }
     }
-    return ret;
-}
-const _DatePicker = forwardRef((props, ref) => {
-    const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields, style } = props;
-    const [datevalue, setDateValue] = useState(value);
-    // 存储layout布局信息
-    const layoutRef = useRef({});
-    const viewRef = useRef(null);
+    return false;
+};
+const PickerDate = forwardRef((props, ref) => {
+    const { value = '', start = START_DATE, end = END_DATE, fields, bindchange } = props;
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {
-        style
-    });
+    const columnLength = useMemo(() => getColumnLength(fields), [fields]);
+    const [formatObj, setFormatObj] = useState(valueStr2Obj(value, columnLength, start, end));
+    const timerRef = useRef(null);
     useEffect(() => {
-        value && setDateValue(value);
-    }, [value]);
-    const onChange = (date) => {
-        const { fields = 'day' } = props;
-        const ret = dateToString(date, fields);
-        setDateValue(ret);
-        bindchange && bindchange({ detail: { value: ret } });
-    };
-    const onDismiss = () => {
-        bindcancel && bindcancel();
-    };
-    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 dateProps = {
-        ref: nodeRef,
-        precision: fields,
-        value: formatTimeStr(datevalue),
-        minDate: formatTimeStr(start),
-        maxDate: formatTimeStr(end),
-        onChange,
-        onDismiss,
-        disabled
-    };
-    const touchProps = {
-        onLayout: onElementLayout,
-        ref: viewRef
+        return () => {
+            timerRef.current && clearTimeout(timerRef.current);
+        };
+    }, []);
+    useUpdateEffect(() => {
+        const calibratedValue = valueStr2Obj(value, columnLength, start, end);
+        setFormatObj(calibratedValue);
+    }, [value, columnLength, start, end]);
+    const updateValue = useCallback((value = '') => {
+        const calibratedValue = valueStr2Obj(value, columnLength, start, end);
+        setFormatObj(calibratedValue);
+    }, [columnLength, start, end]);
+    const _props = useRef(props);
+    _props.current = props;
+    useImperativeHandle(ref, () => ({
+        updateValue,
+        getNodeInstance: () => ({
+            props: _props,
+            nodeRef,
+            instance: {
+                style: {}
+            }
+        })
+    }));
+    const onChange = useCallback((e) => {
+        const { value } = e.detail;
+        const currentValue = formatObj.indexArr;
+        const newObj = valueChanged2Obj(formatObj, value, columnLength);
+        if (hasDiff(currentValue, value, columnLength)) {
+            setFormatObj(newObj);
+            const newObj2 = valueChanged2Obj2(value, columnLength, start, end);
+            if (hasDiff(newObj.indexArr, newObj2.indexArr, columnLength)) {
+                timerRef.current && clearTimeout(timerRef.current);
+                timerRef.current = setTimeout(() => setFormatObj(newObj2));
+            }
+        }
+        bindchange?.({ detail: { value: valueNum2String(newObj.indexArr) } });
+    }, [formatObj, columnLength, bindchange, start, end]);
+    const renderColumn = () => {
+        return formatObj.rangeArr?.map((item, index) => (
+        // @ts-expect-error ignore
+        <MpxPickerViewColumn key={index}>
+        {item.map((item, index) => {
+                return <Text key={index} style={styles.pickerItem}>
+            {item}
+          </Text>;
+            })}
+      </MpxPickerViewColumn>));
     };
-    return (<DatePicker {...dateProps}>
-      <TouchableWithoutFeedback>
-        <View {...touchProps}>{children}</View>
-      </TouchableWithoutFeedback>
-    </DatePicker>);
+    return (<MpxPickerView style={styles.pickerContainer} indicator-style={styles.pickerIndicator} value={formatObj.indexArr} bindchange={onChange}>
+      {renderColumn()}
+    </MpxPickerView>);
 });
-_DatePicker.displayName = 'mpx-picker-date';
-export default _DatePicker;
+PickerDate.displayName = 'MpxPickerDate';
+export default PickerDate;

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

@@ -0,0 +1,17 @@
+export const wrapDate = (union = '') => (num) => String(num).padStart(2, '0') + union;
+export const START_YEAR = 1900;
+export const END_YEAR = 2099;
+export const years = Array.from({ length: 200 }, (_, index) => index + START_YEAR + '年');
+export const months = Array.from({ length: 12 }, (_, index) => index + 1).map(wrapDate('月'));
+export const daysInMonthLength = (year, month) => {
+    return month === 2
+        ? year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)
+            ? 29
+            : 28
+        : [4, 6, 9, 11].includes(month)
+            ? 30
+            : 31;
+};
+export const daysInMonth = (year, month) => {
+    return Array.from({ length: daysInMonthLength(year, month) }, (_, index) => index + 1).map(wrapDate('日'));
+};

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 pickerRef = useRef(null);
+    const { open, show, hide, remove } = useRef(createPopupManager()).current;
+    useNodesRef(props, ref, nodeRef);
     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 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;