@seakoi/native-ui 1.1.3 → 1.2.0

package/dist/module/components/base/date-picker/date-range-picker.js

@@ -1,73 +1,165 @@
 "use strict";
 
-import { useControllableValue } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import dayjs from 'dayjs';
-import React, { useMemo, useState } from 'react';
-import { DateRangePickerView, Modal, PickerTrigger, Portal } from "./../index.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Button, DatePickerView, Flex, Picker, Text } from "./../index.js";
+import { useDateRangePickerStyles } from "../date-picker-view/style/index.js";
+import { sortRange } from "../date-picker-view/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DateRangePicker = ({
   placeholder = '请选择日期范围',
-  disabled = false,
   formatter = 'YYYY/MM/DD',
-  style,
   separator = ' ~ ',
-  children,
-  title,
-  confirmText,
-  resetText,
-  startText,
-  endText,
+  headerTitle,
+  startText = '请选择开始时间',
+  endText = '请选择结束时间',
+  confirmText = '确定',
+  resetText = '重置',
+  min,
+  max,
   ...restProps
 }) => {
-  const [value, setValue] = useControllableValue(restProps, {
-    defaultValue: restProps.defaultValue
-  });
-  const [visible, setVisible] = useState(false);
-  const openModal = () => {
-    setVisible(true);
-  };
-  const closeModal = () => {
-    setVisible(false);
-  };
+  const styles = useDateRangePickerStyles();
+
+  /** 当前编辑的是 start 还是 end */
+  const [selected, setSelected] = useState('start');
+
+  /**
+   * 草稿值：用户在弹窗内选择时的临时值
+   * - 弹窗打开时重置为已提交的值（通过 onOpen）
+   */
+  const [draft, setDraft] = useState([]);
+
+  /**
+   * 追踪 Picker context 中的已提交值
+   * 非受控模式下 restProps.value 始终是 undefined，真正的值在 Picker context 内
+   */
+  const committedValueRef = useRef(undefined);
+
+  /**
+   * 弹窗打开时，将草稿值重置为已提交的值
+   */
+  const handleOpen = useCallback(() => {
+    if (committedValueRef.current) {
+      setDraft(sortRange(committedValueRef.current));
+    } else {
+      setDraft([new Date(), undefined]);
+    }
+    setSelected('start');
+  }, []);
 
   /** 格式化显示文案 */
-  const displayText = useMemo(() => {
-    if (!value) return '';
+  const _renderValue = useMemoizedFn(value => {
+    if (!value) return;
     if (typeof formatter === 'string') {
       return dayjs(value[0]).format(formatter) + separator + dayjs(value[1]).format(formatter);
     }
     return formatter(value);
-  }, [value, formatter, separator]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(PickerTrigger, {
-      displayText: displayText,
+  });
+
+  /** Picker 当前值 */
+  const pickerValue = (selected === 'start' ? draft[0] : draft[1]) ?? new Date();
+
+  /** Picker 可选范围 */
+  const minDate = useMemo(() => {
+    return selected === 'end' ? draft[0] ?? min : min;
+  }, [selected, draft, min]);
+  const maxDate = useMemo(() => {
+    return selected === 'start' ? draft[1] ?? max : max;
+  }, [selected, draft, max]);
+
+  /** Picker 改 draft */
+  const onChangePicker = useCallback(date => {
+    setDraft(prev => {
+      const index = selected === 'start' ? 0 : 1;
+      if (prev[index]?.getTime() === date.getTime()) {
+        return prev;
+      }
+      const next = [prev[0], prev[1]];
+      next[index] = date;
+      return next;
+    });
+  }, [selected]);
+  const changeSelected = useCallback(nextSelected => {
+    setSelected(nextSelected);
+    setDraft(prev => {
+      const next = [prev[0], prev[1]];
+      const index = nextSelected === 'start' ? 0 : 1;
+      next[index] ??= new Date();
+      return next;
+    });
+  }, []);
+
+  /** 重置 */
+  const onReset = useCallback(() => {
+    setDraft([new Date(), undefined]);
+    setSelected('start');
+  }, []);
+
+  /** 是否可以确定 */
+  const canConfirm = Boolean(draft[0] && draft[1]);
+  const _startText = draft[0] && dayjs(draft[0]).format(typeof formatter === 'string' ? formatter : 'YYYY/MM/DD') || startText;
+  const _endText = draft[1] && dayjs(draft[1]).format(typeof formatter === 'string' ? formatter : 'YYYY/MM/DD') || endText;
+  return /*#__PURE__*/_jsxs(Picker, {
+    ...restProps,
+    children: [/*#__PURE__*/_jsx(Picker.Field, {
       placeholder: placeholder,
-      disabled: disabled,
-      style: style,
-      onPress: openModal,
-      children: children
-    }), /*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(Modal, {
-        visible: visible,
-        position: "bottom",
-        safeAreaInsetBottom: true,
-        contentHeight: 490,
-        children: /*#__PURE__*/_jsx(DateRangePickerView, {
-          ...restProps,
-          title: title,
-          confirmText: confirmText,
-          resetText: resetText,
-          startText: startText,
-          endText: endText,
-          value: value,
-          onChange: range => {
-            setValue(range);
-            closeModal();
-          },
-          onClose: closeModal,
-          formatter: formatter
-        })
-      })
+      renderValue: _renderValue
+    }), /*#__PURE__*/_jsx(Picker.Content, {
+      headerTitle: headerTitle,
+      contentHeight: 490,
+      onOpen: handleOpen,
+      children: ({
+        onChange,
+        value: contextValue
+      }) => {
+        // 同步 ref：始终保持最新的已提交值
+        committedValueRef.current = contextValue;
+        return /*#__PURE__*/_jsxs(Flex, {
+          vertical: true,
+          align: "stretch",
+          style: styles.container,
+          children: [/*#__PURE__*/_jsxs(Flex, {
+            children: [/*#__PURE__*/_jsx(Button, {
+              variant: "outline",
+              theme: selected === 'start' ? 'primary' : 'default',
+              block: true,
+              text: _startText,
+              onPress: () => changeSelected('start')
+            }), /*#__PURE__*/_jsx(Text, {
+              children: "\u2014"
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "outline",
+              theme: selected === 'end' ? 'primary' : 'default',
+              block: true,
+              text: _endText,
+              onPress: () => changeSelected('end')
+            })]
+          }), /*#__PURE__*/_jsx(DatePickerView, {
+            value: pickerValue,
+            min: minDate,
+            max: maxDate,
+            onChange: onChangePicker
+          }), /*#__PURE__*/_jsxs(Button.Group, {
+            block: true,
+            children: [/*#__PURE__*/_jsx(Button, {
+              size: "large",
+              text: resetText,
+              theme: "secondary",
+              onPress: onReset
+            }), /*#__PURE__*/_jsx(Button, {
+              size: "large",
+              text: confirmText,
+              onPress: () => {
+                if (!draft[0] || !draft[1]) return;
+                onChange?.(sortRange([draft[0], draft[1]]));
+              },
+              disabled: !canConfirm
+            })]
+          })]
+        });
+      }
     })]
   });
 };

package/dist/module/components/base/date-picker/style/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useDatePickerStyles = createThemedStyles(theme => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    padding: 16,
+    rowGap: 16,
+    flex: 1
+  }
+}));

package/dist/module/components/base/date-picker-view/date-picker-view.js

@@ -1,68 +1,34 @@
 "use strict";
 
-import { useMemoizedFn } from 'ahooks';
-import { useMemo, useRef, useState } from 'react';
-import { Button, DateTimePicker, Flex, ModalHeader } from "./../index.js";
-import { useDatePickerStyles } from "./style/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useControllableValue } from 'ahooks';
+import { useMemo } from 'react';
+import { PickerView } from "./../index.js";
+import { useDateTimePicker } from "./hooks/use-date-time-picker.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const DatePickerView = ({
   mode = 'Y-D',
-  onChange,
-  onClose,
-  title,
-  confirmText = '确定',
+  min,
+  max,
   ...restProps
 }) => {
-  const styles = useDatePickerStyles();
-
-  // 内部状态用于管理滚动时的临时值
-  const [localValue, setLocalValue] = useState(restProps.value ?? restProps.defaultValue ?? new Date());
-  const lastValueRef = useRef(restProps.value);
-  if (restProps.value !== undefined && restProps.value !== lastValueRef.current) {
-    lastValueRef.current = restProps.value;
-    setLocalValue(restProps.value);
-  }
-  const _title = useMemo(() => {
-    if (title) {
-      return title;
-    }
-    switch (mode) {
-      case 'Y':
-        return '请选择年';
-      case 'Y-M':
-        return '请选择年月';
-      case 'Y-D':
-        return '请选择年月日';
-      default:
-        return '请选择日期';
-    }
-  }, [mode, title]);
-
-  // 滚动时只更新内部状态，不触发外部 onChange
-  const onChangePicker = useMemoizedFn(value => {
-    setLocalValue(value);
+  // 确保有一个稳定的默认日期值
+  const defaultDate = useMemo(() => new Date(), []);
+  const [value, onChange] = useControllableValue(restProps, {
+    defaultValue: defaultDate
   });
 
-  // 只在点击确定按钮时才调用外部 onChange
-  const onConfirm = useMemoizedFn(() => {
-    onChange?.(localValue);
+  // 确保 value 始终有值，避免 undefined 传递给 hook
+  const safeValue = value ?? defaultDate;
+  const [values, columns, onChangePicker] = useDateTimePicker({
+    mode,
+    value: safeValue,
+    onChange,
+    min,
+    max
   });
-  return /*#__PURE__*/_jsxs(Flex, {
-    vertical: true,
-    align: "stretch",
-    style: styles.container,
-    children: [/*#__PURE__*/_jsx(ModalHeader, {
-      title: _title,
-      onClose: onClose
-    }), /*#__PURE__*/_jsx(DateTimePicker, {
-      ...restProps,
-      mode: mode,
-      value: localValue,
-      onChange: onChangePicker
-    }), /*#__PURE__*/_jsx(Button, {
-      text: confirmText,
-      size: "large",
-      onPress: onConfirm
-    })]
+  return /*#__PURE__*/_jsx(PickerView, {
+    columns: columns,
+    value: values,
+    onChange: onChangePicker
   });
 };

package/dist/module/components/base/date-picker-view/index.js

@@ -1,5 +1,3 @@
 "use strict";
 
-export * from "./date-picker-view.js";
-export * from "./date-range-picker-view.js";
-export * from "./date-time-picker.js";
+export * from "./date-picker-view.js";

package/dist/module/components/base/index.js

@@ -25,6 +25,7 @@ export * from "./loading/index.js";
 export * from "./modal/index.js";
 export * from "./nav-bar/index.js";
 export * from "./picker/index.js";
+export * from "./picker-backup/index.js";
 export * from "./picker-view/index.js";
 export * from "./portal/index.js";
 export * from "./radio/index.js";
@@ -32,4 +33,5 @@ export * from "./result/index.js";
 export * from "./surface/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
+export * from "./tag/index.js";
 export * from "./text/index.js";

package/dist/module/components/base/picker/index.js

@@ -1,4 +1,12 @@
 "use strict";
 
+import { Picker as _Picker } from "./picker.js";
+import { PickerContent } from "./picker-content.js";
+import { PickerField } from "./picker-field.js";
 export * from "./picker.js";
-export * from "./picker-trigger.js";
+export * from "./picker-content.js";
+export * from "./picker-field.js";
+export const Picker = Object.assign(_Picker, {
+  Field: PickerField,
+  Content: PickerContent
+});

package/dist/module/components/base/picker/picker-content.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import React, { useContext, useEffect } from 'react';
+import { Flex, Modal, ModalHeader, Portal } from "./../index.js";
+import { PickerContext } from "./picker-context.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PickerContent = ({
+  children,
+  headerTitle,
+  headerStyle,
+  hiddenHeaderCloseIcon,
+  ...modalProps
+}) => {
+  const context = useContext(PickerContext);
+  let childNode = null;
+  if (/*#__PURE__*/React.isValidElement(children)) {
+    childNode = /*#__PURE__*/React.cloneElement(children, {
+      value: context?.value,
+      onChange: context?.onChange
+    });
+  } else if (typeof children === 'function') {
+    childNode = children({
+      value: context?.value,
+      onChange: context?.onChange
+    });
+  }
+  useEffect(() => {
+    context?.setDisabled?.(!!childNode?.props?.disabled);
+  }, [childNode?.props?.disabled, context?.setDisabled]);
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(Modal, {
+      safeAreaInsetBottom: true,
+      position: "bottom",
+      contentHeight: '50%',
+      ...modalProps,
+      visible: !!context?.visible,
+      children: /*#__PURE__*/_jsxs(Flex, {
+        vertical: true,
+        align: "stretch",
+        gap: 16,
+        style: {
+          flex: 1,
+          padding: 16
+        },
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          title: headerTitle,
+          style: headerStyle,
+          onClose: context?.toggleVisible,
+          showClose: !hiddenHeaderCloseIcon
+        }), childNode]
+      })
+    })
+  });
+};

package/dist/module/components/base/picker/picker-context.js

@@ -0,0 +1,4 @@
+"use strict";
+
+import React from 'react';
+export const PickerContext = /*#__PURE__*/React.createContext(null);

package/dist/module/components/base/picker/picker-field.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import { useLatest } from 'ahooks';
+import React, { useContext, useMemo } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { safetyRenderChildren } from "../../../shared/utils/index.js";
+import { PickerContext } from "./picker-context.js";
+import { usePickerFieldStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PickerField(props) {
+  const theme = useTheme();
+  const context = useContext(PickerContext);
+  const renderValueRef = useLatest(props.renderValue);
+  const styles = usePickerFieldStyles();
+
+  // const hasValue = !!context?.value || typeof context?.value === 'number';
+
+  const displayValue = useMemo(() => renderValueRef.current?.(context?.value), [context?.value, renderValueRef]);
+  const textColor = displayValue ? theme.palette.fontGray1 : theme.palette.fontGray3;
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: [styles.container, context?.disabled && styles.disabled],
+    onPress: context?.toggleVisible,
+    disabled: !!context?.disabled,
+    children: safetyRenderChildren(displayValue ?? props.placeholder, displayText => /*#__PURE__*/_jsx(Text, {
+      size: 14,
+      color: textColor,
+      children: displayText
+    }))
+  });
+}

package/dist/module/components/base/picker/picker.js

@@ -1,105 +1,31 @@
 "use strict";
 
-import { useControllableValue, useMemoizedFn } from 'ahooks';
-import { useMemo, useRef, useState } from 'react';
-import { Button } from "../button/index.js";
-import { Flex } from "../flex/index.js";
-import { Modal, ModalHeader } from "../modal/index.js";
-import { PickerView } from "../picker-view/index.js";
-import { findOptionsByValue, getDefaultValues } from "../picker-view/utils/picker.js";
-import { Portal } from "../portal/index.js";
-import { PickerTrigger } from "./picker-trigger.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const Picker = ({
-  placeholder = '请选择',
-  disabled = false,
-  title = '请选择',
-  formatter,
-  children,
-  style,
-  confirmText = '确定',
-  ...restProps
-}) => {
-  const [value, setValue] = useControllableValue(restProps, {
-    defaultValue: restProps.defaultValue
+import { useControllableValue, useMemoizedFn, useToggle } from 'ahooks';
+import { useMemo, useState } from 'react';
+import { PickerContext } from "./picker-context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Picker = props => {
+  const [visible, {
+    toggle: toggleVisible
+  }] = useToggle();
+  const [disabled, setDisabled] = useState(props.disabled);
+  const [value, setValue] = useControllableValue(props, {
+    trigger: props.trigger
   });
-  const [visible, setVisible] = useState(false);
-
-  // 内部状态用于管理滚动时的临时值
-  const [localValue, setLocalValue] = useState(restProps.value ?? restProps.defaultValue ?? []);
-
-  // 用 ref 同步保存最新值，解决 useMemoizedFn 闭包问题
-  const localValueRef = useRef(localValue);
-  localValueRef.current = localValue;
-
-  // 滑动时的临时 options（不用于 displayText）
-  const localOptionsRef = useRef([]);
-
-  /** 格式化显示文案 - 根据 value 从 columns 计算 */
-  const displayText = useMemo(() => {
-    if (!value?.length) return '';
-
-    // 从 columns 计算对应的 options
-    const options = findOptionsByValue(value, restProps.columns);
-    if (formatter) {
-      return formatter(value, options);
-    }
-    return options.map(opt => opt?.label).filter(Boolean).join(' / ');
-  }, [value, restProps.columns, formatter]);
-  const handleOpen = useMemoizedFn(() => {
-    // 打开时同步外部 value 到内部
-    // 如果 value 为空，使用 columns 的默认值（第一个选项）
-    const initialValue = value?.length ? value : getDefaultValues(restProps.columns);
-    setLocalValue(initialValue);
-    setVisible(true);
-  });
-  const handleClose = useMemoizedFn(() => {
-    setVisible(false);
-  });
-  const handleChange = useMemoizedFn((v, options) => {
-    setLocalValue(v);
-    localOptionsRef.current = options;
-  });
-  const handleConfirm = useMemoizedFn(() => {
-    setVisible(false);
-    setValue(localValueRef.current);
+  const _onChange = useMemoizedFn(value => {
+    setValue(value);
+    toggleVisible();
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(PickerTrigger, {
-      displayText: displayText,
-      placeholder: placeholder,
-      disabled: disabled,
-      style: style,
-      onPress: handleOpen,
-      children: children
-    }), /*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(Modal, {
-        visible: visible,
-        position: "bottom",
-        safeAreaInsetBottom: true,
-        contentHeight: '50%',
-        children: /*#__PURE__*/_jsxs(Flex, {
-          vertical: true,
-          align: "stretch",
-          gap: 16,
-          style: {
-            flex: 1,
-            padding: 16
-          },
-          children: [/*#__PURE__*/_jsx(ModalHeader, {
-            title: title,
-            onClose: handleClose
-          }), /*#__PURE__*/_jsx(PickerView, {
-            ...restProps,
-            value: localValue,
-            onChange: handleChange
-          }), /*#__PURE__*/_jsx(Button, {
-            text: confirmText,
-            size: "large",
-            onPress: handleConfirm
-          })]
-        })
-      })
-    })]
+  const contextValue = useMemo(() => ({
+    value,
+    visible,
+    disabled,
+    setDisabled,
+    toggleVisible,
+    onChange: _onChange
+  }), [value, visible, disabled, toggleVisible, setDisabled, setValue]);
+  return /*#__PURE__*/_jsx(PickerContext.Provider, {
+    value: contextValue,
+    children: props.children
   });
 };

package/dist/module/components/base/picker/style/index.js

@@ -4,9 +4,7 @@ import { createThemedStyles } from "../../../../native-provider/index.js";
 export const usePickerFieldStyles = createThemedStyles(theme => ({
   container: {
     flex: 1,
-    alignSelf: 'stretch'
-  },
-  content: {
+    alignSelf: 'stretch',
     backgroundColor: theme.palette.white,
     paddingVertical: 12,
     paddingHorizontal: 12

package/dist/module/components/base/picker-backup/base-picker-container.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import React, { useMemo, useState } from 'react';
+import { Flex } from "../flex/index.js";
+import { Modal, ModalHeader } from "../modal/index.js";
+import { Portal } from "../portal/index.js";
+import { PickerTrigger } from "./picker-trigger.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const BasePickerContainer = ({
+  children,
+  pickerTriggerProps,
+  modalProps
+}) => {
+  const [visible, setVisible] = useState(false);
+  const controller = useMemo(() => ({
+    visible,
+    setVisible
+  }), [visible]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PickerTrigger, {
+      ...pickerTriggerProps
+    }), /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(Modal, {
+        visible: visible,
+        position: "bottom",
+        safeAreaInsetBottom: true,
+        contentHeight: '50%',
+        ...modalProps,
+        children: /*#__PURE__*/_jsxs(Flex, {
+          vertical: true,
+          align: "stretch",
+          gap: 16,
+          style: {
+            flex: 1,
+            padding: 16
+          },
+          children: [/*#__PURE__*/_jsx(ModalHeader, {
+            onClose: () => setVisible(false)
+          }), children(controller)]
+        })
+      })
+    })]
+  });
+};

package/dist/module/components/base/picker-backup/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./picker-backup.js";
+export * from "./picker-trigger.js";