Adding 'dayFormatter' and 'markToday' props; editing reservations commets

Author: Inbal-Tish

CHANGELOG.md

@@ -672,3 +672,11 @@
 ### Change
 
 - Day components refactor.
+
+## [1.505.0] - 2020-12-17
+
+### Added
+
+- AgendaList - adding 'dayFormatter' prop to custom format section header's title.
+             - adding 'markToday' prop to control the "TODAY, ..." string appearance.
+             - passing 'title' as a param for 'renderSectionHeader' callback.

src/agenda/reservation-list/index.js

@@ -19,28 +19,28 @@ class ReservationList extends Component {
     reservations: PropTypes.object,
     selectedDay: PropTypes.instanceOf(XDate),
     topDay: PropTypes.instanceOf(XDate),
-    /** Show items only for the selected day. Default = false. */
+    /** Show items only for the selected day. Default = false */
     showOnlySelectedDayItems: PropTypes.bool,
-    /** 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 what should be rendered instead of ActivityIndicator. */
+    /** specify what should be rendered instead of ActivityIndicator */
     renderEmptyData: PropTypes.func,
 
     /** onScroll ListView event */
     onScroll: PropTypes.func,
-    /** Called when the user begins dragging the agenda list. **/
+    /** Called when the user begins dragging the agenda list **/
     onScrollBeginDrag: PropTypes.func,
-    /** Called when the user stops dragging the agenda list. **/
+    /** Called when the user stops dragging the agenda list **/
     onScrollEndDrag: PropTypes.func,
-    /** Called when the momentum scroll starts for the agenda list. **/
+    /** Called when the momentum scroll starts for the agenda list **/
     onMomentumScrollBegin: PropTypes.func,
-    /** Called when the momentum scroll stops for the agenda list. **/
+    /** Called when the momentum scroll stops for the agenda list **/
     onMomentumScrollEnd: PropTypes.func,
-    /** 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,
-    /** 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,
-    /** 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
   };
 

src/agenda/reservation-list/reservation.js

@@ -13,15 +13,15 @@ class Reservation extends Component {
 
   static propTypes = {
     item: PropTypes.any,
-    /** Specify theme properties to override specific styles for reservation parts. Default = {}. */
+    /** Specify theme properties to override specific styles for reservation parts. Default = {} */
     theme: PropTypes.object,
-    /** specify your item comparison function for increased performance. */
+    /** specify your item comparison function for increased performance */
     rowHasChanged: 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 each item should be rendered in agenda. */
+    /** specify how each item should be rendered in agenda */
     renderItem: PropTypes.func,
-    /** specify how empty date content with no items should be rendered. */
+    /** specify how empty date content with no items should be rendered */
     renderEmptyDate: PropTypes.func
   };
 

src/expandableCalendar/agendaList.js

@@ -24,16 +24,21 @@ class AgendaList extends Component {
     ...SectionList.propTypes,
     /** day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting */
     dayFormat: PropTypes.string,
+    /** a function to custom format the section header's title */
+    dayFormatter: PropTypes.func,
     /** whether to use moment.js for date string formatting 
      * (remember to pass 'dayFormat' with appropriate format, like 'dddd, MMM D') */
     useMoment: PropTypes.bool,
+    /** whether to mark today's title with the "Today, ..." string. Default = true */
+    markToday: PropTypes.bool,
     /** style passed to the section view */
     sectionStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array])
   }
 
   static defaultProps = {
     dayFormat: 'dddd, MMM d',
-    stickySectionHeadersEnabled: true
+    stickySectionHeadersEnabled: true,
+    markToday: true
   }
 
   constructor(props) {
@@ -134,35 +139,44 @@ class AgendaList extends Component {
   }
 
   renderSectionHeader = ({section: {title}}) => {
-    if (this.props.renderSectionHeader) {
-      return this.props.renderSectionHeader();
+    const {renderSectionHeader, dayFormatter, dayFormat, useMoment, markToday, sectionStyle} = this.props;
+
+    if (renderSectionHeader) {
+      return renderSectionHeader(title);
     }
 
     let sectionTitle = title;
 
-    if (this.props.dayFormat) {
-      let date;
-      let today;
-
-      if (this.props.useMoment) {
-        date = moment(title).format(this.props.dayFormat);
-        today = moment().format(this.props.dayFormat);
+    if (dayFormatter) {
+      sectionTitle = dayFormatter(title);
+    } else if (dayFormat) {
+      if (useMoment) {
+        sectionTitle = moment(title).format(dayFormat);
       } else {
-        date = XDate(title).toString(this.props.dayFormat);
-        today = XDate().toString(this.props.dayFormat);
+        sectionTitle = XDate(title).toString(dayFormat);
       }
+    }
 
+    if (markToday) {
       const todayString = XDate.locales[XDate.defaultLocale].today || commons.todayString;
-      sectionTitle = date === today ? `${todayString}, ${date}` : date;
+      const today = XDate().toString("yyyy-MM-d");
+      sectionTitle = title === today ? `${todayString}, ${sectionTitle}` : sectionTitle;
     }
 
     return (
-      <Text allowFontScaling={false} style={[this.style.sectionText, this.props.sectionStyle]} onLayout={this.onHeaderLayout}>{sectionTitle}</Text>
+      <Text 
+        allowFontScaling={false} 
+        style={[this.style.sectionText, sectionStyle]} 
+        onLayout={this.onHeaderLayout}
+      >
+        {sectionTitle}
+      </Text>
     );
   }
 
   keyExtractor = (item, index) => {
-    return _.isFunction(this.props.keyExtractor) ? this.props.keyExtractor(item, index) : String(index);
+    const {keyExtractor} = this.props;
+    return _.isFunction(keyExtractor) ? keyExtractor(item, index) : String(index);
   }
 
   render() {