Skip to content

Commit c9d8218

Browse files
mrginglymusmrginglymus
committed
Modernise react harness
1 parent e680364 commit c9d8218

File tree

1 file changed

+119
-179
lines changed

1 file changed

+119
-179
lines changed

‎libraries/react/src/components.jsx‎

Lines changed: 119 additions & 179 deletions
Original file line numberDiff line numberDiff line change
@@ -15,201 +15,141 @@
1515
* limitations under the License.
1616
*/
1717

18-
import React, { Component } from 'react';
18+
import React from 'react';
1919
import '#ce-without-children';
2020
import '#ce-with-children';
2121
import '#ce-with-properties';
2222
import '#ce-with-event';
2323

24-
export class ComponentWithoutChildren extends Component {
25-
render() {
26-
return (
27-
<div>
28-
<ce-without-children id="ce-without-children"></ce-without-children>
29-
</div>
30-
);
31-
}
32-
}
24+
export const ComponentWithoutChildren = () => (
25+
<div>
26+
<ce-without-children id="ce-without-children"></ce-without-children>
27+
</div>
28+
);
3329

34-
export class ComponentWithChildren extends Component {
35-
render() {
36-
return (
37-
<div>
38-
<ce-with-children id="ce-with-children"></ce-with-children>
39-
</div>
40-
);
41-
}
42-
}
4330

44-
export class ComponentWithChildrenRerender extends Component {
45-
constructor () {
46-
super();
47-
this.state = { count: 1 };
48-
}
49-
componentDidMount () {
50-
Promise.resolve().then(_ => this.setState({count: this.state.count += 1}));
51-
}
52-
componentWillUnmount () {
53-
clearInterval(this.interval);
54-
}
55-
render () {
56-
const { count } = this.state;
57-
return (
58-
<div>
59-
<ce-with-children id="ce-with-children-renderer">{count}</ce-with-children>
60-
</div>
61-
);
62-
}
31+
export const ComponentWithChildren = () => (
32+
<div>
33+
<ce-with-children id="ce-with-children"></ce-with-children>
34+
</div>
35+
);
36+
37+
export const ComponentWithChildrenRerender = () => {
38+
const [count, setCount] = React.useState(1);
39+
40+
React.useEffect(() => {
41+
Promise.resolve().then(() => setCount(count => count + 1));
42+
}, []);
43+
44+
return (
45+
<div>
46+
<ce-with-children id="ce-with-children-renderer">{count}</ce-with-children>
47+
</div>
48+
);
6349
}
6450

65-
export class ComponentWithDifferentViews extends Component {
66-
constructor () {
67-
super();
68-
this.state = { showWC: true };
69-
}
70-
toggle() {
71-
this.setState({ showWC: !this.state.showWC });
72-
}
73-
render () {
74-
const { showWC } = this.state;
75-
return (
76-
<div id="ce-with-different-views">
77-
<button onClick={this.toggle.bind(this)}>Toggle views</button>
78-
{showWC ? (
79-
<ce-with-children></ce-with-children>
80-
) : (
81-
<div>Dummy view</div>
82-
)}
83-
</div>
84-
);
85-
}
51+
export const ComponentWithDifferentViews = () => {
52+
const [showWC, setShowWC] = React.useState(true);
53+
return (
54+
<div id="ce-with-different-views">
55+
<button onClick={() => setShowWC(showWC => !showWC)}>Toggle views</button>
56+
{showWC ? (
57+
<ce-with-children></ce-with-children>
58+
) : (
59+
<div>Dummy view</div>
60+
)}
61+
</div>
62+
);
8663
}
8764

88-
export class ComponentWithProperties extends Component {
89-
render () {
90-
const data = {
91-
bool: true,
92-
num: 42,
93-
str: 'React',
94-
arr: ['R', 'e', 'a', 'c', 't'],
95-
obj: { org: 'facebook', repo: 'react' },
96-
camelCaseObj: { label: "passed" }
97-
};
98-
return (
99-
<div>
100-
<ce-with-properties id="ce-with-properties"
101-
bool={data.bool}
102-
num={data.num}
103-
str={data.str}
104-
arr={data.arr}
105-
obj={data.obj}
106-
camelCaseObj={data.camelCaseObj}
107-
></ce-with-properties>
108-
</div>
109-
);
110-
}
65+
export const ComponentWithProperties = () => {
66+
const data = {
67+
bool: true,
68+
num: 42,
69+
str: 'React',
70+
arr: ['R', 'e', 'a', 'c', 't'],
71+
obj: {org: 'facebook', repo: 'react'},
72+
camelCaseObj: {label: "passed"}
73+
};
74+
return (
75+
<div>
76+
<ce-with-properties
77+
id="ce-with-properties"
78+
bool={data.bool}
79+
num={data.num}
80+
str={data.str}
81+
arr={data.arr}
82+
obj={data.obj}
83+
camelCaseObj={data.camelCaseObj}
84+
></ce-with-properties>
85+
</div>
86+
);
11187
}
11288

113-
export class ComponentWithUnregistered extends Component {
114-
render () {
115-
const data = {
116-
bool: true,
117-
num: 42,
118-
str: 'React',
119-
arr: ['R', 'e', 'a', 'c', 't'],
120-
obj: { org: 'facebook', repo: 'react' }
121-
};
122-
return (
123-
<div>
124-
{/* This element doesn't actually exist.
89+
export const ComponentWithUnregistered = () => {
90+
const data = {
91+
bool: true,
92+
num: 42,
93+
str: 'React',
94+
arr: ['R', 'e', 'a', 'c', 't'],
95+
obj: {org: 'facebook', repo: 'react'}
96+
};
97+
return (
98+
<div>
99+
{/* This element doesn't actually exist.
125100
It's used to test unupgraded behavior. */}
126-
<ce-unregistered id="ce-with-unregistered"
127-
bool={data.bool}
128-
num={data.num}
129-
str={data.str}
130-
arr={data.arr}
131-
obj={data.obj}
132-
></ce-unregistered>
133-
</div>
134-
);
135-
}
101+
<ce-unregistered
102+
id="ce-with-unregistered"
103+
bool={data.bool}
104+
num={data.num}
105+
str={data.str}
106+
arr={data.arr}
107+
obj={data.obj}
108+
></ce-unregistered>
109+
</div>
110+
);
136111
}
137112

138-
export class ComponentWithImperativeEvent extends Component {
139-
constructor() {
140-
super();
141-
this.state = {
142-
eventHandled: false
143-
};
144-
this.handleTestEvent = this.handleTestEvent.bind(this);
145-
}
146-
componentDidMount() {
147-
this.wc.addEventListener('camelEvent', this.handleTestEvent);
148-
}
149-
handleTestEvent(e) {
150-
this.setState({ eventHandled: true });
151-
}
152-
render() {
153-
let state = this.state;
154-
return (
155-
<div>
156-
<div id="ce-with-imperative-event-handled" ref={(el) => this.handled = el}>{state.eventHandled.toString()}</div>
157-
<ce-with-event id="ce-with-imperative-event" ref={(el) => this.wc = el}>
158-
Imperative
159-
</ce-with-event>
160-
</div>
161-
);
162-
}
113+
export const ComponentWithImperativeEvent = () => {
114+
const [eventHandled, setEventHandled] = React.useState(false);
115+
const ref = React.useRef();
116+
117+
React.useEffect(() => {
118+
ref.current?.addEventListener('camelEvent', () => setEventHandled(true));
119+
}, [])
120+
121+
return (
122+
<div>
123+
<div id="ce-with-imperative-event-handled">{eventHandled.toString()}</div>
124+
<ce-with-event id="ce-with-imperative-event" ref={ref}>
125+
Imperative
126+
</ce-with-event>
127+
</div>
128+
);
163129
}
164130

165-
export class ComponentWithDeclarativeEvent extends Component {
166-
constructor() {
167-
super();
168-
this.state = {
169-
lowercaseHandled: false,
170-
kebabHandled: false,
171-
camelHandled: false,
172-
capsHandled: false,
173-
pascalHandled: false
174-
};
175-
this.handleLowercaseEvent = this.handleLowercaseEvent.bind(this);
176-
this.handleKebabEvent = this.handleKebabEvent.bind(this);
177-
this.handleCamelEvent = this.handleCamelEvent.bind(this);
178-
this.handleCapsEvent = this.handleCapsEvent.bind(this);
179-
this.handlePascalEvent = this.handlePascalEvent.bind(this);
180-
}
181-
handleLowercaseEvent(e) {
182-
this.setState({ lowercaseHandled: true });
183-
}
184-
handleKebabEvent(e) {
185-
this.setState({ kebabHandled: true });
186-
}
187-
handleCamelEvent(e) {
188-
this.setState({ camelHandled: true });
189-
}
190-
handleCapsEvent(e) {
191-
this.setState({ capsHandled: true });
192-
}
193-
handlePascalEvent(e) {
194-
this.setState({ pascalHandled: true });
195-
}
196-
render() {
197-
let state = this.state;
198-
return (
199-
<div>
200-
<div ref={(el) => this.lowercase = el}>lowercase: {state.lowercaseHandled.toString()}</div>
201-
<div ref={(el) => this.kebab = el}>kebab-case: {state.kebabHandled.toString()}</div>
202-
<div ref={(el) => this.camel = el}>camelCase: {state.camelHandled.toString()}</div>
203-
<div ref={(el) => this.caps = el}>CAPScase: {state.capsHandled.toString()}</div>
204-
<div ref={(el) => this.pascal = el}>PascalCase: {state.pascalHandled.toString()}</div>
205-
<ce-with-event id="ce-with-declarative-event"
206-
onlowercaseevent={this.handleLowercaseEvent}
207-
onkebab-event={this.handleKebabEvent}
208-
oncamelEvent={this.handleCamelEvent}
209-
onCAPSevent={this.handleCapsEvent}
210-
onPascalEvent={this.handlePascalEvent}
211-
>Declarative</ce-with-event>
212-
</div>
213-
);
214-
}
131+
export const ComponentWithDeclarativeEvent = () => {
132+
const [lowercaseHandled, setLowercaseHandled] = React.useState(false);
133+
const [kebabHandled, setKebabHandled] = React.useState(false);
134+
const [camelHandled, setCamelHandled] = React.useState(false);
135+
const [capsHandled, setCapsHandled] = React.useState(false);
136+
const [pascalHandled, setPascalHandled] = React.useState(false);
137+
return (
138+
<div>
139+
<div>lowercase: {lowercaseHandled.toString()}</div>
140+
<div>kebab-case: {kebabHandled.toString()}</div>
141+
<div>camelCase: {camelHandled.toString()}</div>
142+
<div>CAPScase: {capsHandled.toString()}</div>
143+
<div>PascalCase: {pascalHandled.toString()}</div>
144+
<ce-with-event
145+
id="ce-with-declarative-event"
146+
onlowercaseevent={() => setLowercaseHandled(true)}
147+
onkebab-event={() => setKebabHandled(true)}
148+
oncamelEvent={() => setCamelHandled(true)}
149+
onCAPSevent={() => setCapsHandled(true)}
150+
onPascalEvent={() => setPascalHandled(true)}
151+
>Declarative
152+
</ce-with-event>
153+
</div>
154+
);
215155
}

0 commit comments

Comments
 (0)