refactor interactive marking type into period marking type

Author: Tautvilas Mecinskas

README.md

@@ -145,7 +145,7 @@ const workout = {key:'workout', color: 'green'};
 ```
 
 
-Interval marking
+Period marking
 
 <kbd>
   <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/marking2.png?raw=true">
@@ -159,13 +159,13 @@ Interval marking
 <Calendar
   // Collection of dates that have to be colored in a special way. Default = {}
    markedDates={
-    {'2012-05-20': [{textColor: 'green'}],
-     '2012-05-22': [{startingDay: true, color: 'green'}],
-     '2012-05-23': [{endingDay: true, color: 'green', textColor: 'gray'}],
-     '2012-05-04': [{startingDay: true, color: 'green'}, {endingDay: true, color: 'green'}]
+    {'2012-05-20': {periods: [{textColor: 'green'}]},
+     '2012-05-22': {periods: [{startingDay: true, color: 'green'}]},
+     '2012-05-23': {periods: [{endingDay: true, color: 'green', textColor: 'gray'}]},
+     '2012-05-04': {disabled: true, periods: [{startingDay: true, color: 'green'}, {endingDay: true, color: 'green'}]}
     }}
-  // Date marking style [simple/interactive/multi-dot]. Default = 'simple'
-  markingType={'interactive'}
+  // Date marking style [simple/period/multi-dot]. Default = 'simple'
+  markingType={'period'}
 />
 ```
 

example/src/screens/calendars.js

@@ -44,16 +44,17 @@ export default class CalendarsScreen extends Component {
           current={'2012-05-16'}
           minDate={'2012-05-10'}
           displayLoadingIndicator
-          markingType={'interactive'}
+          markingType={'period'}
           theme={{
             calendarBackground: '#333248',
             textSectionTitleColor: 'white',
-            dayTextColor: 'white',
+            dayTextColor: 'red',
             todayTextColor: 'white',
             selectedDayTextColor: 'white',
             monthTextColor: 'white',
             selectedDayBackgroundColor: '#333248',
             arrowColor: 'white',
+            // textDisabledColor: 'red',
             'stylesheet.calendar.header': {
               week: {
                 marginTop: 5,
@@ -63,14 +64,15 @@ export default class CalendarsScreen extends Component {
             }
           }}
           markedDates={{
-            '2012-05-08': [{textColor: '#666'}],
-            '2012-05-09': [{textColor: '#666'}],
-            '2012-05-14': [{startingDay: true, color: 'blue'}, {endingDay: true, color: 'blue'}],
-            '2012-05-21': [{startingDay: true, color: 'blue'}],
-            '2012-05-22': [{endingDay: true, color: 'gray'}],
-            '2012-05-24': [{startingDay: true, color: 'gray'}],
-            '2012-05-25': [{color: 'gray'}],
-            '2012-05-26': [{endingDay: true, color: 'gray'}]}}
+            '2012-05-17': {disabled: true},
+            '2012-05-08': {periods: [{textColor: '#666'}]},
+            '2012-05-09': {periods: [{textColor: '#666'}]},
+            '2012-05-14': {periods: [{startingDay: true, color: 'blue'}, {endingDay: true, color: 'blue'}]},
+            '2012-05-21': {periods: [{startingDay: true, color: 'blue'}]},
+            '2012-05-22': {periods: [{endingDay: true, color: 'gray'}]},
+            '2012-05-24': {periods: [{startingDay: true, color: 'gray'}]},
+            '2012-05-25': {periods: [{color: 'gray'}]},
+            '2012-05-26': {periods: [{endingDay: true, color: 'gray'}]}}}
           hideArrows={false}
         />
         <Calendar

src/calendar/day/interactive/index.js renamed to src/calendar/day/period/index.js

@@ -29,7 +29,7 @@ class Day extends Component {
     super(props);
     this.theme = {...defaultStyle, ...(props.theme || {})};
     this.style = styleConstructor(props.theme);
-    this.markingStyle = this.getDrawingStyle(props.marked);
+    this.markingStyle = this.getDrawingStyle(props.marked || []);
     this.onDayPress = this.onDayPress.bind(this);
   }
 
@@ -54,11 +54,14 @@ class Day extends Component {
   }
 
   getDrawingStyle(marking) {
+    const defaultStyle = {textStyle: {}};
     if (!marking) {
-      return {};
+      return defaultStyle;
     }
-    return marking.reduce((prev, next) => {
-      prev.textStyle = {};
+    if (this.props.marked.disabled) {
+      defaultStyle.textStyle.color = this.theme.textDisabledColor;
+    }
+    const resultStyle = (marking.periods || []).reduce((prev, next) => {
       if (next.quickAction) {
         if (next.first || next.last) {
           prev.containerStyle = this.style.firstQuickAction;
@@ -101,7 +104,8 @@ class Day extends Component {
         prev.textStyle.color = next.textColor;
       }
       return prev;
-    }, {});
+    }, defaultStyle);
+    return resultStyle;
   }
 
   render() {

src/calendar/day/interactive/style.js renamed to src/calendar/day/period/style.js

@@ -1,7 +1,7 @@
 import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../../../style';
 
-const STYLESHEET_ID = 'stylesheet.day.interactive';
+const STYLESHEET_ID = 'stylesheet.day.period';
 
 const FILLER_HEIGHT = 34;
 

src/calendar/index.js

@@ -10,7 +10,7 @@ import dateutils from '../dateutils';
 import {xdateToData, parseDate} from '../interface';
 import styleConstructor from './style';
 import Day from './day/basic';
-import UnitDay from './day/interactive';
+import UnitDay from './day/period';
 import MultiDotDay from './day/multi-dot';
 import CalendarHeader from './header';
 import shouldComponentUpdate from './updater';
@@ -39,7 +39,7 @@ class Calendar extends Component {
     // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
     firstDay: PropTypes.number,
 
-    // Date marking style [simple/interactive]. Default = 'simple'
+    // Date marking style [simple/period]. Default = 'simple'
     markingType: PropTypes.string,
 
     // Hide month navigation arrows. Default = false
@@ -146,7 +146,7 @@ class Calendar extends Component {
     }
     let dayComp;
     if (!dateutils.sameMonth(day, this.state.currentMonth) && this.props.hideExtraDays) {
-      if (this.props.markingType === 'interactive') {
+      if (this.props.markingType === 'period') {
         dayComp = (<View key={id} style={{flex: 1}}/>);
       } else {
         dayComp = (<View key={id} style={{width: 32}}/>);
@@ -171,7 +171,7 @@ class Calendar extends Component {
 
   getDayComponent() {
     switch (this.props.markingType) {
-    case 'interactive':
+    case 'period':
       return UnitDay;
     case 'multi-dot':
       return MultiDotDay;