Skip to content

Commit

Permalink
Add props selectedRangeStartTextStyle & selectedRangeEndTextStyle (…
Browse files Browse the repository at this point in the history 
…#261)

Minor refactor of style variable names.
  • Loading branch information
@peacechen
peacechen committed Jan 4, 2021
1 parent 2adc8e5 commit a8295cd
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 27 deletions.
57 changes: 34 additions & 23 deletions CalendarPicker/Day.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,16 @@ export default function Day(props) {
selectedEndDate,
allowRangeSelection,
allowBackwardRangeSelect,
selectedDayStyle,
selectedDayStyle: propSelectedDayStyle,
selectedDisabledDatesTextStyle,
selectedRangeStartStyle,
selectedRangeStyle,
selectedRangeEndStyle,
textStyle,
todayTextStyle,
selectedDayTextStyle: propSelectedDayTextStyle,
selectedRangeStartTextStyle,
selectedRangeEndTextStyle,
minDate,
maxDate,
disabledDates,
Expand All @@ -40,9 +42,10 @@ export default function Day(props) {
const today = moment();

let dateOutOfRange;
let daySelectedStyle = styles.dayButton; // may be overridden depending on state
let selectedDayContainerStyle = styles.dayButton; // may be overridden depending on state
let selectedDayTextStyle = {};
let propSelectedDayStyle;
let selectedDayStyle;
let overrideOutOfRangeTextStyle;
let dateIsBeforeMin = false;
let dateIsAfterMax = false;
let dateIsDisabled = false;
Expand Down Expand Up @@ -114,7 +117,7 @@ export default function Day(props) {
// set today's style
let isToday = thisDay.isSame(today, 'day');
if (isToday) {
daySelectedStyle = styles.selectedToday;
selectedDayContainerStyle = styles.selectedToday;
// todayTextStyle prop overrides selectedDayTextColor (created via makeStyles)
selectedDayTextStyle = [todayTextStyle || styles.selectedDayLabel, propSelectedDayTextStyle];
}
Expand All @@ -138,61 +141,69 @@ export default function Day(props) {
if (isToday && customDateStyle) {
// Custom date style overrides 'today' style. It may be reset below
// by date selection styling.
daySelectedStyle = [daySelectedStyle, customDateStyle];
selectedDayContainerStyle = [styles.selectedToday, customDateStyle];
}

// set selected day style
if (!allowRangeSelection &&
selectedStartDate &&
isThisDaySameAsSelectedStart) {
daySelectedStyle = styles.selectedDay;
isThisDaySameAsSelectedStart)
{
selectedDayContainerStyle = styles.selectedDay;
selectedDayTextStyle = [styles.selectedDayLabel, isToday && todayTextStyle, propSelectedDayTextStyle];
// selectedDayStyle prop overrides selectedDayColor (created via makeStyles)
propSelectedDayStyle = selectedDayStyle || styles.selectedDayBackground;
selectedDayStyle = propSelectedDayStyle || styles.selectedDayBackground;
}

// Set selected ranges styles
if (allowRangeSelection) {
if (selectedStartDate && selectedEndDate) {
// Apply style for start date
if (isThisDaySameAsSelectedStart) {
daySelectedStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle];
selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle];
selectedDayContainerStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle];
selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle];
}
// Apply style for end date
if (isThisDaySameAsSelectedEnd) {
daySelectedStyle = [styles.endDayWrapper, selectedRangeStyle, selectedRangeEndStyle];
selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle];
selectedDayContainerStyle = [styles.endDayWrapper, selectedRangeStyle, selectedRangeEndStyle];
selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeEndTextStyle];
}
// Apply style if start date is the same as end date
if (isThisDaySameAsSelectedEnd &&
isThisDaySameAsSelectedStart &&
selectedEndDate.isSame(selectedStartDate, 'day')) {
daySelectedStyle = [styles.selectedDay, styles.selectedDayBackground, selectedRangeStyle];
selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle];
selectedEndDate.isSame(selectedStartDate, 'day'))
{
selectedDayContainerStyle = [styles.selectedDay, styles.selectedDayBackground, selectedRangeStyle];
selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle];
}
// Apply style if this day is in range
if (thisDay.isBetween(selectedStartDate, selectedEndDate, 'day')) {
daySelectedStyle = [styles.inRangeDay, selectedRangeStyle];
// Apply style for days inside of range, excluding start & end dates.
if (thisDay.isBetween(selectedStartDate, selectedEndDate, 'day', '()')) {
selectedDayContainerStyle = [styles.inRangeDay, selectedRangeStyle];
selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle];
}
}
// Apply style if start date has been selected but end date has not
if (selectedStartDate &&
!selectedEndDate &&
isThisDaySameAsSelectedStart) {
daySelectedStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle];
selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle];
isThisDaySameAsSelectedStart)
{
selectedDayContainerStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle];
selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle];
// Override out of range start day text style when minRangeDuration = 1.
// This allows selected start date's text to be styled by selectedRangeStartTextStyle
// even when it's below minRangeDuration.
overrideOutOfRangeTextStyle = selectedRangeStartTextStyle;
}
}

if (dateOutOfRange) { // selected start or end date, but not selectable now
return (
<View style={[styles.dayWrapper, customContainerStyle]}>
<View style={[customDateStyle, daySelectedStyle, propSelectedDayStyle ]}>
<View style={[customDateStyle, selectedDayContainerStyle, selectedDayStyle ]}>
<Text style={[styles.dayLabel, textStyle,
styles.disabledText, disabledDatesTextStyle,
styles.selectedDisabledText, selectedDisabledDatesTextStyle,
overrideOutOfRangeTextStyle
]}>
{ day }
</Text>
Expand All @@ -204,7 +215,7 @@ export default function Day(props) {
<View style={[styles.dayWrapper, customContainerStyle]}>
<TouchableOpacity
disabled={!enableDateChange}
style={[customDateStyle, daySelectedStyle, propSelectedDayStyle ]}
style={[customDateStyle, selectedDayContainerStyle, selectedDayStyle ]}
onPress={() => onPressDay({year, month, day}) }>
<Text style={[styles.dayLabel, textStyle, customTextStyle, selectedDayTextStyle]}>
{ day }
Expand Down
2 changes: 2 additions & 0 deletions CalendarPicker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,8 @@ export default class CalendarPicker extends Component {
textStyle: this.props.textStyle,
todayTextStyle: this.props.todayTextStyle,
selectedDayTextStyle: this.props.selectedDayTextStyle,
selectedRangeStartTextStyle: this.props.selectedRangeStartTextStyle,
selectedRangeEndTextStyle: this.props.selectedRangeEndTextStyle,
selectedDayStyle: this.props.selectedDayStyle,
selectedDisabledDatesTextStyle: this.props.selectedDisabledDatesTextStyle,
selectedRangeStartStyle: this.props.selectedRangeStartStyle,
Expand Down
11 changes: 7 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,13 @@ const styles = StyleSheet.create({
| **`selectedDayColor`** | `String` | Optional. Color for selected day |
| **`selectedDayStyle`** | `ViewStyle` | Optional. Style for selected day. May override selectedDayColor.|
| **`selectedDayTextColor`** | `String` | Optional. Text color for selected day |
| **`selectedDayTextStyle`** | `Object` | Optional. Text style for selected day |
| **`selectedRangeStartStyle`** | `ViewStyle` | Optional. Style for range selected start day. |
| **`selectedRangeEndStyle`** | `ViewStyle` | Optional. Style for range selected end day. |
| **`selectedRangeStyle`** | `ViewStyle` | Optional. Style for all days in range selection. |
| **`selectedDayTextStyle`** | `Object` | Optional. Text style for selected day (including all days in range) |
| **`selectedRangeStartTextStyle`** | `Object` | Optional. Text style for start day of range |
| **`selectedRangeEndTextStyle`** | `Object` | Optional. Text style for end day of range |
| **`selectedRangeStartStyle`** | `ViewStyle` | Optional. Container style for start day of range. |
| **`selectedRangeEndStyle`** | `ViewStyle` | Optional. Container style for end day of range. |
| **`selectedRangeStyle`** | `ViewStyle` | Optional. Container style for all days in range selection. |
| **`selectedDisabledDatesTextStyle`** | `Object` | Optional. Text style for ineligible dates during range selection. |
| **`disabledDates`** | `Array` or `Function` | Optional. Specifies dates that cannot be selected. Array of Dates, or a function that returns true for a given Moment date (apologies for the inverted logic). |
| **`disabledDatesTextStyle`** | `TextStyle` | Optional. Text styling for disabled dates. |
| **`selectedStartDate`** | `Date` | Optional. Specifies a selected Start Date. |
Expand Down

0 comments on commit a8295cd

Please sign in to comment.