@tarojs/components-react 4.1.12-beta.6 → 4.1.12-beta.60

package/dist/solid/components/picker/index.js

@@ -2,6 +2,7 @@ import { createComponent, mergeProps, memo } from 'solid-js/web';
 import { __rest } from 'tslib';
 import './style/index.scss.js';
 import { View } from '@tarojs/components';
+import Taro from '@tarojs/taro';
 import classNames from 'classnames';
 import React__default from 'react';
 import { verifyValue, verifyTime, hoursRange, minutesRange, verifyDate, getYearRange, getMonthRange, getDayRange, compareTime, omit } from '../../utils/index.js';
@@ -128,12 +129,13 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       children,
       formType,
       lang,
-      theme = 'light'
+      theme = 'light',
+      enableClickItemScroll = true
     } = props,
-    restProps = __rest(props, ["mode", "disabled", "range", "rangeKey", "value", "start", "end", "fields", "headerText", "level", "regionData", "textProps", "colors", "onChange", "onColumnChange", "onCancel", "children", "formType", "lang", "theme"]);
+    restProps = __rest(props, ["mode", "disabled", "range", "rangeKey", "value", "start", "end", "fields", "headerText", "level", "regionData", "textProps", "colors", "onChange", "onColumnChange", "onCancel", "children", "formType", "lang", "theme", "enableClickItemScroll"]);
   const indexRef = React__default.useRef([]);
   const pickerDateRef = React__default.useRef();
-  // 记录是否是用户滚动
+  // region：首次用户滚动初始化完成前不入库
   const isInitializationCompletedRef = React__default.useRef(false);
   const [state, setState] = React__default.useState({
     pickerValue: value || EMPTY_ARRAY,
@@ -142,14 +144,47 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     hidden: true,
     fadeOut: false,
     isWillLoadCalled: false,
-    timestamp: 0 // 用以部分模式下强制刷新组件的的时间戳，多用于反复限位
+    a11yTimeLimitColumnId: null,
+    a11yTimeLimitNonce: 0
   });
+  // 安全区域底部距离
+  const [safeAreaBottom, setSafeAreaBottom] = React__default.useState(0);
   // 在组件内部
   const [columnsCount, setColumnsCount] = React__default.useState(() => getRegionColumnsCount(level));
   // 只在level变化时更新列数
   React__default.useEffect(() => {
     setColumnsCount(getRegionColumnsCount(level));
   }, [level]);
+  // 更新安全区域
+  const updateSafeArea = React__default.useCallback(() => {
+    try {
+      const systemInfo = Taro.getSystemInfoSync();
+      const {
+        safeArea,
+        windowHeight
+      } = systemInfo;
+      // safeArea.bottom 为安全区底边的 Y 坐标，有效值应接近 windowHeight；
+      // 全 0 表示安全区信息尚不可用，此时不能用 windowHeight-0 算出整屏高度作为底部间距
+      if (safeArea && windowHeight && safeArea.bottom > 0) {
+        const lengthScaleRatio = systemInfo.lengthScaleRatio || 1;
+        const bottom = (windowHeight - safeArea.bottom) / lengthScaleRatio;
+        setSafeAreaBottom(Math.max(0, bottom));
+      } else {
+        setSafeAreaBottom(0);
+      }
+    } catch (e) {
+      // H5 环境或其他异常情况，不设置安全区域
+      setSafeAreaBottom(0);
+    }
+  }, []);
+  // 初始化安全区域
+  React__default.useEffect(() => {
+    updateSafeArea();
+  }, [updateSafeArea]);
+  // 监听窗口变化（导航方式切换等）
+  Taro.useResize(() => {
+    updateSafeArea();
+  });
   // 获取当前索引数组
   const getIndices = React__default.useCallback(() => {
     return indexRef.current;
@@ -200,25 +235,36 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       const monthRange = getMonthRange(_start, _end, currentYear);
       const dayRange = getDayRange(_start, _end, currentYear, currentMonth);
       indexRef.current = [yearRange.indexOf(currentYear), monthRange.indexOf(currentMonth), dayRange.indexOf(currentDay)];
-      if (!pickerDateRef.current || pickerDateRef.current._value.getTime() !== _value.getTime() || pickerDateRef.current._start.getTime() !== _start.getTime() || pickerDateRef.current._end.getTime() !== _end.getTime()) {
-        pickerDateRef.current = {
-          _value,
-          _start,
-          _end,
-          _updateValue: [currentYear, currentMonth, currentDay]
-        };
-      }
+      // 与 props 同步时始终刷新 _updateValue，避免取消后再开时日列草稿与索引不一致
+      pickerDateRef.current = {
+        _value,
+        _start,
+        _end,
+        _updateValue: [currentYear, currentMonth, currentDay]
+      };
     } else if (mode === 'region') {
       // region 模式处理 - 验证数据
       if (!regionData) {
         console.error('Picker: regionData is required for region mode');
-        indexRef.current = [0];
+        indexRef.current = Array.from({
+          length: columnsCount
+        }, () => 0);
+        setState(prev => Object.assign(Object.assign({}, prev), {
+          selectedIndices: [...indexRef.current],
+          pickerValue: value || EMPTY_ARRAY
+        }));
         return;
       }
       const validation = validateRegionData(regionData, 'Picker');
       if (!validation.valid) {
         console.error(validation.error);
-        indexRef.current = [0];
+        indexRef.current = Array.from({
+          length: columnsCount
+        }, () => 0);
+        setState(prev => Object.assign(Object.assign({}, prev), {
+          selectedIndices: [...indexRef.current],
+          pickerValue: value || EMPTY_ARRAY
+        }));
         return;
       }
       // 获取列数
@@ -265,16 +311,18 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       handleProps();
     }
   }, [handleProps, state.isWillLoadCalled, JSON.stringify(value)]);
-  // 显示 Picker
+  // 打开时按 props 重算索引，避免未确认的滑动与 indexRef 残留导致再开抖动
   const showPicker = React__default.useCallback(() => {
     if (disabled) return;
+    // 打开弹层时再读一次：此时安全区必然已稳定，避免 mount 首帧拿到全 0 的无效值
+    updateSafeArea();
     isInitializationCompletedRef.current = false;
-    const newIndices = getIndices();
+    handleProps();
     setState(prev => Object.assign(Object.assign({}, prev), {
-      selectedIndices: newIndices,
-      hidden: false
+      hidden: false,
+      a11yTimeLimitColumnId: null
     }));
-  }, [disabled, getIndices]);
+  }, [disabled, handleProps, updateSafeArea]);
   // 隐藏 Picker
   const hidePicker = React__default.useCallback(() => {
     isInitializationCompletedRef.current = false;
@@ -349,11 +397,11 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
         finalIndices = [...newIndices];
         hasLimited = true;
       }
-      // 触发限位，更新状态，其它状态不用主动触发滚动
       if (hasLimited) {
         setState(prev => Object.assign(Object.assign({}, prev), {
           selectedIndices: finalIndices,
-          timestamp: Date.now()
+          a11yTimeLimitColumnId: columnId,
+          a11yTimeLimitNonce: prev.a11yTimeLimitNonce + 1
         }));
       } else {
         setState(prev => Object.assign(Object.assign({}, prev), {
@@ -586,11 +634,17 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       }
     });
   }, [onColumnChange]);
-  // 处理取消
+  const consumeTimeA11yLimitFocus = React__default.useCallback(() => {
+    setState(prev => Object.assign(Object.assign({}, prev), {
+      a11yTimeLimitColumnId: null
+    }));
+  }, []);
+  // 取消时按 props 回同步索引，避免与 value 脱节
   const handleCancel = React__default.useCallback(() => {
+    handleProps();
     hidePicker();
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-  }, [hidePicker, onCancel]);
+  }, [handleProps, hidePicker, onCancel]);
   // 渲染选择器组
   const renderPickerGroup = React__default.useMemo(() => {
     switch (mode) {
@@ -608,15 +662,18 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             get selectedIndex() {
               return state.selectedIndices[index];
             },
-            colors: colors
+            colors: colors,
+            enableClickItemScroll: enableClickItemScroll
           }));
         }
       case 'time':
         {
+          const timeA11yLimitFocus = state.a11yTimeLimitColumnId != null ? {
+            nonce: state.a11yTimeLimitNonce,
+            columnId: state.a11yTimeLimitColumnId
+          } : null;
           return [createComponent(PickerGroup, {
-            get key() {
-              return `hour-${state.timestamp}`;
-            },
+            key: "hour",
             mode: "time",
             range: hoursRange,
             updateIndex: updateIndex,
@@ -624,11 +681,15 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             get selectedIndex() {
               return state.selectedIndices[0];
             },
-            colors: colors
-          }), createComponent(PickerGroup, {
-            get key() {
-              return `minute-${state.timestamp}`;
+            colors: colors,
+            timeA11yLimitFocus: timeA11yLimitFocus,
+            onTimeA11yLimitFocusConsumed: consumeTimeA11yLimitFocus,
+            get timeA11yLimitEventNonce() {
+              return state.a11yTimeLimitNonce;
             },
+            enableClickItemScroll: enableClickItemScroll
+          }), createComponent(PickerGroup, {
+            key: "minute",
             mode: "time",
             range: minutesRange,
             updateIndex: updateIndex,
@@ -636,7 +697,13 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             get selectedIndex() {
               return state.selectedIndices[1];
             },
-            colors: colors
+            colors: colors,
+            timeA11yLimitFocus: timeA11yLimitFocus,
+            onTimeA11yLimitFocusConsumed: consumeTimeA11yLimitFocus,
+            get timeA11yLimitEventNonce() {
+              return state.a11yTimeLimitNonce;
+            },
+            enableClickItemScroll: enableClickItemScroll
           })];
         }
       case 'date':
@@ -664,7 +731,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             get selectedIndex() {
               return state.selectedIndices[0];
             },
-            colors: colors
+            colors: colors,
+            enableClickItemScroll: enableClickItemScroll
           })];
           if (fields === 'month' || fields === 'day') {
             renderView.push(createComponent(PickerGroup, {
@@ -677,7 +745,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               get selectedIndex() {
                 return state.selectedIndices[1];
               },
-              colors: colors
+              colors: colors,
+              enableClickItemScroll: enableClickItemScroll
             }));
           }
           if (fields === 'day') {
@@ -691,7 +760,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               get selectedIndex() {
                 return state.selectedIndices[2];
               },
-              colors: colors
+              colors: colors,
+              enableClickItemScroll: enableClickItemScroll
             }));
           }
           return renderView;
@@ -731,7 +801,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               get selectedIndex() {
                 return state.selectedIndices[i];
               },
-              colors: colors
+              colors: colors,
+              enableClickItemScroll: enableClickItemScroll
             }));
           }
           return columns;
@@ -745,10 +816,11 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           get selectedIndex() {
             return state.selectedIndices[0];
           },
-          colors: colors
+          colors: colors,
+          enableClickItemScroll: enableClickItemScroll
         });
     }
-  }, [mode, range, rangeKey, fields, updateIndex, updateDay, handleColumnChange, pickerDateRef.current, level, regionData, state.selectedIndices, columnsCount, lang, colors]);
+  }, [mode, range, rangeKey, fields, updateIndex, updateDay, handleColumnChange, pickerDateRef.current, level, regionData, state.selectedIndices, state.a11yTimeLimitColumnId, state.a11yTimeLimitNonce, consumeTimeA11yLimitFocus, columnsCount, lang, colors, enableClickItemScroll]);
   // 动画类名控制逻辑
   const clsMask = classNames('taro-picker__mask-overlay', 'taro-picker__animate-fade-in', {
     'taro-picker__animate-fade-out': state.fadeOut
@@ -762,6 +834,9 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const titleStyle = colors.titleColor ? {
     color: colors.titleColor
   } : null;
+  const maskOverlayStyle = colors.maskColor ? {
+    backgroundColor: colors.maskColor
+  } : undefined;
   // 暴露方法给外部
   React__default.useImperativeHandle(ref, () => ({
     showPicker,
@@ -782,16 +857,19 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
         onClick: showPicker,
         children: children
       }), memo(() => memo(() => !!!state.hidden)() && createComponent(View, {
-        className: "taro-picker__overlay",
+        get className() {
+          return classNames('taro-picker__overlay', `taro-picker__overlay--theme-${theme}`);
+        },
         get children() {
           return [createComponent(View, {
             className: clsMask,
+            style: maskOverlayStyle,
             onClick: handleCancel
-          }), createComponent(View, mergeProps({
-            className: clsSlider
-          }, backgroundStyle ? {
-            style: backgroundStyle
-          } : {}, {
+          }), createComponent(View, {
+            className: clsSlider,
+            get style() {
+              return Object.assign({}, backgroundStyle);
+            },
             get children() {
               return [createComponent(View, mergeProps({
                 className: "taro-picker__hd"
@@ -835,9 +913,18 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
                 style: backgroundStyle
               } : {}, {
                 children: renderPickerGroup
+              })), memo(() => safeAreaBottom > 0 && createComponent(View, {
+                className: "taro-picker__bd",
+                get style() {
+                  return Object.assign(Object.assign({}, backgroundStyle), {
+                    height: `${safeAreaBottom}px`,
+                    flex: 'none',
+                    overflow: 'visible'
+                  });
+                }
               }))];
             }
-          }))];
+          })];
         }
       }))];
     }