Increase click area of arrows for changing day/month/year

Simon Egersand

2017-04-21 c82df854356a45b9b29bc28967d6512f4531dbf0

Increase click area of arrows for changing day/month/year

Instead of having the click hander on the span element, it's now
attached to the parent th element. This aligns better with the CSS and
improves the usability of the component.

 src/DaysView.js

@@ -18,9 +18,9 @@
        tableChildren = [
            DOM.thead({ key: 'th' }, [
                DOM.tr({ key: 'h' }, [
                    DOM.th({ key: 'p', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 1, 'months' )}, '‹' )),
                    DOM.th({ key: 'p', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'months' )}, DOM.span({}, '‹' )),
                    DOM.th({ key: 's', className: 'rdtSwitch', onClick: this.props.showView( 'months' ), colSpan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ),
                    DOM.th({ key: 'n', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 1, 'months' )}, '›' ))
                    DOM.th({ key: 'n', className: 'rdtNext', onClick: this.props.addTime( 1, 'months' )}, DOM.span({}, '›' ))
                ]),
                DOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day, index ) { return DOM.th({ key: day + index, className: 'dow'}, day ); }) )
            ]),

 src/MonthsView.js

@@ -10,9 +10,9 @@
    render: function() {
        return DOM.div({ className: 'rdtMonths' }, [
            DOM.table({ key: 'a' }, DOM.thead( {}, DOM.tr( {}, [
                DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 1, 'years' )}, '‹' )),
                DOM.th({ key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'years' )}, DOM.span({}, '‹' )),
                DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ),
                DOM.th({ key: 'next', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 1, 'years' )}, '›' ))
                DOM.th({ key: 'next', className: 'rdtNext', onClick: this.props.addTime( 1, 'years' )}, DOM.span({}, '›' ))
            ]))),
            DOM.table({ key: 'months' }, DOM.tbody({ key: 'b' }, this.renderMonths()))
        ]);

 src/YearsView.js

@@ -12,9 +12,9 @@

        return DOM.div({ className: 'rdtYears' }, [
            DOM.table({ key: 'a' }, DOM.thead({}, DOM.tr({}, [
                DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 10, 'years' )}, '‹' )),
                DOM.th({ key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 10, 'years' )}, DOM.span({}, '‹' )),
                DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2 }, year + '-' + ( year + 9 ) ),
                DOM.th({ key: 'next', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 10, 'years' )}, '›' ))
                DOM.th({ key: 'next', className: 'rdtNext', onClick: this.props.addTime( 10, 'years' )}, DOM.span({}, '›' ))
                ]))),
            DOM.table({ key: 'years' }, DOM.tbody( {}, this.renderYears( year )))
        ]);