@webority-technologies/mobile 0.0.15 → 0.0.20

package/lib/module/components/DatePicker/DatePicker.js

@@ -2,8 +2,25 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+import { PickerTrigger } from "../PickerTrigger/index.js";
+
+/**
+ * DatePicker operates in two modes:
+ *
+ * 1. **Controlled-modal mode** — pass `visible` (plus `onSelect` / `onClose`)
+ *    and own the open state externally. The component renders only the modal.
+ * 2. **Trigger mode** — omit `visible`. The component renders a built-in
+ *    PickerTrigger field (label / value / placeholder / chevron / clear /
+ *    helper / error / size / variant) and manages its own open state. The
+ *    field opens the modal on press and closes it on confirm/cancel.
+ *
+ * `onSelect` / `onClose` are typed optional to support trigger-only usage
+ * where the consumer may not need either callback. In controlled-modal mode
+ * they remain semantically required.
+ */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const DAY_MS = 24 * 60 * 60 * 1000;
 const GRID_SIZE = 12; // 4 cols x 3 rows for year / decade grids
@@ -81,7 +98,6 @@ const buildDecadeCells = anchorYear => {
 };
 const DatePicker = props => {
   const {
-    visible,
     value,
     onSelect,
     onClose,
@@ -95,9 +111,32 @@ const DatePicker = props => {
     confirmLabel = 'Confirm',
     cancelLabel = 'Cancel',
     style,
-    testID
+    containerStyle,
+    headerLabelStyle,
+    navButtonStyle,
+    footerButtonStyle,
+    testID,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle
   } = props;
+
+  // Controlled vs uncontrolled detection: if `visible` is supplied (even
+  // `false`), the consumer owns the open state; otherwise we own it.
+  const isControlled = props.visible !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = isControlled ? props.visible : internalOpen;
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const today = useMemo(() => startOfDay(new Date()), []);
   const initialAnchor = value ? startOfDay(value) : today;
@@ -126,17 +165,20 @@ const DatePicker = props => {
     }
   }, [value]);
 
-  // Modal open / close animation.
+  // Modal open / close animation. Backdrop opacity runs on JS driver — see
+  // Modal.tsx for the RN 0.85 / Fabric two-bug reason (view flattening +
+  // native-driver opacity on Animated.View with backgroundColor). Sheet
+  // transform stays native.
   useEffect(() => {
     if (mode !== 'modal') return;
-    if (visible) {
-      setNativeValue(backdrop, 0);
+    if (open) {
+      backdrop.setValue(0);
       setNativeValue(sheet, 0);
       Animated.parallel([Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: Easing.out(Easing.cubic),
-        useNativeDriver: true
+        useNativeDriver: false
       }), Animated.spring(sheet, {
         toValue: 1,
         damping: theme.motion.spring.gentle.damping,
@@ -145,7 +187,7 @@ const DatePicker = props => {
         useNativeDriver: true
       })]).start();
     }
-  }, [visible, mode, backdrop, sheet, theme.motion]);
+  }, [open, mode, backdrop, sheet, theme.motion]);
   const disabledIsoSet = useMemo(() => {
     const set = new Set();
     disabledDates?.forEach(d => set.add(toIso(startOfDay(d))));
@@ -186,17 +228,19 @@ const DatePicker = props => {
     return false;
   }, [minDay, maxDay]);
   const animateMonthChange = useCallback(delta => {
-    triggerHaptic('impactLight');
+    if (theme.components.datePicker?.haptic) triggerHaptic('impactLight');
     const direction = delta > 0 ? 1 : -1;
-    const distance = 32;
+    const distance = theme.components.datePicker?.monthSlideDistance ?? 32;
+    const outDuration = theme.components.datePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
+    const inDuration = theme.components.datePicker?.monthSlideInDuration ?? theme.motion.duration.fast ?? 160;
     Animated.sequence([Animated.parallel([Animated.timing(monthSlide, {
       toValue: -direction * distance,
-      duration: 140,
+      duration: outDuration,
       easing: Easing.out(Easing.quad),
       useNativeDriver: true
     }), Animated.timing(monthFade, {
       toValue: 0,
-      duration: 140,
+      duration: outDuration,
       useNativeDriver: true
     })]), Animated.timing(monthSlide, {
       toValue: direction * distance,
@@ -204,68 +248,71 @@ const DatePicker = props => {
       useNativeDriver: true
     }), Animated.parallel([Animated.timing(monthSlide, {
       toValue: 0,
-      duration: 160,
+      duration: inDuration,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true
     }), Animated.timing(monthFade, {
       toValue: 1,
-      duration: 160,
+      duration: inDuration,
       useNativeDriver: true
     })])]).start();
     const next = addMonths(anchor, delta);
     setAnchor(next);
     AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
-  }, [anchor, locale, monthFade, monthSlide]);
+  }, [anchor, locale, monthFade, monthSlide, theme.components.datePicker, theme.motion.duration.fast]);
   const goPrev = useCallback(() => {
     if (viewMode === 'days') {
       animateMonthChange(-1);
       return;
     }
-    triggerHaptic('impactLight');
+    if (theme.components.datePicker?.haptic) triggerHaptic('impactLight');
     if (viewMode === 'years') {
       setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE, prev.getMonth(), 1));
     } else {
       setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
     }
-  }, [animateMonthChange, viewMode]);
+  }, [animateMonthChange, viewMode, theme.components.datePicker]);
   const goNext = useCallback(() => {
     if (viewMode === 'days') {
       animateMonthChange(1);
       return;
     }
-    triggerHaptic('impactLight');
+    if (theme.components.datePicker?.haptic) triggerHaptic('impactLight');
     if (viewMode === 'years') {
       setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE, prev.getMonth(), 1));
     } else {
       setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
     }
-  }, [animateMonthChange, viewMode]);
+  }, [animateMonthChange, viewMode, theme.components.datePicker]);
 
-  // View-mode transition: fade + scale (200ms, native driver).
+  // View-mode transition: fade + scale, native driver.
   const animateViewTransition = useCallback(() => {
+    const dur = theme.components.datePicker?.viewTransitionDuration ?? theme.motion.duration.normal ?? 200;
     setNativeValue(viewFade, 0);
     setNativeValue(viewScale, 0.9);
     Animated.parallel([Animated.timing(viewFade, {
       toValue: 1,
-      duration: 200,
+      duration: dur,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true
     }), Animated.timing(viewScale, {
       toValue: 1,
-      duration: 200,
+      duration: dur,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true
     })]).start();
-  }, [viewFade, viewScale]);
+  }, [viewFade, viewScale, theme.components.datePicker, theme.motion.duration.normal]);
   const cycleViewMode = useCallback(() => {
-    triggerHaptic('selection');
+    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    const pressDur = theme.components.datePicker?.headerPressDuration ?? 80;
+    const releaseDur = theme.components.datePicker?.headerReleaseDuration ?? 100;
     Animated.sequence([Animated.timing(headerScale, {
       toValue: 0.96,
-      duration: 80,
+      duration: pressDur,
       useNativeDriver: true
     }), Animated.timing(headerScale, {
       toValue: 1,
-      duration: 100,
+      duration: releaseDur,
       useNativeDriver: true
     })]).start();
     setViewMode(prev => {
@@ -274,23 +321,23 @@ const DatePicker = props => {
       return 'years';
     });
     animateViewTransition();
-  }, [animateViewTransition, headerScale]);
+  }, [animateViewTransition, headerScale, theme.components.datePicker]);
   const pickYear = useCallback(year => {
-    triggerHaptic('selection');
+    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
     setAnchor(prev => new Date(year, prev.getMonth(), 1));
     setViewMode('days');
     animateViewTransition();
-  }, [animateViewTransition]);
+  }, [animateViewTransition, theme.components.datePicker]);
   const pickDecade = useCallback(decadeStart => {
-    triggerHaptic('selection');
+    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
     // Anchor mid-decade so the year grid centers nicely on this decade.
     setAnchor(prev => new Date(decadeStart + 4, prev.getMonth(), 1));
     setViewMode('years');
     animateViewTransition();
-  }, [animateViewTransition]);
+  }, [animateViewTransition, theme.components.datePicker]);
   const pressDay = useCallback(cell => {
     if (isDisabled(cell.date)) return;
-    triggerHaptic('selection');
+    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
     setPendingDate(cell.date);
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
@@ -303,42 +350,50 @@ const DatePicker = props => {
       mass: theme.motion.spring.bouncy.mass,
       useNativeDriver: true
     }).start();
-  }, [isDisabled, selectScale, theme.motion.spring.bouncy]);
+  }, [isDisabled, selectScale, theme.motion.spring.bouncy, theme.components.datePicker]);
+  const finalizeClose = useCallback(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+      onClose?.();
+    }
+  }, [isControlled, onClose]);
   const handleClose = useCallback(() => {
     if (mode !== 'modal') {
-      onClose();
+      finalizeClose();
       return;
     }
     Animated.parallel([Animated.timing(backdrop, {
       toValue: 0,
       duration: theme.motion.duration.fast,
       easing: Easing.in(Easing.cubic),
-      useNativeDriver: true
+      useNativeDriver: false
     }), Animated.timing(sheet, {
       toValue: 0,
       duration: theme.motion.duration.fast,
       easing: Easing.in(Easing.cubic),
       useNativeDriver: true
     })]).start(() => {
-      onClose();
+      finalizeClose();
     });
-  }, [backdrop, mode, onClose, sheet, theme.motion.duration.fast]);
+  }, [backdrop, mode, finalizeClose, sheet, theme.motion.duration.fast]);
   const handleCancel = useCallback(() => {
-    triggerHaptic('selection');
+    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
     handleClose();
-  }, [handleClose]);
+  }, [handleClose, theme.components.datePicker]);
   const handleConfirm = useCallback(() => {
     if (!pendingDate) return;
-    triggerHaptic('notificationSuccess');
-    onSelect(pendingDate);
+    if (theme.components.datePicker?.haptic) triggerHaptic('notificationSuccess');
+    onSelect?.(pendingDate);
     handleClose();
-  }, [handleClose, onSelect, pendingDate]);
+  }, [handleClose, onSelect, pendingDate, theme.components.datePicker]);
   const sheetTranslate = sheet.interpolate({
     inputRange: [0, 1],
     outputRange: [320, 0]
   });
   const calendar = /*#__PURE__*/_jsxs(View, {
-    style: [styles.card, style],
+    style: [styles.card, style, containerStyle],
     accessibilityRole: mode === 'modal' ? undefined : 'none',
     accessible: false,
     testID: testID,
@@ -355,7 +410,7 @@ const DatePicker = props => {
         onPress: goPrev,
         style: ({
           pressed
-        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: viewMode === 'days' ? 'Previous month' : viewMode === 'years' ? 'Previous years' : 'Previous decades',
         hitSlop: 8,
@@ -365,7 +420,7 @@ const DatePicker = props => {
         })
       }), /*#__PURE__*/_jsx(Pressable, {
         onPress: cycleViewMode,
-        style: styles.headerLabelWrap,
+        style: [styles.headerLabelWrap, headerLabelStyle],
         accessibilityRole: "button",
         accessibilityLabel: viewMode === 'days' ? `${headerLabel}, switch to year selection` : viewMode === 'years' ? `${headerLabel}, switch to decade selection` : `${headerLabel}, switch to year selection`,
         hitSlop: 8,
@@ -399,7 +454,7 @@ const DatePicker = props => {
         onPress: goNext,
         style: ({
           pressed
-        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: viewMode === 'days' ? 'Next month' : viewMode === 'years' ? 'Next years' : 'Next decades',
         hitSlop: 8,
@@ -573,7 +628,7 @@ const DatePicker = props => {
         onPress: handleCancel,
         style: ({
           pressed
-        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed],
+        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed, footerButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: cancelLabel,
         children: /*#__PURE__*/_jsx(Text, {
@@ -592,7 +647,7 @@ const DatePicker = props => {
           opacity: !pendingDate ? 0.5 : 1
         }, pressed && {
           backgroundColor: theme.colors.primaryHover
-        }],
+        }, footerButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: confirmLabel,
         accessibilityState: {
@@ -607,38 +662,92 @@ const DatePicker = props => {
       })]
     })]
   });
+  const formatTriggerValue = formatValue ?? (d => d.toLocaleDateString());
+  const triggerValueText = value ? formatTriggerValue(value) : undefined;
+  const showTrigger = !isControlled;
   if (mode === 'inline') {
-    if (!visible) return null;
+    if (!open && !showTrigger) return null;
+    if (showTrigger) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(PickerTrigger, {
+          label: label,
+          value: triggerValueText,
+          placeholder: placeholder,
+          helperText: helperText,
+          error: error,
+          required: required,
+          disabled: disabled,
+          size: size,
+          variant: variant,
+          clearable: clearable,
+          onClear: onClear,
+          onPress: () => setInternalOpen(true),
+          triggerStyle: triggerStyle
+        }), open ? calendar : null]
+      });
+    }
     return calendar;
   }
-  return /*#__PURE__*/_jsxs(Modal, {
-    visible: visible,
+  const modalNode = /*#__PURE__*/_jsx(Modal, {
+    visible: open,
     transparent: true,
-    statusBarTranslucent: true,
+    statusBarTranslucent: true
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore — Android-only RN 0.71+; iOS ignores it.
+    ,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: handleClose,
-    children: [/*#__PURE__*/_jsx(Animated.View, {
+    children: /*#__PURE__*/_jsxs(View
+    // Backdrop wraps the sheet (not sibling) — on Fabric a sibling
+    // backdrop is occluded by the sheet wrapper regardless of order.
+    // collapsable={false} prevents flattening; plain View + pre-baked
+    // rgba colour avoids the Fabric animated-opacity-on-coloured-View bug.
+    , {
+      collapsable: false,
       style: [styles.backdrop, {
-        opacity: backdrop,
         backgroundColor: theme.colors.background.overlay
       }],
-      children: /*#__PURE__*/_jsx(Pressable, {
+      children: [/*#__PURE__*/_jsx(Pressable, {
         style: StyleSheet.absoluteFill,
         onPress: handleClose,
         accessibilityLabel: "Dismiss"
-      })
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.sheetWrap, {
-        opacity: sheet,
-        transform: [{
-          translateY: sheetTranslate
-        }]
-      }],
-      accessibilityViewIsModal: true,
-      accessibilityRole: "none",
-      children: calendar
-    })]
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.sheetWrap, {
+          // Push the sheet up by the system nav-bar inset so its content
+          // never lands behind Android gesture/3-button chrome.
+          paddingBottom: insets.bottom + theme.spacing.lg,
+          opacity: sheet,
+          transform: [{
+            translateY: sheetTranslate
+          }]
+        }],
+        accessibilityViewIsModal: true,
+        accessibilityRole: "none",
+        children: calendar
+      })]
+    })
   });
+  if (showTrigger) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(PickerTrigger, {
+        label: label,
+        value: triggerValueText,
+        placeholder: placeholder,
+        helperText: helperText,
+        error: error,
+        required: required,
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        clearable: clearable,
+        onClear: onClear,
+        onPress: () => setInternalOpen(true),
+        triggerStyle: triggerStyle
+      }), modalNode]
+    });
+  }
+  return modalNode;
 };
 const buildStyles = theme => {
   const cardShadow = theme.shadows.lg;
@@ -679,8 +788,8 @@ const buildStyles = theme => {
       marginBottom: theme.spacing.md
     },
     navBtn: {
-      width: 36,
-      height: 36,
+      width: theme.components.datePicker?.navButtonSize ?? 36,
+      height: theme.components.datePicker?.navButtonSize ?? 36,
       borderRadius: theme.radius.full,
       alignItems: 'center',
       justifyContent: 'center',
@@ -690,8 +799,8 @@ const buildStyles = theme => {
       backgroundColor: theme.colors.surface.pressed
     },
     navText: {
-      fontSize: 22,
-      lineHeight: 24,
+      fontSize: theme.components.datePicker?.navTextFontSize ?? 22,
+      lineHeight: theme.components.datePicker?.navTextLineHeight ?? 24,
       color: theme.colors.text.primary,
       fontWeight: theme.typography.fontWeight.semibold
     },
@@ -740,12 +849,12 @@ const buildStyles = theme => {
       aspectRatio: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      padding: 2
+      padding: theme.components.datePicker?.dayCellPadding ?? 2
     },
     dayInner: {
       width: '100%',
       height: '100%',
-      borderRadius: theme.radius.full,
+      borderRadius: theme.components.datePicker?.dayInnerBorderRadius ?? theme.radius.full,
       alignItems: 'center',
       justifyContent: 'center'
     },
@@ -761,12 +870,12 @@ const buildStyles = theme => {
       aspectRatio: 1.6,
       alignItems: 'center',
       justifyContent: 'center',
-      padding: 4
+      padding: theme.components.datePicker?.yearCellPadding ?? 4
     },
     yearInner: {
       width: '100%',
       height: '100%',
-      borderRadius: theme.radius.lg,
+      borderRadius: theme.components.datePicker?.yearInnerBorderRadius ?? theme.radius.lg,
       alignItems: 'center',
       justifyContent: 'center'
     },
@@ -777,7 +886,7 @@ const buildStyles = theme => {
     decadeRangeText: {
       fontSize: theme.typography.fontSize.xs,
       fontWeight: theme.typography.fontWeight.medium,
-      marginTop: 2
+      marginTop: theme.components.datePicker?.decadeRangeMarginTop ?? 2
     },
     footer: {
       flexDirection: 'row',
@@ -790,7 +899,7 @@ const buildStyles = theme => {
       paddingHorizontal: theme.spacing.lg,
       paddingVertical: theme.spacing.sm,
       borderRadius: theme.radius.md,
-      minHeight: 40,
+      minHeight: theme.components.datePicker?.footerButtonMinHeight ?? 40,
       alignItems: 'center',
       justifyContent: 'center'
     },