@webority-technologies/mobile 0.0.1

package/lib/module/components/TimePicker/TimePicker.js

@@ -0,0 +1,545 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, FlatList, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import Button from "../Button/Button.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ITEM_HEIGHT = 40;
+const VISIBLE_ITEMS = 5;
+const PICKER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
+const CENTER_OFFSET = Math.floor(VISIBLE_ITEMS / 2);
+const HAPTIC_DEBOUNCE_MS = 35;
+const range = (start, endInclusive, step = 1) => {
+  const out = [];
+  for (let v = start; v <= endInclusive; v += step) out.push(v);
+  return out;
+};
+const pad2 = n => n.toString().padStart(2, '0');
+const to24h = (hour, period, format) => {
+  if (format === '24h') return hour;
+  if (period === 'AM') return hour === 12 ? 0 : hour;
+  return hour === 12 ? 12 : hour + 12;
+};
+const from24h = (hour, format) => {
+  if (format === '24h') return {
+    displayHour: hour,
+    period: 'AM'
+  };
+  if (hour === 0) return {
+    displayHour: 12,
+    period: 'AM'
+  };
+  if (hour === 12) return {
+    displayHour: 12,
+    period: 'PM'
+  };
+  if (hour > 12) return {
+    displayHour: hour - 12,
+    period: 'PM'
+  };
+  return {
+    displayHour: hour,
+    period: 'AM'
+  };
+};
+const clampMinuteToStep = (minute, step) => {
+  const rounded = Math.round(minute / step) * step;
+  return Math.min(59, Math.max(0, rounded));
+};
+const Wheel = ({
+  kind,
+  label,
+  data,
+  selectedIndex,
+  onIndexChange,
+  formatItem,
+  theme,
+  testID
+}) => {
+  const listRef = useRef(null);
+  const scrollY = useRef(new Animated.Value(selectedIndex * ITEM_HEIGHT)).current;
+  const lastIndexRef = useRef(selectedIndex);
+  const lastHapticAtRef = useRef(0);
+
+  // Keep list aligned when selectedIndex changes externally (e.g. value prop, format flip).
+  useEffect(() => {
+    if (lastIndexRef.current !== selectedIndex) {
+      lastIndexRef.current = selectedIndex;
+      const offset = selectedIndex * ITEM_HEIGHT;
+      scrollY.setValue(offset);
+      // Defer to next frame so FlatList has measured.
+      requestAnimationFrame(() => {
+        listRef.current?.scrollToOffset({
+          offset,
+          animated: false
+        });
+      });
+    }
+  }, [selectedIndex, scrollY]);
+  const onScroll = useMemo(() => Animated.event([{
+    nativeEvent: {
+      contentOffset: {
+        y: scrollY
+      }
+    }
+  }], {
+    useNativeDriver: true,
+    listener: event => {
+      const y = event.nativeEvent.contentOffset.y;
+      const idx = Math.round(y / ITEM_HEIGHT);
+      if (idx !== lastIndexRef.current && idx >= 0 && idx < data.length) {
+        const now = Date.now();
+        if (now - lastHapticAtRef.current >= HAPTIC_DEBOUNCE_MS) {
+          triggerHaptic('selection');
+          lastHapticAtRef.current = now;
+        }
+        lastIndexRef.current = idx;
+      }
+    }
+  }), [scrollY, data.length]);
+  const onMomentumScrollEnd = useCallback(event => {
+    const y = event.nativeEvent.contentOffset.y;
+    const idx = Math.max(0, Math.min(data.length - 1, Math.round(y / ITEM_HEIGHT)));
+    if (idx !== selectedIndex) onIndexChange(idx);
+  }, [data.length, onIndexChange, selectedIndex]);
+  const handleA11yAction = useCallback(event => {
+    const action = event.nativeEvent.actionName;
+    if (action === 'increment') {
+      const next = Math.min(data.length - 1, selectedIndex + 1);
+      if (next !== selectedIndex) onIndexChange(next);
+    } else if (action === 'decrement') {
+      const next = Math.max(0, selectedIndex - 1);
+      if (next !== selectedIndex) onIndexChange(next);
+    }
+  }, [data.length, onIndexChange, selectedIndex]);
+  const renderItem = useCallback(({
+    item,
+    index
+  }) => {
+    const distance = Animated.subtract(Animated.divide(scrollY, ITEM_HEIGHT), index);
+    const opacity = distance.interpolate({
+      inputRange: [-2, -1, 0, 1, 2],
+      outputRange: [0.3, 0.6, 1, 0.6, 0.3],
+      extrapolate: 'clamp'
+    });
+    const scale = distance.interpolate({
+      inputRange: [-2, -1, 0, 1, 2],
+      outputRange: [0.85, 0.95, 1.05, 0.95, 0.85],
+      extrapolate: 'clamp'
+    });
+    const isSelected = index === selectedIndex;
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.wheelItem, {
+        opacity,
+        transform: [{
+          scale
+        }]
+      }],
+      accessible: false,
+      importantForAccessibility: "no",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [{
+          fontSize: theme.typography.fontSize.xl,
+          color: isSelected ? theme.colors.text.primary : theme.colors.text.secondary,
+          fontWeight: isSelected ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium,
+          letterSpacing: theme.typography.letterSpacing.normal
+        }],
+        children: formatItem(item)
+      })
+    });
+  }, [scrollY, selectedIndex, theme, formatItem]);
+  const keyExtractor = useCallback((item, index) => `${kind}-${String(item)}-${index}`, [kind]);
+  const getItemLayout = useCallback((_data, index) => ({
+    length: ITEM_HEIGHT,
+    offset: ITEM_HEIGHT * index,
+    index
+  }), []);
+  const currentValueText = formatItem(data[selectedIndex] ?? '');
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.wheelColumn,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.wheelA11yLayer,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: label,
+      accessibilityValue: {
+        text: currentValueText
+      },
+      accessibilityActions: [{
+        name: 'increment'
+      }, {
+        name: 'decrement'
+      }],
+      onAccessibilityAction: handleA11yAction
+    }), /*#__PURE__*/_jsx(FlatList, {
+      ref: listRef,
+      data: data,
+      keyExtractor: keyExtractor,
+      renderItem: renderItem,
+      getItemLayout: getItemLayout,
+      showsVerticalScrollIndicator: false,
+      snapToInterval: ITEM_HEIGHT,
+      snapToAlignment: "start",
+      decelerationRate: "fast",
+      bounces: false,
+      scrollEventThrottle: 16,
+      onScroll: onScroll,
+      onMomentumScrollEnd: onMomentumScrollEnd,
+      contentContainerStyle: {
+        paddingVertical: ITEM_HEIGHT * CENTER_OFFSET
+      },
+      initialScrollIndex: selectedIndex,
+      style: styles.wheelList,
+      importantForAccessibility: "no-hide-descendants"
+    })]
+  });
+};
+const TimePicker = ({
+  visible,
+  value,
+  onSelect,
+  onClose,
+  format = '12h',
+  minuteStep = 1,
+  title = 'Select Time',
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  testID,
+  style
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const hours = useMemo(() => format === '24h' ? range(0, 23) : range(1, 12), [format]);
+  const minutes = useMemo(() => range(0, 59, minuteStep), [minuteStep]);
+  const periods = useMemo(() => ['AM', 'PM'], []);
+  const initial = useMemo(() => {
+    const h24 = value && Number.isFinite(value.hour) ? value.hour : new Date().getHours();
+    const m = value && Number.isFinite(value.minute) ? value.minute : new Date().getMinutes();
+    const minute = clampMinuteToStep(m, minuteStep);
+    const {
+      displayHour,
+      period
+    } = from24h(h24, format);
+    return {
+      displayHour,
+      minute,
+      period,
+      hour24: h24
+    };
+  }, [value, format, minuteStep]);
+  const [hourIndex, setHourIndex] = useState(() => {
+    const idx = hours.indexOf(initial.displayHour);
+    return idx >= 0 ? idx : 0;
+  });
+  const [minuteIndex, setMinuteIndex] = useState(() => {
+    const idx = minutes.indexOf(initial.minute);
+    return idx >= 0 ? idx : 0;
+  });
+  const [periodIndex, setPeriodIndex] = useState(() => initial.period === 'PM' ? 1 : 0);
+
+  // Re-sync on visible toggle / value change / format / step.
+  useEffect(() => {
+    if (!visible) return;
+    const h24 = value && Number.isFinite(value.hour) ? value.hour : new Date().getHours();
+    const m = value && Number.isFinite(value.minute) ? value.minute : new Date().getMinutes();
+    const stepped = clampMinuteToStep(m, minuteStep);
+    const {
+      displayHour,
+      period
+    } = from24h(h24, format);
+    const hIdx = hours.indexOf(displayHour);
+    setHourIndex(hIdx >= 0 ? hIdx : 0);
+    const mIdx = minutes.indexOf(stepped);
+    setMinuteIndex(mIdx >= 0 ? mIdx : 0);
+    setPeriodIndex(period === 'PM' ? 1 : 0);
+  }, [visible, value, format, minuteStep, hours, minutes]);
+
+  // Sheet animations.
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(40)).current;
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true
+      }), Animated.spring(translateY, {
+        toValue: 0,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      })]).start();
+    } else {
+      opacity.setValue(0);
+      translateY.setValue(40);
+    }
+  }, [visible, opacity, translateY, theme.motion]);
+  const announce = useCallback(msg => {
+    if (Platform.OS === 'ios' || Platform.OS === 'android') {
+      AccessibilityInfo.announceForAccessibility(msg);
+    }
+  }, []);
+  const handleHourIndex = useCallback(idx => {
+    setHourIndex(idx);
+    announce(`Hour ${hours[idx]}`);
+  }, [hours, announce]);
+  const handleMinuteIndex = useCallback(idx => {
+    setMinuteIndex(idx);
+    announce(`${minutes[idx]} minutes`);
+  }, [minutes, announce]);
+  const handlePeriodIndex = useCallback(idx => {
+    setPeriodIndex(idx);
+    announce(periods[idx] ?? '');
+  }, [periods, announce]);
+  const handleCancel = useCallback(() => {
+    triggerHaptic('selection');
+    onClose();
+  }, [onClose]);
+  const handleConfirm = useCallback(() => {
+    const displayHour = hours[hourIndex] ?? 0;
+    const period = periods[periodIndex] ?? 'AM';
+    const hour24 = to24h(displayHour, period, format);
+    const minute = minutes[minuteIndex] ?? 0;
+    triggerHaptic('notificationSuccess');
+    onSelect({
+      hour: hour24,
+      minute
+    });
+    onClose();
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onSelect, onClose]);
+  const summary = useMemo(() => {
+    const displayHour = hours[hourIndex] ?? 0;
+    const minute = minutes[minuteIndex] ?? 0;
+    if (format === '24h') return `${pad2(displayHour)}:${pad2(minute)}`;
+    const period = periods[periodIndex] ?? 'AM';
+    return `${pad2(displayHour)}:${pad2(minute)} ${period}`;
+  }, [hours, hourIndex, minutes, minuteIndex, periods, periodIndex, format]);
+  const formatHourItem = useCallback(item => pad2(Number(item)), []);
+  const formatMinuteItem = useCallback(item => pad2(Number(item)), []);
+  const formatPeriodItem = useCallback(item => String(item), []);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: onClose,
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.backdrop, {
+        opacity
+      }],
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFill,
+        onPress: onClose,
+        accessibilityLabel: "Close time picker",
+        accessibilityRole: "button"
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.sheet, {
+          transform: [{
+            translateY
+          }]
+        }, style],
+        accessibilityViewIsModal: true,
+        accessible: true,
+        accessibilityRole: "none",
+        accessibilityLabel: title,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.handle
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          accessibilityRole: "header",
+          children: title
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.summaryWrap,
+          accessibilityLiveRegion: "polite",
+          accessibilityLabel: `Selected ${summary}`,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.summary,
+            children: summary
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.wheelsRow,
+          children: [/*#__PURE__*/_jsxs(View, {
+            pointerEvents: "none",
+            style: styles.selectionBand,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.bandLine
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.bandLine, styles.bandLineBottom]
+            })]
+          }), /*#__PURE__*/_jsx(Wheel, {
+            kind: "hour",
+            label: "Hour",
+            data: hours,
+            selectedIndex: hourIndex,
+            onIndexChange: handleHourIndex,
+            formatItem: formatHourItem,
+            theme: theme,
+            testID: "time-picker-hour"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.separator,
+            children: ":"
+          }), /*#__PURE__*/_jsx(Wheel, {
+            kind: "minute",
+            label: "Minute",
+            data: minutes,
+            selectedIndex: minuteIndex,
+            onIndexChange: handleMinuteIndex,
+            formatItem: formatMinuteItem,
+            theme: theme,
+            testID: "time-picker-minute"
+          }), format === '12h' ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.spacer
+            }), /*#__PURE__*/_jsx(Wheel, {
+              kind: "period",
+              label: "Period",
+              data: periods,
+              selectedIndex: periodIndex,
+              onIndexChange: handlePeriodIndex,
+              formatItem: formatPeriodItem,
+              theme: theme,
+              testID: "time-picker-period"
+            })]
+          }) : null]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.footer,
+          children: [/*#__PURE__*/_jsx(Button, {
+            title: cancelLabel,
+            variant: "ghost",
+            tone: "neutral",
+            onPress: handleCancel,
+            style: styles.footerBtn,
+            accessibilityHint: "Dismiss without changes",
+            testID: "time-picker-cancel"
+          }), /*#__PURE__*/_jsx(Button, {
+            title: confirmLabel,
+            variant: "solid",
+            tone: "primary",
+            haptic: false,
+            onPress: handleConfirm,
+            style: styles.footerBtn,
+            accessibilityHint: "Confirm selected time",
+            testID: "time-picker-confirm"
+          })]
+        })]
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  wheelColumn: {
+    width: 64,
+    height: PICKER_HEIGHT,
+    overflow: 'hidden'
+  },
+  wheelList: {
+    flexGrow: 0,
+    height: PICKER_HEIGHT
+  },
+  wheelItem: {
+    height: ITEM_HEIGHT,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  wheelA11yLayer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 2
+  }
+});
+const buildStyles = theme => {
+  const sheetShadow = theme.shadows.xl;
+  return StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: theme.colors.background.overlay,
+      justifyContent: 'flex-end'
+    },
+    sheet: {
+      backgroundColor: theme.colors.background.elevated,
+      borderTopLeftRadius: theme.radius.xl,
+      borderTopRightRadius: theme.radius.xl,
+      paddingTop: theme.spacing.sm,
+      paddingHorizontal: theme.spacing.lg,
+      paddingBottom: theme.spacing.xl,
+      shadowColor: sheetShadow.shadowColor,
+      shadowOffset: sheetShadow.shadowOffset,
+      shadowOpacity: sheetShadow.shadowOpacity,
+      shadowRadius: sheetShadow.shadowRadius,
+      elevation: sheetShadow.elevation
+    },
+    handle: {
+      alignSelf: 'center',
+      width: 36,
+      height: 4,
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.colors.border.secondary,
+      marginBottom: theme.spacing.sm
+    },
+    title: {
+      textAlign: 'center',
+      fontSize: theme.typography.fontSize.lg,
+      fontWeight: theme.typography.fontWeight.semibold,
+      color: theme.colors.text.primary,
+      marginBottom: theme.spacing.sm
+    },
+    summaryWrap: {
+      alignItems: 'center',
+      marginBottom: theme.spacing.md
+    },
+    summary: {
+      fontSize: theme.typography.fontSize['2xl'],
+      fontWeight: theme.typography.fontWeight.bold,
+      color: theme.colors.primary,
+      letterSpacing: theme.typography.letterSpacing.wide
+    },
+    wheelsRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: PICKER_HEIGHT,
+      position: 'relative',
+      marginBottom: theme.spacing.lg
+    },
+    selectionBand: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: ITEM_HEIGHT * CENTER_OFFSET,
+      height: ITEM_HEIGHT,
+      justifyContent: 'space-between'
+    },
+    bandLine: {
+      height: StyleSheet.hairlineWidth * 2,
+      backgroundColor: theme.colors.primary,
+      opacity: 0.85
+    },
+    bandLineBottom: {
+      // visual rhythm only — same color as top
+    },
+    separator: {
+      fontSize: theme.typography.fontSize['2xl'],
+      fontWeight: theme.typography.fontWeight.bold,
+      color: theme.colors.text.primary,
+      paddingHorizontal: theme.spacing.xs
+    },
+    spacer: {
+      width: theme.spacing.md
+    },
+    footer: {
+      flexDirection: 'row',
+      gap: theme.spacing.sm
+    },
+    footerBtn: {
+      flex: 1
+    }
+  });
+};
+export { TimePicker };
+export default TimePicker;
+//# sourceMappingURL=TimePicker.js.map

package/lib/module/components/TimePicker/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { TimePicker, default } from "./TimePicker.js";
+//# sourceMappingURL=index.js.map