Merge pull request wix#866 from wix/fix/Comments_format

Changing comments format

Author: Inbal-Tish

CHANGELOG.md

@@ -35,3 +35,7 @@
 ## [1.194.0] - 2019-06-30
 ### Added
 - CalendarProvider - 'onMonthChange' event returning date object and updateSource.
+
+## [1.195.0] - 2019-07-04
+### Change
+- Components' props comment format.

src/agenda/index.js

@@ -1,11 +1,5 @@
 import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  Dimensions,
-  Animated,
-  ViewPropTypes,
-} from 'react-native';
+import {Text, View, Dimensions, Animated, ViewPropTypes} from 'react-native';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
 
@@ -14,91 +8,94 @@ import dateutils from '../dateutils';
 import CalendarList from '../calendar-list';
 import ReservationsList from './reservation-list';
 import styleConstructor from './style';
-import { VelocityTracker } from '../input';
+import {VelocityTracker} from '../input';
+
 
 const HEADER_HEIGHT = 104;
 const KNOB_HEIGHT = 24;
-
 //Fallback when RN version is < 0.44
 const viewPropTypes = ViewPropTypes || View.propTypes;
 
+/**
+ * @description: Agenda component
+ * @extends: CalendarList
+ * @extendslink: docs/CalendarList
+ * @example: https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agenda.js
+ * @gif: https://github.com/wix/react-native-calendars/blob/master/demo/agenda.gif
+ */
 export default class AgendaView extends Component {
+  static displayName = 'Agenda';
+
   static propTypes = {
-    // Specify theme properties to override specific styles for calendar parts. Default = {}
+    /** Specify theme properties to override specific styles for calendar parts. Default = {} */
     theme: PropTypes.object,
-
-    // agenda container style
+    /** agenda container style */
     style: viewPropTypes.style,
-
-    // the list of items that have to be displayed in agenda. If you want to render item as empty date
-    // the value of date key has to be an empty array []. If there exists no value for date key it is
-    // considered that the date in question is not yet loaded
+    /** the list of items that have to be displayed in agenda. If you want to render item as empty date
+    the value of date key has to be an empty array []. If there exists no value for date key it is
+    considered that the date in question is not yet loaded */
     items: PropTypes.object,
-
-    // callback that gets called when items for a certain month should be loaded (month became visible)
+    /** callback that gets called when items for a certain month should be loaded (month became visible) */
     loadItemsForMonth: PropTypes.func,
-    // callback that fires when the calendar is opened or closed
+    /** callback that fires when the calendar is opened or closed */
     onCalendarToggled: PropTypes.func,
-    // callback that gets called on day press
+    /** callback that gets called on day press */
     onDayPress: PropTypes.func,
-    // callback that gets called when day changes while scrolling agenda list
+    /** callback that gets called when day changes while scrolling agenda list */
     onDaychange: PropTypes.func,
-    // specify how each item should be rendered in agenda
+    /** specify how each item should be rendered in agenda */
     renderItem: PropTypes.func,
-    // specify how each date should be rendered. day can be undefined if the item is not first in that day.
+    /** specify how each date should be rendered. day can be undefined if the item is not first in that day. */
     renderDay: PropTypes.func,
-    // specify how agenda knob should look like
+    /** specify how agenda knob should look like */
     renderKnob: PropTypes.func,
-    // specify how empty date content with no items should be rendered
+    /** specify how empty date content with no items should be rendered */
     renderEmptyDay: PropTypes.func,
-    // specify what should be rendered instead of ActivityIndicator
+    /** specify what should be rendered instead of ActivityIndicator */
     renderEmptyData: PropTypes.func,
-    // specify your item comparison function for increased performance
+    /** specify your item comparison function for increased performance */
     rowHasChanged: PropTypes.func,
-
-    // Max amount of months allowed to scroll to the past. Default = 50
+    /** Max amount of months allowed to scroll to the past. Default = 50 */
     pastScrollRange: PropTypes.number,
-
-    // Max amount of months allowed to scroll to the future. Default = 50
+    /** Max amount of months allowed to scroll to the future. Default = 50 */
     futureScrollRange: PropTypes.number,
-
-    // initially selected day
+    /** initially selected day */
     selected: PropTypes.any,
-    // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
+    /** Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined */
     minDate: PropTypes.any,
-    // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
+    /** Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined */
     maxDate: PropTypes.any,
-
-    // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+    /** If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. */
     firstDay: PropTypes.number,
-
-    // Collection of dates that have to be marked. Default = items
+    /** Collection of dates that have to be marked. Default = items */
     markedDates: PropTypes.object,
-    // Optional marking type if custom markedDates are provided
-    markingType: PropTypes.string,
-
-    // Hide knob button. Default = false
+    /** Optional marking type if custom markedDates are provided */
+    markingType: PropTypes.string,/* 
+    /** Hide knob button. Default = false */
     hideKnob: PropTypes.bool,
-    // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
+    /** Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting */
     monthFormat: PropTypes.string,
-    // A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView.
+    /** A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. */
     refreshControl: PropTypes.element,
-    // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
+    /** If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly. */
     onRefresh: PropTypes.func,
-    // Set this true while waiting for new data from a refresh.
+    /** Set this true while waiting for new data from a refresh. */
     refreshing: PropTypes.bool,
-    // Display loading indicador. Default = false
-    displayLoadingIndicator: PropTypes.bool,
+    /** Display loading indicador. Default = false */
+    displayLoadingIndicator: PropTypes.bool
   };
 
   constructor(props) {
     super(props);
+
     this.styles = styleConstructor(props.theme);
+
     const windowSize = Dimensions.get('window');
     this.viewHeight = windowSize.height;
     this.viewWidth = windowSize.width;
     this.scrollTimeout = undefined;
     this.headerState = 'idle';
+
     this.state = {
       scrollY: new Animated.Value(0),
       calendarIsReady: false,
@@ -107,6 +104,7 @@ export default class AgendaView extends Component {
       selectedDay: parseDate(this.props.selected) || XDate(true),
       topDay: parseDate(this.props.selected) || XDate(true),
     };
+
     this.currentMonth = this.state.selectedDay.clone();
     this.onLayout = this.onLayout.bind(this);
     this.onScrollPadLayout = this.onScrollPadLayout.bind(this);
@@ -149,19 +147,20 @@ export default class AgendaView extends Component {
   onTouchStart() {
     this.headerState = 'touched';
     if (this.knob) {
-      this.knob.setNativeProps({style: { opacity: 0.5 }});
+      this.knob.setNativeProps({style: {opacity: 0.5}});
     }
   }
 
   onTouchEnd() {
     if (this.knob) {
-      this.knob.setNativeProps({style: { opacity: 1 }});
+      this.knob.setNativeProps({style: {opacity: 1}});
     }
 
     if (this.headerState === 'touched') {
       this.setScrollPadPosition(0, true);
       this.enableCalendarScrolling();
     }
+
     this.headerState = 'idle';
   }
 
@@ -179,6 +178,7 @@ export default class AgendaView extends Component {
     const maxY = this.initialScrollPadPosition();
     const snapY = (projectedY > maxY / 2) ? maxY : 0;
     this.setScrollPadPosition(snapY, true);
+    
     if (snapY === 0) {
       this.enableCalendarScrolling();
     }
@@ -230,6 +230,7 @@ export default class AgendaView extends Component {
     this.setState({
       calendarScrollable: true
     });
+
     if (this.props.onCalendarToggled) {
       this.props.onCalendarToggled(true);
     }
@@ -250,23 +251,29 @@ export default class AgendaView extends Component {
 
   chooseDay(d, optimisticScroll) {
     const day = parseDate(d);
+    
     this.setState({
       calendarScrollable: false,
       selectedDay: day.clone()
     });
+
     if (this.props.onCalendarToggled) {
       this.props.onCalendarToggled(false);
     }
+
     if (!optimisticScroll) {
       this.setState({
         topDay: day.clone()
       });
     }
+
     this.setScrollPadPosition(this.initialScrollPadPosition(), true);
     this.calendar.scrollToDay(day, this.calendarOffset(), true);
+    
     if (this.props.loadItemsForMonth) {
       this.props.loadItemsForMonth(xdateToData(day));
     }
+
     if (this.props.onDayPress) {
       this.props.onDayPress(xdateToData(day));
     }
@@ -297,6 +304,7 @@ export default class AgendaView extends Component {
   onDayChange(day) {
     const newDate = parseDate(day);
     const withAnimation = dateutils.sameMonth(newDate, this.state.selectedDay);
+    
     this.calendar.scrollToDay(day, this.calendarOffset(), withAnimation);
     this.setState({
       selectedDay: parseDate(day)
@@ -309,6 +317,7 @@ export default class AgendaView extends Component {
 
   generateMarkings() {
     let markings = this.props.markedDates;
+    
     if (!markings) {
       markings = {};
       Object.keys(this.props.items  || {}).forEach(key => {
@@ -317,41 +326,43 @@ export default class AgendaView extends Component {
         }
       });
     }
+
     const key = this.state.selectedDay.toString('yyyy-MM-dd');
     return {...markings, [key]: {...(markings[key] || {}), ...{selected: true}}};
   }
 
   render() {
     const agendaHeight = Math.max(0, this.viewHeight - HEADER_HEIGHT);
     const weekDaysNames = dateutils.weekDayNames(this.props.firstDay);
+    
     const weekdaysStyle = [this.styles.weekdays, {
       opacity: this.state.scrollY.interpolate({
         inputRange: [agendaHeight - HEADER_HEIGHT, agendaHeight],
         outputRange: [0, 1],
-        extrapolate: 'clamp',
+        extrapolate: 'clamp'
       }),
       transform: [{ translateY: this.state.scrollY.interpolate({
         inputRange: [Math.max(0, agendaHeight - HEADER_HEIGHT), agendaHeight],
         outputRange: [-HEADER_HEIGHT, 0],
-        extrapolate: 'clamp',
+        extrapolate: 'clamp'
       })}]
     }];
 
     const headerTranslate = this.state.scrollY.interpolate({
       inputRange: [0, agendaHeight],
       outputRange: [agendaHeight, 0],
-      extrapolate: 'clamp',
+      extrapolate: 'clamp'
     });
 
     const contentTranslate = this.state.scrollY.interpolate({
       inputRange: [0, agendaHeight],
       outputRange: [0, agendaHeight/2],
-      extrapolate: 'clamp',
+      extrapolate: 'clamp'
     });
 
     const headerStyle = [
       this.styles.header,
-      { bottom: agendaHeight, transform: [{ translateY: headerTranslate }] },
+      {bottom: agendaHeight, transform: [{ translateY: headerTranslate }]}
     ];
 
     if (!this.state.calendarIsReady) {
@@ -369,7 +380,7 @@ export default class AgendaView extends Component {
       width: 80,
       height: KNOB_HEIGHT,
       top: scrollPadPosition,
-      left: (this.viewWidth - 80) / 2,
+      left: (this.viewWidth - 80) / 2
     };
 
     let knob = (<View style={this.styles.knobContainer}/>);
@@ -389,7 +400,7 @@ export default class AgendaView extends Component {
           {this.renderReservations()}
         </View>
         <Animated.View style={headerStyle}>
-          <Animated.View style={{flex:1, transform: [{ translateY: contentTranslate }]}}>
+          <Animated.View style={{flex:1, transform: [{translateY: contentTranslate}]}}>
             <CalendarList
               onLayout={() => {
                 this.calendar.scrollToDay(this.state.selectedDay.clone(), this.calendarOffset(), false);
@@ -438,11 +449,11 @@ export default class AgendaView extends Component {
           onScrollBeginDrag={this.onStartDrag}
           onScrollEndDrag={this.onSnapAfterDrag}
           onScroll={Animated.event(
-            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
-            { useNativeDriver: true },
+            [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
+            {useNativeDriver: true},
           )}
         >
-          <View style={{height: agendaHeight + KNOB_HEIGHT}} onLayout={this.onScrollPadLayout} />
+          <View style={{height: agendaHeight + KNOB_HEIGHT}} onLayout={this.onScrollPadLayout}/>
         </Animated.ScrollView>
       </View>
     );

src/agenda/reservation-list/index.js

@@ -12,6 +12,8 @@ import dateutils from '../../dateutils';
 import styleConstructor from './style';
 
 class ReactComp extends Component {
+  static displayName = 'IGNORE';
+  
   static propTypes = {
     // specify your item comparison function for increased performance
     rowHasChanged: PropTypes.func,

src/agenda/reservation-list/reservation.js

@@ -6,6 +6,8 @@ import dateutils from '../../dateutils';
 import styleConstructor from './style';
 
 class ReservationListItem extends Component {
+  static displayName = 'IGNORE';
+  
   constructor(props) {
     super(props);
     this.styles = styleConstructor(props.theme);