From 9be81442500fc9973af3349d4198e5904e6fdb5c Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Thu, 18 Apr 2024 13:01:59 -0600 Subject: [PATCH 01/13] added renderDay --- CalendarPicker/Day.js | 29 ++++++++++++++++------------- CalendarPicker/index.js | 1 + 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js index 8f72c6f..8080c17 100644 --- a/CalendarPicker/Day.js +++ b/CalendarPicker/Day.js @@ -41,12 +41,21 @@ export default function Day(props) { disabledDatesTextStyle, minRangeDuration, maxRangeDuration, - enableDateChange + enableDateChange, + renderDay } = props; const thisDay = new Date(year, month, day, 12); const today = new Date(); + const DayComponent = ({ style }) => { + if (renderDay) { + return renderDay({ year, month, day, date: thisDay.format('YYYY-MM-DD'), style }); + } + + return {day}; + }; + let dateOutOfRange; let computedSelectedDayStyle = styles.dayButton; // may be overridden depending on state let selectedDayTextStyle = {}; @@ -193,13 +202,11 @@ export default function Day(props) { return ( - - {day} - + ]} /> ); @@ -210,9 +217,7 @@ export default function Day(props) { disabled={!enableDateChange} style={[custom.style, computedSelectedDayStyle, selectedDayStyle]} onPress={() => onPressDay({ year, month, day })}> - - {day} - + ); @@ -229,9 +234,7 @@ export default function Day(props) { return ( - - {day} - + ); diff --git a/CalendarPicker/index.js b/CalendarPicker/index.js index 6d1887e..5f19fb6 100644 --- a/CalendarPicker/index.js +++ b/CalendarPicker/index.js @@ -415,6 +415,7 @@ export default class CalendarPicker extends Component { selectedRangeEndStyle: this.props.selectedRangeEndStyle, customDatesStyles: this.props.customDatesStyles, fontScaling: this.props.fontScaling, + renderDay: this.props.renderDay }; } From c8296ac3d7ce5164e55c6b8fa8d8943af2e75c2d Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Thu, 18 Apr 2024 13:14:40 -0600 Subject: [PATCH 02/13] update documentation --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7608f61..1d4edfe 100644 --- a/README.md +++ b/README.md @@ -138,8 +138,9 @@ const styles = StyleSheet.create({ | **`headerWrapperStyle`** | `ViewStyle` | Optional. Style for entire header controls wrapper. This contains the previous / next controls plus month & year. | | **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text. | | **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text. | -| **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. | -| **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | +| **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. +| **`renderDay`** | `JSX.Element` | Optional. Allows customization of day rendering by accepting a custom component. | +| **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | | # Styles From f66ee35a1283a5bb3b3de9b8bfea669575d16078 Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Thu, 18 Apr 2024 13:15:31 -0600 Subject: [PATCH 03/13] updated documentation --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1d4edfe..73c30e5 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ const styles = StyleSheet.create({ | **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text. | | **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text. | | **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. -| **`renderDay`** | `JSX.Element` | Optional. Allows customization of day rendering by accepting a custom component. | +| **`renderDay`** | `ReactNode` | Optional. Allows customization of day rendering by accepting a custom component. | | **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | | # Styles From 4bc6303d6bf9f228802f9878510505447b848fe6 Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Thu, 18 Apr 2024 13:25:18 -0600 Subject: [PATCH 04/13] updated readme formatting --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 73c30e5..7db1b39 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ const styles = StyleSheet.create({ | **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text. | | **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text. | | **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. -| **`renderDay`** | `ReactNode` | Optional. Allows customization of day rendering by accepting a custom component. | +| **`renderDay`** | `ReactNode` | Optional. Allows customization of day rendering by accepting a custom component. | | **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | | # Styles From 49d413d7203b997c7d3b4af0449e6f4ee140e2dc Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Thu, 18 Apr 2024 15:19:38 -0600 Subject: [PATCH 05/13] updatred readme.md --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7db1b39..e54c495 100644 --- a/README.md +++ b/README.md @@ -138,9 +138,10 @@ const styles = StyleSheet.create({ | **`headerWrapperStyle`** | `ViewStyle` | Optional. Style for entire header controls wrapper. This contains the previous / next controls plus month & year. | | **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text. | | **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text. | -| **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. -| **`renderDay`** | `ReactNode` | Optional. Allows customization of day rendering by accepting a custom component. | -| **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | | +| **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. +| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: string; day: number, month: number, year: number, style: TextStyle}` and returns JSX.Element. | | +| **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | +| # Styles From 689be046f350fb4e6760781be1cfededa9bfe778 Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Thu, 18 Apr 2024 15:20:39 -0600 Subject: [PATCH 06/13] updared readme.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e54c495..0dd9b0b 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ const styles = StyleSheet.create({ | **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text. | | **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text. | | **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. -| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: string; day: number, month: number, year: number, style: TextStyle}` and returns JSX.Element. | | +| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: string; day: number, month: number, year: number, style: TextStyle}` and returns JSX Element. | | | **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | | From f43ceb79d0cf7efa5712d59b6aea85e1bfe27cf5 Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Fri, 2 Aug 2024 11:44:37 -0600 Subject: [PATCH 07/13] updated PR feedback --- CalendarPicker/Day.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js index 8080c17..ec0b66c 100644 --- a/CalendarPicker/Day.js +++ b/CalendarPicker/Day.js @@ -42,19 +42,19 @@ export default function Day(props) { minRangeDuration, maxRangeDuration, enableDateChange, - renderDay + renderDay, } = props; const thisDay = new Date(year, month, day, 12); const today = new Date(); - const DayComponent = ({ style }) => { + const DayComponent = React.memo(({ style }) => { if (renderDay) { - return renderDay({ year, month, day, date: thisDay.format('YYYY-MM-DD'), style }); + return renderDay({ year, month, day, date: thisDay, style }); } return {day}; - }; + }); let dateOutOfRange; let computedSelectedDayStyle = styles.dayButton; // may be overridden depending on state From 1742c478c28f1996c7bed814f07e0f8f2930bb39 Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Fri, 2 Aug 2024 11:46:16 -0600 Subject: [PATCH 08/13] added trailing comma --- CalendarPicker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CalendarPicker/index.js b/CalendarPicker/index.js index 5f19fb6..9ca5186 100644 --- a/CalendarPicker/index.js +++ b/CalendarPicker/index.js @@ -415,7 +415,7 @@ export default class CalendarPicker extends Component { selectedRangeEndStyle: this.props.selectedRangeEndStyle, customDatesStyles: this.props.customDatesStyles, fontScaling: this.props.fontScaling, - renderDay: this.props.renderDay + renderDay: this.props.renderDay, }; } From a7353ebd32e58b309e53a9ec12fc44a43ecb0709 Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Fri, 2 Aug 2024 11:55:52 -0600 Subject: [PATCH 09/13] removed extra pipe --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0dd9b0b..a2e0d02 100644 --- a/README.md +++ b/README.md @@ -139,8 +139,8 @@ const styles = StyleSheet.create({ | **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text. | | **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text. | | **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. -| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: string; day: number, month: number, year: number, style: TextStyle}` and returns JSX Element. | | -| **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | +| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: string; day: number, month: number, year: number, style: TextStyle}` and returns JSX Element. | +| **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | # Styles From 316da31a1f88251b2d7f02a9bf6ec69ef940ffc5 Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Mon, 5 Aug 2024 14:28:17 -0600 Subject: [PATCH 10/13] updated readme.md rendeDay doc to reflect new Date type --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a2e0d02..22c20d7 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ const styles = StyleSheet.create({ | **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text. | | **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text. | | **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. -| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: string; day: number, month: number, year: number, style: TextStyle}` and returns JSX Element. | +| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: Date/DateFn; day: number, month: number, year: number, style: TextStyle}` and returns JSX Element. | | **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | From 2dc6ef9f7da0a99e815b180d8556c03334d5704a Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Mon, 5 Aug 2024 14:29:35 -0600 Subject: [PATCH 11/13] replace colon with comma in readme.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 22c20d7..3a1cdac 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ const styles = StyleSheet.create({ | **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text. | | **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text. | | **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. -| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: Date/DateFn; day: number, month: number, year: number, style: TextStyle}` and returns JSX Element. | +| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: Date/DateFn, day: number, month: number, year: number, style: TextStyle}` and returns JSX Element. | | **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` | From f5dda6c9540e403902cc58c28de1631dd2cdb18e Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Mon, 5 Aug 2024 14:33:02 -0600 Subject: [PATCH 12/13] moved day component outside of day --- CalendarPicker/Day.js | 43 ++++++++++++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js index 889447a..4d076e0 100644 --- a/CalendarPicker/Day.js +++ b/CalendarPicker/Day.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import { View, Text, @@ -13,6 +13,14 @@ import { isSameDay } from 'date-fns/isSameDay'; import { isWithinInterval } from 'date-fns/isWithinInterval'; import { startOfDay } from 'date-fns/startOfDay'; +const DayComponent = memo(({ style, year, month, date, renderDay }) => { + if (renderDay) { + return renderDay({ year, month, day, date, style }); + } + + return {day}; +}); + export default function Day(props) { const { day, @@ -48,14 +56,6 @@ export default function Day(props) { const thisDay = new Date(year, month, day, 12); const today = new Date(); - const DayComponent = React.memo(({ style }) => { - if (renderDay) { - return renderDay({ year, month, day, date: thisDay, style }); - } - - return {day}; - }); - let dateOutOfRange; let computedSelectedDayStyle = styles.dayButton; // may be overridden depending on state let selectedDayTextStyle = {}; @@ -205,8 +205,13 @@ export default function Day(props) { + overrideOutOfRangeTextStyle, + ]} + year={year} + month={month} + date={thisDay} + renderDay={renderDay} + /> ); @@ -217,7 +222,13 @@ export default function Day(props) { disabled={!enableDateChange} style={[custom.style, computedSelectedDayStyle, selectedDayStyle]} onPress={() => onPressDay({ year, month, day })}> - + ); @@ -234,7 +245,13 @@ export default function Day(props) { return ( - + ); From 3e2b55f2e92b88776d9c1bebf98057f71b8c2b3f Mon Sep 17 00:00:00 2001 From: Andrew McDonald Date: Mon, 19 Aug 2024 11:42:35 -0600 Subject: [PATCH 13/13] updated Day.js component --- CalendarPicker/Day.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js index 4d076e0..5e99a45 100644 --- a/CalendarPicker/Day.js +++ b/CalendarPicker/Day.js @@ -13,7 +13,7 @@ import { isSameDay } from 'date-fns/isSameDay'; import { isWithinInterval } from 'date-fns/isWithinInterval'; import { startOfDay } from 'date-fns/startOfDay'; -const DayComponent = memo(({ style, year, month, date, renderDay }) => { +const DayComponent = memo(({ style, year, month, date, day, renderDay }) => { if (renderDay) { return renderDay({ year, month, day, date, style }); } @@ -207,6 +207,7 @@ export default function Day(props) { styles.selectedDisabledText, selectedDisabledDatesTextStyle, overrideOutOfRangeTextStyle, ]} + day={day} year={year} month={month} date={thisDay} @@ -224,6 +225,7 @@ export default function Day(props) { onPress={() => onPressDay({ year, month, day })}>