feat: explicit animation type

Closes #21
web-ridge · Nov 10, 2020 · 2df57d3 · 2df57d3
1 parent 31184da
commit 2df57d3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -67,6 +67,7 @@ function SingleDatePage() {
         onConfirm={onChange}
         saveLabel={'Save'} // optional
         label={'Select period'} // optional
+        animationType={'slide'} // optional
       />
       <Button onPress={()=> setVisible(true)}>
         Pick date
@@ -107,6 +108,7 @@ export default function RangeDatePage() {
           label={'Select period'} // optional
           startLabel={'From'} // optional
           endLabel={'To'} // optional
+          animationType={'slide'} // optional
       />
       <Button onPress={()=> setVisible(true)}>
         Pick range

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -106,6 +106,10 @@ function App({
           label={'Select period'} // optional
           startLabel={'From'} // optional
           endLabel={'To'} // optional
+          animationType={Platform.select({
+            web: 'none',
+            default: 'slide',
+          })} // optional
         />
         <DatePickerModal
           mode="single"
@@ -115,6 +119,10 @@ function App({
           onConfirm={onChangeSingle}
           saveLabel={'Save'} // optional
           label={'Select date'} // optional
+          animationType={Platform.select({
+            web: 'none',
+            default: 'slide',
+          })} // optional
         />
 
         <TimePickerModal

diff --git a/src/Date/DatePickerModal.tsx b/src/Date/DatePickerModal.tsx
@@ -26,6 +26,7 @@ interface DatePickerModalProps extends HeaderPickProps, BaseCalendarProps {
   visible: boolean
   onDismiss: () => any
   inputFormat?: string
+  animationType?: 'slide' | 'fade' | 'none'
 }
 
 export type LocalState = {
@@ -57,7 +58,7 @@ export function DatePickerModal(
 ) {
   const theme = useTheme()
   const dimensions = useWindowDimensions()
-  const { visible, onDismiss, mode, onChange, onConfirm } = props
+  const { visible, onDismiss, mode, onChange, onConfirm, animationType } = props
   const anyProps = props as any
 
   // use local state to add only onConfirm state changes
@@ -101,7 +102,7 @@ export function DatePickerModal(
 
   return (
     <Modal
-      animationType="slide"
+      animationType={animationType}
       transparent={true}
       visible={visible}
       onRequestClose={onDismiss}