Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

Upgrade to React 16 #508

Merged
merged 22 commits into from
Apr 9, 2019
Merged

Upgrade to React 16 #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
46fa128
use react-16 renderer
Apr 2, 2019
12a0721
update tests using dash_table_experiment
Apr 2, 2019
938e78f
change rows to data
Apr 2, 2019
99d92ab
fix tests
Apr 3, 2019
843ad9c
revert convert changes
Apr 3, 2019
f9fcd5d
format
Apr 3, 2019
f1fe6dd
update picker tests with "reset" click
Apr 3, 2019
0ed301c
update react version
Apr 3, 2019
d27390c
revert test rework
Apr 3, 2019
992ceef
extra label click
Apr 3, 2019
56ea868
reselect target
Apr 3, 2019
526cc33
fix e2e, break jest
Apr 3, 2019
8e5ca13
format
Apr 3, 2019
15bde4a
update jest tests
Apr 3, 2019
47fa983
dt
Apr 3, 2019
5ffd572
empty line
Apr 3, 2019
602af8f
update react-dates to 20.1.0
Apr 3, 2019
6ba7ffe
lint
Apr 4, 2019
b137649
revert initialVisibleMonth change
Apr 4, 2019
2129d59
remove unused
Apr 4, 2019
931d470
Merge branch 'master' into react-16
Marc-Andre-Rivet Apr 8, 2019
89a435f
merge mistake
Apr 8, 2019
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
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ jobs:
name: Install dependencies (dash)
command: |
git clone git@github.com:plotly/dash.git
git clone git@github.com:plotly/dash-renderer.git
git clone -b react-16 git@github.com:plotly/dash-renderer.git
Copy link
Contributor Author

Choose a reason for hiding this comment

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

To be removed once merged into master

git clone git@github.com:plotly/dash-html-components.git
git clone git@github.com:plotly/dash-table.git
. venv/bin/activate
Expand Down
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
### Added
- `extendData` prop for `Graph` component. This feeds `Plotly.extendTraces` for incremental data updates. [#461](https://github.com/plotly/dash-core-components/pull/461)

### Changed
[#508](https://github.com/plotly/dash-core-components/pull/508)
- Upgrade from React 15.4.2 to 16.8.6
- Upgrade from react-date 12.3.0 to 20.1.0

### Fixed
- Fix unnecessary `loading_state` prop for `Input` component. [#498](https://github.com/plotly/dash-core-components/issues/498)
- Ensure `DatePickerSingle` callbacks fire with cleared dates. [#511](https://github.com/plotly/dash-core-components/pull/511)
Expand Down
1 change: 0 additions & 1 deletion dev-requirements.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
percy
selenium
pandas
dash_table_experiments
xlrd
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changed table experiment for the table while at it -- the experiment was causing problems in any case

Copy link
Collaborator

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I changed this because I was having issues with the experiment. Will check if this is end-of-line or just usage details.

Copy link
Contributor Author

@Marc-Andre-Rivet Marc-Andre-Rivet Apr 5, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

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.

flake8
11 changes: 5 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"ramda": "^0.24.1",
"rc-slider": "^8.3.1",
"react-addons-shallow-compare": "^15.6.0",
"react-dates": "^12.3.0",
"react-dates": "^20.1.0",
"react-docgen": "^2.21.0",
"react-dropzone": "^4.1.2",
"react-markdown": "^4.0.6",
Expand Down Expand Up @@ -70,17 +70,16 @@
"jest": "^24.5.0",
"npm-run-all": "^4.1.5",
"prettier": "^1.14.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-dot-fragment": "^0.2.8",
"react": "^16.8.6",
"react-dom": "^16.8.6",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Bump react, remove polyfill

"style-loader": "^0.23.1",
"styled-jsx": "^3.1.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-serve": "^2.0.3"
},
"peerDependencies": {
"react": "^15.6.0 || ^16.0.0",
"react-dom": "^15.6.0 || ^16.0.0"
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
}
34 changes: 17 additions & 17 deletions src/components/DatePickerRange.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'react-dates/initialize';
import {DateRangePicker} from 'react-dates';
import PropTypes from 'prop-types';
import R from 'ramda';
import React, {Component} from 'react';

import convertToMoment from '../utils/convertToMoment';
Expand Down Expand Up @@ -51,18 +51,19 @@ export default class DatePickerRange extends Component {
}
onDatesChange({startDate: start_date, endDate: end_date}) {
const {setProps, updatemode} = this.props;

const old_start_date = this.state.start_date;
const old_end_date = this.state.end_date;
const newState = {};
if (setProps && start_date !== null && start_date !== old_start_date) {

this.setState({start_date, end_date});

if (start_date && !start_date.isSame(old_start_date)) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

.isSame, .isBefore, .isAfter are functions offered by moment to compare moment objects to various time formats

if (updatemode === 'singledate') {
setProps({start_date: start_date.format('YYYY-MM-DD')});
}
}

newState.start_date = start_date;

if (setProps && end_date !== null && end_date !== old_end_date) {
if (end_date && !end_date.isSame(old_end_date)) {
if (updatemode === 'singledate') {
setProps({end_date: end_date.format('YYYY-MM-DD')});
} else if (updatemode === 'bothdates') {
Expand All @@ -72,22 +73,14 @@ export default class DatePickerRange extends Component {
});
}
}
newState.end_date = end_date;

this.setState(newState);
}

isOutsideRange(date) {
const {min_date_allowed, max_date_allowed} = this.state;
const notUndefined = R.complement(
R.pipe(
R.type,
R.equals('Undefined')
)
);

return (
(notUndefined(min_date_allowed) && date < min_date_allowed) ||
(notUndefined(max_date_allowed) && date >= max_date_allowed)
(min_date_allowed && date.isBefore(min_date_allowed)) ||
(max_date_allowed && date.isAfter(max_date_allowed))
);
}

Expand Down Expand Up @@ -121,6 +114,8 @@ export default class DatePickerRange extends Component {
id,
style,
className,
start_date_id,
end_date_id,
} = this.props;

const verticalFlag = calendar_orientation !== 'vertical';
Expand Down Expand Up @@ -178,6 +173,8 @@ export default class DatePickerRange extends Component {
with_full_screen_portal && verticalFlag
}
withPortal={with_portal && verticalFlag}
startDateId={start_date_id}
endDateId={end_date_id}
/>
</div>
);
Expand All @@ -194,6 +191,9 @@ DatePickerRange.propTypes = {
*/
start_date: PropTypes.string,

start_date_id: PropTypes.string,
end_date_id: PropTypes.string,

/**
* Specifies the ending date for the component.
* Accepts datetime.datetime objects or strings
Expand Down
22 changes: 8 additions & 14 deletions src/components/DatePickerSingle.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import 'react-dates/initialize';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Starting with react-dates 13+ that's required


import {SingleDatePicker} from 'react-dates';
import moment from 'moment';
import PropTypes from 'prop-types';
import R from 'ramda';
import React, {Component} from 'react';

import convertToMoment from '../utils/convertToMoment';
Expand Down Expand Up @@ -53,25 +54,18 @@ export default class DatePickerSingle extends Component {

isOutsideRange(date) {
const {min_date_allowed, max_date_allowed} = this.state;
const notUndefined = R.complement(
R.pipe(
R.type,
R.equals('Undefined')
)
);

return (
(notUndefined(min_date_allowed) && date < min_date_allowed) ||
(notUndefined(max_date_allowed) && date >= max_date_allowed)
(min_date_allowed && date.isBefore(min_date_allowed)) ||
(max_date_allowed && date.isAfter(max_date_allowed))
);
}

onDateChange(date) {
const {setProps} = this.props;
if (setProps) {
setProps({date: date ? date.format('YYYY-MM-DD') : null});
} else {
this.setState({date});
}

this.setState({date});
setProps({date: date ? date.format('YYYY-MM-DD') : null});
}

render() {
Expand Down
3 changes: 1 addition & 2 deletions src/components/Tab.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import React, {Fragment} from 'react';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fragment is supported by React 16, remove the polyfill

import PropTypes from 'prop-types';
import Fragment from 'react-dot-fragment';

const Tab = ({children}) => <Fragment>{children}</Fragment>;

Expand Down
Loading