fix(scheduler): fix top banner

internal_packages/N1-Scheduler/lib/calendar/proposed-time-picker.jsx

@@ -45,6 +45,12 @@ export default class ProposedTimePicker extends React.Component {
     return new ProposedTimeCalendarDataSource()
   }
 
+  _bannerComponents = () => {
+    return {
+      week: "Click and drag to propose times."
+    }
+  }
+
   _footerComponents = () => {
     return {
       week: [this._leftFooterComponents(), this._rightFooterComponents()],
@@ -114,6 +120,7 @@ export default class ProposedTimePicker extends React.Component {
     return (
       <NylasCalendar
         dataSource={this._dataSource()}
+        bannerComponents={this._bannerComponents()}
         footerComponents={this._footerComponents()}
         onCalendarMouseUp={this._onCalendarMouseUp}
         onCalendarMouseDown={this._onCalendarMouseDown}

src/components/nylas-calendar/nylas-calendar.jsx

@@ -17,6 +17,17 @@ export default class NylasCalendar extends React.Component {
      */
     dataSource: React.PropTypes.instanceOf(CalendarDataSource).isRequired,
 
+    /**
+     * Any extra info you want to display on the top banner of calendar
+     * components
+     */
+    bannerComponents: React.PropTypes.shape({
+      day: React.PropTypes.node,
+      week: React.PropTypes.node,
+      month: React.PropTypes.node,
+      year: React.PropTypes.node,
+    }),
+
     /**
      * Any extra header components for each of the supported View types of
      * the NylasCalendar
@@ -52,6 +63,7 @@ export default class NylasCalendar extends React.Component {
   }
 
   static defaultProps = {
+    bannerComponents: {day: false, week: false, month: false, year: false},
     headerComponents: {day: false, week: false, month: false, year: false},
     footerComponents: {day: false, week: false, month: false, year: false},
   }
@@ -90,6 +102,7 @@ export default class NylasCalendar extends React.Component {
         <CurrentView
           dataSource={this.props.dataSource}
           currentMoment={this.state.currentMoment}
+          bannerComponents={this.props.bannerComponents[this.state.currentView]}
           headerComponents={this.props.headerComponents[this.state.currentView]}
           footerComponents={this.props.footerComponents[this.state.currentView]}
           changeCurrentView={this._changeCurrentView}

src/components/nylas-calendar/top-banner.jsx

@@ -3,10 +3,17 @@ import React from 'react'
 export default class TopBanner extends React.Component {
   static displayName = "TopBanner";
 
+  static propTypes = {
+    bannerComponents: React.PropTypes.node,
+  }
+
   render() {
+    if (!this.props.bannerComponents) {
+      return false
+    }
     return (
       <div className="top-banner">
-        This is the top banner
+        {this.props.bannerComponents}
       </div>
     )
   }

src/components/nylas-calendar/week-view.jsx

@@ -31,6 +31,7 @@ export default class WeekView extends React.Component {
   static propTypes = {
     dataSource: React.PropTypes.instanceOf(CalendarDataSource).isRequired,
     currentMoment: React.PropTypes.instanceOf(moment).isRequired,
+    bannerComponents: React.PropTypes.node,
     headerComponents: React.PropTypes.node,
     footerComponents: React.PropTypes.node,
     changeCurrentView: React.PropTypes.func,
@@ -42,6 +43,7 @@ export default class WeekView extends React.Component {
 
   static defaultProps = {
     changeCurrentView: () => {},
+    bannerComponents: false,
     headerComponents: false,
     footerComponents: false,
   }
@@ -232,11 +234,7 @@ export default class WeekView extends React.Component {
         Today
       </button>
     );
-    const right = (
-      <button key="month" className="btn" style={{order: 100}}>
-        <RetinaImg name="ic-calendar-month.png" mode={RetinaImg.Mode.ContentIsMask} />
-      </button>
-    );
+    const right = false
     return [left, right, this.props.headerComponents]
   }
 
@@ -396,7 +394,7 @@ export default class WeekView extends React.Component {
           onCalendarMouseDown={this.props.onCalendarMouseDown}
           onCalendarMouseMove={this.props.onCalendarMouseMove}
         >
-          <TopBanner />
+          <TopBanner bannerComponents={this.props.bannerComponents} />
 
           <HeaderControls title={this._currentWeekText()}
             headerComponents={this._headerComponents()}