Skip to content

Commit

Permalink
fix: change CalendarViews enums to union types
Browse files Browse the repository at this point in the history
  • Loading branch information
@farhoudshapouran
farhoudshapouran committed Feb 19, 2024
1 parent 5d2b2ac commit e3cff9c
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 92 deletions.
102 changes: 49 additions & 53 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -32,7 +33,7 @@ import dayjs from 'dayjs';

export default function App() {
const [date, setDate] = useState(dayjs());

return (
<View style={styles.container}>
<DateTimePicker
Expand All @@ -41,7 +42,7 @@ export default function App() {
onChange={(params) => setDate(params.date)}
/>
</View>
)
);
}

const styles = StyleSheet.create({
Expand All @@ -56,75 +57,70 @@ 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']` |

<p align="center">
<img src="/.github/images/modes-screenshot.png" />
</p>

## 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

Expand Down
13 changes: 9 additions & 4 deletions src/DateTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -150,7 +155,7 @@ const DateTimePicker = (
startDate,
endDate,
dates,
calendarView: initialView,
calendarView: initialCalendarView,
currentDate,
currentYear,
}
Expand Down Expand Up @@ -240,7 +245,7 @@ const DateTimePicker = (
});
dispatch({
type: CalendarActionKind.SET_CALENDAR_VIEW,
payload: CalendarViews.day,
payload: 'day',
});
},
[state.currentDate]
Expand All @@ -255,7 +260,7 @@ const DateTimePicker = (
});
dispatch({
type: CalendarActionKind.SET_CALENDAR_VIEW,
payload: CalendarViews.day,
payload: 'day',
});
},
[state.currentDate]
Expand Down
43 changes: 14 additions & 29 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -28,13 +27,13 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {

const renderPrevButton = (
<Pressable
disabled={calendarView === CalendarViews.time}
disabled={calendarView === 'time'}
onPress={() =>
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"
Expand All @@ -60,13 +59,13 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {

const renderNextButton = (
<Pressable
disabled={calendarView === CalendarViews.time}
disabled={calendarView === 'time'}
onPress={() =>
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"
Expand Down Expand Up @@ -95,11 +94,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
return (
<Pressable
onPress={() => {
setCalendarView(
calendarView === CalendarViews.year
? CalendarViews.day
: CalendarViews.year
);
setCalendarView(calendarView === 'year' ? 'day' : 'year');
onChangeYear(getDateYear(currentDate));
}}
testID="btn-year"
Expand All @@ -108,7 +103,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
>
<View style={[styles.textContainer, theme?.headerTextContainerStyle]}>
<Text style={[styles.text, theme?.headerTextStyle]}>
{calendarView === CalendarViews.year
{calendarView === 'year'
? `${years.at(0)} - ${years.at(-1)}`
: dayjs(currentDate).format('YYYY')}
</Text>
Expand All @@ -127,11 +122,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
const monthSelector = (
<Pressable
onPress={() =>
setCalendarView(
calendarView === CalendarViews.month
? CalendarViews.day
: CalendarViews.month
)
setCalendarView(calendarView === 'month' ? 'day' : 'month')
}
testID="btn-month"
accessibilityRole="button"
Expand All @@ -148,19 +139,13 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
const renderSelectors = (
<>
<View style={styles.selectorContainer}>
{calendarView !== CalendarViews.year ? monthSelector : null}
{calendarView !== 'year' ? monthSelector : null}
{yearSelector()}
</View>
{timePicker &&
mode === 'single' &&
calendarView !== CalendarViews.year ? (
{timePicker && mode === 'single' && calendarView !== 'year' ? (
<Pressable
onPress={() =>
setCalendarView(
calendarView === CalendarViews.time
? CalendarViews.day
: CalendarViews.time
)
setCalendarView(calendarView === 'time' ? 'day' : 'time')
}
accessibilityRole="button"
accessibilityLabel={dayjs(date).format('HH:mm')}
Expand Down
7 changes: 1 addition & 6 deletions src/enums.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand Down

0 comments on commit e3cff9c

Please sign in to comment.