Removing propTypes duplications and updating 'shouldUpdate'

Author: Inbal-Tish

src/calendar/day/basic/index.js

@@ -6,17 +6,25 @@ import {shouldUpdate} from '../../../component-updater';
 import styleConstructor from './style';
 import Marking from '../marking';
 
+
 export default class BasicDay extends Component {
   static displayName = 'IGNORE';
 
   static propTypes = {
-    date: PropTypes.object,
-    state: PropTypes.oneOf(['disabled', 'today', '']),
+    state: PropTypes.oneOf(['disabled', 'today', '']), //TODO: deprecate
+    /** The marking object */
     marking: PropTypes.any,
-    markingType: PropTypes.oneOf(Marking.markingTypes),
+    /** Date marking style [simple/period/multi-dot/multi-period]. Default = 'simple' */
+    markingType: PropTypes.oneOf(_.values(Marking.markingTypes)),
+    /** Theme object */
     theme: PropTypes.object,
+    /** onPress callback */
     onPress: PropTypes.func,
+    /** onLongPress callback */
     onLongPress: PropTypes.func,
+    /** The date to return from press callbacks */
+    date: PropTypes.object,
+    /** Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates*/
     disableAllTouchEventsForDisabledDays: PropTypes.bool
   };
 
@@ -27,7 +35,7 @@ export default class BasicDay extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return shouldUpdate(this.props, nextProps, ['children', 'state', 'marking', 'onPress', 'onLongPress']);
+    return shouldUpdate(this.props, nextProps, ['children', 'state', 'markingType', 'marking', 'onPress', 'onLongPress', 'date']);
   }
 
   onPress = () => {

src/calendar/day/index.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
 import React, {Component} from 'react';
@@ -8,24 +9,21 @@ import BasicDay from './basic';
 import PeriodDay from './period';
 
 
+const basicDayProps = _.omit(BasicDay.propTypes, 'date');
+
 export default class Day extends Component {
   static displayName = 'IGNORE';
 
   static propTypes = {
+    ...basicDayProps,
+    /** The day to render */
     day: PropTypes.object,
-    state: PropTypes.string, // deprecate ???
-    markingType: PropTypes.string,
-    marking: PropTypes.any,
-    theme: PropTypes.object,
-    onPress: PropTypes.func,
-    onLongPress: PropTypes.func,
-    dayComponent: PropTypes.any,
-    disableAllTouchEventsForDisabledDays: PropTypes.bool,
-    disabledByDefault: PropTypes.bool
+    /** Provide custom day rendering component */
+    dayComponent: PropTypes.any
   };
 
   shouldComponentUpdate(nextProps) {
-    return shouldUpdate(this.props, nextProps, ['day', 'markingType', 'marking', 'onPress', 'onLongPress']);
+    return shouldUpdate(this.props, nextProps, ['day', 'dayComponent', 'markingType', 'marking', 'onPress', 'onLongPress']);
   }
 
   getMarkingLabel() {

src/calendar/day/period/index.js

@@ -8,14 +8,13 @@ import styleConstructor from './style';
 import Dot from '../dot';
 
 
-class Day extends Component {
+export default class PeriodDay extends Component {
   static displayName = 'IGNORE';
 
   static propTypes = {
-    // TODO: selected + disabled props should be removed
-    state: PropTypes.oneOf(['selected', 'disabled', 'today', '']),
-    theme: PropTypes.object,
+    state: PropTypes.oneOf(['selected', 'disabled', 'today', '']), //TODO: deprecate
     marking: PropTypes.any,
+    theme: PropTypes.object,
     onPress: PropTypes.func,
     onLongPress: PropTypes.func,
     date: PropTypes.object
@@ -45,7 +44,7 @@ class Day extends Component {
       return true;
     }
 
-    return shouldUpdate(this.props, nextProps, ['state', 'children', 'onPress', 'onLongPress']);
+    return shouldUpdate(this.props, nextProps, ['children', 'state', 'marking', 'onPress', 'onLongPress', 'date']);
   }
 
   getDrawingStyle(marking) {
@@ -215,5 +214,3 @@ class Day extends Component {
     );
   }
 }
-
-export default Day;

src/calendar/index.js

@@ -30,6 +30,7 @@ class Calendar extends Component {
 
   static propTypes = {
     ...CalendarHeader.propTypes,
+    ...Day.propTypes,
     /** Specify theme properties to override specific styles for calendar parts. Default = {} */
     theme: PropTypes.object,
     /** Specify style for calendar container element. Default = {} */
@@ -44,8 +45,6 @@ class Calendar extends Component {
     firstDay: PropTypes.number,
     /** Collection of dates that have to be marked. Default = {} */
     markedDates: PropTypes.object,
-    /** Date marking style [simple/period/multi-dot/multi-period]. Default = 'simple' */
-    markingType: PropTypes.string,
     /** Display loading indicator. Default = false */
     displayLoadingIndicator: PropTypes.bool,
     /** Show week numbers. Default = false */
@@ -62,16 +61,12 @@ class Calendar extends Component {
     onMonthChange: PropTypes.func,
     /** Handler which gets executed when visible month changes in calendar. Default = undefined */
     onVisibleMonthsChange: PropTypes.func,
-    /** Provide custom day rendering component */
-    dayComponent: PropTypes.any,
     /** Disables changing month when click on days of other months (when hideExtraDays is false). Default = false */
     disableMonthChange: PropTypes.bool,
     /** Enable the option to swipe between months. Default: false */
     enableSwipeMonths: PropTypes.bool,
     /** Disable days by default. Default = false */
     disabledByDefault: PropTypes.bool,
-    /** Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates*/
-    disableAllTouchEventsForDisabledDays: PropTypes.bool,
     /** Style passed to the header */
     headerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
     /** Allow rendering of a totally custom header */
@@ -223,7 +218,7 @@ class Calendar extends Component {
 
   renderDay(day, id) {
     const {hideExtraDays} = this.props;
-    const dayCompProps = extractComponentProps(Day, this.props);
+    const dayProps = extractComponentProps(Day, this.props);
 
     if (!dateutils.sameMonth(day, this.state.currentMonth) && hideExtraDays) {
       return <View key={id} style={this.style.emptyDayContainer} />;
@@ -232,7 +227,7 @@ class Calendar extends Component {
     return (
       <View style={this.style.dayContainer} key={id}>
         <Day
-          {...dayCompProps}
+          {...dayProps}
           day={day}
           state={this.getState(day)}
           marking={this.getDateMarking(day)}

src/expandableCalendar/week.js

@@ -99,7 +99,7 @@ class Week extends Component {
 
   renderDay(day, id) {
     const {current, hideExtraDays} = this.props;
-    const dayCompProps = extractComponentProps(Day, this.props);
+    const dayProps = extractComponentProps(Day, this.props);
 
     // hide extra days
     if (current && hideExtraDays) {
@@ -111,7 +111,7 @@ class Week extends Component {
     return (
       <View style={this.style.dayContainer} key={id}>
         <Day
-          {...dayCompProps}
+          {...dayProps}
           day={day}
           state={this.getState(day)}
           marking={this.getDateMarking(day)}