From e3cff9c00e7adc2abc6f707be27aa5c3783696fe Mon Sep 17 00:00:00 2001 From: Farhoud Shapouran Date: Mon, 19 Feb 2024 22:03:54 +0300 Subject: [PATCH] fix: change CalendarViews enums to union types --- README.md | 102 ++++++++++++++++++-------------------- src/DateTimePicker.tsx | 13 +++-- src/components/Header.tsx | 43 ++++++---------- src/enums.ts | 7 +-- 4 files changed, 73 insertions(+), 92 deletions(-) diff --git a/README.md b/README.md index 326aa09..e1c918e 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ --- # react-native-ui-datepicker + [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/LICENSE) @@ -32,7 +33,7 @@ import dayjs from 'dayjs'; export default function App() { const [date, setDate] = useState(dayjs()); - + return ( setDate(params.date)} /> - ) + ); } const styles = StyleSheet.create({ @@ -56,17 +57,17 @@ For more, take a look at the `/example` directory. ![react-native-ui-datepicker-styles](https://user-images.githubusercontent.com/7857656/227260476-30ee8c25-f809-4dcf-bccf-cd1ffab8795a.jpg) - ## Calendar props -| Name | Type | Default | Description | -| ------------------------ | --------------- | --------------- | -------------------------------------------------------------------------------------- | -| mode | `string` | `'single'` | Defines the DatePicker mode `['single', 'range', 'multiple']` | -| locale | `string` | `'en'` | Defines the DatePicker locale | -| minDate | `DateType` | `null` | Defines DatePicker minimum selectable date | -| maxDate | `DateType` | `null` | Defines DatePicker maximum selectable date | -| firstDayOfWeek | `number` | `0` | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday | -| displayFullDays | `boolean` | `false` | Defines show previous and next month's days in the current calendar view | +| Name | Type | Default | Description | +| --------------- | ---------- | ---------- | ------------------------------------------------------------------------ | +| mode | `string` | `'single'` | Defines the DatePicker mode `['single', 'range', 'multiple']` | +| locale | `string` | `'en'` | Defines the DatePicker locale | +| minDate | `DateType` | `null` | Defines DatePicker minimum selectable date | +| maxDate | `DateType` | `null` | Defines DatePicker maximum selectable date | +| firstDayOfWeek | `number` | `0` | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday | +| displayFullDays | `boolean` | `false` | Defines show previous and next month's days in the current calendar view | +| initialView | `string` | `'day'` | Defines the DatePicker initial view `['day', 'month', 'year', 'time']` |

@@ -74,57 +75,52 @@ For more, take a look at the `/example` directory. ## Single Mode props -| Name | Type | Default | Description | -| ------------ | --------------- | ----------------- | -------------------------------------------------------------- | -| date | `DateType` | `undefined` | Date value to display selected date | -| onChange | `Function` | `({date}) => {}` | Called when the new date selected from DatePicker | -| timePicker | `boolean` | `false` | Defines show or hide time picker | - +| Name | Type | Default | Description | +| ---------- | ---------- | ---------------- | ------------------------------------------------- | +| date | `DateType` | `undefined` | Date value to display selected date | +| onChange | `Function` | `({date}) => {}` | Called when the new date selected from DatePicker | +| timePicker | `boolean` | `false` | Defines show or hide time picker | ## Range Mode props -| Name | Type | Default | Description | -| ------------ | --------------- | -------------------------------- | ----------------------------------------------------------------- | -| startDate | `DateType` | `undefined` | Start date value to display selected start date | -| endDate | `DateType` | `undefined` | End date value to display selected end date | -| onChange | `Function` | `({startDate, endDate}) => {}` | Called when the new start or end date selected from DatePicker | - +| Name | Type | Default | Description | +| --------- | ---------- | ------------------------------ | -------------------------------------------------------------- | +| startDate | `DateType` | `undefined` | Start date value to display selected start date | +| endDate | `DateType` | `undefined` | End date value to display selected end date | +| onChange | `Function` | `({startDate, endDate}) => {}` | Called when the new start or end date selected from DatePicker | ## Multiple Mode props -| Name | Type | Default | Description | -| ------------ | --------------- | ------------------ | -------------------------------------------------------------- | -| dates | `DateType[]` | `[]` | Dates array to display selected dates | -| onChange | `Function` | `({dates}) => {}` | Called when the new dates selected from DatePicker | - +| Name | Type | Default | Description | +| -------- | ------------ | ----------------- | -------------------------------------------------- | +| dates | `DateType[]` | `[]` | Dates array to display selected dates | +| onChange | `Function` | `({dates}) => {}` | Called when the new dates selected from DatePicker | ## Styling props -| Name | Type | Default | Description | -| ------------------------ | --------------- | --------------- | -------------------------------------------------------------------------------------- | -| calendarTextStyle | `TextStyle` | `null` | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) | -| selectedTextStyle | `TextStyle` | `null` | Defines selected (Day, Month, Year) text styles | -| selectedItemColor | `string` | `'#0047FF'` | Defines selected (Day, Month, Year) background and border colors | -| headerContainerStyle | `ViewStyle` | `null` | Defines calendar header container style | -| headerTextContainerStyle | `ViewStyle` | `null` | Defines calendar header texts (Month, Year, Time) containers style | -| headerTextStyle | `TextStyle` | `null` | Defines calendar header text styles (Month, Year, Time) | -| headerButtonStyle | `ViewStyle` | `null` | Defines calendar header "prev and next buttons" containers style | -| headerButtonColor | `string` | `null` | Defines calendar header "prev and next buttons" icon color | -| headerButtonSize | `number` | `18` | Defines calendar header "prev and next buttons" icon size | -| headerButtonsPosition | `string` | `'around'` | Defines calendar header "prev and next buttons" positions `['around', 'right', 'left']`| -| buttonPrevIcon | `ReactNode` | `undefined` | Defines calendar header "prev button" custom icon | -| buttonNextIcon | `ReactNode` | `undefined` | Defines calendar header "next button" custom icon | -| dayContainerStyle | `ViewStyle` | `null` | Defines days containers style | -| todayContainerStyle | `ViewStyle` | `null` | Defines today container style | -| todayTextStyle | `TextStyle` | `null` | Defines today text style | -| monthContainerStyle | `ViewStyle` | `null` | Defines months containers style | -| yearContainerStyle | `ViewStyle` | `null` | Defines years containers style | -| weekDaysContainerStyle | `ViewStyle` | `null` | Defines weekdays container style | -| weekDaysTextStyle | `TextStyle` | `null` | Defines weekdays texts style | -| timePickerContainerStyle | `ViewStyle` | `null` | Defines time picker container style | -| timePickerTextStyle | `TextStyle` | `null` | Defines time picker (Hours, Minutes) texts style | - - +| Name | Type | Default | Description | +| ------------------------ | ----------- | ----------- | --------------------------------------------------------------------------------------- | +| calendarTextStyle | `TextStyle` | `null` | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) | +| selectedTextStyle | `TextStyle` | `null` | Defines selected (Day, Month, Year) text styles | +| selectedItemColor | `string` | `'#0047FF'` | Defines selected (Day, Month, Year) background and border colors | +| headerContainerStyle | `ViewStyle` | `null` | Defines calendar header container style | +| headerTextContainerStyle | `ViewStyle` | `null` | Defines calendar header texts (Month, Year, Time) containers style | +| headerTextStyle | `TextStyle` | `null` | Defines calendar header text styles (Month, Year, Time) | +| headerButtonStyle | `ViewStyle` | `null` | Defines calendar header "prev and next buttons" containers style | +| headerButtonColor | `string` | `null` | Defines calendar header "prev and next buttons" icon color | +| headerButtonSize | `number` | `18` | Defines calendar header "prev and next buttons" icon size | +| headerButtonsPosition | `string` | `'around'` | Defines calendar header "prev and next buttons" positions `['around', 'right', 'left']` | +| buttonPrevIcon | `ReactNode` | `undefined` | Defines calendar header "prev button" custom icon | +| buttonNextIcon | `ReactNode` | `undefined` | Defines calendar header "next button" custom icon | +| dayContainerStyle | `ViewStyle` | `null` | Defines days containers style | +| todayContainerStyle | `ViewStyle` | `null` | Defines today container style | +| todayTextStyle | `TextStyle` | `null` | Defines today text style | +| monthContainerStyle | `ViewStyle` | `null` | Defines months containers style | +| yearContainerStyle | `ViewStyle` | `null` | Defines years containers style | +| weekDaysContainerStyle | `ViewStyle` | `null` | Defines weekdays container style | +| weekDaysTextStyle | `TextStyle` | `null` | Defines weekdays texts style | +| timePickerContainerStyle | `ViewStyle` | `null` | Defines time picker container style | +| timePickerTextStyle | `TextStyle` | `null` | Defines time picker (Hours, Minutes) texts style | ## Contributing diff --git a/src/DateTimePicker.tsx b/src/DateTimePicker.tsx index f0f7eaf..c871eda 100644 --- a/src/DateTimePicker.tsx +++ b/src/DateTimePicker.tsx @@ -78,10 +78,15 @@ const DateTimePicker = ( endDate, dates, onChange, - initialView = CalendarViews.day, + initialView = 'day', ...rest } = props; + const initialCalendarView: CalendarViews = + mode !== 'single' && initialView === 'time' ? 'day' : initialView; + + console.log(initialCalendarView); + const firstDay = firstDayOfWeek && firstDayOfWeek > 0 && firstDayOfWeek <= 6 ? firstDayOfWeek @@ -150,7 +155,7 @@ const DateTimePicker = ( startDate, endDate, dates, - calendarView: initialView, + calendarView: initialCalendarView, currentDate, currentYear, } @@ -240,7 +245,7 @@ const DateTimePicker = ( }); dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, - payload: CalendarViews.day, + payload: 'day', }); }, [state.currentDate] @@ -255,7 +260,7 @@ const DateTimePicker = ( }); dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, - payload: CalendarViews.day, + payload: 'day', }); }, [state.currentDate] diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 88bf701..78f668f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -2,7 +2,6 @@ import React, { useCallback } from 'react'; import { View, Text, Pressable, StyleSheet, Image } from 'react-native'; import { useCalendarContext } from '../CalendarContext'; import dayjs from 'dayjs'; -import { CalendarViews } from '../enums'; import type { HeaderProps } from '../types'; import { getDateYear, getYearRange, YEAR_PAGE_SIZE } from '../utils'; @@ -28,13 +27,13 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => { const renderPrevButton = ( - calendarView === CalendarViews.day + calendarView === 'day' ? onChangeMonth(-1) - : calendarView === CalendarViews.month + : calendarView === 'month' ? onChangeYear(currentYear - 1) - : calendarView === CalendarViews.year && + : calendarView === 'year' && onChangeYear(currentYear - YEAR_PAGE_SIZE) } testID="btn-prev" @@ -60,13 +59,13 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => { const renderNextButton = ( - calendarView === CalendarViews.day + calendarView === 'day' ? onChangeMonth(1) - : calendarView === CalendarViews.month + : calendarView === 'month' ? onChangeYear(currentYear + 1) - : calendarView === CalendarViews.year && + : calendarView === 'year' && onChangeYear(currentYear + YEAR_PAGE_SIZE) } testID="btn-next" @@ -95,11 +94,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => { return ( { - setCalendarView( - calendarView === CalendarViews.year - ? CalendarViews.day - : CalendarViews.year - ); + setCalendarView(calendarView === 'year' ? 'day' : 'year'); onChangeYear(getDateYear(currentDate)); }} testID="btn-year" @@ -108,7 +103,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => { > - {calendarView === CalendarViews.year + {calendarView === 'year' ? `${years.at(0)} - ${years.at(-1)}` : dayjs(currentDate).format('YYYY')} @@ -127,11 +122,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => { const monthSelector = ( - setCalendarView( - calendarView === CalendarViews.month - ? CalendarViews.day - : CalendarViews.month - ) + setCalendarView(calendarView === 'month' ? 'day' : 'month') } testID="btn-month" accessibilityRole="button" @@ -148,19 +139,13 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => { const renderSelectors = ( <> - {calendarView !== CalendarViews.year ? monthSelector : null} + {calendarView !== 'year' ? monthSelector : null} {yearSelector()} - {timePicker && - mode === 'single' && - calendarView !== CalendarViews.year ? ( + {timePicker && mode === 'single' && calendarView !== 'year' ? ( - setCalendarView( - calendarView === CalendarViews.time - ? CalendarViews.day - : CalendarViews.time - ) + setCalendarView(calendarView === 'time' ? 'day' : 'time') } accessibilityRole="button" accessibilityLabel={dayjs(date).format('HH:mm')} diff --git a/src/enums.ts b/src/enums.ts index 79193ce..7b12dd6 100644 --- a/src/enums.ts +++ b/src/enums.ts @@ -1,9 +1,4 @@ -export enum CalendarViews { - day = 'day', - month = 'month', - year = 'year', - time = 'time', -} +export type CalendarViews = 'day' | 'month' | 'year' | 'time'; export enum CalendarActionKind { SET_CALENDAR_VIEW = 'SET_CALENDAR_VIEW',