Adds controlled component capabilities. Thu Jul 23 16:56:32 GMT 2015 prop i...

marquex

2015-07-23 c658ad7a05983a5122c5715af402abe28f1ef85a

Adds controlled component capabilities. Thu Jul 23 16:56:32 GMT 2015 prop is renamed to  and adds the new prop  for controlled components.

 DateTime.js

@@ -23,7 +23,8 @@
        time: TimeView
    },
    propTypes: {
        date: TYPES.object,
        value: TYPES.object,
        defaultValue: TYPES.object,
        onBlur: TYPES.func,
        onChange: TYPES.func,
        locale: TYPES.string,
@@ -40,7 +41,8 @@
        var nof = function(){};
        return {
            className: 'form-control',
            date: new Date(),
            value: false,
            defaultValue: new Date(),
            viewMode: 'days',
            inputProps: {},
            input: true,
@@ -50,18 +52,28 @@
            dateFormat: true
        };
    },

    getInitialState: function() {
        var formats = this.getFormats( this.props ),
            date = this.props.date,
            currentView = this.props.viewMode
        var state = this.getStateFromProps( this.props );

        state.open = !this.props.input;
        state.currentView = this.props.viewMode;

        return state;
    },

    getStateFromProps: function( props ){
        var formats = this.getFormats( props ),
            date = props.value || props.defaultValue,
            selectedDate
        ;

        if( !formats.date )
            currentView = 'time';
        if( typeof date == 'string')
            selectedDate = this.localMoment( date, formats.datetime );
        else
            selectedDate = this.localMoment( date );

        return {
            currentView: currentView,
            open: !this.props.input,
            inputFormat: formats.datetime,
            viewDate: this.localMoment(date).startOf("month"),
            selectedDate: this.localMoment(date),
@@ -90,29 +102,32 @@
    },

    componentWillReceiveProps: function(nextProps) {
        var formats = this.getFormats( nextProps );
        if ( formats.datetime !== this.getFormats(this.props).datetime ) {
            return this.setState({
                inputFormat: nextProps.inputFormat
            });
        }
    },

    onChange: function(event) {
        var value = event.target == null ? event : event.target.value,
            localMoment = this.localMoment( value )
        var formats = this.getFormats( nextProps ),
            update = {}
        ;

        if (localMoment.isValid()) {
            this.setState({
                selectedDate: localMoment,
                viewDate: localMoment.clone().startOf("month")
            });
        if( nextProps.value ){
            update = this.getStateFromProps( nextProps );
        }
        if ( formats.datetime !== this.getFormats( this.props ).datetime ) {
            update.inputFormat = formats.datetime;
        }

        return this.setState({
            inputValue: value
        }, function() {
        this.setState( update );
    },

    onInputChange: function( e ) {
        var value = e.target == null ? e : e.target.value,
            localMoment = this.localMoment( value, this.state.inputFormat ),
            update = { inputValue: value }
        ;

        if ( localMoment.isValid() && !this.props.value ) {
            update.selectedDate = localMoment;
            update.viewDate = localMoment.clone().startOf("month");
        }

        return this.setState( update, function() {
            if( localMoment.isValid() )
                return this.props.onChange( localMoment );
        });
@@ -177,15 +192,16 @@
            date[ nextType ]( date[nextType]() );
        }

        this.setState({
            selectedDate: date,
            inputValue: date.format( this.state.inputFormat )
        });

        if( !this.props.value ){
            this.setState({
                selectedDate: date,
                inputValue: date.format( this.state.inputFormat )
            });
        }
        this.props.onChange( date );
    },

    updateDate: function( e ) {
    updateSelectedDate: function( e ) {
        var target = e.target,
            modifier = 0,
            currentDate = this.state.selectedDate,
@@ -206,11 +222,13 @@
            .milliseconds( currentDate.milliseconds() )
        ;

        this.setState({
            selectedDate: date,
            viewDate: date.clone().startOf('month'),
            inputValue: date.format( this.state.inputFormat )
        });
        if( !this.props.value ){
            this.setState({
                selectedDate: date,
                viewDate: date.clone().startOf('month'),
                inputValue: date.format( this.state.inputFormat )
            });
        }

        this.props.onChange( date );
    },
@@ -225,17 +243,17 @@
            this.setState({ open: false });
    },

    localMoment: function( date ){
        var m = moment( date );
    localMoment: function( date, format ){
        var m = moment( date, format );
        if( this.props.locale )
            m.locale( this.props.locale );
        return m;
    },

    componentProps: {
        fromProps: ['isValidDate', 'renderDay', 'renderMonth', 'renderYear'],
        fromProps: ['value', 'isValidDate', 'renderDay', 'renderMonth', 'renderYear'],
        fromState: ['viewDate', 'selectedDate' ],
        fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateDate', 'localMoment']
        fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment']
    },

    getComponentProps: function(){
@@ -270,7 +288,7 @@
                type:'text',
                className: 'form-control',
                onFocus: this.openCalendar,
                onChange: this.onChange,
                onChange: this.onInputChange,
                value: this.state.inputValue
            }, this.props.inputProps ))];
        }

 README.md

@@ -31,7 +31,8 @@

| Name         | Type    | Default | Description |
| ------------ | ------- | ------- | ----------- |
| **date** | Date  | new Date() | Represents the inital dateTime, this prop is parsed by moment.js, so it is possible to use a date string. |
| **value** | Date | new Date() | Represents the value for the compones, in order to use it as a [controlled component](https://facebook.github.io/react/docs/forms.html#controlled-components). This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date. |
| **defaultValue** | Date | new Date() | Represents the inital value for the component to use it as a [uncontrolled component](https://facebook.github.io/react/docs/forms.html#uncontrolled-components). This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date. |
| **dateFormat**   | `bool` or `string`  | `true` | Defines the format for the date. It accepts any [moment.js date format](http://momentjs.com/docs/#/displaying/format/). If `true` the date will be displayed using the defaults for the current locale. If `false` the datepicker is disabled and the component can be used as timepicker. |
| **timeFormat**   | `bool` or `string`  | `true` | Defines the format for the time. It accepts any [moment.js time format](http://momentjs.com/docs/#/displaying/format/). If `true` the time will be displayed using the defaults for the current locale. If `false` the timepicker is disabled and the component can be used as datepicker. |
| **input** | boolean | true | Wether to show an input field to edit the date manually. |

 src/DaysView.js

@@ -96,7 +96,7 @@
                className: classes
            };
            if( !disabled )
                dayProps.onClick = this.props.updateDate;
                dayProps.onClick = this.props.updateSelectedDate;

            days.push( renderer( dayProps, currentDate, selected ) );


 src/TimeView.js

@@ -5,8 +5,11 @@
var DOM = React.DOM;
var DateTimePickerTime = React.createClass({
    getInitialState: function(){
        var date = this.props.selectedDate,
            format = this.props.timeFormat,
        return this.calculateState( this.props );
    },
    calculateState: function( props ){
        var date = props.selectedDate,
            format = props.timeFormat,
            counters = []
        ;

@@ -63,7 +66,9 @@
                )))
            ])
        );

    },
    componentWillReceiveProps: function( nextProps, nextState ){
        this.setState( this.calculateState( nextProps ) );
    },
    updateMilli: function( e ){
        var milli = parseInt( e.target.value );
@@ -82,8 +87,10 @@
    },
    onStartClicking: function( action, type ){
        var me = this,
            update = {}
            update = {},
            value = this.state[ type ]
        ;

        return function(){
            var update = {};
            update[ type ] = me[ action ]( type );
@@ -93,7 +100,7 @@
                me.increaseTimer = setInterval( function(){
                    update[ type ] = me[ action ]( type );
                    me.setState( update );
                },80);
                },70);
            }, 500);

            me.mouseUpListener = function(){