@utilitywarehouse/hearth-react-native 0.23.0 → 0.25.0

package/src/components/TimePicker/TimePicker.stories.tsx

@@ -0,0 +1,85 @@
+import { Meta, StoryObj } from '@storybook/react-native';
+import { useRef, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { DateType, TimePicker } from '.';
+import { ViewWrap } from '../../../docs/components';
+import { BottomSheetModal } from '../BottomSheet';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Stories / TimePicker',
+  component: TimePicker,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    use12Hours: {
+      control: 'boolean',
+      description: 'Display a 12-hour clock with AM/PM selector',
+      defaultValue: false,
+    },
+    minuteInterval: {
+      control: 'number',
+      description: 'Step interval for minutes shown in the picker',
+      defaultValue: 1,
+    },
+  },
+  args: {
+    use12Hours: false,
+    minuteInterval: 1,
+  },
+} satisfies Meta<typeof TimePicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+type StoryArgs = Story['args'];
+
+export const Playground: Story = {
+  render: (args: StoryArgs) => {
+    const [selected, setSelected] = useState<DateType>();
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={() => modalRef.current?.present()}>Show Time Picker</Button>
+          <TimePicker
+            ref={modalRef}
+            date={selected}
+            use12Hours={args.use12Hours}
+            minuteInterval={args.minuteInterval}
+            onChange={({ date }) => setSelected(date)}
+            onCancel={() => setSelected(undefined)}
+          />
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const TwelveHour: Story = {
+  args: {
+    use12Hours: true,
+  },
+  render: (args: StoryArgs) => {
+    const [selected, setSelected] = useState<DateType>();
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={() => modalRef.current?.present()}>Show 12-hour Time Picker</Button>
+          <TimePicker
+            ref={modalRef}
+            date={selected}
+            use12Hours={args.use12Hours}
+            minuteInterval={args.minuteInterval}
+            onChange={({ date }) => setSelected(date)}
+            onCancel={() => setSelected(undefined)}
+          />
+        </ViewWrap>
+      </View>
+    );
+  },
+};

package/src/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,150 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, findNodeHandle, Platform, View as RNView } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BottomSheetModal, BottomSheetView } from '../BottomSheet';
+import { Button } from '../Button';
+import type { DateType, TimePickerProps } from './TimePicker.props';
+import TimePickerView from './TimePickerView';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+type FooterProps = {
+  onCancel: () => void;
+  onConfirm: () => void;
+};
+
+const Footer = ({ onCancel, onConfirm }: FooterProps) => {
+  return (
+    <RNView style={styles.footer} testID="footer">
+      <Button variant="ghost" colorScheme="functional" onPress={onCancel}>
+        Cancel
+      </Button>
+      <Button variant="ghost" colorScheme="functional" onPress={onConfirm}>
+        Ok
+      </Button>
+    </RNView>
+  );
+};
+
+const TimePicker = ({
+  timeZone,
+  date,
+  onChange,
+  use12Hours,
+  minuteInterval,
+  hideFooter,
+  style,
+  ref,
+  onCancel = () => {},
+}: TimePickerProps) => {
+  dayjs.tz.setDefault(timeZone);
+  dayjs.locale('en');
+
+  const modalRef = useRef<BottomSheetModal>(null);
+  const pickerViewRef = useRef<RNView>(null);
+
+  useImperativeHandle(ref, () => modalRef.current as BottomSheetModal);
+
+  const [currentDate, setCurrentDate] = useState<DateType>(() => {
+    return date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
+  });
+
+  useEffect(() => {
+    const nextDate = date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
+    const isSameMinute = dayjs(currentDate).isSame(nextDate, 'minute');
+
+    if (!isSameMinute) {
+      setCurrentDate(nextDate);
+    }
+  }, [currentDate, date, timeZone]);
+
+  const closeTimePicker = useCallback(() => {
+    modalRef.current?.close();
+  }, []);
+
+  const handleSelectDate = useCallback(
+    (selectedDate: DateType) => {
+      const newDate = dayjs.tz(selectedDate ?? currentDate, timeZone);
+      if (!dayjs(currentDate).isSame(newDate, 'minute')) {
+        setCurrentDate(newDate);
+      }
+      onChange?.({ date: newDate ? dayjs(newDate).toDate() : newDate });
+    },
+    [currentDate, onChange, timeZone]
+  );
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    closeTimePicker();
+  }, [closeTimePicker, onCancel]);
+
+  const handleConfirm = useCallback(() => {
+    closeTimePicker();
+  }, [closeTimePicker]);
+
+  const handleChange = useCallback((index: number) => {
+    if (index > -1) {
+      setTimeout(() => {
+        AccessibilityInfo.announceForAccessibility('Time picker opened.');
+
+        const targetRef = pickerViewRef.current;
+        if (targetRef) {
+          const nodeHandle = findNodeHandle(targetRef);
+          if (nodeHandle) {
+            AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+          }
+        }
+      }, 50);
+    }
+  }, []);
+
+  const contentStyle = useMemo(() => [styles.container, style], [style]);
+
+  return (
+    <BottomSheetModal
+      ref={modalRef}
+      onChange={handleChange}
+      accessible={false}
+      enableContentPanningGesture={false}
+    >
+      <BottomSheetView>
+        <RNView
+          ref={pickerViewRef}
+          accessible={Platform.OS === 'android' ? true : undefined}
+          accessibilityLabel={Platform.OS === 'android' ? 'Time picker' : undefined}
+          importantForAccessibility={Platform.OS === 'android' ? 'yes' : 'auto'}
+          style={contentStyle}
+        >
+          <TimePickerView
+            currentDate={currentDate}
+            onSelectDate={handleSelectDate}
+            timeZone={timeZone}
+            use12Hours={use12Hours}
+            minuteInterval={minuteInterval}
+          />
+          {!hideFooter ? <Footer onCancel={handleCancel} onConfirm={handleConfirm} /> : null}
+        </RNView>
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+};
+
+TimePicker.displayName = 'TimePicker';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    backgroundColor: theme.color.background.secondary,
+    gap: theme.components.datePicker.calendar.gap,
+  },
+  footer: {
+    flexDirection: 'row',
+    gap: theme.components.datePicker.calendar.footer.gap,
+    justifyContent: 'flex-end',
+  },
+}));
+
+export default TimePicker;

package/src/components/TimePicker/TimePickerView.tsx

@@ -0,0 +1,216 @@
+import dayjs from 'dayjs';
+import { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Numerals } from '../DatePicker/DatePicker.props';
+import { formatNumber, getParsedDate } from '../DatePicker/utils';
+import type { DateType, PickerOption } from './TimePicker.props';
+import TimePickerWheel from './TimePickerWheel';
+
+export type Period = 'AM' | 'PM';
+
+type TimePickerViewProps = {
+  currentDate: DateType;
+  onSelectDate: (date: DateType) => void;
+  timeZone?: string;
+  use12Hours?: boolean;
+  minuteInterval?: number;
+  containerHeight?: number;
+};
+
+const createNumberList = (
+  num: number,
+  numerals: Numerals,
+  startFrom: number = 0
+): PickerOption[] => {
+  return Array.from({ length: num }, (_, i) => ({
+    value: i + startFrom,
+    text:
+      i + startFrom < 10
+        ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
+        : `${formatNumber(i + startFrom, numerals)}`,
+  }));
+};
+
+const createMinuteList = (interval: number, numerals: Numerals): PickerOption[] => {
+  const safeInterval = Math.min(59, Math.max(1, Math.floor(interval)));
+  const values = Array.from({ length: Math.ceil(60 / safeInterval) }, (_, index) =>
+    Math.min(index * safeInterval, 59)
+  ).filter((value, index, array) => array.indexOf(value) === index && value < 60);
+
+  return values.map(value => ({
+    value,
+    text:
+      value < 10
+        ? `${formatNumber(0, numerals)}${formatNumber(value, numerals)}`
+        : `${formatNumber(value, numerals)}`,
+  }));
+};
+
+const getClosestMinute = (value: number, options: PickerOption[]) => {
+  if (!options.length) return value;
+  const values = options.map(option => option.value as number);
+  if (values.includes(value)) return value;
+
+  let closest = values[0] ?? value;
+  let closestDiff = Math.abs(value - closest);
+
+  values.forEach(optionValue => {
+    const diff = Math.abs(value - optionValue);
+    if (diff < closestDiff) {
+      closestDiff = diff;
+      closest = optionValue;
+    }
+  });
+
+  return closest;
+};
+
+const TimePickerView = ({
+  currentDate,
+  onSelectDate,
+  timeZone,
+  use12Hours,
+  minuteInterval = 1,
+}: TimePickerViewProps) => {
+  const hours = useMemo(
+    () => createNumberList(use12Hours ? 12 : 24, 'latn', use12Hours ? 1 : 0),
+    [use12Hours]
+  );
+
+  const minutes = useMemo(() => createMinuteList(minuteInterval, 'latn'), [minuteInterval]);
+
+  const periodOptions = useMemo(
+    () => [
+      { value: 'AM', text: 'AM' },
+      { value: 'PM', text: 'PM' },
+    ],
+    []
+  );
+
+  const baseDate = currentDate;
+  const { hour, hour12, minute, period } = getParsedDate(baseDate);
+  const minuteValue = useMemo(() => getClosestMinute(minute, minutes), [minute, minutes]);
+
+  const handleChangeHour = useCallback(
+    (value: number) => {
+      let hour24 = value;
+
+      if (use12Hours) {
+        if (period === 'AM' && value === 12) {
+          hour24 = 0;
+        } else if (period === 'PM' && value < 12) {
+          hour24 = value + 12;
+        } else {
+          hour24 = value;
+        }
+      }
+
+      const newDate = dayjs.tz(baseDate, timeZone).hour(hour24).minute(minuteValue);
+      onSelectDate(newDate);
+    },
+    [baseDate, onSelectDate, timeZone, use12Hours, period, minuteValue]
+  );
+
+  const handleChangeMinute = useCallback(
+    (value: number) => {
+      const newDate = dayjs.tz(baseDate, timeZone).minute(value);
+      onSelectDate(newDate);
+    },
+    [baseDate, onSelectDate, timeZone]
+  );
+
+  const handlePeriodChange = useCallback(
+    (newPeriod: Period) => {
+      let newHour = hour12;
+      if (newPeriod === 'PM' && hour12 < 12) {
+        newHour = hour12 + 12;
+      } else if (newPeriod === 'AM' && hour12 === 12) {
+        newHour = 0;
+      } else if (newPeriod === 'AM' && hour >= 12) {
+        newHour = hour12;
+      }
+
+      const newDate = dayjs.tz(baseDate, timeZone).hour(newHour);
+      onSelectDate(newDate);
+    },
+    [baseDate, onSelectDate, timeZone, hour, hour12]
+  );
+
+  return (
+    <View style={styles.container} testID="time-selector">
+      <View style={styles.timePickerContainer}>
+        <View style={styles.wheelContainer}>
+          <TimePickerWheel
+            value={use12Hours ? hour12 : hour}
+            items={hours}
+            setValue={handleChangeHour}
+          />
+        </View>
+        <BodyText style={styles.timeSeparator} size="lg">
+          :
+        </BodyText>
+        <View style={styles.wheelContainer}>
+          <TimePickerWheel value={minuteValue} items={minutes} setValue={handleChangeMinute} />
+        </View>
+      </View>
+      {use12Hours && period ? (
+        <View style={styles.periodContainer}>
+          <TimePickerWheel value={period} items={periodOptions} setValue={handlePeriodChange} />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  wheelContainer: {
+    flex: 1,
+  },
+  timePickerContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 146,
+    height: 208,
+    flexDirection: 'row',
+    marginBottom: -30,
+  },
+  timeSeparator: {
+    marginHorizontal: 5,
+  },
+  periodContainer: {
+    marginLeft: 10,
+  },
+});
+
+const customComparator = (
+  prev: Readonly<TimePickerViewProps>,
+  next: Readonly<TimePickerViewProps>
+) => {
+  if (prev.onSelectDate !== next.onSelectDate) {
+    return false;
+  }
+
+  if (prev.timeZone !== next.timeZone) {
+    return false;
+  }
+
+  if (prev.use12Hours !== next.use12Hours) {
+    return false;
+  }
+
+  if (prev.minuteInterval !== next.minuteInterval) {
+    return false;
+  }
+
+  return dayjs(prev.currentDate).isSame(next.currentDate, 'minute');
+};
+
+export default memo(TimePickerView, customComparator);

package/src/components/TimePicker/TimePickerWheel.tsx

@@ -0,0 +1,154 @@
+import WheelPicker from '@quidone/react-native-wheel-picker';
+import { useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+import type { PickerOption } from './TimePicker.props';
+
+type TimePickerWheelProps = {
+  value: number | string;
+  setValue?: (value: any) => void;
+  items: PickerOption[];
+};
+
+const ITEM_HEIGHT = 40;
+const VISIBLE_REST = 3;
+
+const TimePickerWheel = ({ value, setValue = () => {}, items }: TimePickerWheelProps) => {
+  const theme = useTheme();
+  const fadeHeight = ITEM_HEIGHT * 1.5;
+  const gradientId = useMemo(() => `wheel-fade-${Math.random().toString(36).slice(2)}`, []);
+  const displayCount = VISIBLE_REST * 2 + 1;
+  const pickerHeight = ITEM_HEIGHT * displayCount;
+
+  const data = useMemo(
+    () =>
+      items.map(item => ({
+        value: item.value,
+        label: item.text,
+      })),
+    [items]
+  );
+
+  const handleValueChanged = useCallback(
+    ({ item }: { item: { value: number | string } }) => {
+      if (item?.value === value) {
+        return;
+      }
+      if (item && item.value !== undefined) {
+        setValue(item.value);
+      }
+    },
+    [setValue, value]
+  );
+
+  const renderOverlay = useCallback(
+    () => (
+      <View style={[styles.overlayContainer]} pointerEvents="none">
+        <View pointerEvents="none" style={[styles.fadeOverlay, { height: fadeHeight }]}>
+          <Svg width="100%" height="100%" preserveAspectRatio="none">
+            <Defs>
+              <LinearGradient id={`${gradientId}-top`} x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor={theme.color.background.secondary} stopOpacity={1} />
+                <Stop offset="1" stopColor={theme.color.background.secondary} stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+            <Rect width="100%" height="100%" fill={`url(#${gradientId}-top)`} />
+          </Svg>
+        </View>
+        <View
+          pointerEvents="none"
+          style={[styles.fadeOverlay, styles.fadeOverlayBottom, { height: fadeHeight }]}
+        >
+          <Svg width="100%" height="100%" preserveAspectRatio="none">
+            <Defs>
+              <LinearGradient id={`${gradientId}-bottom`} x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor={theme.color.background.secondary} stopOpacity={0} />
+                <Stop offset="1" stopColor={theme.color.background.secondary} stopOpacity={1} />
+              </LinearGradient>
+            </Defs>
+            <Rect width="100%" height="100%" fill={`url(#${gradientId}-bottom)`} />
+          </Svg>
+        </View>
+      </View>
+    ),
+    [fadeHeight, gradientId, theme.color.background.secondary]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: { label: string } }) => (
+      <View style={styles.indicator}>
+        <BodyText size="lg">{item.label}</BodyText>
+      </View>
+    ),
+    []
+  );
+
+  return (
+    <View style={[styles.container, { height: pickerHeight }]}>
+      <View style={styles.overlayContainer}>
+        <View style={[styles.selection]} />
+      </View>
+      <WheelPicker
+        data={data}
+        value={value}
+        onValueChanged={handleValueChanged}
+        itemHeight={ITEM_HEIGHT}
+        visibleItemCount={displayCount}
+        width={theme.components.timePicker.time.item.width}
+        renderItem={renderItem}
+        renderOverlay={renderOverlay}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    minWidth: theme.components.timePicker.time.item.width,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+  },
+  indicator: {
+    width: theme.components.timePicker.time.item.width,
+    height: theme.components.timePicker.time.item.height,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  selection: {
+    alignSelf: 'stretch',
+    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+    borderRadius: theme.borderRadius.md,
+    width: theme.components.timePicker.time.item.width,
+    height: theme.components.timePicker.time.item.height,
+  },
+  fadeOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+  fadeOverlayBottom: {
+    top: undefined,
+    bottom: 0,
+  },
+}));
+
+export default TimePickerWheel;