@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,669 @@
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import localeData from 'dayjs/plugin/localeData';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from 'react';
+import { AccessibilityInfo, findNodeHandle, Platform, View as RNView } from 'react-native';
+import { usePrevious } from '../../hooks/usePrevious';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
+import { DatePickerContext } from './DatePicker.context';
+import type {
+  CalendarAction,
+  DatePickerBaseProps,
+  DateType,
+  LocalState,
+  MultiChange,
+  RangeChange,
+  SingleChange,
+} from './DatePicker.props';
+import Calendar from './DatePickerCalendar';
+import { CalendarActionKind, CalendarViews, CONTAINER_HEIGHT, WEEKDAYS_HEIGHT } from './enums';
+import { areDatesOnSameDay, dateToUnix, getEndOfDay, getStartOfDay, removeTime } from './utils';
+
+dayjs.extend(localeData);
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(duration);
+
+export interface DatePickerSingleProps extends DatePickerBaseProps {
+  mode: 'single';
+  date?: DateType;
+  onChange?: SingleChange;
+}
+
+export interface DatePickerRangeProps extends DatePickerBaseProps {
+  mode: 'range';
+  startDate?: DateType;
+  endDate?: DateType;
+  onChange?: RangeChange;
+}
+
+export interface DatePickerMultipleProps extends DatePickerBaseProps {
+  mode: 'multiple';
+  dates?: DateType[];
+  onChange?: MultiChange;
+}
+
+const DateTimePicker = (
+  props: DatePickerSingleProps | DatePickerRangeProps | DatePickerMultipleProps
+) => {
+  const numerals: 'latn' = 'latn';
+  const {
+    mode = 'single',
+    timeZone,
+    showOutsideDays = true,
+    timePicker = false,
+    firstDayOfWeek = 1,
+    // startYear,
+    // endYear,
+    minDate,
+    maxDate,
+    enabledDates,
+    disabledDates,
+    date,
+    startDate,
+    endDate,
+    dates,
+    min,
+    max,
+    onChange,
+    initialView = 'day',
+    containerHeight = CONTAINER_HEIGHT,
+    weekdaysHeight = WEEKDAYS_HEIGHT,
+    navigationPosition = 'right',
+    weekdaysFormat = 'min',
+    monthsFormat = 'short',
+    monthCaptionFormat = 'full',
+    multiRangeMode,
+    hideHeader,
+    hideFooter,
+    hideWeekdays,
+    disableMonthPicker,
+    disableYearPicker,
+    month,
+    year,
+    onMonthChange = () => {},
+    onYearChange = () => {},
+    use12Hours,
+    ref,
+    onCancel = () => {},
+  } = props;
+
+  dayjs.tz.setDefault(timeZone);
+  dayjs.locale('en');
+
+  const modalRef = useRef<BottomSheetModal>(null);
+  const calendarViewRef = useRef<RNView>(null);
+  const scrollViewRef = useRef<any>(null);
+  // Forward ref methods to parent component
+  useImperativeHandle(ref, () => modalRef.current as BottomSheetModal);
+
+  const closeDatePicker = useCallback(() => {
+    modalRef.current?.close();
+  }, [modalRef.current]);
+
+  const prevTimezone = usePrevious(timeZone);
+
+  const initialCalendarView: CalendarViews = useMemo(
+    () => (mode !== 'single' && initialView === 'time' ? 'day' : initialView),
+    [mode, initialView]
+  );
+
+  const firstDay = useMemo(
+    () => (firstDayOfWeek && firstDayOfWeek > 0 && firstDayOfWeek <= 6 ? firstDayOfWeek : 0),
+    [firstDayOfWeek]
+  );
+
+  const initialState: LocalState = useMemo(() => {
+    let initialDate = dayjs().tz(timeZone);
+
+    if (mode === 'single' && date) {
+      initialDate = dayjs(date);
+    }
+
+    if (mode === 'range' && startDate) {
+      initialDate = dayjs(startDate);
+    }
+
+    if (mode === 'multiple' && dates && dates.length > 0) {
+      initialDate = dayjs(dates[0]);
+    }
+
+    if (minDate && initialDate.isBefore(minDate)) {
+      initialDate = dayjs(minDate);
+    }
+
+    if (month !== undefined && month && month >= 0 && month <= 11) {
+      initialDate = initialDate.month(month);
+    }
+
+    if (year !== undefined && year >= 0) {
+      initialDate = initialDate.year(year);
+    }
+
+    let _date = (date ? dayjs(date) : date) as DateType;
+
+    if (_date && maxDate && dayjs(_date).isAfter(maxDate)) {
+      _date = dayjs(maxDate);
+    }
+
+    if (_date && minDate && dayjs(_date).isBefore(minDate)) {
+      _date = dayjs(minDate);
+    }
+
+    let start = (startDate ? dayjs(startDate) : startDate) as DateType;
+
+    if (start && maxDate && dayjs(start).isAfter(maxDate)) {
+      start = dayjs(maxDate);
+    }
+
+    if (start && minDate && dayjs(start).isBefore(minDate)) {
+      start = dayjs(minDate);
+    }
+
+    let end = (endDate ? dayjs(endDate) : endDate) as DateType;
+
+    if (end && maxDate && dayjs(end).isAfter(maxDate)) {
+      end = dayjs(maxDate);
+    }
+
+    if (end && minDate && dayjs(end).isBefore(minDate)) {
+      end = dayjs(minDate);
+    }
+
+    return {
+      date: _date,
+      startDate: start,
+      endDate: end,
+      dates,
+      calendarView: initialCalendarView,
+      currentDate: initialDate,
+      currentYear: initialDate.year(),
+    };
+  }, [
+    mode,
+    date,
+    startDate,
+    endDate,
+    dates,
+    minDate,
+    maxDate,
+    month,
+    year,
+    timeZone,
+    initialCalendarView,
+  ]);
+
+  const [state, dispatch] = useReducer((prevState: LocalState, action: CalendarAction) => {
+    switch (action.type) {
+      case CalendarActionKind.SET_CALENDAR_VIEW:
+        return {
+          ...prevState,
+          calendarView: action.payload,
+        };
+      case CalendarActionKind.CHANGE_CURRENT_DATE:
+        return {
+          ...prevState,
+          currentDate: action.payload,
+        };
+      case CalendarActionKind.CHANGE_CURRENT_YEAR:
+        return {
+          ...prevState,
+          currentYear: action.payload,
+        };
+      case CalendarActionKind.CHANGE_SELECTED_DATE:
+        const { date: selectedDate } = action.payload;
+        return {
+          ...prevState,
+          date: selectedDate,
+          currentDate: selectedDate,
+        };
+      case CalendarActionKind.CHANGE_SELECTED_RANGE:
+        const { startDate: start, endDate: end } = action.payload;
+        return {
+          ...prevState,
+          startDate: start,
+          endDate: end,
+        };
+      case CalendarActionKind.CHANGE_SELECTED_MULTIPLE:
+        const { dates: selectedDates } = action.payload;
+        return {
+          ...prevState,
+          dates: selectedDates,
+        };
+      case CalendarActionKind.RESET_STATE:
+        return action.payload;
+      default:
+        return prevState;
+    }
+  }, initialState);
+
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  useEffect(() => {
+    const newState = {
+      ...initialState,
+    };
+
+    dispatch({ type: CalendarActionKind.RESET_STATE, payload: newState });
+  }, []);
+
+  useEffect(() => {
+    if (prevTimezone !== timeZone) {
+      const newDate = dayjs().tz(timeZone);
+      dispatch({
+        type: CalendarActionKind.CHANGE_CURRENT_DATE,
+        payload: newDate,
+      });
+    }
+  }, [timeZone, prevTimezone]);
+
+  useEffect(() => {
+    if (mode === 'single') {
+      let _date =
+        (date &&
+          (timePicker ? dayjs.tz(date, timeZone) : getStartOfDay(dayjs.tz(date, timeZone)))) ??
+        date;
+
+      if (_date && maxDate && dayjs.tz(_date, timeZone).isAfter(maxDate)) {
+        _date = dayjs.tz(maxDate, timeZone);
+      }
+
+      if (_date && minDate && dayjs.tz(_date, timeZone).isBefore(minDate)) {
+        _date = dayjs.tz(minDate, timeZone);
+      }
+
+      dispatch({
+        type: CalendarActionKind.CHANGE_SELECTED_DATE,
+        payload: { date: _date },
+      });
+
+      if (prevTimezone !== timeZone) {
+        (onChange as SingleChange)({
+          date: _date ? dayjs(_date).toDate() : _date,
+        });
+      }
+    } else if (mode === 'range') {
+      let start = (startDate ? dayjs.tz(startDate, timeZone) : startDate) as DateType;
+
+      if (start && maxDate && dayjs.tz(start, timeZone).isAfter(maxDate)) {
+        start = dayjs.tz(maxDate, timeZone);
+      }
+
+      if (start && minDate && dayjs.tz(start, timeZone).isBefore(minDate)) {
+        start = dayjs.tz(minDate, timeZone);
+      }
+
+      let end = (endDate ? dayjs.tz(endDate, timeZone) : endDate) as DateType;
+
+      if (end && maxDate && dayjs.tz(end, timeZone).isAfter(maxDate)) {
+        end = dayjs.tz(maxDate, timeZone);
+      }
+
+      if (end && minDate && dayjs.tz(end, timeZone).isBefore(minDate)) {
+        end = dayjs.tz(minDate, timeZone);
+      }
+
+      dispatch({
+        type: CalendarActionKind.CHANGE_SELECTED_RANGE,
+        payload: {
+          startDate: start,
+          endDate: end,
+        },
+      });
+
+      if (prevTimezone !== timeZone) {
+        (onChange as RangeChange)({
+          startDate: start ? dayjs(start).toDate() : start,
+          endDate: end ? dayjs(end).toDate() : end,
+        });
+      }
+    } else if (mode === 'multiple') {
+      const _dates = dates?.map(date => dayjs(date).tz(timeZone)) as DateType[];
+
+      dispatch({
+        type: CalendarActionKind.CHANGE_SELECTED_MULTIPLE,
+        payload: { dates: _dates },
+      });
+
+      if (prevTimezone !== timeZone) {
+        (onChange as MultiChange)({
+          dates: _dates.map(item => dayjs(item).toDate()),
+          change: 'updated',
+        });
+      }
+    }
+  }, [mode, date, startDate, endDate, dates, minDate, maxDate, timePicker, prevTimezone, timeZone]);
+
+  const setCalendarView = useCallback((view: CalendarViews) => {
+    dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, payload: view });
+  }, []);
+
+  const onSelectDate = useCallback(
+    (selectedDate: DateType) => {
+      if (onChange) {
+        if (mode === 'single') {
+          const newDate = timePicker
+            ? dayjs.tz(selectedDate, timeZone)
+            : dayjs.tz(getStartOfDay(selectedDate), timeZone);
+
+          dispatch({
+            type: CalendarActionKind.CHANGE_CURRENT_DATE,
+            payload: newDate,
+          });
+
+          (onChange as SingleChange)({
+            date: newDate ? dayjs(newDate).toDate() : newDate,
+          });
+        } else if (mode === 'range') {
+          // set time to 00:00:00
+          let start = removeTime(stateRef.current.startDate, timeZone);
+          let end = removeTime(stateRef.current.endDate, timeZone);
+          const selected = removeTime(selectedDate, timeZone);
+          let isStart: boolean = true;
+          let isReset: boolean = false;
+
+          if (
+            dateToUnix(selected) !== dateToUnix(end) &&
+            dateToUnix(selected) >= dateToUnix(start) &&
+            dateToUnix(start) !== dateToUnix(end)
+          ) {
+            isStart = false;
+          } else if (start && dateToUnix(selected) === dateToUnix(start)) {
+            isReset = true;
+          }
+
+          if (start && end) {
+            if (dateToUnix(start) === dateToUnix(end) && dateToUnix(selected) > dateToUnix(start)) {
+              isStart = false;
+            }
+
+            if (
+              dateToUnix(selected) > dateToUnix(start) &&
+              dateToUnix(selected) === dateToUnix(end)
+            ) {
+              end = undefined;
+            }
+          }
+
+          if (start && !end && dateToUnix(selected) < dateToUnix(start)) {
+            end = start;
+          }
+
+          if (isStart && end && (min || max)) {
+            const numberOfDays = dayjs(end).diff(selected, 'day');
+
+            if ((max && numberOfDays > max) || (min && numberOfDays < min)) {
+              isStart = true;
+              end = undefined;
+            }
+          }
+
+          if (!isStart && start && (min || max)) {
+            const numberOfDays = dayjs(selected).diff(start, 'day');
+
+            if (dateToUnix(selected) === dateToUnix(start)) {
+              isReset = true;
+            } else if ((max && numberOfDays > max) || (min && numberOfDays < min)) {
+              isStart = true;
+              end = undefined;
+            }
+          }
+
+          if (isReset) {
+            (onChange as RangeChange)({
+              startDate: undefined,
+              endDate: undefined,
+            });
+          } else {
+            (onChange as RangeChange)({
+              startDate: isStart
+                ? dayjs(selected).toDate()
+                : start
+                  ? dayjs.tz(start).toDate()
+                  : start,
+              endDate: !isStart
+                ? dayjs.tz(getEndOfDay(selected), timeZone).toDate()
+                : end
+                  ? dayjs.tz(getEndOfDay(end), timeZone).toDate()
+                  : end,
+            });
+          }
+        } else if (mode === 'multiple') {
+          const safeDates = (stateRef.current.dates as DateType[]) || [];
+          const newDate = dayjs(selectedDate, timeZone).startOf('day');
+
+          const exists = safeDates.some(ed => areDatesOnSameDay(ed, newDate));
+
+          const newDates = exists
+            ? safeDates.filter(ed => !areDatesOnSameDay(ed, newDate))
+            : [...safeDates, newDate];
+
+          if (max && newDates.length > max) {
+            return;
+          }
+
+          newDates.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1));
+
+          const _dates = newDates.map(date => dayjs(date).tz(timeZone)) as DateType[];
+
+          (onChange as MultiChange)({
+            dates: _dates.map(item => dayjs(item).toDate()),
+            datePressed: newDate ? dayjs(newDate).toDate() : newDate,
+            change: exists ? 'removed' : 'added',
+          });
+        }
+      }
+    },
+    [mode, timePicker, min, max, timeZone]
+  );
+
+  // set the active displayed month
+  const onSelectMonth = useCallback(
+    (value: number) => {
+      const currentMonth = dayjs(stateRef.current.currentDate).month();
+      const newDate = dayjs(stateRef.current.currentDate).month(value);
+
+      // Only call onMonthChange if the month actually changed
+      if (value !== currentMonth) {
+        onMonthChange(value);
+      }
+
+      dispatch({
+        type: CalendarActionKind.CHANGE_CURRENT_DATE,
+        payload: newDate,
+      });
+      setCalendarView('day');
+    },
+    [setCalendarView, onMonthChange]
+  );
+
+  // set the active displayed year
+  const onSelectYear = useCallback(
+    (value: number) => {
+      const currentYear = dayjs(stateRef.current.currentDate).year();
+      const newDate = dayjs(stateRef.current.currentDate).year(value);
+
+      // Only call onYearChange if the year actually changed
+      if (value !== currentYear) {
+        onYearChange(value);
+      }
+
+      dispatch({
+        type: CalendarActionKind.CHANGE_CURRENT_DATE,
+        payload: newDate,
+      });
+      setCalendarView('day');
+    },
+    [setCalendarView, onYearChange]
+  );
+
+  const onChangeMonth = useCallback(
+    (value: number) => {
+      const newDate = dayjs(stateRef.current.currentDate).add(value, 'month');
+      dispatch({
+        type: CalendarActionKind.CHANGE_CURRENT_DATE,
+        payload: dayjs(newDate),
+      });
+    },
+    [stateRef, dispatch]
+  );
+
+  const onChangeYear = useCallback(
+    (value: number) => {
+      dispatch({
+        type: CalendarActionKind.CHANGE_CURRENT_YEAR,
+        payload: value,
+      });
+    },
+    [dispatch]
+  );
+
+  useEffect(() => {
+    if (month !== undefined && month >= 0 && month <= 11) {
+      onSelectMonth(month);
+    }
+  }, [month]);
+
+  useEffect(() => {
+    if (year !== undefined && year >= 0) {
+      onSelectYear(year);
+    }
+  }, [year]);
+
+  const baseContextValue = useMemo(
+    () => ({
+      mode,
+      numerals,
+      timeZone,
+      showOutsideDays,
+      timePicker,
+      minDate,
+      maxDate,
+      min,
+      max,
+      enabledDates,
+      disabledDates,
+      firstDayOfWeek: firstDay,
+      containerHeight,
+      weekdaysHeight,
+      navigationPosition,
+      weekdaysFormat,
+      monthsFormat,
+      monthCaptionFormat,
+      multiRangeMode,
+      hideHeader,
+      hideFooter,
+      hideWeekdays,
+      disableMonthPicker,
+      disableYearPicker,
+      use12Hours,
+      closeDatePicker,
+    }),
+    [
+      mode,
+      numerals,
+      timeZone,
+      showOutsideDays,
+      timePicker,
+      minDate,
+      maxDate,
+      min,
+      max,
+      enabledDates,
+      disabledDates,
+      firstDay,
+      containerHeight,
+      weekdaysHeight,
+      navigationPosition,
+      weekdaysFormat,
+      monthsFormat,
+      monthCaptionFormat,
+      multiRangeMode,
+      hideHeader,
+      hideFooter,
+      hideWeekdays,
+      disableMonthPicker,
+      disableYearPicker,
+      use12Hours,
+      closeDatePicker,
+    ]
+  );
+
+  const handlerContextValue = useMemo(
+    () => ({
+      setCalendarView,
+      onSelectDate,
+      onSelectMonth,
+      onSelectYear,
+      onChangeMonth,
+      onChangeYear,
+      onCancel,
+    }),
+    [
+      setCalendarView,
+      onSelectDate,
+      onSelectMonth,
+      onSelectYear,
+      onChangeMonth,
+      onChangeYear,
+      onCancel,
+    ]
+  );
+
+  const memoizedValue = useMemo(
+    () => ({
+      ...state,
+      ...baseContextValue,
+      ...handlerContextValue,
+    }),
+    [state, baseContextValue, handlerContextValue]
+  );
+
+  const handleChange = useCallback((index: number) => {
+    if (index > -1) {
+      // Add a small delay to ensure the bottom sheet is fully rendered
+      setTimeout(() => {
+        // Announce to screen readers
+        AccessibilityInfo.announceForAccessibility('Date picker opened.');
+
+        // Set focus for screen readers - different refs for iOS vs Android
+        const scrollViewTargetRef = scrollViewRef.current?.getInnerViewNode();
+        const targetRef = calendarViewRef.current;
+        if ((Platform.OS === 'android' && targetRef) || scrollViewTargetRef) {
+          const nodeHandle = findNodeHandle(
+            Platform.OS === 'android' ? targetRef : scrollViewTargetRef
+          );
+          if (nodeHandle) {
+            AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+          }
+        }
+      }, 50);
+    }
+  }, []);
+
+  return (
+    <BottomSheetModal ref={modalRef} onChange={handleChange} accessible={false}>
+      <BottomSheetScrollView ref={scrollViewRef}>
+        <RNView
+          ref={calendarViewRef}
+          accessible={Platform.OS === 'android' ? true : undefined}
+          accessibilityLabel={Platform.OS === 'android' ? 'Date picker calendar' : undefined}
+          importantForAccessibility={Platform.OS === 'android' ? 'yes' : 'auto'}
+        >
+          <DatePickerContext.Provider value={memoizedValue}>
+            <Calendar />
+          </DatePickerContext.Provider>
+        </RNView>
+      </BottomSheetScrollView>
+    </BottomSheetModal>
+  );
+};
+
+export default DateTimePicker;

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useDatePickerContext } from './DatePicker.context';
+import Days from './DatePickerDays';
+import Footer from './DatePickerFooter';
+import Header from './DatePickerHeader';
+import Months from './DatePickerMonths';
+import Years from './DatePickerYears';
+import type { CalendarViews } from './enums';
+import TimePicker from './TimePicker';
+
+const CalendarView: Record<CalendarViews, ReactNode> = {
+  year: <Years />,
+  month: <Months />,
+  day: <Days />,
+  time: <TimePicker />,
+};
+
+const Calendar = () => {
+  const { hideHeader, hideFooter, calendarView, containerHeight, navigationPosition } =
+    useDatePickerContext();
+
+  return (
+    <View style={[styles.container]} testID="calendar">
+      {!hideHeader ? <Header navigationPosition={navigationPosition} /> : null}
+      <View style={styles.containerInner(containerHeight)}>{CalendarView[calendarView]}</View>
+      {!hideFooter ? <Footer /> : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    backgroundColor: theme.color.background.secondary,
+    gap: theme.components.datePicker.calendar.gap,
+  },
+  containerInner: (height?: number) => ({ height }),
+}));
+
+export default Calendar;