Add support for inline date picker

Author: RichardLindhout

example/src/App.tsx

@@ -6,6 +6,7 @@ import {
   View,
   Linking,
   Image,
+  Animated,
 } from 'react-native';
 import {
   Title,
@@ -19,7 +20,11 @@ import {
   overlay,
   Paragraph,
 } from 'react-native-paper';
-import { DatePickerModal, TimePickerModal } from '../../src';
+import {
+  DatePickerModal,
+  DatePickerModalContent,
+  TimePickerModal,
+} from '../../src';
 
 function App({
   onToggleDarkMode,
@@ -93,6 +98,11 @@ function App({
   time.hours !== undefined && timeDate.setHours(time.hours);
   time.minutes !== undefined && timeDate.setMinutes(time.minutes);
 
+  const backgroundColor =
+    theme.dark && theme.mode === 'adaptive'
+      ? overlay(3, theme.colors.surface)
+      : (theme.colors.surface as any);
+
   return (
     <>
       <ScrollView
@@ -120,15 +130,29 @@ function App({
             </Text>
           </Paragraph>
         </View>
-        <View
+        <View style={styles.content}>
+          <Button
+            uppercase={false}
+            mode="contained"
+            icon="github"
+            style={styles.twitterButton}
+            onPress={() =>
+              Linking.openURL(
+                'https://github.com/web-ridge/react-native-paper-dates'
+              )
+            }
+          >
+            GitHub
+          </Button>
+          <TwitterFollowButton userName={'RichardLindhout'} />
+          <TwitterFollowButton userName={'web_ridge'} />
+        </View>
+        <Animated.View
           style={[
             styles.content,
             styles.contentShadow,
             {
-              backgroundColor:
-                theme.dark && theme.mode === 'adaptive'
-                  ? overlay(3, theme.colors.surface)
-                  : (theme.colors.surface as any),
+              backgroundColor,
             },
           ]}
         >
@@ -198,24 +222,29 @@ function App({
           {/*<DatePickerInput />*/}
           {/*<Enter />*/}
           {/*<DateRangeInput />*/}
-        </View>
+        </Animated.View>
         <View style={styles.content}>
-          <Button
-            uppercase={false}
-            mode="contained"
-            icon="github"
-            style={styles.twitterButton}
-            onPress={() =>
-              Linking.openURL(
-                'https://github.com/web-ridge/react-native-paper-dates'
-              )
-            }
-          >
-            GitHub
-          </Button>
-          <TwitterFollowButton userName={'RichardLindhout'} />
-          <TwitterFollowButton userName={'web_ridge'} />
+          <Title>Inside page</Title>
         </View>
+        <Animated.View
+          style={[
+            styles.content,
+            styles.contentShadow,
+            styles.contentInline,
+            { backgroundColor },
+          ]}
+        >
+          <DatePickerModalContent
+            mode="range"
+            onDismiss={onDismissRange}
+            startDate={undefined}
+            endDate={undefined}
+            onConfirm={onChangeRange}
+          />
+        </Animated.View>
+        <Enter />
+        <Enter />
+        <Enter />
       </ScrollView>
       <DatePickerModal
         mode="range"
@@ -224,10 +253,10 @@ function App({
         startDate={undefined}
         endDate={undefined}
         onConfirm={onChangeRange}
-        saveLabel="Save" // optional
-        label="Select period" // optional
-        startLabel="From" // optional
-        endLabel="To" // optional
+        saveLabel="Opslaan" // optional
+        label="Selecteer periode" // optional
+        startLabel="Van" // optional
+        endLabel="Tot" // optional
         // animationType="slide" // optional, default is slide on ios/android and none on web
       />
       <DatePickerModal
@@ -281,8 +310,24 @@ export default function AppWithProviders() {
     <PaperProvider
       theme={
         dark
-          ? { ...DarkTheme, roundness: 10 }
-          : { ...DefaultTheme, roundness: 10 }
+          ? {
+              ...DarkTheme,
+              roundness: 10,
+              colors: {
+                ...DarkTheme.colors,
+                primary: '#F59E00',
+                accent: '#FBBE5E',
+              },
+            }
+          : {
+              ...DefaultTheme,
+              roundness: 10,
+              colors: {
+                ...DefaultTheme.colors,
+                primary: '#F59E00',
+                accent: '#FBBE5E',
+              },
+            }
       }
     >
       <React.Fragment>
@@ -326,12 +371,16 @@ const styles = StyleSheet.create({
   root: { flex: 1 },
   content: {
     width: '100%',
-    maxWidth: 450,
+    maxWidth: 500,
     marginTop: 24,
     padding: 24,
     alignSelf: 'center',
     flex: 1,
   },
+  contentInline: {
+    padding: 0,
+    height: 600,
+  },
   contentShadow: {
     shadowColor: '#000',
     shadowOffset: {

package.json

@@ -67,7 +67,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-native": "0.63.2",
-    "react-native-paper": "^4.0.1",
+    "react-native-paper": "^4.5.0",
     "react-window": "^1.8.5",
     "release-it": "^13.5.8",
     "typescript": "^3.8.3"

src/Date/AnimatedCrossView.tsx

@@ -3,29 +3,29 @@ import { Animated, StyleSheet, View } from 'react-native'
 import { useTheme } from 'react-native-paper'
 
 export default function AnimatedCrossView({
-  visible,
+  // visible,
   collapsed,
   calendar,
   calendarEdit,
 }: {
   calendar: any
   calendarEdit: any
-  visible: boolean
+  // visible: boolean
   collapsed: boolean
 }) {
   const theme = useTheme()
   const calendarOpacity = React.useRef<Animated.Value>(
     new Animated.Value(collapsed ? 1 : 0)
   )
   React.useEffect(() => {
-    if (visible) {
-      Animated.timing(calendarOpacity.current, {
-        toValue: collapsed ? 1 : 0,
-        duration: 250,
-        useNativeDriver: true,
-      }).start()
-    }
-  }, [visible, collapsed])
+    // if (visible) {
+    Animated.timing(calendarOpacity.current, {
+      toValue: collapsed ? 1 : 0,
+      duration: 250,
+      useNativeDriver: true,
+    }).start()
+    // }
+  }, [collapsed])
 
   return (
     <View style={styles.root}>

src/Date/Calendar.tsx

@@ -17,10 +17,6 @@ export type ModeType = 'single' | 'range'
 
 export type ScrollModeType = 'horizontal' | 'vertical'
 
-export type BaseCalendarProps = {
-  scrollMode?: ScrollModeType
-}
-
 export type CalendarDate = Date | undefined
 
 export type RangeChange = (params: {
@@ -30,14 +26,14 @@ export type RangeChange = (params: {
 
 export type SingleChange = (params: { date: CalendarDate }) => any
 
-export interface CalendarRangeProps extends BaseCalendarProps {
+export interface CalendarRangeProps {
   mode: 'range'
   startDate: CalendarDate
   endDate: CalendarDate
   onChange: RangeChange
 }
 
-export interface CalendarSingleProps extends BaseCalendarProps {
+export interface CalendarSingleProps {
   mode: 'single'
   date?: CalendarDate
   onChange: SingleChange
@@ -64,8 +60,7 @@ function Calendar(props: CalendarSingleProps | CalendarRangeProps) {
     return Color(theme.colors.primary).lighten(0.9).hex()
   }, [theme])
 
-  const detectedScrollMode = mode === 'range' ? 'vertical' : 'horizontal'
-  const scrollMode = props.scrollMode ? props.scrollMode : detectedScrollMode
+  const scrollMode = mode === 'range' ? 'vertical' : 'horizontal'
 
   const [selectedYear, setSelectedYear] = React.useState<number | undefined>(
     undefined

src/Date/CalendarEdit.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-native'
 
 import { CalendarDate, ModeType } from './Calendar'
-import { LocalState } from './DatePickerModal'
+import { LocalState } from './DatePickerModalContent'
 import TextInputWithMask from '../TextInputMask'
 import { useTheme } from 'react-native-paper'