From 722797717dfa8aec20439b88febf4b986a41032b Mon Sep 17 00:00:00 2001
From: Sharf Mohiuddin <111132563+SharfMohiuddin@users.noreply.github.com>
Date: Tue, 22 Aug 2023 16:16:13 +0200
Subject: [PATCH 1/7] PresentationStyle
pageSheet
---
src/Date/DatePickerModal.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/Date/DatePickerModal.tsx b/src/Date/DatePickerModal.tsx
index 7ff3f603..acef85a0 100644
--- a/src/Date/DatePickerModal.tsx
+++ b/src/Date/DatePickerModal.tsx
@@ -69,10 +69,10 @@ export function DatePickerModal(
Date: Tue, 22 Aug 2023 16:26:47 +0200
Subject: [PATCH 2/7] presentationStyle
Added the prop for presentationStyle also removed the warning of transparent if presentationStyle === 'pageSheet'
---
src/Date/DatePickerModal.tsx | 53 +++++++++++++++++++-----------------
1 file changed, 28 insertions(+), 25 deletions(-)
diff --git a/src/Date/DatePickerModal.tsx b/src/Date/DatePickerModal.tsx
index acef85a0..a5137d98 100644
--- a/src/Date/DatePickerModal.tsx
+++ b/src/Date/DatePickerModal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import * as React from 'react';
import {
Modal,
StyleSheet,
@@ -7,23 +7,24 @@ import {
View,
Platform,
StatusBar,
-} from 'react-native'
+} from 'react-native';
-import { useTheme } from 'react-native-paper'
+import { useTheme } from 'react-native-paper';
import DatePickerModalContent, {
DatePickerModalContentMultiProps,
DatePickerModalContentRangeProps,
DatePickerModalContentSingleProps,
-} from './DatePickerModalContent'
-import { useHeaderBackgroundColor, useHeaderColorIsLight } from '../utils'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+} from './DatePickerModalContent';
+import { useHeaderBackgroundColor, useHeaderColorIsLight } from '../utils';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
interface DatePickerModalProps {
- visible: boolean
- animationType?: 'slide' | 'fade' | 'none'
- disableStatusBar?: boolean
- disableStatusBarPadding?: boolean
- inputEnabled?: boolean
+ visible: boolean;
+ animationType?: 'slide' | 'fade' | 'none';
+ disableStatusBar?: boolean;
+ disableStatusBarPadding?: boolean;
+ inputEnabled?: boolean;
+ presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';
}
export interface DatePickerModalSingleProps
@@ -44,35 +45,36 @@ export function DatePickerModal(
| DatePickerModalSingleProps
| DatePickerModalMultiProps
) {
- const theme = useTheme()
- const dimensions = useWindowDimensions()
+ const theme = useTheme();
+ const dimensions = useWindowDimensions();
const {
visible,
animationType,
disableStatusBar,
disableStatusBarPadding,
inputEnabled,
+ presentationStyle,
...rest
- } = props
+ } = props;
const animationTypeCalculated =
animationType ||
Platform.select({
web: 'none',
default: 'slide',
- })
-
- const isLight = useHeaderColorIsLight()
- const headerBackgroundColor = useHeaderBackgroundColor()
- const insets = useSafeAreaInsets()
+ });
+ const isLight = useHeaderColorIsLight();
+ const headerBackgroundColor = useHeaderBackgroundColor();
+ const insets = useSafeAreaInsets();
+ const isTransparent = presentationStyle === 'pageSheet' ? false : true;
return (
- )
+ );
}
+
const supportedOrientations: any = [
'portrait',
'portrait-upside-down',
'landscape',
'landscape-left',
'landscape-right',
-]
+];
const styles = StyleSheet.create({
modalRoot: {
@@ -154,6 +157,6 @@ const styles = StyleSheet.create({
width: '100%',
overflow: 'hidden',
},
-})
+});
-export default React.memo(DatePickerModal)
+export default React.memo(DatePickerModal);
From a3fa81c3ded154fa4e1a3e4529fbdd32b6e602dd Mon Sep 17 00:00:00 2001
From: Sharf Mohiuddin <111132563+SharfMohiuddin@users.noreply.github.com>
Date: Thu, 24 Aug 2023 12:20:54 +0200
Subject: [PATCH 3/7] Right prettier, presentationStyle
Used the right prettier and removed the ; from the code.
---
src/Date/DatePickerModal.tsx | 81 +++++++++++++++++-------------------
1 file changed, 39 insertions(+), 42 deletions(-)
diff --git a/src/Date/DatePickerModal.tsx b/src/Date/DatePickerModal.tsx
index a5137d98..33cde6c4 100644
--- a/src/Date/DatePickerModal.tsx
+++ b/src/Date/DatePickerModal.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from 'react'
import {
Modal,
StyleSheet,
@@ -6,25 +6,25 @@ import {
useWindowDimensions,
View,
Platform,
- StatusBar,
-} from 'react-native';
+ StatusBar
+} from 'react-native'
-import { useTheme } from 'react-native-paper';
+import { useTheme } from 'react-native-paper'
import DatePickerModalContent, {
DatePickerModalContentMultiProps,
DatePickerModalContentRangeProps,
- DatePickerModalContentSingleProps,
-} from './DatePickerModalContent';
-import { useHeaderBackgroundColor, useHeaderColorIsLight } from '../utils';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+ DatePickerModalContentSingleProps
+} from './DatePickerModalContent'
+import { useHeaderBackgroundColor, useHeaderColorIsLight } from '../utils'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
interface DatePickerModalProps {
- visible: boolean;
- animationType?: 'slide' | 'fade' | 'none';
- disableStatusBar?: boolean;
- disableStatusBarPadding?: boolean;
- inputEnabled?: boolean;
- presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';
+ visible: boolean
+ animationType?: 'slide' | 'fade' | 'none'
+ disableStatusBar?: boolean
+ disableStatusBarPadding?: boolean
+ inputEnabled?: boolean
+ presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'
}
export interface DatePickerModalSingleProps
@@ -45,8 +45,8 @@ export function DatePickerModal(
| DatePickerModalSingleProps
| DatePickerModalMultiProps
) {
- const theme = useTheme();
- const dimensions = useWindowDimensions();
+ const theme = useTheme()
+ const dimensions = useWindowDimensions()
const {
visible,
animationType,
@@ -55,18 +55,18 @@ export function DatePickerModal(
inputEnabled,
presentationStyle,
...rest
- } = props;
+ } = props
const animationTypeCalculated =
animationType ||
Platform.select({
web: 'none',
- default: 'slide',
- });
+ default: 'slide'
+ })
- const isLight = useHeaderColorIsLight();
- const headerBackgroundColor = useHeaderBackgroundColor();
- const insets = useSafeAreaInsets();
- const isTransparent = presentationStyle === 'pageSheet' ? false : true;
+ const isLight = useHeaderColorIsLight()
+ const headerBackgroundColor = useHeaderBackgroundColor()
+ const insets = useSafeAreaInsets()
+ const isTransparent = presentationStyle === 'pageSheet' ? false : true
return (
-
+
650 ? styles.modalContentBig : null,
+ dimensions.width > 650 ? styles.modalContentBig : null
]}
>
{disableStatusBar ? null : (
@@ -111,8 +108,8 @@ export function DatePickerModal(
style={[
{
height: insets.top,
- backgroundColor: headerBackgroundColor,
- },
+ backgroundColor: headerBackgroundColor
+ }
]}
/>
)}
@@ -126,7 +123,7 @@ export function DatePickerModal(
- );
+ )
}
const supportedOrientations: any = [
@@ -134,29 +131,29 @@ const supportedOrientations: any = [
'portrait-upside-down',
'landscape',
'landscape-left',
- 'landscape-right',
-];
+ 'landscape-right'
+]
const styles = StyleSheet.create({
modalRoot: {
justifyContent: 'center',
alignItems: 'center',
- flex: 1,
+ flex: 1
},
modalBackground: {
- flex: 1,
+ flex: 1
},
modalContent: {
flex: 1,
- width: '100%',
+ width: '100%'
},
modalContentBig: {
maxWidth: 600,
maxHeight: 800,
borderRadius: 10,
width: '100%',
- overflow: 'hidden',
- },
-});
+ overflow: 'hidden'
+ }
+})
-export default React.memo(DatePickerModal);
+export default React.memo(DatePickerModal)
From 417938d512a647ffbfd4b651feeacb7762b70f39 Mon Sep 17 00:00:00 2001
From: Sharf Mohiuddin <111132563+SharfMohiuddin@users.noreply.github.com>
Date: Thu, 24 Aug 2023 13:31:27 +0200
Subject: [PATCH 4/7] Error fixed
---
src/Date/DatePickerModal.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/Date/DatePickerModal.tsx b/src/Date/DatePickerModal.tsx
index 33cde6c4..7fafd4a0 100644
--- a/src/Date/DatePickerModal.tsx
+++ b/src/Date/DatePickerModal.tsx
@@ -8,7 +8,6 @@ import {
Platform,
StatusBar
} from 'react-native'
-
import { useTheme } from 'react-native-paper'
import DatePickerModalContent, {
DatePickerModalContentMultiProps,
From 59de956f7177c1c9d960f8747d7cd6cb1bbcf72d Mon Sep 17 00:00:00 2001
From: Sharf Mohiuddin <111132563+SharfMohiuddin@users.noreply.github.com>
Date: Thu, 24 Aug 2023 14:05:01 +0200
Subject: [PATCH 5/7] formate error fixed
---
src/Date/DatePickerModal.tsx | 37 +++++++++++++++++++++---------------
1 file changed, 22 insertions(+), 15 deletions(-)
diff --git a/src/Date/DatePickerModal.tsx b/src/Date/DatePickerModal.tsx
index 7fafd4a0..fe0b6f00 100644
--- a/src/Date/DatePickerModal.tsx
+++ b/src/Date/DatePickerModal.tsx
@@ -6,13 +6,13 @@ import {
useWindowDimensions,
View,
Platform,
- StatusBar
+ StatusBar,
} from 'react-native'
import { useTheme } from 'react-native-paper'
import DatePickerModalContent, {
DatePickerModalContentMultiProps,
DatePickerModalContentRangeProps,
- DatePickerModalContentSingleProps
+ DatePickerModalContentSingleProps,
} from './DatePickerModalContent'
import { useHeaderBackgroundColor, useHeaderColorIsLight } from '../utils'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -23,7 +23,11 @@ interface DatePickerModalProps {
disableStatusBar?: boolean
disableStatusBarPadding?: boolean
inputEnabled?: boolean
- presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'
+ presentationStyle?:
+ | 'fullScreen'
+ | 'pageSheet'
+ | 'formSheet'
+ | 'overFullScreen'
}
export interface DatePickerModalSingleProps
@@ -59,7 +63,7 @@ export function DatePickerModal(
animationType ||
Platform.select({
web: 'none',
- default: 'slide'
+ default: 'slide',
})
const isLight = useHeaderColorIsLight()
@@ -84,16 +88,19 @@ export function DatePickerModal(
style={[
StyleSheet.absoluteFill,
styles.modalBackground,
- { backgroundColor: theme.colors.backdrop }
+ { backgroundColor: theme.colors.backdrop },
]}
/>
-
+
650 ? styles.modalContentBig : null
+ dimensions.width > 650 ? styles.modalContentBig : null,
]}
>
{disableStatusBar ? null : (
@@ -107,8 +114,8 @@ export function DatePickerModal(
style={[
{
height: insets.top,
- backgroundColor: headerBackgroundColor
- }
+ backgroundColor: headerBackgroundColor,
+ },
]}
/>
)}
@@ -130,29 +137,29 @@ const supportedOrientations: any = [
'portrait-upside-down',
'landscape',
'landscape-left',
- 'landscape-right'
+ 'landscape-right',
]
const styles = StyleSheet.create({
modalRoot: {
justifyContent: 'center',
alignItems: 'center',
- flex: 1
+ flex: 1,
},
modalBackground: {
- flex: 1
+ flex: 1,
},
modalContent: {
flex: 1,
- width: '100%'
+ width: '100%',
},
modalContentBig: {
maxWidth: 600,
maxHeight: 800,
borderRadius: 10,
width: '100%',
- overflow: 'hidden'
- }
+ overflow: 'hidden',
+ },
})
export default React.memo(DatePickerModal)
From 6babb040b8552a439f3b7e150e4f5a5d24a1b797 Mon Sep 17 00:00:00 2001
From: Sharf Mohiuddin <111132563+SharfMohiuddin@users.noreply.github.com>
Date: Mon, 28 Aug 2023 09:37:21 +0200
Subject: [PATCH 6/7] Usage of presentationStyle prop added in documentation
---
.../docs/date-picker/input-date-picker.md | 25 +++++++----
.../docs/date-picker/multiple-dates-picker.md | 41 +++++++++++-------
.../docs/date-picker/range-date-picker.md | 42 ++++++++++++-------
.../docs/date-picker/single-date-picker.md | 39 ++++++++++-------
4 files changed, 97 insertions(+), 50 deletions(-)
diff --git a/docusaurus/docs/date-picker/input-date-picker.md b/docusaurus/docs/date-picker/input-date-picker.md
index e11abd64..3e9eb142 100644
--- a/docusaurus/docs/date-picker/input-date-picker.md
+++ b/docusaurus/docs/date-picker/input-date-picker.md
@@ -9,17 +9,17 @@ The input date picker provides a text field allowing for a date to be input or t
## Usage
```jsx
-import React from "react";
-import { View, Text } from "react-native";
-import { DatePickerInput } from 'react-native-paper-dates';
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import React from 'react'
+import { View, Text } from 'react-native'
+import { DatePickerInput } from 'react-native-paper-dates'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
export default function App() {
const [inputDate, setInputDate] = React.useState(undefined)
return (
-
+
- );
+ )
}
```
@@ -103,4 +103,15 @@ The end year when the component is rendered. Defaults to `2200`.
`Type: boolean | undefined`
Flag indicating if the component should be enabled or not. Behavior similarly to `disabled`. Defaults to `true`.
-* Other [react-native TextInput props](https://reactnative.dev/docs/textinput#props).*
+**presentationStyle**
+`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
+
+- `'fullScreen'`: Presents the modal as a full-screen overlay.
+- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
+- `'formSheet'`: Renders the modal as a smaller form-style sheet.
+- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
+
+For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.
+
+- Other [react-native TextInput props](https://reactnative.dev/docs/textinput#props).\*
diff --git a/docusaurus/docs/date-picker/multiple-dates-picker.md b/docusaurus/docs/date-picker/multiple-dates-picker.md
index 0cefccba..2dc4e2ef 100644
--- a/docusaurus/docs/date-picker/multiple-dates-picker.md
+++ b/docusaurus/docs/date-picker/multiple-dates-picker.md
@@ -9,29 +9,29 @@ The multiple dates picker provides a modal allowing for multiple dates selection
## Usage
```jsx
-import React from "react";
-import { View, Text } from "react-native";
-import { Button } from 'react-native-paper';
-import { DatePickerModal } from 'react-native-paper-dates';
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import React from 'react'
+import { View, Text } from 'react-native'
+import { Button } from 'react-native-paper'
+import { DatePickerModal } from 'react-native-paper-dates'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
export default function App() {
- const [dates, setDates] = React.useState();
- const [open, setOpen] = React.useState(false);
+ const [dates, setDates] = React.useState()
+ const [open, setOpen] = React.useState(false)
const onDismiss = React.useCallback(() => {
- setOpen(false);
- }, [setOpen]);
+ setOpen(false)
+ }, [setOpen])
const onConfirm = React.useCallback((params) => {
- setOpen(false);
- setDates(params.dates);
- console.log('[on-change-multi]', params);
- }, []);
+ setOpen(false)
+ setDates(params.dates)
+ console.log('[on-change-multi]', params)
+ }, [])
return (
-
+
@@ -45,7 +45,7 @@ export default function App() {
/>
- );
+ )
}
```
@@ -142,3 +142,14 @@ The edit icon used to toggle between calendar and input. Defaults to `pencil`. Y
**calendarIcon**
`Type: string | undefined`
The edit icon used to toggle between input and calendar. Defaults to `calendar`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).
+
+**presentationStyle**
+`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
+
+- `'fullScreen'`: Presents the modal as a full-screen overlay.
+- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
+- `'formSheet'`: Renders the modal as a smaller form-style sheet.
+- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
+
+For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.
diff --git a/docusaurus/docs/date-picker/range-date-picker.md b/docusaurus/docs/date-picker/range-date-picker.md
index c9ed7ef6..2ba766b6 100644
--- a/docusaurus/docs/date-picker/range-date-picker.md
+++ b/docusaurus/docs/date-picker/range-date-picker.md
@@ -9,31 +9,34 @@ The range date picker provides a modal allowing the selection of a date range.
## Usage
```jsx
-import React from "react";
-import { View, Text } from "react-native";
-import { Button } from 'react-native-paper';
-import { DatePickerModal } from 'react-native-paper-dates';
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import React from 'react'
+import { View, Text } from 'react-native'
+import { Button } from 'react-native-paper'
+import { DatePickerModal } from 'react-native-paper-dates'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
export default function App() {
- const [range, setRange] = React.useState({ startDate: undefined, endDate: undefined });
- const [open, setOpen] = React.useState(false);
+ const [range, setRange] = React.useState({
+ startDate: undefined,
+ endDate: undefined,
+ })
+ const [open, setOpen] = React.useState(false)
const onDismiss = React.useCallback(() => {
- setOpen(false);
- }, [setOpen]);
+ setOpen(false)
+ }, [setOpen])
const onConfirm = React.useCallback(
({ startDate, endDate }) => {
- setOpen(false);
- setRange({ startDate, endDate });
+ setOpen(false)
+ setRange({ startDate, endDate })
},
[setOpen, setRange]
- );
+ )
return (
-
+
@@ -48,7 +51,7 @@ export default function App() {
/>
- );
+ )
}
```
@@ -149,3 +152,14 @@ The edit icon used to toggle between input and calendar. Defaults to `calendar`.
**inputEnabled**
`Type: boolean | undefined`
Flag indicating if the component should be enabled or not. Defaults to `true`.
+
+**presentationStyle**
+`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
+
+- `'fullScreen'`: Presents the modal as a full-screen overlay.
+- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
+- `'formSheet'`: Renders the modal as a smaller form-style sheet.
+- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
+
+For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.
diff --git a/docusaurus/docs/date-picker/single-date-picker.md b/docusaurus/docs/date-picker/single-date-picker.md
index ade155f5..f1a806b7 100644
--- a/docusaurus/docs/date-picker/single-date-picker.md
+++ b/docusaurus/docs/date-picker/single-date-picker.md
@@ -9,31 +9,31 @@ The single date picker provides a modal allowing only a single date selection.
## Usage
```jsx
-import React from "react";
-import { View, Text } from "react-native";
-import { Button } from 'react-native-paper';
-import { DatePickerModal } from 'react-native-paper-dates';
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import React from 'react'
+import { View, Text } from 'react-native'
+import { Button } from 'react-native-paper'
+import { DatePickerModal } from 'react-native-paper-dates'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
export default function App() {
- const [date, setDate] = React.useState(undefined);
- const [open, setOpen] = React.useState(false);
+ const [date, setDate] = React.useState(undefined)
+ const [open, setOpen] = React.useState(false)
const onDismissSingle = React.useCallback(() => {
- setOpen(false);
- }, [setOpen]);
+ setOpen(false)
+ }, [setOpen])
const onConfirmSingle = React.useCallback(
(params) => {
- setOpen(false);
- setDate(params.date);
+ setOpen(false)
+ setDate(params.date)
},
[setOpen, setDate]
- );
+ )
return (
-
+
@@ -47,7 +47,7 @@ export default function App() {
/>
- );
+ )
}
```
@@ -136,3 +136,14 @@ The edit icon used to toggle between input and calendar. Defaults to `calendar`.
**inputEnabled**
`Type: boolean | undefined`
Flag indicating if the component should be enabled or not. Defaults to `true`.
+
+**presentationStyle**
+`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
+
+- `'fullScreen'`: Presents the modal as a full-screen overlay.
+- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
+- `'formSheet'`: Renders the modal as a smaller form-style sheet.
+- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
+
+For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.
From b3eab65624df6dc9a2635967ad07c3fe40279142 Mon Sep 17 00:00:00 2001
From: Sharf Mohiuddin <111132563+SharfMohiuddin@users.noreply.github.com>
Date: Mon, 28 Aug 2023 10:00:34 +0200
Subject: [PATCH 7/7] Formate corrected
---
.../docs/date-picker/input-date-picker.md | 8 ++---
.../docs/date-picker/multiple-dates-picker.md | 26 ++++++++--------
.../docs/date-picker/range-date-picker.md | 31 +++++++++----------
.../docs/date-picker/single-date-picker.md | 24 +++++++-------
4 files changed, 43 insertions(+), 46 deletions(-)
diff --git a/docusaurus/docs/date-picker/input-date-picker.md b/docusaurus/docs/date-picker/input-date-picker.md
index 3e9eb142..27d66d61 100644
--- a/docusaurus/docs/date-picker/input-date-picker.md
+++ b/docusaurus/docs/date-picker/input-date-picker.md
@@ -9,10 +9,10 @@ The input date picker provides a text field allowing for a date to be input or t
## Usage
```jsx
-import React from 'react'
-import { View, Text } from 'react-native'
-import { DatePickerInput } from 'react-native-paper-dates'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
+import React from "react";
+import { View, Text } from "react-native";
+import { DatePickerInput } from 'react-native-paper-dates';
+import { SafeAreaProvider } from "react-native-safe-area-context";
export default function App() {
const [inputDate, setInputDate] = React.useState(undefined)
diff --git a/docusaurus/docs/date-picker/multiple-dates-picker.md b/docusaurus/docs/date-picker/multiple-dates-picker.md
index 2dc4e2ef..f72bff4f 100644
--- a/docusaurus/docs/date-picker/multiple-dates-picker.md
+++ b/docusaurus/docs/date-picker/multiple-dates-picker.md
@@ -9,25 +9,25 @@ The multiple dates picker provides a modal allowing for multiple dates selection
## Usage
```jsx
-import React from 'react'
-import { View, Text } from 'react-native'
-import { Button } from 'react-native-paper'
-import { DatePickerModal } from 'react-native-paper-dates'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
+import React from "react";
+import { View, Text } from "react-native";
+import { Button } from 'react-native-paper';
+import { DatePickerModal } from 'react-native-paper-dates';
+import { SafeAreaProvider } from "react-native-safe-area-context";
export default function App() {
- const [dates, setDates] = React.useState()
- const [open, setOpen] = React.useState(false)
+ const [dates, setDates] = React.useState();
+ const [open, setOpen] = React.useState(false);
const onDismiss = React.useCallback(() => {
- setOpen(false)
- }, [setOpen])
+ setOpen(false);
+ }, [setOpen]);
const onConfirm = React.useCallback((params) => {
- setOpen(false)
- setDates(params.dates)
- console.log('[on-change-multi]', params)
- }, [])
+ setOpen(false);
+ setDates(params.dates);
+ console.log('[on-change-multi]', params);
+ }, []);
return (
diff --git a/docusaurus/docs/date-picker/range-date-picker.md b/docusaurus/docs/date-picker/range-date-picker.md
index 2ba766b6..b53af359 100644
--- a/docusaurus/docs/date-picker/range-date-picker.md
+++ b/docusaurus/docs/date-picker/range-date-picker.md
@@ -9,30 +9,27 @@ The range date picker provides a modal allowing the selection of a date range.
## Usage
```jsx
-import React from 'react'
-import { View, Text } from 'react-native'
-import { Button } from 'react-native-paper'
-import { DatePickerModal } from 'react-native-paper-dates'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
+import React from "react";
+import { View, Text } from "react-native";
+import { Button } from 'react-native-paper';
+import { DatePickerModal } from 'react-native-paper-dates';
+import { SafeAreaProvider } from "react-native-safe-area-context";
export default function App() {
- const [range, setRange] = React.useState({
- startDate: undefined,
- endDate: undefined,
- })
- const [open, setOpen] = React.useState(false)
+ const [range, setRange] = React.useState({ startDate: undefined, endDate: undefined });
+ const [open, setOpen] = React.useState(false);
- const onDismiss = React.useCallback(() => {
- setOpen(false)
- }, [setOpen])
+ const onDismiss = React.useCallback(() => {
+ setOpen(false);
+ }, [setOpen]);
- const onConfirm = React.useCallback(
+ const onConfirm = React.useCallback(
({ startDate, endDate }) => {
- setOpen(false)
- setRange({ startDate, endDate })
+ setOpen(false);
+ setRange({ startDate, endDate });
},
[setOpen, setRange]
- )
+ );
return (
diff --git a/docusaurus/docs/date-picker/single-date-picker.md b/docusaurus/docs/date-picker/single-date-picker.md
index f1a806b7..6955d06b 100644
--- a/docusaurus/docs/date-picker/single-date-picker.md
+++ b/docusaurus/docs/date-picker/single-date-picker.md
@@ -9,27 +9,27 @@ The single date picker provides a modal allowing only a single date selection.
## Usage
```jsx
-import React from 'react'
-import { View, Text } from 'react-native'
-import { Button } from 'react-native-paper'
-import { DatePickerModal } from 'react-native-paper-dates'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
+import React from "react";
+import { View, Text } from "react-native";
+import { Button } from 'react-native-paper';
+import { DatePickerModal } from 'react-native-paper-dates';
+import { SafeAreaProvider } from "react-native-safe-area-context";
export default function App() {
- const [date, setDate] = React.useState(undefined)
- const [open, setOpen] = React.useState(false)
+ const [date, setDate] = React.useState(undefined);
+ const [open, setOpen] = React.useState(false);
const onDismissSingle = React.useCallback(() => {
- setOpen(false)
- }, [setOpen])
+ setOpen(false);
+ }, [setOpen]);
const onConfirmSingle = React.useCallback(
(params) => {
- setOpen(false)
- setDate(params.date)
+ setOpen(false);
+ setDate(params.date);
},
[setOpen, setDate]
- )
+ );
return (