Merge pull request #44 from nandorojo/multi-dates

Support multiple date selection

Author: RichardLindhout

example/src/App.tsx

@@ -60,6 +60,7 @@ function App({
     hour12: false,
   });
   const [date, setDate] = React.useState<Date | undefined>(undefined);
+  const [dates, setDates] = React.useState<Date[] | undefined>();
   const [range, setRange] = React.useState<{
     startDate: Date | undefined;
     endDate: Date | undefined;
@@ -78,6 +79,7 @@ function App({
   const onDismissTime = React.useCallback(() => {
     setTimeOpen(false);
   }, [setTimeOpen]);
+  const [multiOpen, setMultiOpen] = React.useState(false);
 
   const onDismissRange = React.useCallback(() => {
     setRangeOpen(false);
@@ -91,6 +93,10 @@ function App({
     setSingleOpen(false);
   }, [setSingleOpen]);
 
+  const onDismissMulti = React.useCallback(() => {
+    setMultiOpen(false);
+  }, []);
+
   const onDismissCustom = React.useCallback(() => {
     setCustomOpen(false);
   }, [setCustomOpen]);
@@ -119,6 +125,12 @@ function App({
     [setSingleOpen, setDate]
   );
 
+  const onChangeMulti = React.useCallback((params) => {
+    setMultiOpen(false);
+    setDates(params.dates);
+    console.log('[on-change-multi]', params);
+  }, []);
+
   const onConfirmTime = React.useCallback(
     ({ hours, minutes }) => {
       setTimeOpen(false);
@@ -227,6 +239,15 @@ function App({
                   : '-'}
               </Text>
             </Row>
+            <Row>
+              <Label>Dates</Label>
+              <Text>
+                {dates
+                  ?.map((date) => date && dateFormatter.format(date))
+                  .filter(Boolean)
+                  .join(', ')}
+              </Text>
+            </Row>
           </View>
           <Enter />
           <Enter />
@@ -240,6 +261,15 @@ function App({
               Pick single date
             </Button>
             <View style={styles.buttonSeparator} />
+            <Button
+              onPress={() => setMultiOpen(true)}
+              uppercase={false}
+              mode="outlined"
+              style={styles.pickButton}
+            >
+              Pick multiple dates
+            </Button>
+            <View style={styles.buttonSeparator} />
             <Button
               onPress={() => setRangeOpen(true)}
               uppercase={false}
@@ -340,6 +370,19 @@ function App({
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
       />
 
+      <DatePickerModal
+        // locale={'en'} optional, default: automatic
+        mode="multi"
+        visible={multiOpen}
+        onDismiss={onDismissMulti}
+        dates={dates}
+        onConfirm={onChangeMulti}
+        // onChange={onChangeMulti}
+        // saveLabel="Save" // optional
+        // label="Select date" // optional
+        // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
+      />
+
       <TimePickerModal
         locale={'nl'} //optional, default: automatic
         visible={timeOpen}

src/Date/Calendar.tsx

@@ -18,7 +18,7 @@ import Color from 'color'
 import { useTheme } from 'react-native-paper'
 import { useLatest } from '../utils'
 
-export type ModeType = 'single' | 'range' | 'excludeInRange'
+export type ModeType = 'single' | 'range' | 'excludeInRange' | 'multi'
 
 export type ScrollModeType = 'horizontal' | 'vertical'
 
@@ -38,6 +38,14 @@ export type RangeChange = (params: {
 
 export type SingleChange = (params: { date: CalendarDate }) => any
 
+export type MultiChange = (params: {
+  dates: CalendarDate[]
+  datePressed: CalendarDate
+  change: 'added' | 'removed'
+}) => any
+
+export type MultiConfirm = (params: { dates: CalendarDate[] }) => any
+
 export interface CalendarSingleProps extends BaseCalendarProps {
   mode: 'single'
   date?: CalendarDate
@@ -59,8 +67,18 @@ export interface CalendarExcludeInRangeProps extends BaseCalendarProps {
   onChange: ExcludeInRangeChange
 }
 
+export interface CalendarMultiProps extends BaseCalendarProps {
+  mode: 'multi'
+  dates?: CalendarDate[]
+  onChange: MultiChange
+}
+
 function Calendar(
-  props: CalendarSingleProps | CalendarRangeProps | CalendarExcludeInRangeProps
+  props:
+    | CalendarSingleProps
+    | CalendarRangeProps
+    | CalendarExcludeInRangeProps
+    | CalendarMultiProps
 ) {
   const {
     locale,
@@ -75,6 +93,8 @@ function Calendar(
     // @ts-ignore
     excludedDates,
     disableWeekDays,
+    // @ts-ignore
+    dates,
   } = props
 
   const theme = useTheme()
@@ -107,8 +127,9 @@ function Calendar(
   const excludedDatesRef = useLatest<Date[]>(excludedDates)
   const endDateRef = useLatest<CalendarDate>(endDate)
   const onChangeRef = useLatest<
-    RangeChange | SingleChange | ExcludeInRangeChange
+    RangeChange | SingleChange | ExcludeInRangeChange | MultiChange
   >(onChange)
+  const datesRef = useLatest<Date[]>(dates)
 
   const onPressDate = useCallback(
     (d: Date) => {
@@ -143,9 +164,23 @@ function Calendar(
         ;(onChangeRef.current as ExcludeInRangeChange)({
           excludedDates: newExcludedDates,
         })
+      } else if (mode === 'multi') {
+        datesRef.current = datesRef.current || []
+        const exists = datesRef.current.some((ed) => areDatesOnSameDay(ed, d))
+
+        const newDates = exists
+          ? datesRef.current.filter((ed) => !areDatesOnSameDay(ed, d))
+          : [...datesRef.current, d]
+
+        newDates.sort((a, b) => a.getTime() - b.getTime())
+        ;(onChangeRef.current as MultiChange)({
+          dates: newDates,
+          datePressed: d,
+          change: exists ? 'removed' : 'added',
+        })
       }
     },
-    [mode, onChangeRef, startDateRef, endDateRef, excludedDatesRef]
+    [mode, onChangeRef, startDateRef, endDateRef, excludedDatesRef, datesRef]
   )
 
   return (
@@ -163,6 +198,7 @@ function Calendar(
             startDate={startDate}
             endDate={endDate}
             date={date}
+            dates={dates}
             onPressYear={onPressYear}
             selectingYear={selectingYear}
             onPressDate={onPressDate}

src/Date/DatePickerModal.tsx

@@ -12,6 +12,7 @@ import {
 import { useTheme } from 'react-native-paper'
 import DatePickerModalContent, {
   DatePickerModalContentExcludeInRangeProps,
+  DatePickerModalContentMultiProps,
   DatePickerModalContentRangeProps,
   DatePickerModalContentSingleProps,
 } from './DatePickerModalContent'
@@ -30,6 +31,10 @@ interface DatePickerModalSingleProps
   extends DatePickerModalContentSingleProps,
     DatePickerModalProps {}
 
+interface DatePickerModalMultiProps
+  extends DatePickerModalContentMultiProps,
+    DatePickerModalProps {}
+
 interface DatePickerModalRangeProps
   extends DatePickerModalContentRangeProps,
     DatePickerModalProps {}
@@ -43,6 +48,7 @@ export function DatePickerModal(
     | DatePickerModalRangeProps
     | DatePickerModalSingleProps
     | DatePickerModalExcludeInRangeProps
+    | DatePickerModalMultiProps
 ) {
   const theme = useTheme()
   const dimensions = useWindowDimensions()

src/Date/DatePickerModalContent.tsx

@@ -4,6 +4,8 @@ import Calendar, {
   BaseCalendarProps,
   CalendarDate,
   ExcludeInRangeChange,
+  MultiChange,
+  MultiConfirm,
   RangeChange,
   SingleChange,
 } from './Calendar'
@@ -22,6 +24,7 @@ export type LocalState = {
   endDate: CalendarDate
   date: CalendarDate
   excludedDates: Date[]
+  dates: CalendarDate[]
 }
 
 interface DatePickerModalContentBaseProps {
@@ -51,6 +54,16 @@ export interface DatePickerModalContentSingleProps
   onConfirm: SingleChange
 }
 
+export interface DatePickerModalContentMultiProps
+  extends HeaderPickProps,
+    BaseCalendarProps,
+    DatePickerModalContentBaseProps {
+  mode: 'multi'
+  dates?: Date[] | null | undefined
+  onChange?: MultiChange
+  onConfirm: MultiConfirm
+}
+
 export interface DatePickerModalContentExcludeInRangeProps
   extends HeaderPickProps,
     BaseCalendarProps,
@@ -68,6 +81,7 @@ export function DatePickerModalContent(
     | DatePickerModalContentRangeProps
     | DatePickerModalContentSingleProps
     | DatePickerModalContentExcludeInRangeProps
+    | DatePickerModalContentMultiProps
 ) {
   const {
     mode,
@@ -87,6 +101,7 @@ export function DatePickerModalContent(
     startDate: anyProps.startDate,
     endDate: anyProps.endDate,
     excludedDates: anyProps.excludedDates,
+    dates: anyProps.dates,
   })
 
   // update local state if changed from outside or if modal is opened
@@ -96,12 +111,14 @@ export function DatePickerModalContent(
       startDate: anyProps.startDate,
       endDate: anyProps.endDate,
       excludedDates: anyProps.excludedDates,
+      dates: anyProps.dates,
     })
   }, [
     anyProps.date,
     anyProps.startDate,
     anyProps.endDate,
     anyProps.excludedDates,
+    anyProps.dates,
   ])
 
   const [collapsed, setCollapsed] = React.useState<boolean>(true)
@@ -128,6 +145,10 @@ export function DatePickerModalContent(
       ;(onConfirm as DatePickerModalContentExcludeInRangeProps['onConfirm'])({
         excludedDates: state.excludedDates,
       })
+    } else if (mode === 'multi') {
+      ;(onConfirm as DatePickerModalContentMultiProps['onConfirm'])({
+        dates: state.dates || [],
+      })
     }
   }, [state, mode, onConfirm])
 
@@ -170,6 +191,7 @@ export function DatePickerModalContent(
             excludedDates={state.excludedDates}
             onChange={onInnerChange}
             disableWeekDays={disableWeekDays}
+            dates={state.dates}
           />
         }
         calendarEdit={

src/Date/DatePickerModalContentHeader.tsx

@@ -36,6 +36,9 @@ function getLabel(mode: ModeType, configuredLabel?: string) {
   if (mode === 'excludeInRange') {
     return 'Select excluded dates'
   }
+  if (mode === 'multi') {
+    return 'Select dates'
+  }
   return '...?'
 }
 
@@ -61,10 +64,13 @@ export default function DatePickerModalHeader(props: HeaderContentProps) {
           {mode === 'excludeInRange' ? (
             <HeaderContentExcludeInRange {...props} color={color} />
           ) : null}
+          {mode === 'multi' ? (
+            <HeaderContentMulti {...props} color={color} />
+          ) : null}
         </View>
       </View>
       <View style={styles.fill} />
-      {mode !== 'excludeInRange' ? (
+      {mode !== 'excludeInRange' && mode !== 'multi' ? (
         <IconButton
           icon={collapsed ? 'pencil' : 'calendar'}
           color={color}
@@ -98,6 +104,37 @@ export function HeaderContentSingle({
   )
 }
 
+export function HeaderContentMulti({
+  state,
+  emptyLabel = ' ',
+  color,
+  locale,
+}: HeaderContentProps & { color: string }) {
+  const dateCount = state.dates?.length || 0
+  const lighterColor = Color(color).fade(0.5).rgb().toString()
+  const dateColor = dateCount ? color : lighterColor
+
+  const formatter = React.useMemo(() => {
+    return new Intl.DateTimeFormat(locale, {
+      month: 'short',
+      day: 'numeric',
+    })
+  }, [locale])
+
+  let label = emptyLabel
+  if (dateCount) {
+    if (dateCount <= 2) {
+      label = state.dates.map((date) => formatter.format(date)).join(', ')
+    } else {
+      label = formatter.format(state.dates[0]) + ` (+ ${dateCount - 1} more)`
+    }
+  }
+
+  return (
+    <Text style={[styles.singleHeaderText, { color: dateColor }]}>{label}</Text>
+  )
+}
+
 export function HeaderContentExcludeInRange({
   state,
   emptyLabel = ' ',