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

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

@@ -1,29 +1,18 @@
-import React, { useContext, useEffect, useMemo } from 'react';
-import { Keyboard, Platform, View } from 'react-native';
+import React, { useContext, useEffect } from 'react';
+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);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
-    const dismiss = () => {
-        Keyboard.isVisible() && Keyboard.dismiss();
-    };
-    const gesture = useMemo(() => {
-        return Gesture.Tap()
-            .onEnd(() => {
-            dismiss();
-        }).runOnJS(true);
-    }, []);
-    const animatedStyle = useAnimatedStyle(() => {
-        return Object.assign({
-            transform: [{ translateY: -offset.value }]
-        }, isIOS ? {} : { flexBasis: basic.value });
-    });
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: -offset.value }],
+        flexBasis: basic.value
+    }));
     const resetKeyboard = () => {
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
@@ -31,6 +20,11 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
+    const onTouchEnd = ({ nativeEvent }) => {
+        if (nativeEvent.origin !== 'input') {
+            Keyboard.isVisible() && Keyboard.dismiss();
+        }
+    };
     useEffect(() => {
         let subscriptions = [];
         if (isIOS) {
@@ -46,7 +40,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
-                            offset.value = withTiming(value, { duration, easing });
+                            offset.value = withTiming(value, { duration, easing }, (finished) => {
+                                if (finished) {
+                                    // Set flexBasic after animation to trigger re-layout and reset layout information
+                                    basic.value = '99.99%';
+                                }
+                            });
                         });
                     });
                 }),
@@ -68,11 +67,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
                         offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
-                                /**
-                                 * In the Android environment, the layout information is not synchronized after the animation,
-                                 * which results in the inability to correctly trigger element events.
-                                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                                 */
+                                // Set flexBasic after animation to trigger re-layout and reset layout information
                                 basic.value = '99.99%';
                             }
                         });
@@ -85,16 +80,14 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View style={[
+    return (<View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View style={[
             contentContainerStyle,
             animatedStyle
         ]}>
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>);
+        {children}
+      </Animated.View>
+    </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';
 export default KeyboardAvoidingView;

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

@@ -33,10 +33,9 @@ const Label = forwardRef((labelProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
         contextRef.current.triggerChange(evt);
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: onTap
     }), [], {
         layoutRef

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -19,10 +19,10 @@ const _MovableArea = forwardRef((props, ref) => {
         width: normalStyle.width || 10
     }), [normalStyle.width, normalStyle.height]);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
         ref: movableViewRef
-    }, layoutProps), [], { layoutRef });
+    }), [], { layoutRef });
     return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current

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

@@ -452,7 +452,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         'catchhtouchmove',
         'catchtouchend'
     ]);
-    const innerProps = useInnerProps(filterProps, extendObject({
+    const innerProps = useInnerProps(extendObject({}, filterProps, {
         ref: nodeRef,
         onLayout: onLayout,
         style: [innerStyle, animatedStyles, layoutStyle]

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

@@ -1,5 +1,13 @@
+/**
+ * ✔ hover-class
+ * ✘ hover-stop-propagation
+ * ✔ hover-start-time
+ * ✔ hover-stay-time
+ * ✔ open-type
+ * ✔ url
+ * ✔ delta
+ */
 import { useCallback, forwardRef, createElement } from 'react';
-import useInnerProps from './getInnerListeners';
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import MpxView from './mpx-view';
 const _Navigator = forwardRef((props, ref) => {
@@ -23,10 +31,10 @@ const _Navigator = forwardRef((props, ref) => {
                 break;
         }
     }, [openType, url, delta]);
-    const innerProps = useInnerProps(props, {
+    const innerProps = {
         ref,
         bindtap: handleClick
-    });
+    };
     return createElement(MpxView, innerProps, children);
 });
 _Navigator.displayName = 'MpxNavigator';

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