From 6b2d8203168306e6d7d02f26c9c4654e8c8832c1 Mon Sep 17 00:00:00 2001
From: Evan Morikawa <evan@evanmorikawa.com>
Date: Wed, 6 Apr 2016 12:08:05 -0700
Subject: [PATCH] fix(scheduler): fix top banner

---
 .../lib/calendar/proposed-time-picker.jsx           |  7 +++++++
 src/components/nylas-calendar/nylas-calendar.jsx    | 13 +++++++++++++
 src/components/nylas-calendar/top-banner.jsx        |  9 ++++++++-
 src/components/nylas-calendar/week-view.jsx         | 10 ++++------
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/internal_packages/N1-Scheduler/lib/calendar/proposed-time-picker.jsx b/internal_packages/N1-Scheduler/lib/calendar/proposed-time-picker.jsx
index 88ec63f6f..b23eb44f0 100644
--- a/internal_packages/N1-Scheduler/lib/calendar/proposed-time-picker.jsx
+++ b/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}
diff --git a/src/components/nylas-calendar/nylas-calendar.jsx b/src/components/nylas-calendar/nylas-calendar.jsx
index 2fb36e557..d9cb98be2 100644
--- a/src/components/nylas-calendar/nylas-calendar.jsx
+++ b/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}
diff --git a/src/components/nylas-calendar/top-banner.jsx b/src/components/nylas-calendar/top-banner.jsx
index 2f89e06f1..5d29055de 100644
--- a/src/components/nylas-calendar/top-banner.jsx
+++ b/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>
     )
   }
diff --git a/src/components/nylas-calendar/week-view.jsx b/src/components/nylas-calendar/week-view.jsx
index 47c94165d..85966ceaf 100644
--- a/src/components/nylas-calendar/week-view.jsx
+++ b/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()}