Add excludeInRange mode

Author: RichardLindhout

example/src/App.tsx

@@ -25,6 +25,15 @@ import {
   DatePickerModalContent,
   TimePickerModal,
 } from '../../src';
+import { addMonths } from '../../src/Date/dateUtils';
+
+const baseDate = new Date();
+const rangeExcludeDateStart = new Date(
+  baseDate.getFullYear(),
+  baseDate.getMonth(),
+  baseDate.getDate()
+);
+const rangeExcludeDateEnd = addMonths(new Date(), 3);
 
 function App({
   onToggleDarkMode,
@@ -49,12 +58,15 @@ function App({
     startDate: Date | undefined;
     endDate: Date | undefined;
   }>({ startDate: undefined, endDate: undefined });
+  const [excludedDates, setExcludedDates] = React.useState<Date[]>([]);
   const [time, setTime] = React.useState<{
     hours: number | undefined;
     minutes: number | undefined;
   }>({ hours: undefined, minutes: undefined });
   const [timeOpen, setTimeOpen] = React.useState(false);
   const [rangeOpen, setRangeOpen] = React.useState(false);
+  const [rangeExcludeOpen, setRangeExcludeOpen] = React.useState(false);
+
   const [singleOpen, setSingleOpen] = React.useState(false);
 
   const onDismissTime = React.useCallback(() => {
@@ -65,6 +77,10 @@ function App({
     setRangeOpen(false);
   }, [setRangeOpen]);
 
+  const onDismissExcludeRange = React.useCallback(() => {
+    setRangeExcludeOpen(false);
+  }, [setRangeExcludeOpen]);
+
   const onDismissSingle = React.useCallback(() => {
     setSingleOpen(false);
   }, [setSingleOpen]);
@@ -77,6 +93,14 @@ function App({
     [setRangeOpen, setRange]
   );
 
+  const onChangeExcludeRange = React.useCallback(
+    ({ excludedDates }: { excludedDates: Date[] }) => {
+      setRangeExcludeOpen(false);
+      setExcludedDates(excludedDates);
+    },
+    [setRangeExcludeOpen, setExcludedDates]
+  );
+
   const onChangeSingle = React.useCallback(
     (params) => {
       setSingleOpen(false);
@@ -102,7 +126,7 @@ function App({
     theme.dark && theme.mode === 'adaptive'
       ? overlay(3, theme.colors.surface)
       : (theme.colors.surface as any);
-
+  console.log({ excludedDates });
   return (
     <>
       <ScrollView
@@ -197,6 +221,7 @@ function App({
               onPress={() => setSingleOpen(true)}
               uppercase={false}
               mode="outlined"
+              style={styles.pickButton}
             >
               Pick single date
             </Button>
@@ -205,23 +230,30 @@ function App({
               onPress={() => setRangeOpen(true)}
               uppercase={false}
               mode="outlined"
+              style={styles.pickButton}
             >
               Pick range
             </Button>
             <View style={styles.buttonSeparator} />
+            <Button
+              onPress={() => setRangeExcludeOpen(true)}
+              uppercase={false}
+              mode="outlined"
+              style={styles.pickButton}
+            >
+              Exclude dates in range
+            </Button>
+            <View style={styles.buttonSeparator} />
             <Button
               onPress={() => setTimeOpen(true)}
               uppercase={false}
               mode="outlined"
+              style={styles.pickButton}
             >
               Pick time
             </Button>
           </View>
           <Enter />
-
-          {/*<DatePickerInput />*/}
-          {/*<Enter />*/}
-          {/*<DateRangeInput />*/}
         </Animated.View>
         <View style={styles.content}>
           <Title>Inside page</Title>
@@ -237,8 +269,8 @@ function App({
           <DatePickerModalContent
             mode="range"
             onDismiss={onDismissRange}
-            startDate={undefined}
-            endDate={undefined}
+            startDate={range.startDate}
+            endDate={range.endDate}
             onConfirm={onChangeRange}
           />
         </Animated.View>
@@ -250,13 +282,25 @@ function App({
         mode="range"
         visible={rangeOpen}
         onDismiss={onDismissRange}
-        startDate={undefined}
-        endDate={undefined}
+        startDate={range.startDate}
+        endDate={range.endDate}
         onConfirm={onChangeRange}
-        saveLabel="Opslaan" // optional
-        label="Selecteer periode" // optional
-        startLabel="Van" // optional
-        endLabel="Tot" // optional
+        // saveLabel="Save" // optional
+        // label="Select period" // optional
+        // startLabel="From" // optional
+        // endLabel="To" // optional
+        // animationType="slide" // optional, default is slide on ios/android and none on web
+      />
+      <DatePickerModal
+        mode="excludeInRange"
+        visible={rangeExcludeOpen}
+        onDismiss={onDismissExcludeRange}
+        startDate={rangeExcludeDateStart}
+        endDate={rangeExcludeDateEnd}
+        excludedDates={excludedDates}
+        onConfirm={onChangeExcludeRange}
+        // sunday, saturday
+        disableWeekDays={disabledWeekDays}
         // animationType="slide" // optional, default is slide on ios/android and none on web
       />
       <DatePickerModal
@@ -265,8 +309,8 @@ function App({
         onDismiss={onDismissSingle}
         date={undefined}
         onConfirm={onChangeSingle}
-        saveLabel="Save" // optional
-        label="Select date" // optional
+        // saveLabel="Save" // optional
+        // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
       />
 
@@ -276,15 +320,17 @@ function App({
         onConfirm={onConfirmTime}
         hours={time.hours} // optional, default: current hours
         minutes={time.minutes} // optional, default: current minutes
-        label="Select time" // optional, default 'Select time'
-        cancelLabel="Cancel" // optional, default: 'Cancel'
-        confirmLabel="Ok" // optional, default: 'Ok'
+        // label="Select time" // optional, default 'Select time'
+        // cancelLabel="Cancel" // optional, default: 'Cancel'
+        // confirmLabel="Ok" // optional, default: 'Ok'
         // animationType="fade" // optional, default is 'none'
       />
     </>
   );
 }
 
+const disabledWeekDays = [0, 6];
+
 function Enter() {
   return <View style={styles.enter} />;
 }
@@ -398,7 +444,8 @@ const styles = StyleSheet.create({
   },
   switchSpace: { flex: 1 },
   switchLabel: { fontSize: 16 },
-  buttons: { flexDirection: 'row', marginTop: 24 },
+  buttons: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 24 },
+  pickButton: { marginTop: 6 },
   buttonSeparator: { width: 6 },
   enter: { height: 12 },
   label: { width: 100, fontSize: 16 },

src/Date/Calendar.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 import Swiper from './Swiper'
 
 import Month from './Month'
-import { dateToUnix } from './dateUtils'
+import { areDatesOnSameDay, dateToUnix, DisableWeekDaysType } from './dateUtils'
 
 import CalendarHeader from './CalendarHeader'
 import { useCallback, useMemo } from 'react'
@@ -13,33 +13,49 @@ import Color from 'color'
 import { useTheme } from 'react-native-paper'
 import { useLatest } from '../utils'
 
-export type ModeType = 'single' | 'range'
+export type ModeType = 'single' | 'range' | 'excludeInRange'
 
 export type ScrollModeType = 'horizontal' | 'vertical'
 
+export type BaseCalendarProps = {
+  disableWeekDays?: DisableWeekDaysType
+}
+
 export type CalendarDate = Date | undefined
 
+export type ExcludeInRangeChange = (params: { excludedDates: Date[] }) => any
+
 export type RangeChange = (params: {
   startDate: CalendarDate
   endDate: CalendarDate
 }) => any
 
 export type SingleChange = (params: { date: CalendarDate }) => any
 
-export interface CalendarRangeProps {
+export interface CalendarSingleProps extends BaseCalendarProps {
+  mode: 'single'
+  date?: CalendarDate
+  onChange: SingleChange
+}
+
+export interface CalendarRangeProps extends BaseCalendarProps {
   mode: 'range'
   startDate: CalendarDate
   endDate: CalendarDate
   onChange: RangeChange
 }
 
-export interface CalendarSingleProps {
-  mode: 'single'
-  date?: CalendarDate
-  onChange: SingleChange
+export interface CalendarExcludeInRangeProps extends BaseCalendarProps {
+  mode: 'excludeInRange'
+  excludedDates: Date[]
+  startDate: CalendarDate
+  endDate: CalendarDate
+  onChange: ExcludeInRangeChange
 }
 
-function Calendar(props: CalendarSingleProps | CalendarRangeProps) {
+function Calendar(
+  props: CalendarSingleProps | CalendarRangeProps | CalendarExcludeInRangeProps
+) {
   const {
     mode,
     onChange,
@@ -49,6 +65,9 @@ function Calendar(props: CalendarSingleProps | CalendarRangeProps) {
     endDate,
     // @ts-ignore
     date,
+    // @ts-ignore
+    excludedDates,
+    disableWeekDays,
   } = props
 
   const theme = useTheme()
@@ -60,7 +79,8 @@ function Calendar(props: CalendarSingleProps | CalendarRangeProps) {
     return Color(theme.colors.primary).lighten(0.9).hex()
   }, [theme])
 
-  const scrollMode = mode === 'range' ? 'vertical' : 'horizontal'
+  const scrollMode =
+    mode === 'range' || mode === 'excludeInRange' ? 'vertical' : 'horizontal'
 
   const [selectedYear, setSelectedYear] = React.useState<number | undefined>(
     undefined
@@ -77,15 +97,16 @@ function Calendar(props: CalendarSingleProps | CalendarRangeProps) {
   // prevent re-rendering all months when something changed we only need the
   // latest version of the props and we don't want the useCallback to change
   const startDateRef = useLatest<CalendarDate>(startDate)
+  const excludedDatesRef = useLatest<Date[]>(excludedDates)
   const endDateRef = useLatest<CalendarDate>(endDate)
-  const onChangeRef = useLatest<RangeChange | SingleChange>(onChange)
+  const onChangeRef = useLatest<
+    RangeChange | SingleChange | ExcludeInRangeChange
+  >(onChange)
 
   const onPressDate = useCallback(
     (d: Date) => {
       if (mode === 'single') {
-        onChangeRef.current({
-          startDate: undefined,
-          endDate: undefined,
+        ;(onChangeRef.current as SingleChange)({
           date: d,
         })
       } else if (mode === 'range') {
@@ -95,16 +116,28 @@ function Calendar(props: CalendarSingleProps | CalendarRangeProps) {
         if (sd && !ed && dateToUnix(d) > dateToUnix(sd!)) {
           isStart = false
         }
-        onChangeRef.current({
+        ;(onChangeRef.current as RangeChange)({
           startDate: isStart ? d : sd,
           endDate: !isStart
             ? new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)
             : undefined,
-          date: undefined,
+        })
+      } else if (mode === 'excludeInRange') {
+        const exists = excludedDatesRef.current.some((ed) =>
+          areDatesOnSameDay(ed, d)
+        )
+
+        ;(onChangeRef.current as ExcludeInRangeChange)({
+          excludedDates: exists
+            ? excludedDatesRef.current.filter((ed) => !areDatesOnSameDay(ed, d))
+            : [
+                ...excludedDatesRef.current,
+                new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0),
+              ],
         })
       }
     },
-    [mode, onChangeRef, startDateRef, endDateRef]
+    [mode, onChangeRef, startDateRef, endDateRef, excludedDatesRef]
   )
 
   return (
@@ -128,13 +161,16 @@ function Calendar(props: CalendarSingleProps | CalendarRangeProps) {
             primaryColor={theme.colors.primary}
             selectColor={selectColor}
             roundness={theme.roundness}
+            disableWeekDays={disableWeekDays}
+            excludedDates={excludedDates}
           />
         )}
         renderHeader={({ onPrev, onNext }) => (
           <CalendarHeader
             onPrev={onPrev}
             onNext={onNext}
             scrollMode={scrollMode}
+            disableWeekDays={disableWeekDays}
           />
         )}
       />

src/Date/CalendarHeader.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { IconButton, useTheme } from 'react-native-paper'
 import DayNames, { dayNamesHeight } from './DayNames'
+import { DisableWeekDaysType } from './dateUtils'
 
 const buttonContainerHeight = 56
 const buttonContainerMarginTop = 4
@@ -23,10 +24,12 @@ function CalendarHeader({
   scrollMode,
   onPrev,
   onNext,
+  disableWeekDays,
 }: {
   scrollMode: 'horizontal' | 'vertical'
   onPrev: () => any
   onNext: () => any
+  disableWeekDays?: DisableWeekDaysType
 }) {
   const theme = useTheme()
   const isHorizontal = scrollMode === 'horizontal'
@@ -54,7 +57,7 @@ function CalendarHeader({
           </View>
         </View>
       ) : null}
-      <DayNames />
+      <DayNames disableWeekDays={disableWeekDays} />
     </View>
   )
 }