Skip to content

Replace onClick with onMouseDown #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 8, 2014
Merged

Replace onClick with onMouseDown #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 19 additions & 11 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,33 +11,41 @@ <h1>ReactJS DatePicker Example</h1>

<div id="datepicker-container"></div>

<pre id="log"></pre>

<script type="text/javascript">
var container = document.querySelector('#datepicker-container');
var log = document.querySelector('#log');
var exampleComponent = React.createClass({
displayName: 'exampleComponent',

getInitialState: function() {
return {
date: moment()
start_date: moment(),
end_date: moment()
};
},

handleChange: function(date) {
handleStartDateChange: function(date) {
this.setState({
date: date
start_date: date
});
},

log.innerText = "You've selected: " + date.format();
handleEndDateChange: function(date) {
this.setState({
end_date: date
});
},

render: function() {
return DatePicker({
selected: this.state.date,
onChange: this.handleChange
});
return React.DOM.div({}, [
DatePicker({
selected: this.state.start_date,
onChange: this.handleStartDateChange
}),
DatePicker({
selected: this.state.end_date,
onChange: this.handleEndDateChange
})
]);
}
})

Expand Down
45 changes: 19 additions & 26 deletions react-datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ var Calendar = React.createClass({displayName: 'Calendar',
return this.state.date.mapWeeksInMonth(this.renderWeek);
},

handleDayClick: function(day) {
this.props.onSelect(day);
},

renderWeek: function(weekStart, key) {
if(! weekStart.weekInMonth(this.state.date)) {
return;
Expand All @@ -54,7 +58,7 @@ var Calendar = React.createClass({displayName: 'Calendar',
{key:key,
day:day,
date:this.state.date,
onSelect:this.props.onSelect,
onClick:this.handleDayClick.bind(this, day),
selected:new DateUtil(this.props.selected)} )
);
},
Expand All @@ -65,7 +69,7 @@ var Calendar = React.createClass({displayName: 'Calendar',

render: function() {
return (
React.DOM.div( {className:"datepicker-calendar", onClick:this.props.onClick},
React.DOM.div( {className:"datepicker-calendar", onMouseDown:this.props.onMouseDown},
React.DOM.div( {className:"datepicker-calendar-triangle"}),
React.DOM.div( {className:"datepicker-calendar-header"},
React.DOM.a( {className:"datepicker-calendar-header-navigation-left",
Expand Down Expand Up @@ -125,31 +129,26 @@ var DatePicker = React.createClass({displayName: 'DatePicker',
},

handleBlur: function() {
// Reset the value of this._shouldBeFocussed to it's default
this._shouldBeFocussed = false;
this.setState({
focus: !! this._shouldBeFocussed
});

// If state.focus is still true, ignore the browser's blur
if (this.state.focus) {
this.refs.input.getDOMNode().focus();
if (!! this._shouldBeFocussed) {
// Firefox doesn't support immediately focussing inside of blur
setTimeout(function() {
this.refs.input.getDOMNode().focus();
}.bind(this), 0);
}

// Give the browser some time to execute the possible click handlers
// (for when the user clicks inside of the calendar)
setTimeout(function() {
// Set the correct value for state.focus
this.setState({
focus: this._shouldBeFocussed
});
}.bind(this), 100);
// Reset the value of this._shouldBeFocussed to it's default
this._shouldBeFocussed = false;
},

handleCalendarClick: function() {
handleCalendarMouseDown: function() {
this._shouldBeFocussed = true;
},

handleSelect: function(date) {
this._shouldBeFocussed = true;

this.setSelected(date);

setTimeout(function(){
Expand All @@ -172,7 +171,7 @@ var DatePicker = React.createClass({displayName: 'DatePicker',
Calendar(
{selected:this.props.selected,
onSelect:this.handleSelect,
onClick:this.handleCalendarClick} )
onMouseDown:this.handleCalendarMouseDown} )
)
);
}
Expand Down Expand Up @@ -221,12 +220,6 @@ module.exports = DatePicker;
/** @jsx React.DOM */

var Day = React.createClass({displayName: 'Day',
handleClick: function(event) {
this.props.onSelect(this.props.day);

event.stopPropagation();
},

render: function() {
classes = React.addons.classSet({
'datepicker-calendar-day': true,
Expand All @@ -236,7 +229,7 @@ var Day = React.createClass({displayName: 'Day',
});

return (
React.DOM.div( {className:classes, onClick:this.handleClick},
React.DOM.div( {className:classes, onClick:this.props.onClick},
this.props.day.day()
)
);
Expand Down
8 changes: 6 additions & 2 deletions src/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ var Calendar = React.createClass({
return this.state.date.mapWeeksInMonth(this.renderWeek);
},

handleDayClick: function(day) {
this.props.onSelect(day);
},

renderWeek: function(weekStart, key) {
if(! weekStart.weekInMonth(this.state.date)) {
return;
Expand All @@ -53,7 +57,7 @@ var Calendar = React.createClass({
key={key}
day={day}
date={this.state.date}
onSelect={this.props.onSelect}
onClick={this.handleDayClick.bind(this, day)}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Found this suggestion at http://facebook.github.io/react/tips/communicate-between-components.html and I liked it! It seems similar to the following Coffeescript we use at HackerOne:

handleClick: (item) -> =>
  @setState clicked: item
render: ->
  div onClick: @handleClick(item)

What do you guys think?

selected={new DateUtil(this.props.selected)} />
);
},
Expand All @@ -64,7 +68,7 @@ var Calendar = React.createClass({

render: function() {
return (
<div className="datepicker-calendar" onClick={this.props.onClick}>
<div className="datepicker-calendar" onMouseDown={this.props.onMouseDown}>
<div className="datepicker-calendar-triangle"></div>
<div className="datepicker-calendar-header">
<a className="datepicker-calendar-header-navigation-left"
Expand Down
29 changes: 12 additions & 17 deletions src/datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,26 @@ var DatePicker = React.createClass({
},

handleBlur: function() {
// Reset the value of this._shouldBeFocussed to it's default
this._shouldBeFocussed = false;
this.setState({
focus: !! this._shouldBeFocussed
});

// If state.focus is still true, ignore the browser's blur
if (this.state.focus) {
this.refs.input.getDOMNode().focus();
if (!! this._shouldBeFocussed) {
// Firefox doesn't support immediately focussing inside of blur
setTimeout(function() {
this.refs.input.getDOMNode().focus();
}.bind(this), 0);
}

// Give the browser some time to execute the possible click handlers
// (for when the user clicks inside of the calendar)
setTimeout(function() {
// Set the correct value for state.focus
this.setState({
focus: this._shouldBeFocussed
});
}.bind(this), 100);
// Reset the value of this._shouldBeFocussed to it's default
this._shouldBeFocussed = false;
},

handleCalendarClick: function() {
handleCalendarMouseDown: function() {
this._shouldBeFocussed = true;
},

handleSelect: function(date) {
this._shouldBeFocussed = true;

this.setSelected(date);

setTimeout(function(){
Expand All @@ -72,7 +67,7 @@ var DatePicker = React.createClass({
<Calendar
selected={this.props.selected}
onSelect={this.handleSelect}
onClick={this.handleCalendarClick} />
onMouseDown={this.handleCalendarMouseDown} />
</Popover>
);
}
Expand Down
8 changes: 1 addition & 7 deletions src/day.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
/** @jsx React.DOM */

var Day = React.createClass({
handleClick: function(event) {
this.props.onSelect(this.props.day);

event.stopPropagation();
},

render: function() {
classes = React.addons.classSet({
'datepicker-calendar-day': true,
Expand All @@ -16,7 +10,7 @@ var Day = React.createClass({
});

return (
<div className={classes} onClick={this.handleClick}>
<div className={classes} onClick={this.props.onClick}>
{this.props.day.day()}
</div>
);
Expand Down