@particle-network/ui-native 0.1.4-beta.2 → 0.1.4-beta.3

package/dist/components/date-picker/date-picker.js

@@ -11,27 +11,31 @@ import { UXPressable } from "../UXPressable/index.js";
 import date_button from "./date-button.js";
 import { DateWheelPicker } from "./date-wheel-picker.js";
 import { TimeWheelPicker } from "./time-wheel-picker.js";
-import { hasTimeInFormat } from "./utils.js";
-const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYYY/MM/DD', minDate, maxDate, placeholder, isDisabled = false, isReadOnly = false, ...uxPressableProps })=>{
+import useFormat from "./useFormat.js";
+import { hasTimeOnly } from "./utils.js";
+const UXDatePicker = ({ title, value, defaultValue, onConfirm = ()=>null, format = 'YYYY/MM/DD', minDate, maxDate, placeholder, isDisabled = false, isReadOnly = false, ...uxPressableProps })=>{
     const [isOpen, setIsOpen] = useState(false);
     const [pickerType, setPickerType] = useState('date');
     const [internalValue, setInternalValue] = useState(value || defaultValue || new Date());
     const i18n = useI18n();
-    const [dateFormat, timeFormat] = format.split(' ');
-    const showTimePicker = hasTimeInFormat(format);
     const displayPlaceholder = placeholder ?? format;
+    const { dateFormat, timeFormat, displayTitle } = useFormat({
+        format,
+        title
+    });
     useEffect(()=>{
         if (void 0 !== value) setInternalValue(value);
     }, [
         value
     ]);
-    const handleOpenModal = useCallback((picker)=>{
+    const handleOpenModal = useCallback(()=>{
         if (isDisabled || isReadOnly) return;
-        setPickerType(picker);
+        setPickerType(hasTimeOnly(format) ? 'time' : 'date');
         setIsOpen(true);
     }, [
         isDisabled,
-        isReadOnly
+        isReadOnly,
+        format
     ]);
     const handleConfirm = useCallback(()=>{
         onConfirm(internalValue);
@@ -46,7 +50,7 @@ const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYY
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(UXPressable, {
-                onPress: ()=>handleOpenModal('date'),
+                onPress: ()=>handleOpenModal(),
                 ...uxPressableProps,
                 children: /*#__PURE__*/ jsx(UXInput, {
                     containerStyle: {
@@ -57,7 +61,7 @@ const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYY
                     isReadOnly: isReadOnly,
                     placeholder: displayPlaceholder,
                     pointerEvents: "none",
-                    value: value ? dayjs(value).format(format) : format
+                    value: value ? dayjs(value).format(format) : void 0
                 })
             }),
             /*#__PURE__*/ jsx(UXModal, {
@@ -74,7 +78,7 @@ const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYY
                 scrollViewProps: {
                     scrollEnabled: false
                 },
-                title: i18n.datePicker.confirm,
+                title: displayTitle,
                 onClose: handleClose,
                 children: /*#__PURE__*/ jsxs(VStack, {
                     fullWidth: true,
@@ -85,12 +89,12 @@ const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYY
                             items: "center",
                             gap: 8,
                             children: [
-                                /*#__PURE__*/ jsx(date_button, {
+                                dateFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'date' === pickerType,
                                     text: dayjs(internalValue).format(dateFormat),
                                     onPress: ()=>setPickerType('date')
                                 }),
-                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                timeFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'time' === pickerType,
                                     text: dayjs(internalValue).format(timeFormat),
                                     onPress: ()=>setPickerType('time')

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

@@ -13,8 +13,9 @@ import { UXPressable } from "../UXPressable/index.js";
 import date_button from "./date-button.js";
 import { DateWheelPicker } from "./date-wheel-picker.js";
 import { TimeWheelPicker } from "./time-wheel-picker.js";
-import { hasTimeInFormat } from "./utils.js";
-const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYYY/MM/DD', minDate, maxDate, startPlaceholder, endPlaceholder, isDisabled = false, isReadOnly = false, ...hStackProps })=>{
+import useFormat from "./useFormat.js";
+import { hasTimeOnly } from "./utils.js";
+const UXDateRangePicker = ({ title, value, defaultValue, onConfirm = ()=>null, format = 'YYYY/MM/DD', minDate, maxDate, startPlaceholder, endPlaceholder, isDisabled = false, isReadOnly = false, ...hStackProps })=>{
     const [isOpen, setIsOpen] = useState(false);
     const [currentEditType, setCurrentEditType] = useState('start');
     const [pickerType, setPickerType] = useState('date');
@@ -22,10 +23,13 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
     const [internalEnd, setInternalEnd] = useState(value?.end || defaultValue?.end || new Date());
     const [error, setError] = useState('');
     const i18n = useI18n();
-    const [dateFormat, timeFormat] = format.split(' ');
-    const showTimePicker = hasTimeInFormat(format);
     const displayStartPlaceholder = startPlaceholder ?? format;
     const displayEndPlaceholder = endPlaceholder ?? format;
+    const { dateFormat, timeFormat, displayTitle } = useFormat({
+        format,
+        title,
+        rangeMode: true
+    });
     useEffect(()=>{
         if (value?.start !== void 0) setInternalStart(value?.start);
         if (value?.end !== void 0) setInternalEnd(value?.end);
@@ -35,12 +39,13 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
     const handleOpenModal = useCallback((type, picker)=>{
         if (isDisabled || isReadOnly) return;
         setCurrentEditType(type);
-        setPickerType(picker);
+        setPickerType(picker || (hasTimeOnly(format) ? 'time' : 'date'));
         setError('');
         setIsOpen(true);
     }, [
         isDisabled,
-        isReadOnly
+        isReadOnly,
+        format
     ]);
     const handleConfirm = useCallback(()=>{
         if (!internalStart || !internalEnd) return void setError(i18n.datePicker.errorBothRequired);
@@ -68,7 +73,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                 children: [
                     /*#__PURE__*/ jsx(UXPressable, {
                         fill: true,
-                        onPress: ()=>handleOpenModal('start', 'date'),
+                        onPress: ()=>handleOpenModal('start'),
                         children: /*#__PURE__*/ jsx(UXInput, {
                             containerStyle: {
                                 flex: 1
@@ -78,7 +83,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                             isReadOnly: isReadOnly,
                             placeholder: displayStartPlaceholder,
                             pointerEvents: "none",
-                            value: value?.start ? dayjs(value?.start).format(format) : format
+                            value: value?.start ? dayjs(value?.start).format(format) : void 0
                         })
                     }),
                     /*#__PURE__*/ jsx(Icon, {
@@ -88,7 +93,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                     }),
                     /*#__PURE__*/ jsx(UXPressable, {
                         fill: true,
-                        onPress: ()=>handleOpenModal('end', 'date'),
+                        onPress: ()=>handleOpenModal('end'),
                         children: /*#__PURE__*/ jsx(UXInput, {
                             containerStyle: {
                                 flex: 1
@@ -98,7 +103,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                             isReadOnly: isReadOnly,
                             placeholder: displayEndPlaceholder,
                             pointerEvents: "none",
-                            value: value?.end ? dayjs(value?.end).format(format) : format
+                            value: value?.end ? dayjs(value?.end).format(format) : void 0
                         })
                     })
                 ]
@@ -127,7 +132,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                 scrollViewProps: {
                     scrollEnabled: false
                 },
-                title: "Time Range",
+                title: displayTitle,
                 onClose: handleClose,
                 children: /*#__PURE__*/ jsxs(VStack, {
                     fullWidth: true,
@@ -138,12 +143,12 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                             items: "center",
                             gap: 8,
                             children: [
-                                /*#__PURE__*/ jsx(date_button, {
+                                dateFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'start' === currentEditType && 'date' === pickerType,
                                     text: dayjs(internalStart).format(dateFormat),
                                     onPress: ()=>handleOpenModal('start', 'date')
                                 }),
-                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                timeFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'start' === currentEditType && 'time' === pickerType,
                                     text: dayjs(internalStart).format(timeFormat),
                                     onPress: ()=>handleOpenModal('start', 'time')
@@ -153,12 +158,12 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                                     color: "tertiary",
                                     size: 16
                                 }),
-                                /*#__PURE__*/ jsx(date_button, {
+                                dateFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'end' === currentEditType && 'date' === pickerType,
                                     text: dayjs(internalEnd).format(dateFormat),
                                     onPress: ()=>handleOpenModal('end', 'date')
                                 }),
-                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                timeFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'end' === currentEditType && 'time' === pickerType,
                                     text: dayjs(internalEnd).format(timeFormat),
                                     onPress: ()=>handleOpenModal('end', 'time')

package/dist/components/date-picker/types.d.ts

@@ -37,6 +37,10 @@ export interface UXDatePickerProps extends Omit<UXPressableProps, 'children'> {
      * 是否只读
      */
     isReadOnly?: boolean;
+    /**
+     * 弹窗标题
+     */
+    title?: string;
 }
 export interface UXDateRangePickerProps extends Omit<HStackProps, 'children'> {
     /**
@@ -79,6 +83,10 @@ export interface UXDateRangePickerProps extends Omit<HStackProps, 'children'> {
      * 是否只读
      */
     isReadOnly?: boolean;
+    /**
+     * 弹窗标题
+     */
+    title?: string;
 }
 export interface DateRangeValue {
     start?: Date;

package/dist/components/date-picker/useFormat.d.ts

@@ -0,0 +1,10 @@
+declare const useFormat: ({ format, title, rangeMode }: {
+    format: string;
+    title?: string;
+    rangeMode?: boolean;
+}) => {
+    dateFormat: string | null;
+    timeFormat: string | null;
+    displayTitle: string;
+};
+export default useFormat;

package/dist/components/date-picker/useFormat.js

@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+import { useI18n } from "../../hooks/index.js";
+import { getDateFormat, getTimeFormat, hasDateOnly, hasTimeOnly } from "./utils.js";
+const useFormat = ({ format, title, rangeMode = false })=>{
+    const i18n = useI18n();
+    const dateFormat = getDateFormat(format);
+    const timeFormat = getTimeFormat(format);
+    const displayTitle = useMemo(()=>{
+        if (title) return title;
+        if (hasDateOnly(format)) return rangeMode ? i18n.datePicker.selectDateRange : i18n.datePicker.selectDate;
+        if (hasTimeOnly(format)) return rangeMode ? i18n.datePicker.selectTimeRange : i18n.datePicker.selectTime;
+        return rangeMode ? i18n.datePicker.selectDateAndTimeRange : i18n.datePicker.selectDateAndTime;
+    }, [
+        format,
+        title,
+        i18n,
+        rangeMode
+    ]);
+    return {
+        dateFormat,
+        timeFormat,
+        displayTitle
+    };
+};
+const date_picker_useFormat = useFormat;
+export { date_picker_useFormat as default };

package/dist/components/date-picker/utils.d.ts

@@ -1,6 +1,36 @@
+/**
+ * 判断格式字符串是否包含日期部分
+ * @param {string} format - 时间格式字符串
+ * @returns {boolean} - 是否包含日期
+ */
+export declare function hasDateInFormat(format: string): boolean;
 /**
  * 判断格式字符串是否包含时间部分
- * @param format 格式字符串
- * @returns 是否包含时间
+ * @param {string} format - 时间格式字符串
+ * @returns {boolean} - 是否包含时间
+ */
+export declare function hasTimeInFormat(format: string): boolean;
+/**
+ * 判断格式字符串是否只包含日期（不含时间）
+ * @param {string} format - 时间格式字符串
+ * @returns {boolean} - 是否只有日期
+ */
+export declare function hasDateOnly(format: string): boolean;
+/**
+ * 判断格式字符串是否只包含时间（不含日期）
+ * @param {string} format - 时间格式字符串
+ * @returns {boolean} - 是否只有时间
+ */
+export declare function hasTimeOnly(format: string): boolean;
+/**
+ * 提取格式字符串中的日期部分
+ * @param {string} format - 时间格式字符串
+ * @returns {string|null} - 日期格式字符串，如果不包含日期则返回 null
+ */
+export declare function getDateFormat(format: string): string | null;
+/**
+ * 提取格式字符串中的时间部分
+ * @param {string} format - 时间格式字符串
+ * @returns {string|null} - 时间格式字符串，如果不包含时间则返回 null
  */
-export declare const hasTimeInFormat: (format: string) => boolean;
+export declare function getTimeFormat(format: string): string | null;

package/dist/components/date-picker/utils.js

@@ -1,2 +1,77 @@
-const hasTimeInFormat = (format)=>/[HhmsAa]/.test(format);
-export { hasTimeInFormat };
+function hasDateInFormat(format) {
+    const datePatterns = [
+        /Y{2,4}/,
+        /M{1,2}/,
+        /D{1,2}/
+    ];
+    return datePatterns.some((pattern)=>pattern.test(format));
+}
+function hasTimeInFormat(format) {
+    const timePatterns = [
+        /H{1,2}/,
+        /h{1,2}/,
+        /m{1,2}/,
+        /s{1,2}/,
+        /A/i
+    ];
+    return timePatterns.some((pattern)=>pattern.test(format));
+}
+function hasDateOnly(format) {
+    return hasDateInFormat(format) && !hasTimeInFormat(format);
+}
+function hasTimeOnly(format) {
+    return hasTimeInFormat(format) && !hasDateInFormat(format);
+}
+function getDateFormat(format) {
+    if (!hasDateInFormat(format)) return null;
+    if (hasDateOnly(format)) return format.trim();
+    const separators = [
+        ' ',
+        'T',
+        ',',
+        '\t'
+    ];
+    for (const sep of separators)if (format.includes(sep)) {
+        const parts = format.split(sep);
+        for (const part of parts)if (hasDateInFormat(part) && !hasTimeInFormat(part)) return part.trim();
+    }
+    const datePatterns = [
+        /Y{2,4}[/-]M{1,2}[/-]D{1,2}/,
+        /Y{2,4}M{1,2}D{1,2}/,
+        /D{1,2}[/-]M{1,2}[/-]Y{2,4}/,
+        /M{1,2}[/-]D{1,2}[/-]Y{2,4}/
+    ];
+    for (const pattern of datePatterns){
+        const match = format.match(pattern);
+        if (match) return match[0];
+    }
+    return format.trim();
+}
+function getTimeFormat(format) {
+    if (!hasTimeInFormat(format)) return null;
+    if (hasTimeOnly(format)) return format.trim();
+    const separators = [
+        ' ',
+        'T',
+        ',',
+        '\t'
+    ];
+    for (const sep of separators)if (format.includes(sep)) {
+        const parts = format.split(sep);
+        const timeParts = [];
+        for (const part of parts)if (hasTimeInFormat(part) || /AM|PM|am|pm/i.test(part)) timeParts.push(part.trim());
+        if (timeParts.length > 0) return timeParts.join(' ');
+    }
+    const timePatterns = [
+        /[Hh]{1,2}:[m]{1,2}:[s]{1,2}\s*(?:AM|PM|am|pm)?/,
+        /[Hh]{1,2}:[m]{1,2}\s*(?:AM|PM|am|pm)?/,
+        /[Hh]{1,2}[m]{1,2}[s]{1,2}\s*(?:AM|PM|am|pm)?/,
+        /[Hh]{1,2}[m]{1,2}\s*(?:AM|PM|am|pm)?/
+    ];
+    for (const pattern of timePatterns){
+        const match = format.match(pattern);
+        if (match) return match[0].trim();
+    }
+    return format.trim();
+}
+export { getDateFormat, getTimeFormat, hasDateInFormat, hasDateOnly, hasTimeInFormat, hasTimeOnly };

package/dist/locales/en.d.ts

@@ -10,6 +10,12 @@ export declare const en: {
         cancel: string;
         errorBothRequired: string;
         errorStartBeforeEnd: string;
+        selectDate: string;
+        selectTime: string;
+        selectDateAndTime: string;
+        selectDateRange: string;
+        selectTimeRange: string;
+        selectDateAndTimeRange: string;
     };
     modal: {
         confirm: string;

package/dist/locales/en.js

@@ -9,7 +9,13 @@ const en = {
         confirm: 'Confirm',
         cancel: 'Cancel',
         errorBothRequired: 'Both start and end dates are required',
-        errorStartBeforeEnd: 'Start date can not be after end date'
+        errorStartBeforeEnd: 'Start date can not be after end date',
+        selectDate: 'Select Date',
+        selectTime: 'Select Time',
+        selectDateAndTime: 'Select Date and Time',
+        selectDateRange: 'Select Date Range',
+        selectTimeRange: 'Select Time Range',
+        selectDateAndTimeRange: 'Select Date and Time Range'
     },
     modal: {
         confirm: 'Confirm',

package/dist/locales/index.d.ts

@@ -14,6 +14,12 @@ export declare const locales: {
             cancel: string;
             errorBothRequired: string;
             errorStartBeforeEnd: string;
+            selectDate: string;
+            selectTime: string;
+            selectDateAndTime: string;
+            selectDateRange: string;
+            selectTimeRange: string;
+            selectDateAndTimeRange: string;
         };
         modal: {
             confirm: string;
@@ -48,6 +54,12 @@ export declare const locales: {
             cancel: string;
             errorBothRequired: string;
             errorStartBeforeEnd: string;
+            selectDate: string;
+            selectTime: string;
+            selectDateAndTime: string;
+            selectDateRange: string;
+            selectTimeRange: string;
+            selectDateAndTimeRange: string;
         };
         modal: {
             confirm: string;
@@ -83,6 +95,12 @@ export declare function getLocaleText(locale: Locale): {
         cancel: string;
         errorBothRequired: string;
         errorStartBeforeEnd: string;
+        selectDate: string;
+        selectTime: string;
+        selectDateAndTime: string;
+        selectDateRange: string;
+        selectTimeRange: string;
+        selectDateAndTimeRange: string;
     };
     modal: {
         confirm: string;

package/dist/locales/zh.js

@@ -9,7 +9,13 @@ const zh = {
         confirm: '确认',
         cancel: '取消',
         errorBothRequired: '请输入开始和结束日期',
-        errorStartBeforeEnd: '开始日期不能晚于结束日期'
+        errorStartBeforeEnd: '开始日期不能晚于结束日期',
+        selectDate: '选择日期',
+        selectTime: '选择时间',
+        selectDateAndTime: '选择日期和时间',
+        selectDateRange: '选择起止日期',
+        selectTimeRange: '选择起止时间',
+        selectDateAndTimeRange: '选择起止日期和时间'
     },
     modal: {
         confirm: '确认',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.1.4-beta.2",
+  "version": "0.1.4-beta.3",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -91,8 +91,8 @@
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
     "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/icons": "0.1.3-beta.3",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/icons": "0.1.3-beta.3"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",