Upgrade to React 16 #508
Upgrade to React 16 #508
Conversation
remove fragment polyfill
| @@ -27,7 +27,7 @@ jobs: | |||
| name: Install dependencies (dash) | |||
| command: | | |||
| git clone [email protected]:plotly/dash.git | |||
| git clone [email protected]:plotly/dash-renderer.git | |||
| git clone -b react-16 [email protected]:plotly/dash-renderer.git | |||
There was a problem hiding this comment.
To be removed once merged into master
| @@ -1,6 +1,5 @@ | |||
| import React from 'react'; | |||
| import React, {Fragment} from 'react'; | |||
There was a problem hiding this comment.
Fragment is supported by React 16, remove the polyfill
| "react-dom": "^16.6.1", | ||
| "react-dot-fragment": "^0.2.8", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6", |
There was a problem hiding this comment.
Bump react, remove polyfill
| @@ -1,6 +1,5 @@ | |||
| percy | |||
| selenium | |||
| pandas | |||
| dash_table_experiments | |||
| xlrd | |||
There was a problem hiding this comment.
Changed table experiment for the table while at it -- the experiment was causing problems in any case
There was a problem hiding this comment.
Just for the tests, or is the transition to 16 the end of the line for anyone still using experiments? Which would be fine, but it would mean we need to be very clear about this with users.
There was a problem hiding this comment.
I changed this because I was having issues with the experiment. Will check if this is end-of-line or just usage details.
There was a problem hiding this comment.
As discussed, will not looking further into this. The issue might be limited to the old import { PropTypes } from 'react' usage, maybe there's more to it.
| test('DatePickerRange renders', () => { | ||
| const dps = render(<DatePickerRange />); | ||
| const dps = render(<DatePickerRange {...defaultProps} />); |
There was a problem hiding this comment.
These props are required when running the React dev build like in Jest. Otherwise console errors prevent the tests from passing.
| start_date.send_keys("1997-05-03") | ||
| self.wait_for_text_to_equal('#date-picker-range-output', 'None - None') | ||
|
|
||
| # updated both dates, callback should now fire and update output | ||
| dt_length = len(end_date.get_attribute('value')) | ||
| end_date.send_keys(dt_length * Keys.BACKSPACE) |
There was a problem hiding this comment.
When used IRL the behaviour is ok (override existing text on click) -- but in Selenium this seems to be an issue now. Delete with backspace all characters..
| dt_input_3.send_keys("1997-05-03") | ||
|
|
||
| dt_input_4 = self.driver.find_element_by_css_selector( | ||
| '#dt-range-no-date-values-init-month #endDate' | ||
| ) | ||
| self.driver.find_element_by_css_selector( | ||
| 'label' | ||
| ).click() |
There was a problem hiding this comment.
Now that we are passing a valid value to react-dates, the calendar opens -- the alternative is throwing an error and crashing the render, not great.. all this means it's in the way when trying to select another component. Clicking something safe to close it.
| dest[key] = null; | ||
|
|
||
| if (key === 'initial_visible_month') { | ||
| dest[key] = moment(); |
There was a problem hiding this comment.
So apparently an invalid moment value is not good enough for initial_visible_month but is fine for everything else, doing moment() on the other hand uses the current month..
| @@ -23,7 +23,7 @@ import Tab from './components/Tab.react'; | |||
| import Store from './components/Store.react'; | |||
| import LogoutButton from './components/LogoutButton.react'; | |||
|
|
|||
| import './components/css/[email protected].css'; | |||
| import 'react-dates/lib/css/_datepicker.css'; | |||
There was a problem hiding this comment.
As before, doing this here because Jest can't process css files for some reason that I don't feel like figuring out.
| if (setProps && date !== null) { | ||
|
|
||
| this.setState({date}); | ||
| if (date) { |
There was a problem hiding this comment.
setProps check is now usless
There was a problem hiding this comment.
This whole if may be useless, if we accept #511
There was a problem hiding this comment.
Yes! I saw the PR :)
|
|
||
| this.setState({start_date, end_date}); | ||
|
|
||
| if (start_date && !start_date.isSame(old_start_date)) { |
There was a problem hiding this comment.
.isSame, .isBefore, .isAfter are functions offered by moment to compare moment objects to various time formats
| @@ -1,7 +1,8 @@ | |||
| import 'react-dates/initialize'; | |||
There was a problem hiding this comment.
Starting with react-dates 13+ that's required
Fixes #428
Fixes https://github.com/plotly/dash-core/issues/13
main pr, renderer: plotly/dash-renderer#145