Allow flippable prop for DatePicker and TimePicker

Author: donnieberg

components/date-picker/index.jsx

@@ -20,6 +20,10 @@ import {KEYS,EventUtil} from '../../utilities';
 const displayName = 'Datepicker';
 const propTypes = {
   abbrWeekDayLabels: React.PropTypes.array,
+  /**
+   * If true, allows popover to appear above input field based on available space with scroll position.
+   */
+  flippable: React.PropTypes.bool,
   /**
    * Date formatting function
    */
@@ -45,6 +49,7 @@ const propTypes = {
 };
 const defaultProps = {
   abbrWeekDayLabels: ['S','M','T','W','T','F','S'],
+  flippable: true,
   formatter (date) {
     if(date){
       return (date.getMonth()+1) +
@@ -142,7 +147,7 @@ module.exports = React.createClass({
   popover() {
     if(this.state && this.state.isOpen){
       const date = this.state.strValue?this.parseDate(this.state.strValue):this.state.value;
-      return <Popover className='slds-dropdown' targetElement={this.refs.date} onClose={this.handleClose}>
+      return <Popover className='slds-dropdown' flippable={this.props.flippable} targetElement={this.refs.date} onClose={this.handleClose}>
         <DatePicker
           onChange={this.handleChange}
           selected={this.state.selected}

components/time-picker/index.jsx

@@ -21,6 +21,10 @@ import {KEYS,EventUtil} from '../../utilities';
 const displayName = 'Timepicker';
 const propTypes = {
   constrainToScrollParent: React.PropTypes.bool,
+  /**
+   * If true, allows dropdown to appear above input field based on available space with scroll position.
+   */
+  flippable: React.PropTypes.bool,
 
   /**
    * Time formatting function
@@ -46,6 +50,7 @@ const propTypes = {
 
 };
 const defaultProps = {
+  flippable: true,
   formatter (date) {
     if(date){
       return date.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'});
@@ -200,12 +205,12 @@ module.exports = React.createClass({
     return (
       !this.props.disabled && this.state.isOpen?
         <Popover
-          className="slds-dropdown slds-dropdown--left "
+          className="slds-dropdown slds-dropdown--left"
           closeOnTabKey={true}
           constrainToScrollParent={this.props.constrainToScrollParent}
           inheritTargetWidth={this.props.inheritTargetWidth}
           dropClass="slds-picklist"
-          flippable={true}
+          flippable={this.props.flippable}
           onClose={this.handleCancel.bind(this)}
           targetElement={this.refs.triggerbutton}>
           {this.getPopoverContent()}

stories/date-picker/index.jsx

@@ -10,11 +10,7 @@ const getDatepicker = props => (
 	<Datepicker {...props} />
 );
 
-const handleDateChange = (date) => {
-  console.log('>>> onDateChange ', date);
-}
-
 storiesOf(DATE_PICKER, module)
 	.addDecorator(getStory => <div className="slds-p-around--medium">{getStory()}</div>)
-	.add('Base', () => getDatepicker({ onDateChange: handleDateChange }))
+	.add('Base', () => getDatepicker({ onDateChange: action('onDateChange') }))
 

stories/time-picker/index.jsx

@@ -10,11 +10,7 @@ const getTimepicker = props => (
 	<Timepicker {...props} />
 );
 
-const handleDateChange = (date, inputStr) => {
-  console.log('>>> onDateChange ', date, ' inputStr: ',inputStr);
-}
-
 storiesOf(TIME_PICKER, module)
 	.addDecorator(getStory => <div className="slds-p-around--medium">{getStory()}</div>)
-	.add('Base', () => getTimepicker({ stepInMinutes: 30, onDateChange: handleDateChange }))
+	.add('Base', () => getTimepicker({ stepInMinutes: 30, onDateChange: action('onDateChange') }))