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.

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

Expose onBlur prop #122

Closed
srph opened this Issue Jan 20, 2016 · 3 comments

Comments

2 participants
@srph
Contributor

srph commented Jan 20, 2016

<DayPicker onBlur={} />

I have a use-case for there where the DayPicker appears as a popover.

ATM, I show/hide the datepicker through a state (active when the input is focused; inactive on blur). However, clicking the DayPicker div changes the focus from the input to the DayPicker.

I have no means of checking if the user has focused away from the DayPicker.

  • If there's blur, there's usually focus, but I'm not sure if there's any relevance.
  • Or we could just use the spread operator so all other props are accepted (<DayPicker onDayClick={...} {...other} />).

I'm willing to send a PR, just need some approval first.

@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jan 20, 2016

Owner

👍 Makes sense, thanks for the idea.

I would even adopt the spread operator, but take care! It requires to remove some HTML attributes, such as tabIndex and style, and to update a bit the render() and handleKeyDown() functions. This is how I would make it:

handleKeyDown(e) {
    e.persist();
    const { canChangeMonth, onKeyDown }  = this.props;
    if (!canChangeMonth && onKeyDown) {
       onKeyDown(e);
       return;
    }
    if (canChangeMonth) {
      const callback = onKeyDown ? () => onKeyDown(e) : null;
      switch (e.keyCode) {
      case keys.LEFT:
        this.showPreviousMonth(callback);
        break;
      case keys.RIGHT:
        this.showNextMonth(callback);
        break;
     }
    }
  },
// snip
render() {
    const { numberOfMonths, locale, canChangeMonth, onDayClick, onDayTouchTap, ...attributes } = this.props;
    const { currentMonth } = this.state;
    let className = `DayPicker DayPicker--${locale}`;

    if (!onDayClick && !onDayTouchTap) {
      className = `${className} DayPicker--interactionDisabled`;
    }
    if (attributes.className) {
      className = `${className} ${attributes.className}`;
    }
    const months = [];
    let month;
    for (let i = 0; i < numberOfMonths; i++) {
      month = DateUtils.addMonths(currentMonth, i);
      months.push(this.renderMonth(month, i));
    }

    return (
      <div role="widget" onKeyDown={ ::this.handleKeyDown } {...attributes}>
        { canChangeMonth && this.renderNavBar() }
        { months }
      </div>
    );
}

Please use attributes as spread variable.

Owner

gpbl commented Jan 20, 2016

👍 Makes sense, thanks for the idea.

I would even adopt the spread operator, but take care! It requires to remove some HTML attributes, such as tabIndex and style, and to update a bit the render() and handleKeyDown() functions. This is how I would make it:

handleKeyDown(e) {
    e.persist();
    const { canChangeMonth, onKeyDown }  = this.props;
    if (!canChangeMonth && onKeyDown) {
       onKeyDown(e);
       return;
    }
    if (canChangeMonth) {
      const callback = onKeyDown ? () => onKeyDown(e) : null;
      switch (e.keyCode) {
      case keys.LEFT:
        this.showPreviousMonth(callback);
        break;
      case keys.RIGHT:
        this.showNextMonth(callback);
        break;
     }
    }
  },
// snip
render() {
    const { numberOfMonths, locale, canChangeMonth, onDayClick, onDayTouchTap, ...attributes } = this.props;
    const { currentMonth } = this.state;
    let className = `DayPicker DayPicker--${locale}`;

    if (!onDayClick && !onDayTouchTap) {
      className = `${className} DayPicker--interactionDisabled`;
    }
    if (attributes.className) {
      className = `${className} ${attributes.className}`;
    }
    const months = [];
    let month;
    for (let i = 0; i < numberOfMonths; i++) {
      month = DateUtils.addMonths(currentMonth, i);
      months.push(this.renderMonth(month, i));
    }

    return (
      <div role="widget" onKeyDown={ ::this.handleKeyDown } {...attributes}>
        { canChangeMonth && this.renderNavBar() }
        { months }
      </div>
    );
}

Please use attributes as spread variable.

@srph

This comment has been minimized.

Show comment
Hide comment
@srph

srph Jan 20, 2016

Contributor

awesome! alright, I'll work on it after I sleep! I might cast some ancient magic spell I'm not aware of.

Contributor

srph commented Jan 20, 2016

awesome! alright, I'll work on it after I sleep! I might cast some ancient magic spell I'm not aware of.

@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jan 20, 2016

Owner

lol @srph then have a good sleep with magic dreams 🍄

Owner

gpbl commented Jan 20, 2016

lol @srph then have a good sleep with magic dreams 🍄

@gpbl gpbl added the new feature label Jan 20, 2016

srph added a commit to srph/react-day-picker that referenced this issue Jan 21, 2016

Spread attributes to container.
This would allow us to pass event listeners and all sort
of things. See #122.

@gpbl gpbl closed this in #123 Jan 23, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment