navigation arrows now hide if they are in the middle of linked calendars

briantingtc · briantingtc · commit 7589bfb0ab61 · 2016-06-22T16:50:11.000-07:00
diff --git a/demo/src/components/Main.js b/demo/src/components/Main.js
@@ -49,144 +49,16 @@ export default class Main extends Component {
           </div>
 
           <DateRange
-            singleDate={ true }
-            onInit={ this.handleChange.bind(this, 'rangePicker') }
-            onChange={ this.handleChange.bind(this, 'rangePicker') }
-          />
-        </Section>
-
-        <Section title='Range Picker (Linked Calendars)'>
-          <div>
-            <input
-              type='text'
-              readOnly
-              value={ linked['startDate'] && linked['startDate'].format(format).toString() }
-            />
-            <input
-              type='text'
-              readOnly
-              value={ linked['endDate'] && linked['endDate'].format(format).toString() }
-            />
-          </div>
-          <DateRange
-            startDate={ now => {
-              return '9/10/2015';
-            }}
-            endDate={ now => {
-              return '13/11/2015';
-            }}
-            linkedCalendars={ true }
-            onInit={ this.handleChange.bind(this, 'linked') }
-            onChange={ this.handleChange.bind(this, 'linked') }
-          />
-        </Section>
-
-        <Section title='Date Picker'>
-          <div>
-            <input
-              type='text'
-              readOnly
-              value={ datePicker && datePicker.format(format).toString() }
-            />
-          </div>
-          <Calendar
-            date={ now => { return now.add(-4, 'days') } }
-            onInit={ this.handleChange.bind(this, 'datePicker') }
-            onChange={ this.handleChange.bind(this, 'datePicker') }
-          />
-        </Section>
-
-        <Section title='Date Picker (Monday First)'>
-          <div>
-            <input
-              type='text'
-              readOnly
-              value={ firstDayOfWeek && firstDayOfWeek.format(format).toString() }
-            />
-          </div>
-          <Calendar
-            firstDayOfWeek={ 1 }
-            date={ now => { return now.add(-4, 'days') } }
-            onInit={ this.handleChange.bind(this, 'firstDayOfWeek') }
-            onChange={ this.handleChange.bind(this, 'firstDayOfWeek') }
-          />
-        </Section>
-
-        <Section title='Range Picker (Predefined Ranges)'>
-          <div>
-            <input
-              type='text'
-              readOnly
-              value={ predefined['startDate'] && predefined['startDate'].format(format).toString() }
-            />
-            <input
-              type='text'
-              readOnly
-              value={ predefined['endDate'] && predefined['endDate'].format(format).toString() }
-            />
-          </div>
-          <DateRange
+            pickSingleDate={ true }
             linkedCalendars={ true }
-            ranges={ defaultRanges }
-            onInit={ this.handleChange.bind(this, 'predefined') }
-            onChange={ this.handleChange.bind(this, 'predefined') }
+            calendars={ 3 }
             theme={{
-              Calendar : { width: 200 },
-              PredefinedRanges : { marginLeft: 10, marginTop: 10 }
-            }}
-          />
-        </Section>
-
-        <Section title='Theming'>
-          <div />
-          <DateRange
-            linkedCalendars={ true }
-            theme={{
-              DateRange      : {
-                background   : '#ffffff'
-              },
-              Calendar       : {
-                background   : 'transparent',
-                color        : '#95a5a6',
-              },
-              MonthAndYear   : {
-                background   : '#e74c3c',
-                color        : '#9e3024'
-              },
-              MonthButton    : {
-                background   : '#c0392b'
-              },
-              MonthArrowPrev : {
-                borderRightColor : '#d96659',
-              },
-              MonthArrowNext : {
-                borderLeftColor : '#d96659',
-              },
-              Weekday        : {
-                background   : '#e74c3c',
-                color        : '#9e3024'
-              },
-              Day            : {
-                transition   : 'transform .1s ease, box-shadow .1s ease, background .1s ease'
-              },
-              DaySelected    : {
-                background   : '#8e44ad'
-              },
-              DayActive    : {
-                background   : '#8e44ad',
-                boxShadow    : 'none'
-              },
-              DayInRange     : {
-                background   : '#9b59b6',
-                color        : '#fff'
-              },
-              DayHover       : {
-                background   : '#ffffff',
-                color        : '#7f8c8d',
-                transform    : 'scale(1.1) translateY(-10%)',
-                boxShadow    : '0 2px 4px rgba(0, 0, 0, 0.4)'
+              Calendar:{
+                width:'193px',
               }
             }}
+            onInit={ this.handleChange.bind(this, 'rangePicker') }
+            onChange={ this.handleChange.bind(this, 'rangePicker') }
           />
         </Section>
       </main>
diff --git a/demo/src/styles/main.css b/demo/src/styles/main.css
@@ -32,7 +32,7 @@
 }
 
 :local(.Demo) {
-  width: 560px;
+  width: 581px;
   float: left;
 }
 
diff --git a/lib/Calendar.js b/lib/Calendar.js
@@ -69,10 +69,12 @@ var Calendar = (function (_Component) {
     var theme = props.theme;
     var offset = props.offset;
     var firstDayOfWeek = props.firstDayOfWeek;
+    var index = props.index;
 
     var date = (0, _utilsParseInputJs2['default'])(props.date, format);
     var state = {
       date: date,
+      index: index,
       inputtedDate: props.date ? true : false,
       shownDate: (range && range['endDate'] || date).clone().add(offset, 'months'),
       firstDayOfWeek: firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek()
@@ -106,6 +108,7 @@ var Calendar = (function (_Component) {
       var _props2 = this.props;
       var link = _props2.link;
       var onChange = _props2.onChange;
+      var offset = _props2.offset;
       var date = this.state.date;
 
       onChange && onChange(newDate, Calendar);
@@ -139,12 +142,18 @@ var Calendar = (function (_Component) {
       var month = _moment2['default'].months(shownDate.month());
       var year = shownDate.year();
       var styles = this.styles;
-      var onlyClasses = this.props.onlyClasses;
+      var _props4 = this.props;
+      var onlyClasses = _props4.onlyClasses;
+      var firstIndex = _props4.firstIndex;
+      var offset = _props4.offset;
+      var pickSingleDate = _props4.pickSingleDate;
 
+      var start = -firstIndex === offset;
+      var end = offset === 0;
       return _react2['default'].createElement(
         'div',
         { style: onlyClasses ? undefined : styles['MonthAndYear'], className: classes.monthAndYearWrapper },
-        _react2['default'].createElement(
+        start && pickSingleDate && _react2['default'].createElement(
           'button',
           {
             style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'left' }),
@@ -171,7 +180,7 @@ var Calendar = (function (_Component) {
             year
           )
         ),
-        _react2['default'].createElement(
+        end && pickSingleDate && _react2['default'].createElement(
           'button',
           {
             style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'right' }),
@@ -208,12 +217,12 @@ var Calendar = (function (_Component) {
 
       // TODO: Split this logic into smaller chunks
       var styles = this.styles;
-      var _props4 = this.props;
-      var range = _props4.range;
-      var minDate = _props4.minDate;
-      var maxDate = _props4.maxDate;
-      var format = _props4.format;
-      var onlyClasses = _props4.onlyClasses;
+      var _props5 = this.props;
+      var range = _props5.range;
+      var minDate = _props5.minDate;
+      var maxDate = _props5.maxDate;
+      var format = _props5.format;
+      var onlyClasses = _props5.onlyClasses;
 
       var shownDate = this.getShownDate();
       var _state = this.state;
@@ -289,9 +298,9 @@ var Calendar = (function (_Component) {
     key: 'render',
     value: function render() {
       var styles = this.styles;
-      var _props5 = this.props;
-      var onlyClasses = _props5.onlyClasses;
-      var classNames = _props5.classNames;
+      var _props6 = this.props;
+      var onlyClasses = _props6.onlyClasses;
+      var classNames = _props6.classNames;
 
       var classes = _extends({}, _stylesJs.defaultClasses, classNames);
 
diff --git a/lib/DateRange.js b/lib/DateRange.js
@@ -188,6 +188,7 @@ var DateRange = (function (_Component) {
       var maxDate = _props2.maxDate;
       var classNames = _props2.classNames;
       var onlyClasses = _props2.onlyClasses;
+      var pickSingleDate = _props2.pickSingleDate;
       var _state = this.state;
       var range = _state.range;
       var link = _state.link;
@@ -212,8 +213,10 @@ var DateRange = (function (_Component) {
             _calendars.push(_react2['default'].createElement(_CalendarJs2['default'], {
               key: i,
               offset: -i,
+              firstIndex: calendars - 1,
               link: linkedCalendars && link,
               linkCB: _this.handleLinkChange.bind(_this),
+              pickSingleDate: pickSingleDate,
               range: range,
               format: format,
               firstDayOfWeek: firstDayOfWeek,
diff --git a/src/Calendar.js b/src/Calendar.js
@@ -35,10 +35,11 @@ class Calendar extends Component {
   constructor(props, context) {
     super(props, context);
 
-    const { format, range, theme, offset, firstDayOfWeek } = props;
+    const { format, range, theme, offset, firstDayOfWeek, index } = props;
     const date = parseInput(props.date, format)
     const state = {
       date,
+      index: index,
       inputtedDate: props.date ? true : false,
       shownDate : (range && range['endDate'] || date).clone().add(offset, 'months'),
       firstDayOfWeek: (firstDayOfWeek || moment.localeData().firstDayOfWeek()),
@@ -61,7 +62,7 @@ class Calendar extends Component {
   }
 
   handleSelect(newDate) {
-    const { link, onChange } = this.props;
+    const { link, onChange, offset } = this.props;
     const { date } = this.state;
 
     onChange && onChange(newDate, Calendar);
@@ -91,27 +92,32 @@ class Calendar extends Component {
     const month           = moment.months(shownDate.month());
     const year            = shownDate.year();
     const { styles }      = this;
-    const { onlyClasses } = this.props;
-
+    const { onlyClasses, firstIndex, offset, pickSingleDate } = this.props;
+    const start = -firstIndex === offset
+    const end = offset === 0
     return (
       <div style={onlyClasses ? undefined : styles['MonthAndYear']} className={classes.monthAndYearWrapper}>
-        <button
-          style={onlyClasses ? undefined : { ...styles['MonthButton'], float : 'left' }}
-          className={classes.prevButton}
-          onClick={this.changeMonth.bind(this, -1)}>
-          <i style={onlyClasses ? undefined : { ...styles['MonthArrow'], ...styles['MonthArrowPrev'] }}></i>
-        </button>
+        { start && pickSingleDate &&
+          <button
+            style={onlyClasses ? undefined : { ...styles['MonthButton'], float : 'left' }}
+            className={classes.prevButton}
+            onClick={this.changeMonth.bind(this, -1)}>
+            <i style={onlyClasses ? undefined : { ...styles['MonthArrow'], ...styles['MonthArrowPrev'] }}></i>
+          </button>
+        }
         <span>
           <span className={classes.month}>{month}</span>
           <span className={classes.monthAndYearDivider}> - </span>
           <span className={classes.year}>{year}</span>
         </span>
-        <button
-          style={onlyClasses ? undefined : { ...styles['MonthButton'], float : 'right' }}
-          className={classes.nextButton}
-          onClick={this.changeMonth.bind(this, +1)}>
-          <i style={onlyClasses ? undefined : { ...styles['MonthArrow'], ...styles['MonthArrowNext'] }}></i>
-        </button>
+        { end && pickSingleDate &&
+          <button
+            style={onlyClasses ? undefined : { ...styles['MonthButton'], float : 'right' }}
+            className={classes.nextButton}
+            onClick={this.changeMonth.bind(this, +1)}>
+            <i style={onlyClasses ? undefined : { ...styles['MonthArrow'], ...styles['MonthArrowNext'] }}></i>
+          </button>
+        }
       </div>
     )
   }
diff --git a/src/DateRange.js b/src/DateRange.js
@@ -118,7 +118,7 @@ class DateRange extends Component {
   }
 
   render() {
-    const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek, minDate, maxDate, classNames, onlyClasses } = this.props;
+    const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek, minDate, maxDate, classNames, onlyClasses, pickSingleDate } = this.props;
     const { range, link } = this.state;
     const { styles } = this;
 
@@ -144,8 +144,10 @@ class DateRange extends Component {
               <Calendar
                 key={i}
                 offset={ -i }
+                firstIndex={ calendars - 1 }
                 link={ linkedCalendars && link }
                 linkCB={ this.handleLinkChange.bind(this) }
+                pickSingleDate={ pickSingleDate }
                 range={ range }
                 format={ format }
                 firstDayOfWeek={ firstDayOfWeek }

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`:local(.Demo) {`
`35`		`- width: 560px;`
	`35`	`+ width: 581px;`
`36`	`36`	`float: left;`
`37`	`37`	`}`
`38`	`38`