From 62558062a227f12eb57b6f7312422b75bceee2a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Pinel?= Date: Tue, 20 Aug 2019 13:11:48 +0300 Subject: [PATCH 1/3] make month width and height editable via props --- README.md | 1 + src/MonthSelector.tsx | 13 +++++++++++++ 2 files changed, 14 insertions(+) diff --git a/README.md b/README.md index b3b132f..a1c0db9 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ yarn add react-native-month-selector | containerStyle | ViewStyle | null | custom style for the container | | yearTextStyle | TextStyle | null | custom style for the year text | | monthTextStyle | TextStyle | null | custom style of the text for the months | +| monthWidth | number | 40 | custom width and height for months. BorderRadius will be adjusted | currentMonthTextStyle | TextStyle | null | custom style for the current month text | | initialView | moment.Moment | moment() | which month should be selected initially | | onMonthTapped | (month: moment.Moment) => any | (month) => {} | function called when month is pressed | diff --git a/src/MonthSelector.tsx b/src/MonthSelector.tsx index 0d3ff84..6cf64d4 100644 --- a/src/MonthSelector.tsx +++ b/src/MonthSelector.tsx @@ -82,6 +82,7 @@ class MonthSelector extends React.Component< monthTextStyle: PropTypes.any, currentMonthTextStyle: PropTypes.any, monthFormat: PropTypes.string, + monthWidth: PropTypes.number, initialView: PropTypes.any, onMonthTapped: PropTypes.func, onYearChanged: PropTypes.func, @@ -114,6 +115,7 @@ class MonthSelector extends React.Component< color: "#22ee11", }, monthTextStyle: { color: "#000" }, + monthWidth: 40, initialView: moment(), onMonthTapped: month => {}, onYearChanged: year => {}, @@ -162,12 +164,23 @@ class MonthSelector extends React.Component< return {} } + getSelectedMonthWidth() { + if (this.props.monthWidth) { + return { + height: this.props.monthWidth, + width: this.props.monthWidth, + borderRadius: this.props.monthWidth /2, + } + } +} + getMonthActualComponent(month: moment.Moment, isDisabled: boolean = false) { return ( From ff6302077c0278eedf23d323310848615550fd10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Pinel?= Date: Tue, 20 Aug 2019 14:12:18 +0300 Subject: [PATCH 2/3] fix propTypes and return value --- src/MonthSelector.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/MonthSelector.tsx b/src/MonthSelector.tsx index 6cf64d4..2b5d9c0 100644 --- a/src/MonthSelector.tsx +++ b/src/MonthSelector.tsx @@ -43,6 +43,7 @@ interface MonthSelectorProps { yearTextStyle: TextStyle monthTextStyle: TextStyle currentMonthTextStyle: TextStyle + monthWidth: number monthFormat: string initialView: moment.Moment onMonthTapped: (month: moment.Moment) => any @@ -172,6 +173,9 @@ class MonthSelector extends React.Component< borderRadius: this.props.monthWidth /2, } } + else { + return {}; + } } getMonthActualComponent(month: moment.Moment, isDisabled: boolean = false) { From a460b896c07dbfe17d79741b34ae7a1815070822 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Pinel?= Date: Wed, 28 Aug 2019 11:09:59 +0300 Subject: [PATCH 3/3] add props to display empty prev/next button when changing year is not possible --- README.md | 2 ++ src/MonthSelector.tsx | 28 ++++++++++++++++++---------- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index a1c0db9..7f68e99 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,8 @@ yarn add react-native-month-selector | seperatorColor | string | "#b6c3cb" | color of the separators | | nextIcon | JSX.Element | null | custom react component for the next button | | prevIcon | JSX.Element | null | custom react component for the prev button | +| emptyPrevNextIcon | JSX.Element | null | custom react component for an empty prev/next button Example: emptyPrevNextIcon={ } + | | nextText | string | "Next" | custom text for the next button | | prevText | string | "Prev" | custom text for the prev button | | containerStyle | ViewStyle | null | custom style for the container | diff --git a/src/MonthSelector.tsx b/src/MonthSelector.tsx index 2b5d9c0..159f28b 100644 --- a/src/MonthSelector.tsx +++ b/src/MonthSelector.tsx @@ -37,6 +37,8 @@ interface MonthSelectorProps { seperatorHeight: number nextIcon: JSX.Element prevIcon: JSX.Element + emptyPrevNextIcon: JSX.Element + prevNextIcon: JSX.Element nextText: string prevText: string containerStyle: ViewStyle @@ -76,6 +78,7 @@ class MonthSelector extends React.Component< seperatorHeight: PropTypes.number, nextIcon: PropTypes.any, prevIcon: PropTypes.any, + emptyPrevNextIcon: PropTypes.any, nextText: PropTypes.string, prevText: PropTypes.string, containerStyle: PropTypes.any, @@ -107,6 +110,7 @@ class MonthSelector extends React.Component< seperatorColor: "#b6c3cb", nextIcon: null, prevIcon: null, + emptyPrevNextIcon: null, nextText: "Next", prevText: "Prev", containerStyle: null, @@ -277,11 +281,13 @@ class MonthSelector extends React.Component< ]} > this.handNextPrevTaps(false)}> - {this.props.prevIcon ? ( - this.props.prevIcon - ) : ( - {this.props.prevText} - )} + {this.props.emptyPrevNextIcon && !this.isYearEnabled(false) ? ( + this.props.emptyPrevNextIcon + ) : this.props.prevIcon ? ( + this.props.prevIcon + ) : ( + {this.props.prevText} + )} @@ -289,11 +295,13 @@ class MonthSelector extends React.Component< this.handNextPrevTaps(true)}> - {this.props.nextIcon ? ( - this.props.nextIcon - ) : ( - {this.props.nextText} - )} + {this.props.emptyPrevNextIcon && !this.isYearEnabled(true) ? ( + this.props.emptyPrevNextIcon + ) :this.props.nextIcon ? ( + this.props.nextIcon + ) : ( + {this.props.nextText} + )} )