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

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -38,9 +38,9 @@
  * ✘ bind:onkeyboardheightchange
  */
 import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
-import { Platform, TextInput } from 'react-native';
+import { TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
@@ -48,10 +48,7 @@ const keyboardTypeMap = {
     text: 'default',
     number: 'numeric',
     idcard: 'default',
-    digit: Platform.select({
-        ios: 'decimal-pad',
-        android: 'numeric'
-    }) || ''
+    digit: isIOS ? 'decimal-pad' : 'numeric'
 };
 const Input = forwardRef((props, ref) => {
     const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
@@ -82,7 +79,7 @@ const Input = forwardRef((props, ref) => {
     const lineCount = useRef(0);
     const [inputValue, setInputValue] = useState(defaultValue);
     const [contentHeight, setContentHeight] = useState(0);
-    const [selection, setSelection] = useState({ start: -1, end: -1 });
+    const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
         ? { height: 'auto', minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
@@ -94,15 +91,17 @@ const Input = forwardRef((props, ref) => {
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
-            setInputValue(parseValue(value));
+            const parsed = parseValue(value);
+            tmpValue.current = parsed;
+            setInputValue(parsed);
         }
     }, [value]);
     useEffect(() => {
-        if (typeof cursor === 'number') {
-            setSelection({ start: cursor, end: cursor });
+        if (selectionStart > -1) {
+            setSelection({ start: selectionStart, end: selectionEnd === -1 ? tmpValue.current.length : selectionEnd });
         }
-        else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
-            setSelection({ start: selectionStart, end: selectionEnd });
+        else if (typeof cursor === 'number') {
+            setSelection({ start: cursor, end: cursor });
         }
     }, [cursor, selectionStart, selectionEnd]);
     // have not selection on the Android platformg
@@ -211,6 +210,7 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const resetValue = () => {
+        tmpValue.current = '';
         setInputValue('');
     };
     const getValue = () => {
@@ -255,7 +255,7 @@ const Input = forwardRef((props, ref) => {
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        selection: selection,
+        selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',

package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx

@@ -1,10 +1,10 @@
 import React, { useContext, useEffect, useMemo } from 'react';
-import { Keyboard, Platform, View } from 'react-native';
+import { Keyboard, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { KeyboardAvoidContext } from './context';
+import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
-    const isIOS = Platform.OS === 'ios';
     const duration = isIOS ? 250 : 300;
     const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
     const offset = useSharedValue(0);

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('日'));
+};