fixes to DateRange

Semantic-Org · May 18, 2017 · 3167d58 · 3167d58
1 parent 35eddf7
commit 3167d58
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 67 deletions.
diff --git a/docs/app/Examples/modules/Datetime/Types/DateRangeExample.js b/docs/app/Examples/modules/Datetime/Types/DateRangeExample.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Datetime } from 'semantic-ui-react'
+import {Datetime} from 'semantic-ui-react'
 
 const DateRangeExample = () => (
   <Datetime.Range

diff --git a/docs/app/Examples/modules/Datetime/index.js b/docs/app/Examples/modules/Datetime/index.js
@@ -9,8 +9,8 @@ import Variations from './Variations'
 const DatetimeExamples = () => (
   <div>
     <Types />
-    {/* <States />
-    <Content /> */}
+    <States />
+    <Content />
   </div>
 )
 

diff --git a/src/modules/Datetime/Calendar.js b/src/modules/Datetime/Calendar.js
@@ -174,19 +174,7 @@ export default class Calendar extends Component {
     const { onDateSelect, value } = this.props
     const date = new this.Date(value)
     date.minutes(minute)
-    //const extraState = {}
-    let nextMode = null
-    if (this.props.range) {
-      //extraState.mode = 'day'
-      nextMode = 'day'
-    }
-    // this.trySetState({
-    //   value: date.getDate(),
-    //   ...extraState,
-    // })
-    // if (onDateSelect) {
-    //   onDateSelect(e, date.getDate())
-    // }
+    const nextMode = this.props.range ? ' day' : null
     onDateSelect(e, date.getDate(), nextMode)
   }
 
@@ -198,21 +186,7 @@ export default class Calendar extends Component {
 
     const selectedDate = date.getDate()
     const nextMode = time ? 'hour' : null
-    // const rangeState = {}
-    // if (range) {
-    //   rangeState.selectionStart = date
-    // }
-    // TODO: WHen using native date, trySetState seems to not work
-    // well (value is not set), while setState does.
-    // this.trySetState({
-    //   value: selectedDate,
-    //   mode: nextMode,
-    //   ...rangeState,
-    // })
     onDateSelect(e, selectedDate, nextMode, range ? date : null)
-    if (!time && onDateSelect) {
-      //onDateSelect(e, selectedDate)
-    }
   }
 
   page = (direction, e) => {
@@ -246,7 +220,6 @@ export default class Calendar extends Component {
     e.stopPropagation()
     const {value, onDateSelect} = this.props
     onDateSelect(e, value, mode)
-    //this.trySetState({ mode })
   }
 
   /**
@@ -261,7 +234,6 @@ export default class Calendar extends Component {
       value,
       selectionStart,
       selectionEnd } = this.props
-    console.log("calendar getBodyContent()  > ", mode, value)
     switch (mode) {
       case 'day':
         return (

diff --git a/src/modules/Datetime/DateRange.js b/src/modules/Datetime/DateRange.js
@@ -7,11 +7,12 @@ import {
   META,
 } from '../../lib'
 
-import { defaultDateFormatter, defaultTimeFormatter } from '../../lib/dateUtils'
+//import { defaultDateFormatter, defaultTimeFormatter } from '../../lib/dateUtils'
 import Calendar from './Calendar'
 import Input from '../../elements/Input'
 import Popup from '../Popup'
 import Grid from '../../collections/Grid'
+import {getDateHandlerClass} from './handlers'
 
 const debug = makeDebugger('datetime')
 
@@ -27,6 +28,9 @@ export default class DateRange extends Component {
   }
 
   static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
     /**
      * Textual content for the various text element of the calendar.
      * {
@@ -52,6 +56,7 @@ export default class DateRange extends Component {
      *   am: 'AM',
      *   pm: 'PM',
      * }
+     * @type {Object}
      */
     content: PropTypes.object,
 
@@ -60,17 +65,26 @@ export default class DateRange extends Component {
 
     /**
      * A function that will return a Date object as a formatted string in the
-     * current locale. By default the Date will formatted as YYYY-MM-DD.
+     * current locale. By default the Date will formatted as YYYY-MM-DD
+     * @type {function}
      */
-    // TODO add signature
     dateFormatter: PropTypes.func,
 
+    /** A disabled dropdown menu or item does not allow user interaction. */
+    disabled: PropTypes.bool,
+
+    /** An array of dates that should be marked disabled in the calendar. */
+    disabledDates: PropTypes.arrayOf(customPropTypes.DateValue),
+
     /** initial value for left and right months **/
     defaultMonths: PropTypes.arrayOf(PropTypes.number),
 
     /** Initial value of open. */
     defaultOpen: PropTypes.bool,
 
+    /** Initial value as an array of Date object or a string that can be parsed into one. */
+    defaultValue: PropTypes.arrayOf(customPropTypes.DateValue),
+
     /** Default value for rangeFocus. */
     defaultRangeFocus: PropTypes.number,
 
@@ -80,12 +94,6 @@ export default class DateRange extends Component {
     /** The initial value for selectionStart. */
     defaultSelectionStart: customPropTypes.DateValue,
 
-    /** Initial value as an array of Date object or a string that can be parsed into one. */
-    defaultValue: PropTypes.arrayOf(customPropTypes.DateValue),
-
-    /** A disabled dropdown menu or item does not allow user interaction. */
-    disabled: PropTypes.bool,
-
     /** An errored dropdown can alert a user to a problem. */
     error: PropTypes.bool,
 
@@ -98,9 +106,6 @@ export default class DateRange extends Component {
       PropTypes.object,
     ]),
 
-    /** An array of dates that should be marked disabled in the calendar. */
-    disabledDates: PropTypes.arrayOf(customPropTypes.DateValue),
-
     /** Do not allow dates after maxDate. */
     maxDate: customPropTypes.DateValue,
 
@@ -165,10 +170,12 @@ export default class DateRange extends Component {
     'rangeFocus',
     'selectionStart',
     'selectionEnd',
+    'mode'
   ]
 
   static defaultProps = {
     icon: 'calendar',
+    dateHandler: 'native',
     content: {
       daysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
       daysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
@@ -192,12 +199,37 @@ export default class DateRange extends Component {
       am: 'AM',
       pm: 'PM',
     },
-    dateFormatter: defaultDateFormatter,
-    timeFormatter: defaultTimeFormatter,
+    disabledDates: [],
+    dateFormatter: null, //defaultDateFormatter,
+    timeFormatter: null,  //defaultTimeFormatter,
     date: true,
     time: false,
   }
 
+  constructor(props) {
+    super(props)
+    const {
+      dateHandler,
+      dateFormatter,
+      timeFormatter,
+      timeZone
+    } = this.props
+    // set Date as the date handler for this instance
+    this.Date = getDateHandlerClass(dateHandler, {
+      dateFormatter,
+      timeFormatter,
+      timeZone
+    })
+    this.state = {
+      mode: this.getInitialMode()
+    }
+  }
+
+  getInitialMode() {
+    const { date, time } = this.props
+    return !date && time ? 'hour' : 'day'
+  }
+
   open = (e) => {
     debug('open()')
 
@@ -216,7 +248,10 @@ export default class DateRange extends Component {
     const { onClose } = this.props
     if (onClose) onClose(e, this.props)
 
-    this.trySetState({ open: false })
+    this.trySetState({
+      open: false,
+      mode: this.getInitialMode()
+    })
   }
 
   toggle = (e) => this.state.open ? this.close(e) : this.open(e)
@@ -280,23 +315,18 @@ export default class DateRange extends Component {
   /**
    * Return a formatted date or date/time string
    */
-  getFormattedDate(value = this.state.value) {
-    const formatted = []
-    if (!value) return ''
-
-    const { date, time, dateFormatter, timeFormatter } = this.props
-    value.forEach((item) => {
-      if (item) {
-        if (date && time) {
-          formatted.push(`${dateFormatter(item)} ${timeFormatter(item)}`)
-        } else if (!date && time) {
-          formatted.push(timeFormatter(item))
-        }
-        formatted.push(dateFormatter(item))
-      }
-    })
-    return formatted.join(' ')
-  }
+   getFormattedDate(value) {
+     value = value || this.state.value
+     const { date, time, dateFormatter, timeFormatter } = this.props
+     const _date = new this.Date(value)
+     if (date && time) {
+       return _date.format()
+     } else if (!date && time) {
+       return _date.formatTime(value)
+     } else {
+       return _date.formatDate(value)
+     }
+   }
 
   /**
    * Get a 2 element array to determine the left and right
@@ -348,6 +378,7 @@ export default class DateRange extends Component {
     const {
       open,
       value,
+      mode,
       selectionStart,
       selectionEnd,
     } = this.state
@@ -365,7 +396,6 @@ export default class DateRange extends Component {
         value={this.getFormattedDate(value)}
       />
     )
-
     return (
       <Popup
         flowing
@@ -386,6 +416,7 @@ export default class DateRange extends Component {
           <Grid.Column>
             <Calendar
               value={months[0]}
+              dateHandler={this.Date}
               content={this.props.content}
               onDateSelect={this.handleDateSelection.bind(this, 0)}
               onChangeMonth={this.handleMonthChange.bind(this, 0)}
@@ -403,6 +434,7 @@ export default class DateRange extends Component {
           <Grid.Column>
             <Calendar
               value={months[1]}
+              dateHandler={this.Date}
               content={this.props.content}
               onDateSelect={this.handleDateSelection.bind(this, 1)}
               onChangeMonth={this.handleMonthChange.bind(this, 1)}

diff --git a/src/modules/Datetime/Datetime.js b/src/modules/Datetime/Datetime.js
@@ -213,7 +213,6 @@ export default class Datetime extends Component {
     this.state = {
       mode: this.getInitialMode()
     }
-    console.log("INITIAL STATE", this.state)
   }
 
   getInitialMode() {
@@ -318,7 +317,6 @@ export default class Datetime extends Component {
       disabledDates,
     } = this.props
     const { open, value, mode } = this.state
-    console.log("INITIAL STATE", this.state)
     const inputElement = (
       <Input
         type='text'