From 3167d580fa1a5154f1d3939e12d8c5b71f877ba8 Mon Sep 17 00:00:00 2001 From: Harel Malka Date: Thu, 18 May 2017 17:08:42 +0100 Subject: [PATCH] fixes to DateRange --- .../Datetime/Types/DateRangeExample.js | 2 +- docs/app/Examples/modules/Datetime/index.js | 4 +- src/modules/Datetime/Calendar.js | 30 +----- src/modules/Datetime/DateRange.js | 98 ++++++++++++------- src/modules/Datetime/Datetime.js | 2 - 5 files changed, 69 insertions(+), 67 deletions(-) diff --git a/docs/app/Examples/modules/Datetime/Types/DateRangeExample.js b/docs/app/Examples/modules/Datetime/Types/DateRangeExample.js index 04788b8695..4c73da54b8 100644 --- 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 = () => ( (
- {/* - */} + +
) diff --git a/src/modules/Datetime/Calendar.js b/src/modules/Datetime/Calendar.js index 5e0a689797..d4776dda10 100644 --- 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 index 1f54f780b9..ee2fc08e66 100644 --- 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 (