{"action":"created","issue":{"url":"https://api.github.com/repos/airbnb/react-dates/issues/1192","repository_url":"https://api.github.com/repos/airbnb/react-dates","labels_url":"https://api.github.com/repos/airbnb/react-dates/issues/1192/labels{/name}","comments_url":"https://api.github.com/repos/airbnb/react-dates/issues/1192/comments","events_url":"https://api.github.com/repos/airbnb/react-dates/issues/1192/events","html_url":"https://github.com/airbnb/react-dates/pull/1192","id":328598587,"node_id":"MDExOlB1bGxSZXF1ZXN0MTkyMDk0OTY0","number":1192,"title":"Change month height calculation to be based on number of weeks instead of DOM calculations","user":{"login":"majapw","id":1383861,"node_id":"MDQ6VXNlcjEzODM4NjE=","avatar_url":"https://avatars1.githubusercontent.com/u/1383861?v=4","gravatar_id":"","url":"https://api.github.com/users/majapw","html_url":"https://github.com/majapw","followers_url":"https://api.github.com/users/majapw/followers","following_url":"https://api.github.com/users/majapw/following{/other_user}","gists_url":"https://api.github.com/users/majapw/gists{/gist_id}","starred_url":"https://api.github.com/users/majapw/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/majapw/subscriptions","organizations_url":"https://api.github.com/users/majapw/orgs","repos_url":"https://api.github.com/users/majapw/repos","events_url":"https://api.github.com/users/majapw/events{/privacy}","received_events_url":"https://api.github.com/users/majapw/received_events","type":"User","site_admin":false},"labels":[{"id":426721479,"node_id":"MDU6TGFiZWw0MjY3MjE0Nzk=","url":"https://api.github.com/repos/airbnb/react-dates/labels/semver-major:%20breaking%20change","name":"semver-major: breaking change","color":"b60205","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-01T17:20:19Z","updated_at":"2018-06-01T17:39:30Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/airbnb/react-dates/pulls/1192","html_url":"https://github.com/airbnb/react-dates/pull/1192","diff_url":"https://github.com/airbnb/react-dates/pull/1192.diff","patch_url":"https://github.com/airbnb/react-dates/pull/1192.patch"},"body":"Hello friends! \r\n\r\nThis is a precursor to getting https://github.com/airbnb/react-dates/pull/1106 merged in. I separated it out into its own change because it was fairly involved and I didn't want to pollute the code-change in #1106 with something not *entirely* related.\r\n\r\nBasically, when playing around with the month/year selection I found an issue where if you jumped to a month of a different height (5 week month => 6 week month), the height wouldn't automatically adjust as expected. When I started trying to fix the issue, it became apparent that it wasn't possible to do without jank using the existing paradigms.\r\n\r\n*Before:*\r\n1. On render, each `CalendarMonth` component (including the two invisible ones for animation) would measure its own height in the DOM.\r\n2. Each `CalendarMonth` would then call a callback prop, `setMonthHeight`, with this measured value.\r\n3. The `CalendarMonthGrid` would add these values to an ordered array of `CalendarMonth` heights which it would then pass back up to the `DayPicker` via the `setCalendarMonthHeights` prop\r\n4. Once the `DayPicker` would have all of the heights, it would calculate the expected height based on the max of the visible months and grow the calendar appropriately.\r\n5. On month transitions, it would use this array of heights to grow or shrink the calendar appropriately while transitioning.\r\n\r\nThe important thing to note is that the only way it could change the height *while* transitioning was to use the self-calculations made by the invisible months that were already rendered to the DOM. When we want to transition to an arbitrary month or year, there's guaranteed to be jank in this system because we have to render the month before we know its height. The end result is that if you transition from July 2018 to July 2017, the 6-week month will be cut off before it grows. The other option is to hide the calendar in this interim, but that flash is also very apparent.\r\n\r\nSO, this change is designed to amend that.\r\n\r\n*Now:*\r\n1. On the first render (and any time `renderMonth` changes), the `CalendarMonth` measures itself, subtracts out the height of the `CalendarDay` table (which is deterministic based on number of weeks and the `daySize` prop), and call the `setMonthTitleHeight` prop with the value. \r\n2. The `DayPicker` receives this value and saves it in `this.monthTitleHeight`\r\n3. The `DayPicker` also maintains an array of the number of weeks in each visible month.\r\n4. On every month transition, the `DayPicker` uses the number of weeks in the month coming into view along with the `daySize` prop and the saved `monthTitleHeight` to calculate the expected height of the incoming month and adjusts the height appropriately.\r\n\r\nI've tested this in both the vertical and the horizontal pickers and it seems pretty effective! Because we can pretty readily calculate the number of weeks in any incoming month, this should open the door to slick month transitions to any month. We also, tbh, could probably remove the invisible months from render until it's time to slide them in. That can wait for another time though.\r\n\r\nNote, this does assume a pretty constant month title height, but tbh I think that was an implicit assumption before. \r\n\r\nWould love some eyes! @ljharb @gabergg @GoGoCarl\r\n\r\nThese props that I'm changing are all what I would consider internal props (it would be weird if an outside consumer was relying on them for anything)... but are technically part of the API, so this change could be considered breaking. Idk. \r\n\r\nTODO: \r\n-[ ] Write tests for `getNumberOfCalendarMonthWeeks`\r\n-[ ] reset month height when renderMonth changes"},"comment":{"url":"https://api.github.com/repos/airbnb/react-dates/issues/comments/393955361","html_url":"https://github.com/airbnb/react-dates/pull/1192#issuecomment-393955361","issue_url":"https://api.github.com/repos/airbnb/react-dates/issues/1192","id":393955361,"node_id":"MDEyOklzc3VlQ29tbWVudDM5Mzk1NTM2MQ==","user":{"login":"coveralls","id":2354108,"node_id":"MDQ6VXNlcjIzNTQxMDg=","avatar_url":"https://avatars1.githubusercontent.com/u/2354108?v=4","gravatar_id":"","url":"https://api.github.com/users/coveralls","html_url":"https://github.com/coveralls","followers_url":"https://api.github.com/users/coveralls/followers","following_url":"https://api.github.com/users/coveralls/following{/other_user}","gists_url":"https://api.github.com/users/coveralls/gists{/gist_id}","starred_url":"https://api.github.com/users/coveralls/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/coveralls/subscriptions","organizations_url":"https://api.github.com/users/coveralls/orgs","repos_url":"https://api.github.com/users/coveralls/repos","events_url":"https://api.github.com/users/coveralls/events{/privacy}","received_events_url":"https://api.github.com/users/coveralls/received_events","type":"User","site_admin":false},"created_at":"2018-06-01T17:39:30Z","updated_at":"2018-06-01T17:39:30Z","author_association":"NONE","body":"\n[![Coverage Status](https://coveralls.io/builds/17276000/badge)](https://coveralls.io/builds/17276000)\n\nCoverage increased (+0.7%) to 85.505% when pulling **bfd27c08059068c1b1938835b58325b7f64e9df2 on maja-calc-height-based-on-weeks-instead-of-DOM** into **95b5dc8a51b06f8f85f62f4ff722d48e1fed490f on master**.\n"}}
{"actor":{"display_login":"coveralls"}}