ayooby / react-native-calendar-heatmap

React-native calendar heat-map, inspired by Github's contribution graph
155 stars 31 forks source link

scrollEnabled Prop for heatmap #56

Open Yellow-Ranger opened 8 months ago

Yellow-Ranger commented 8 months ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-calendar-heatmap@0.2.4 for the project I'm working on.

I wanted to disable the scrolling feature on the heatmap so I added the prop on the scrollview.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-calendar-heatmap/lib/src/CalendarHeatmap.js b/node_modules/react-native-calendar-heatmap/lib/src/CalendarHeatmap.js
index 269139e..8417b52 100644
--- a/node_modules/react-native-calendar-heatmap/lib/src/CalendarHeatmap.js
+++ b/node_modules/react-native-calendar-heatmap/lib/src/CalendarHeatmap.js
@@ -46,7 +46,8 @@ const CalendarHeatmap = props => {
     showOutOfRangeDays,
     monthLabelsColor,
     showMonthLabels,
-    colorArray
+    colorArray,
+    scrollEnabled
   } = props;

   getValueCache = values => {
@@ -148,7 +149,7 @@ const CalendarHeatmap = props => {
   };

   return (
-    <ScrollView>
+    <ScrollView scrollEnabled={scrollEnabled}>
       <Svg
         height={getHeight(gutterSize, showMonthLabels, horizontal)}
         width={getWidth(numDays, endDate, gutterSize)}
@@ -186,7 +187,8 @@ CalendarHeatmap.propTypes = {
   titleForValue: PropTypes.func, // function which returns title text for value
   classForValue: PropTypes.func, // function which returns html class for value
   onPress: PropTypes.func, // callback function when a square is clicked
-  colorArray: PropTypes.array
+  colorArray: PropTypes.array,
+  scrollEnabled: PropTypes.bool // whether to allow scrolling on scrollview
 };

 CalendarHeatmap.defaultProps = {
@@ -198,6 +200,7 @@ CalendarHeatmap.defaultProps = {
   monthLabelsColor: 'black',
   showOutOfRangeDays: false,
   colorArray: rectColor,
+  scrollEnabled: true,
   classForValue: value => (value ? "black" : "#8cc665"),
   onPress: () => console.log("change onPress prop")
 };

This issue body was partially generated by patch-package.