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/2] 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/2] 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) {