Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

More customization options for CalendarHeader #136

Merged
merged 4 commits into from
Apr 11, 2019
Merged

More customization options for CalendarHeader #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f271ebc
More customization options for CalendarHeader
ruslanchek Apr 10, 2019
1b7ff4e
Update readme
ruslanchek Apr 10, 2019
75a3e22
Format readme
ruslanchek Apr 11, 2019
0454c0b
Update index.d.ts
ruslanchek Apr 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,9 @@ Methods may be accessed through the instantiated component's [ref](https://react
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ---------- |
| **`style`** | Style for the top level CalendarStrip component. | Any |
| **`innerStyle`** | Sh Style for the responsively sized inner view. This is necessary to account for padding/margin from the top level view. The inner view has style `flex:1` by default. If this component is nested within another dynamically sized container, remove the flex style by passing in `[]`. | Any |
| **`calendarHeaderStyle`** | Style for the header text of the calendar | Any |
| **`calendarHeaderStyle`** | Style for the header text of the calendar
| **`calendarHeaderContainerStyle`** | Style for the header text wrapper of the calendar | Any |
| **`calendarHeaderPosition`** | Position of the header text (above or below) | `above, below` | **`above`** | | Any |
| **`calendarHeaderFormat`** | Format for the header text of the calendar. For options, refere to [moments documentation](http://momentjs.com/docs/#/displaying/format/) | String |
| **`dateNameStyle`** | Style for the name of the day on work days in dates strip | Any |
| **`dateNumberStyle`** | Style for the number of the day on work days in dates strip. | Any |
Expand Down
141 changes: 93 additions & 48 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,86 @@
import { Component } from "react";
import { StyleProp, ViewStyle, TextStyle } from "react-native";
import { Component, ReactNode } from "react";
import { Duration } from "moment";
import {
StyleProp,
ViewStyle,
TextStyle,
GestureResponderEvent
} from "react-native";

declare module "react-native-calendar-strip" {
type dateRange = {
interface IDaySelectionAnimationBorder {
type: "border";
duration: number;
borderWidth: number;
borderHighlightColor: string;
animType: any;
animUpdateType: any;
animProperty: any;
animSpringDamping: any;
}

interface IDaySelectionAnimationBackground {
type: "background";
duration: number;
highlightColor: string;
animType: any;
animUpdateType: any;
animProperty: any;
animSpringDamping: any;
}

interface IDayComponentProps {
date: Duration;
marking: any;
selected: boolean;
enabled: boolean;
showDayName: boolean;
showDayNumber: boolean;
onDateSelected: (event: GestureResponderEvent) => void;
calendarColor: string;
dateNameStyle: string;
dateNumberStyle: string;
weekendDateNameStyle: TextStyle;
weekendDateNumberStyle: TextStyle;
highlightDateNameStyle: TextStyle;
highlightDateNumberStyle: TextStyle;
disabledDateNameStyle: TextStyle;
disabledDateNumberStyle: TextStyle;
markedDatesStyle: TextStyle;
disabledDateOpacity: number;
styleWeekend: boolean;
daySelectionAnimation: TDaySelectionAnimation;
customStyle: ViewStyle;
size: number;
allowDayTextScaling: boolean;
markedDates: [];
}

type TDaySelectionAnimation =
| IDaySelectionAnimationBorder
| IDaySelectionAnimationBackground;

type TDateRange = {
start: Date;
end: Date;
};

class ReactNativeCalendarStrip extends Component<
{
style: StyleProp<ViewStyle>;
innerStyle?: StyleProp<ViewStyle>;
calendarColor?: string;

startingDate: Date;
selectedDate: Date;
onDateSelected: (date: Date) => void;
startingDate?: Date;
selectedDate?: Date;
onDateSelected?: (date: Date) => void;
onWeekChanged?: (date: Date) => void;
updateWeek?: boolean;
useIsoWeekday?: boolean;
minDate: Date;
maxDate: Date;
datesWhitelist?: dateRange[];
datesBlacklist?: dateRange[];
minDate?: Date;
maxDate?: Date;
datesWhitelist?: TDateRange[];
datesBlacklist?: TDateRange[];

showMonth?: boolean;
showDayName?: boolean;
Expand All @@ -41,51 +100,37 @@ declare module "react-native-calendar-strip" {
minDayComponentSize?: number;
responsiveSizingOffset?: number;

calendarHeaderStyle: StyleProp<ViewStyle>;
calendarHeaderContainerStyle?: StyleProp<ViewStyle>;
calendarHeaderStyle?: StyleProp<TextStyle>;
calendarHeaderFormat?: string;
calendarHeaderPosition?: "below" | "above";

calendarAnimation: {
calendarAnimation?: {
duration: number;
type: "sequence" | "parallel";
};
daySelectionAnimation:
| {
type: "background";
duration: number;
highlightColor: string;
animType: any;
animUpdateType: any;
animProperty: any;
animSpringDamping: any;
}
| {
type: "border";
duration: number;
borderWidth: number;
borderHighlightColor: string;
animType: any;
animUpdateType: any;
animProperty: any;
animSpringDamping: any;
};

customDatesStyles: any[];

dateNameStyle: StyleProp<TextStyle>;
dateNumberStyle: StyleProp<TextStyle>;
weekendDateNameStyle: StyleProp<TextStyle>;
weekendDateNumberStyle: StyleProp<TextStyle>;
highlightDateNameStyle: StyleProp<TextStyle>;
highlightDateNumberStyle: StyleProp<TextStyle>;
disabledDateNameStyle: StyleProp<TextStyle>;
disabledDateNumberStyle: StyleProp<TextStyle>;
disabledDateOpacity: number;
styleWeekend: boolean;

locale: object;
shouldAllowFontScaling: boolean;
daySelectionAnimation?: TDaySelectionAnimation;

customDatesStyles?: any[];

dayComponent?: (props: IDayComponentProps) => ReactNode;

dateNameStyle?: StyleProp<TextStyle>;
dateNumberStyle?: StyleProp<TextStyle>;
weekendDateNameStyle?: StyleProp<TextStyle>;
weekendDateNumberStyle?: StyleProp<TextStyle>;
highlightDateNameStyle?: StyleProp<TextStyle>;
highlightDateNumberStyle?: StyleProp<TextStyle>;
disabledDateNameStyle?: StyleProp<TextStyle>;
disabledDateNumberStyle?: StyleProp<TextStyle>;
disabledDateOpacity?: number;
styleWeekend?: boolean;

locale?: object;
shouldAllowFontScaling?: boolean;
},
{}
> {}

export = ReactNativeCalendarStrip;
}
28 changes: 17 additions & 11 deletions src/CalendarHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Text } from "react-native";
import { Text, View } from "react-native";

import styles from "./Calendar.style.js";

class CalendarHeader extends Component {
static propTypes = {
calendarHeaderFormat: PropTypes.string.isRequired,
calendarHeaderContainerStyle: PropTypes.oneOfType([
PropTypes.object,
PropTypes.number
]),
calendarHeaderStyle: PropTypes.oneOfType([
PropTypes.object,
PropTypes.number
Expand Down Expand Up @@ -65,16 +69,18 @@ class CalendarHeader extends Component {
this.props.calendarHeaderFormat
);
return (
<Text
style={[
styles.calendarHeader,
{ fontSize: this.props.fontSize },
this.props.calendarHeaderStyle
]}
allowFontScaling={this.props.allowHeaderTextScaling}
>
{headerText}
</Text>
<View style={this.props.calendarHeaderContainerStyle}>
<Text
style={[
styles.calendarHeader,
{ fontSize: this.props.fontSize },
this.props.calendarHeaderStyle
]}
allowFontScaling={this.props.allowHeaderTextScaling}
>
{headerText}
</Text>
</View>
);
}
}
Expand Down
11 changes: 9 additions & 2 deletions src/CalendarStrip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,10 @@ class CalendarStrip extends Component {
minDayComponentSize: PropTypes.number,
responsiveSizingOffset: PropTypes.number,

calendarHeaderContainerStyle: PropTypes.any,
calendarHeaderStyle: PropTypes.any,
calendarHeaderFormat: PropTypes.string,
calendarHeaderPosition: PropTypes.oneOf(['above', 'below']),

calendarAnimation: PropTypes.object,
daySelectionAnimation: PropTypes.object,
Expand Down Expand Up @@ -88,6 +90,7 @@ class CalendarStrip extends Component {
iconLeft: require("./img/left-arrow-black.png"),
iconRight: require("./img/right-arrow-black.png"),
calendarHeaderFormat: "MMMM YYYY",
calendarHeaderPosition: 'above',
datesWhitelist: undefined,
datesBlacklist: undefined,
disabledDateOpacity: 0.3,
Expand Down Expand Up @@ -588,14 +591,15 @@ class CalendarStrip extends Component {
let calendarHeader = this.props.showMonth && (
<CalendarHeader
calendarHeaderFormat={this.props.calendarHeaderFormat}
calendarHeaderContainerStyle={this.props.calendarHeaderContainerStyle}
calendarHeaderStyle={this.props.calendarHeaderStyle}
datesForWeek={this.state.datesForWeek}
fontSize={this.state.monthFontSize}
allowHeaderTextScaling={this.props.shouldAllowFontScaling}
/>
);

// calendarHeader renders above the dates & left/right selectors if dates are shown.
// calendarHeader renders above or below of the dates & left/right selectors if dates are shown.
// However if dates are hidden, the header shows between the left/right selectors.
return (
<View
Expand All @@ -609,7 +613,8 @@ class CalendarStrip extends Component {
style={[this.props.innerStyle, { height: this.state.height }]}
onLayout={this.onLayout.bind(this)}
>
{this.props.showDate && calendarHeader}
{this.props.showDate && this.props.calendarHeaderPosition === 'above' && calendarHeader}

<View style={styles.datesStrip}>
<WeekSelector
controlDate={this.props.minDate}
Expand Down Expand Up @@ -647,6 +652,8 @@ class CalendarStrip extends Component {
size={this.state.selectorSize}
/>
</View>

{this.props.showDate && this.props.calendarHeaderPosition === 'below' && calendarHeader}
</View>
</View>
);
Expand Down