Skip to content

Commit e9afbeb

Browse files
kyoyadmoonkyoyadmoon
authored
Merge pull request #405 from iCHEF/feat/upgrade-react-to-v17
[gypcrete] upgrade react to v17
2 parents 00d4997 + ae627a9 commit e9afbeb

File tree

15 files changed

+659
-240
lines changed

15 files changed

+659
-240
lines changed

‎configs/jestSetup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable import/no-extraneous-dependencies */
22
import Enzyme from 'enzyme';
3-
import Adapter from 'enzyme-adapter-react-16';
3+
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
44

55
Enzyme.configure({ adapter: new Adapter() });

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@babel/preset-react": "^7.0.0",
3939
"@babel/runtime": "^7.4.4",
4040
"@babel/runtime-corejs3": "^7.4.4",
41+
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
4142
"autoprefixer": "^9.6.1",
4243
"babel-core": "7.0.0-bridge.0",
4344
"babel-eslint": "^10.0.1",
@@ -50,7 +51,6 @@
5051
"coveralls": "^3.0.0",
5152
"css-loader": "^0.28.8",
5253
"enzyme": "^3.7.0",
53-
"enzyme-adapter-react-16": "^1.6.0",
5454
"eslint": "7.8",
5555
"eslint-config-airbnb": "18.2",
5656
"eslint-config-ichef": "8.0",
@@ -69,9 +69,9 @@
6969
"node-sass": "^4.12.0",
7070
"postcss-loader": "^3.0.0",
7171
"prop-types": "^15.6.2",
72-
"react": "^16.6.3",
73-
"react-dom": "^16.6.3",
74-
"react-test-renderer": "^16.6.3",
72+
"react": "^17.0.2",
73+
"react-dom": "^17.0.2",
74+
"react-test-renderer": "^17.0.2",
7575
"sass-loader": "^6.0.2",
7676
"style-loader": "^0.19.1",
7777
"stylelint": "^10.1.0",

‎packages/core/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333
"peerDependencies": {
3434
"@babel/runtime-corejs3": "^7.4.4",
3535
"prop-types": "^15.5.8",
36-
"react": "^16.6.0",
37-
"react-dom": "^16.6.0"
36+
"react": "^17.0.2",
37+
"react-dom": "^17.0.2"
3838
},
3939
"dependencies": {
4040
"classnames": "^2.2.5",
@@ -49,7 +49,7 @@
4949
"devDependencies": {
5050
"@babel/cli": "^7.4.4",
5151
"enzyme": "^3.7.0",
52-
"react-is": "^16.6.1",
52+
"react-is": "^17.0.2",
5353
"webpack": "^3.10.0",
5454
"webpack-merge": "^4.1.2"
5555
}

‎packages/core/src/EditableBasicRow.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ class EditableBasicRow extends PureComponent {
9393
focused: false,
9494
};
9595

96-
// eslint-disable-next-line react/no-deprecated
97-
componentWillReceiveProps(nextProps) {
96+
// eslint-disable-next-line react/no-deprecated, camelcase
97+
UNSAFE_componentWillReceiveProps(nextProps) {
9898
if (nextProps.value !== this.props.value) {
9999
this.setState({ currentValue: nextProps.value });
100100
}

‎packages/core/src/EditableTextLabel.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,6 @@ class EditableTextLabel extends PureComponent {
6363
dblTouchTimeout: null,
6464
};
6565

66-
// eslint-disable-next-line react/no-deprecated
67-
componentWillReceiveProps(nextProps) {
68-
/**
69-
* If the edit-state of <EditableTextLabel> is *controlled* by `inEdit` prop.
70-
* If the prop is `undefined`, this component became *uncontrolled*
71-
* and should run itself.
72-
*/
73-
if (this.getEditabilityControlled(nextProps)) {
74-
this.setState({ inEdit: nextProps.inEdit });
75-
}
76-
}
77-
7866
getEditabilityControlled(fromProps = this.props) {
7967
return fromProps.inEdit !== undefined;
8068
}
@@ -86,6 +74,18 @@ class EditableTextLabel extends PureComponent {
8674
});
8775
}
8876

77+
// eslint-disable-next-line react/no-deprecated, camelcase
78+
UNSAFE_componentWillReceiveProps(nextProps) {
79+
/**
80+
* If the edit-state of <EditableTextLabel> is *controlled* by `inEdit` prop.
81+
* If the prop is `undefined`, this component became *uncontrolled*
82+
* and should run itself.
83+
*/
84+
if (this.getEditabilityControlled(nextProps)) {
85+
this.setState({ inEdit: nextProps.inEdit });
86+
}
87+
}
88+
8989
leaveEditModeIfNotControlled() {
9090
if (!this.getEditabilityControlled(this.props)) {
9191
this.setState({ inEdit: false });
@@ -94,9 +94,9 @@ class EditableTextLabel extends PureComponent {
9494

9595
handleDoubleClick = (event) => {
9696
/**
97-
* If `inEdit` isn't controlled, this component by default
98-
* goes into edit mode on double click/touch.
99-
*/
97+
* If `inEdit` isn't controlled, this component by default
98+
* goes into edit mode on double click/touch.
99+
*/
100100
if (!this.getEditabilityControlled()) {
101101
this.setState({ inEdit: true });
102102
}

‎packages/core/src/StatusIcon.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,17 @@ class StatusIcon extends PureComponent {
4848
hideIcon: false,
4949
};
5050

51-
// eslint-disable-next-line react/no-deprecated
52-
componentWillMount() {
51+
componentWillUnmount() {
52+
clearTimeout(this.hideIconTimeout);
53+
}
54+
55+
// eslint-disable-next-line react/no-deprecated, camelcase
56+
UNSAFE_componentWillMount() {
5357
this.autoToggleStatusIcon();
5458
}
5559

56-
// eslint-disable-next-line react/no-deprecated
57-
componentWillReceiveProps(nextProps) {
60+
// eslint-disable-next-line react/no-deprecated, camelcase
61+
UNSAFE_componentWillReceiveProps(nextProps) {
5862
if (nextProps.status !== this.props.status) {
5963
this.autoToggleStatusIcon(nextProps.status);
6064
}
@@ -65,10 +69,6 @@ class StatusIcon extends PureComponent {
6569
}
6670
}
6771

68-
componentWillUnmount() {
69-
clearTimeout(this.hideIconTimeout);
70-
}
71-
7272
/**
7373
* Auto hides status icon after being SUCCESS for 2 secs,
7474
* or shows icon when component leaves SUCCESS state.

‎packages/core/src/mixins/__tests__/closable.test.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ describe.each`
125125
const handleClose = jest.fn();
126126
const closableOptions = { onClickInside, onClickOutside };
127127

128-
mount(
128+
const wrapper = mount(
129129
<ClosableFoo closable={closableOptions} onClose={handleClose} />,
130130
{ attachTo: rootNode },
131131
);
@@ -139,6 +139,8 @@ describe.each`
139139
keyEvent = new KeyboardEvent('keyup', { keyCode: keycode('Escape') });
140140
document.dispatchEvent(keyEvent);
141141
expect(handleClose).toHaveBeenCalledTimes(shouldBeCalled ? 1 : 0);
142+
143+
wrapper.unmount();
142144
});
143145
});
144146

‎packages/core/src/mixins/closable.js‎

Lines changed: 102 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -37,108 +37,108 @@ const closable = ({
3737
};
3838

3939
class Closable extends PureComponent {
40-
static displayName = `closable(${componentName})`;
41-
42-
static propTypes = {
43-
onClose: PropTypes.func,
44-
closable: PropTypes.shape({
45-
onEscape: PropTypes.bool,
46-
onClickOutside: PropTypes.bool,
47-
onClickInside: PropTypes.bool,
48-
stopEventPropagation: PropTypes.bool,
49-
skip: PropTypes.bool,
50-
}),
51-
};
52-
53-
static defaultProps = {
54-
onClose: () => {},
55-
closable: mixinConfigs,
56-
};
57-
58-
componentDidMount() {
59-
if (!this.props.closable.skip) {
60-
document.addEventListener('keyup', this.handleDocumentKeyup);
61-
}
62-
}
63-
64-
componentWillUnmount() {
65-
if (!this.props.closable.skip) {
66-
document.removeEventListener('keyup', this.handleDocumentKeyup);
67-
}
68-
}
69-
70-
getOptions() {
71-
const { closable: runtimeOptions } = this.props;
72-
73-
/** @type {typeof mixinDefaults} */
74-
const actualOptions = {
75-
...mixinConfigs,
76-
...runtimeOptions,
77-
};
78-
79-
return actualOptions;
80-
}
81-
82-
/**
83-
* @param {KeyboardEvent} event
84-
*/
85-
handleDocumentKeyup = (event) => {
86-
const options = this.getOptions();
87-
88-
if (options.onEscape && event.keyCode === keycode(ESCAPE)) {
89-
this.props.onClose(event);
90-
}
91-
}
92-
93-
/**
94-
* @param {React.MouseEvent} event
95-
*/
96-
handleOuterLayerClick = (event) => {
97-
const options = this.getOptions();
98-
99-
if (options.stopEventPropagation) {
100-
event.stopPropagation();
101-
}
102-
103-
if (options.onClickOutside) {
104-
this.props.onClose(event);
105-
}
106-
}
107-
108-
/**
109-
* @param {React.MouseEvent} event
110-
*/
111-
handleInsideClick = (event) => {
112-
const options = this.getOptions();
113-
114-
if (options.onClickInside) {
115-
this.props.onClose(event);
116-
}
117-
}
118-
119-
render() {
120-
const {
121-
onClose,
122-
closable: runtimeOptions,
123-
...otherProps
124-
} = this.props;
125-
126-
return (
127-
<>
128-
{!runtimeOptions.skip && (
129-
<div
130-
role="presentation"
131-
className={ROOT_BEM.toString()}
132-
onClick={this.handleOuterLayerClick}
133-
/>
134-
)}
135-
<WrappedComponent
136-
onInsideClick={this.handleInsideClick}
137-
{...otherProps}
138-
/>
139-
</>
140-
);
141-
}
40+
static displayName = `closable(${componentName})`;
41+
42+
static propTypes = {
43+
onClose: PropTypes.func,
44+
closable: PropTypes.shape({
45+
onEscape: PropTypes.bool,
46+
onClickOutside: PropTypes.bool,
47+
onClickInside: PropTypes.bool,
48+
stopEventPropagation: PropTypes.bool,
49+
skip: PropTypes.bool,
50+
}),
51+
};
52+
53+
static defaultProps = {
54+
onClose: () => {},
55+
closable: mixinConfigs,
56+
};
57+
58+
componentDidMount() {
59+
if (!this.props.closable.skip) {
60+
document.addEventListener('keyup', this.handleDocumentKeyup);
61+
}
62+
}
63+
64+
componentWillUnmount() {
65+
if (!this.props.closable.skip) {
66+
document.removeEventListener('keyup', this.handleDocumentKeyup);
67+
}
68+
}
69+
70+
getOptions() {
71+
const { closable: runtimeOptions } = this.props;
72+
73+
/** @type {typeof mixinDefaults} */
74+
const actualOptions = {
75+
...mixinConfigs,
76+
...runtimeOptions,
77+
};
78+
79+
return actualOptions;
80+
}
81+
82+
/**
83+
* @param {KeyboardEvent} event
84+
*/
85+
handleDocumentKeyup = (event) => {
86+
const options = this.getOptions();
87+
88+
if (options.onEscape && event.keyCode === keycode(ESCAPE)) {
89+
this.props.onClose(event);
90+
}
91+
}
92+
93+
/**
94+
* @param {React.MouseEvent} event
95+
*/
96+
handleOuterLayerClick = (event) => {
97+
const options = this.getOptions();
98+
99+
if (options.stopEventPropagation) {
100+
event.stopPropagation();
101+
}
102+
103+
if (options.onClickOutside) {
104+
this.props.onClose(event);
105+
}
106+
}
107+
108+
/**
109+
* @param {React.MouseEvent} event
110+
*/
111+
handleInsideClick = (event) => {
112+
const options = this.getOptions();
113+
114+
if (options.onClickInside) {
115+
this.props.onClose(event);
116+
}
117+
}
118+
119+
render() {
120+
const {
121+
onClose,
122+
closable: runtimeOptions,
123+
...otherProps
124+
} = this.props;
125+
126+
return (
127+
<>
128+
{!runtimeOptions.skip && (
129+
<div
130+
role="presentation"
131+
className={ROOT_BEM.toString()}
132+
onClick={this.handleOuterLayerClick}
133+
/>
134+
)}
135+
<WrappedComponent
136+
onInsideClick={this.handleInsideClick}
137+
{...otherProps}
138+
/>
139+
</>
140+
);
141+
}
142142
}
143143

144144
return Closable;

‎packages/form/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"peerDependencies": {
3333
"@babel/runtime-corejs3": "^7.4.4",
3434
"prop-types": "^15.5.8",
35-
"react": "^16.6.0"
35+
"react": "^17.0.2"
3636
},
3737
"dependencies": {
3838
"@ichef/gypcrete": "^5.2.0",
@@ -45,7 +45,7 @@
4545
"devDependencies": {
4646
"@babel/cli": "^7.4.4",
4747
"enzyme": "^3.7.0",
48-
"react-dom": "^16.6.0",
48+
"react-dom": "^17.0.2",
4949
"webpack": "^3.10.0"
5050
}
5151
}

0 commit comments

Comments
 (0)