Skip to content

Commit

Permalink
Merge branch 'farhoudshapouran:main' into fix-style-on-selected-range
Browse files Browse the repository at this point in the history
  • Loading branch information
@zdinidz
zdinidz authored Sep 10, 2024
2 parents d764f2c + 334bcf7 commit 4abc1fb
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 29 deletions.
51 changes: 26 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,31 +99,32 @@ For more, take a look at the `/example` directory.

## 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 |
| timePickerIndicatorStyle | `ViewStyle` | `null` | Defines selected time indicator style |
| timePickerDecelerationRate | `'normal'`, `'fast'`, `number` | `'fast'` | Defines how quickly the underlying scroll view decelerates after the user lifts their finger. |
| 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 |
| timePickerIndicatorStyle | `ViewStyle` | `null` | Defines selected time indicator style |
| timePickerDecelerationRate | `'normal'`, `'fast'`, `number` | `'fast'` | Defines how quickly the underlying scroll view decelerates after the user lifts their finger. |
| selectedRangeBackgroundColor | `string` | `undefined` | Defines selected range background color. |

## Contributing

Expand Down
9 changes: 7 additions & 2 deletions src/DateTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,10 @@ const DateTimePicker = (
currentDate = dayjs(dates[0]);
}

if (minDate && currentDate.isBefore(minDate)) {
currentDate = dayjs(minDate);
}

let currentYear = currentDate.year();

dayjs.locale(locale);
Expand Down Expand Up @@ -162,7 +166,8 @@ const DateTimePicker = (

useEffect(() => {
if (mode === 'single') {
const newDate = date && (timePicker ? date : getStartOfDay(date));
const newDate =
(date && (timePicker ? date : getStartOfDay(date))) ?? minDate;

dispatch({
type: CalendarActionKind.CHANGE_SELECTED_DATE,
Expand All @@ -179,7 +184,7 @@ const DateTimePicker = (
payload: { dates },
});
}
}, [mode, date, startDate, endDate, dates, timePicker]);
}, [mode, date, startDate, endDate, dates, minDate, timePicker]);

const setCalendarView = useCallback((view: CalendarViews) => {
dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, payload: view });
Expand Down
4 changes: 3 additions & 1 deletion src/components/Day.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function Day({
selectedTextStyle,
todayContainerStyle,
todayTextStyle,
selectedRangeBackgroundColor,
} = theme;

//const bothWays = inRange && leftCrop && rightCrop;
Expand Down Expand Up @@ -79,7 +80,8 @@ function Day({
}
: calendarTextStyle;

const rangeRootBackground = addColorAlpha(selectedItemColor, 0.15);
const rangeRootBackground =
selectedRangeBackgroundColor ?? addColorAlpha(selectedItemColor, 0.15);

const style = styles(height || CALENDAR_HEIGHT);

Expand Down
1 change: 1 addition & 0 deletions src/components/DaySelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ const DaySelector = () => {
let isSelected = false;

if (mode === 'range') {
rightCrop = false;
const selectedStartDay = areDatesOnSameDay(day.date, startDate);
const selectedEndDay = areDatesOnSameDay(day.date, endDate);
isSelected = selectedStartDay || selectedEndDay;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
<View style={[styles.textContainer, theme?.headerTextContainerStyle]}>
<Text style={[styles.text, theme?.headerTextStyle]}>
{calendarView === 'year'
? `${years.at(0)} - ${years.at(-1)}`
? `${years[0]} - ${years[years.length-1]}`

Check failure on line 107 in src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `-` with `·-·`
: dayjs(currentDate).format('YYYY')}
</Text>
</View>
Expand Down
1 change: 1 addition & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export type CalendarThemeProps = {
timePickerTextStyle?: TextStyle;
timePickerIndicatorStyle?: ViewStyle;
timePickerDecelerationRate?: 'normal' | 'fast' | number;
selectedRangeBackgroundColor?: string;
};

export type HeaderProps = {
Expand Down

0 comments on commit 4abc1fb

Please sign in to comment.