Skip to content

fixed bug on scrollToOnSetSelectedDate #298

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

rjuevesano
Copy link
Contributor

@rjuevesano rjuevesano commented May 26, 2021

@peacechen Setting scrollToOnSetSelectedDate to false is not working on scrollable.

@peacechen
Copy link
Collaborator

The scroller's scrollToDate method is also called by updateWeekView. It's a general method and shouldn't be dependent on scrollToOnSetSelectedDate.
The setSelectedDate() method checks for the scrollToOnSetSelectedDate flag which is the flag's purpose.

if (this.props.scrollToOnSetSelectedDate) {

What behavior are you trying get from it?

@rjuevesano
Copy link
Contributor Author

So I have this configuration

<CalendarStrip
          // @ts-ignore
          ref={ref}
          scrollable={true}
          scrollerPaging={true}
          showMonth={true}
          styleWeekend={false}
          useIsoWeekday={true}
          startingDate={dates[0]}
          selectedDate={moment()}
          scrollToOnSetSelectedDate={false}
          ...
/>

I want to disabled scrollToOnSetSelectedDate. Right now, it's false but it's scrolling when selecting a date and it's not what I wanted to achieve. I fixed by adding that prop to Scroller component.

@rjuevesano
Copy link
Contributor Author

rjuevesano commented May 26, 2021

check this... so I'm showing it by weekly. Swiping and clicking the arrows works fine but on selecting a date, it will show the date/s from other week.

i'm also calling the function when selecting a date
calendarStripRef.current?.setSelectedDate(itemDate);

Upload.from.GitHub.for.iOS.MOV

@peacechen
Copy link
Collaborator

Try removing the prop

selectedDate={moment()}

That constructs a new date of today on every render. The date might be the same, but it's a different object and the prop change detection may pick it up and use it.

@rjuevesano
Copy link
Contributor Author

Try removing the prop

selectedDate={moment()}

That constructs a new date of today on every render. The date might be the same, but it's a different object and the prop change detection may pick it up and use it.

No luck. Still the same.

@peacechen
Copy link
Collaborator

peacechen commented May 27, 2021

setSelectedDate() calls onDateSelected() which calls createDays(). That may be what triggers the the scrolling.

Note the function signature for createDays(startingDate, selectedDate). That resets the starting date back to the initial starting date stored in state. We could add an optional startingDate parameter to setSelectedDate to let you control which date it focuses.

...this.createDays(this.state.startingDate, selectedDate),

Would you mind testing these proposed changes --
Line 298

  onDateSelected = (selectedDate, startingDate = this.state.startingDate) => {

Line 306

        ...this.createDays(startingDate, selectedDate),

Line 323

  setSelectedDate = (date, startingDate = this.state.startingDate) => {
    let mDate = moment(date);
    this.onDateSelected(mDate, startingDate);

As you may have noticed, updating the prop startingDate should also have the effect you want without any code changes. However it may still be beneficial to add the startingDate parameter to setSelectedDate

@peacechen
Copy link
Collaborator

karuru6225 fixed an issue with updating the state in onDateSelected in PR #299

You might want to try it out to see if it addresses this issue too. You can use the head of this repo by pointing directly to it in package.json. Run npm install after changing it.

  "dependencies": {
    "react-native-calendar-strip": "https://github.com/BugiDev/react-native-calendar-strip",
    ...
  }

To make sure it's grabbing the current code, I recommend clearing the npm cache before re-running npm install:
#204 (comment)

@rjuevesano
Copy link
Contributor Author

Sorry, still not working.

@felipebelinassi
Copy link

Any update for this? I'm also trying to set the scrollToOnSetSelectedDate to false and it's not working.
I tried the solution made in this PR locally and it worked fine.

@QuyenTran93
Copy link

Any update for this? I'm also trying to set the scrollToOnSetSelectedDate to false and it's not working. I tried the solution made in this PR locally and it worked fine.

if (!this.props.scrollToOnSetSelectedDate) return;
I trying move this line to after
if (minDate && targetDate.isBefore(minDate, "day")) {

And issue will be fix with scrollToOnSetSelectedDate={false}

@RimApp
Copy link

RimApp commented Feb 24, 2022

Any update ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants