Merge pull request #324 from jaruyot/multi-dot-index

Made key property in multi-dot markers optional

Author: Tautvilas Mečinskas

README.md

@@ -134,7 +134,7 @@ Multi-Dot marking
  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/marking4.png?raw=true">
 </kbd>
 
-Use markingType = 'multi-dot' if you want to display more than one dot. Both the Calendar and CalendarList control support multiple dots by using 'dots' array in markedDates. The properties 'key' and 'color' are mandatory while 'selectedColor' is optional. If selectedColor is omitted then 'color' will be used for selected dates.
+Use markingType = 'multi-dot' if you want to display more than one dot. Both the Calendar and CalendarList control support multiple dots by using 'dots' array in markedDates. The property 'color' is mandatory while 'key' and 'selectedColor' are optional. If key is omitted then the array index is used as key. If selectedColor is omitted then 'color' will be used for selected dates.
 ```javascript
 const vacation = {key:'vacation', color: 'red', selectedColor: 'blue'};
 const massage = {key:'massage', color: 'blue', selectedColor: 'blue'};

src/calendar/day/multi-dot/index.js

@@ -63,9 +63,9 @@ class Day extends Component {
     if (marking.dots && Array.isArray(marking.dots) && marking.dots.length > 0) {
       // Filter out dots so that we we process only those items which have key and color property
       const validDots = marking.dots.filter(d => (d && d.key && d.color));
-      return validDots.map(dot => {
+      return validDots.map((dot, index) => {
         return (
-          <View key={dot.key} style={[baseDotStyle, 
+          <View key={dot.key ? dot.key : index} style={[baseDotStyle, 
             { backgroundColor: marking.selected && dot.selectedDotColor ? dot.selectedDotColor : dot.color}]}/>
         );
       });