Skip to content

Commit 820eda7

Browse files
lukebennett88lukebennett88
committed
Convert TestSuite to functional component
1 parent af0d469 commit 820eda7

File tree

1 file changed

+156
-167
lines changed

1 file changed

+156
-167
lines changed

‎docs/Tests.tsx‎

Lines changed: 156 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, {
22
ChangeEventHandler,
3-
Component,
43
ComponentProps,
54
ComponentType,
5+
useState,
66
} from 'react';
77

88
import Select, { MenuPlacement } from 'react-select';
@@ -15,14 +15,6 @@ interface SuiteProps {
1515
readonly selectComponent: ComponentType<ComponentProps<typeof Select>>;
1616
readonly idSuffix: string;
1717
}
18-
interface SuiteState {
19-
readonly isDisabled: boolean;
20-
readonly isFixed: boolean;
21-
readonly isLoading: boolean;
22-
readonly escapeClearsValue: boolean;
23-
readonly blockScroll: boolean;
24-
readonly portalPlacement: MenuPlacement;
25-
}
2618

2719
const AnimatedSelect = (props: ComponentProps<typeof Select>) => (
2820
<Select
@@ -34,180 +26,177 @@ const AnimatedSelect = (props: ComponentProps<typeof Select>) => (
3426
/>
3527
);
3628

37-
class TestSuite extends Component<SuiteProps, SuiteState> {
38-
state: SuiteState = {
39-
isDisabled: false,
40-
isFixed: false,
41-
isLoading: false,
42-
escapeClearsValue: false,
43-
portalPlacement: 'top',
44-
blockScroll: true,
45-
};
46-
toggleDisabled = () => {
47-
this.setState((state) => ({ isDisabled: !state.isDisabled }));
29+
const TestSuite = ({ selectComponent: SelectComp, idSuffix }: SuiteProps) => {
30+
const [isDisabled, setIsDisabled] = useState(false);
31+
const [isFixed, setIsFixed] = useState(false);
32+
const [isLoading, setIsLoading] = useState(false);
33+
const [escapeClearsValue, setEscapeClearsValue] = useState(false);
34+
const [portalPlacement, setPortalPlacement] = useState<MenuPlacement>('top');
35+
const [blockScroll, setBlockScroll] = useState(true);
36+
const toggleDisabled = () => {
37+
setIsDisabled((state) => !state);
4838
};
49-
toggleLoading = () => {
50-
this.setState((state) => ({ isLoading: !state.isLoading }));
39+
const toggleLoading = () => {
40+
setIsLoading((state) => !state);
5141
};
52-
toggleScroll = () => {
53-
this.setState((state) => ({ blockScroll: !state.blockScroll }));
42+
const toggleScroll = () => {
43+
setBlockScroll((state) => !state);
5444
};
55-
toggleMode = () => {
56-
this.setState((state) => ({ isFixed: !state.isFixed }));
45+
const toggleMode = () => {
46+
setIsFixed((state) => !state);
5747
};
58-
toggleEscapeClearsValue = () => {
59-
this.setState((state) => ({ escapeClearsValue: !state.escapeClearsValue }));
48+
const toggleEscapeClearsValue = () => {
49+
setEscapeClearsValue((state) => !state);
6050
};
6151

62-
setPlacement: ChangeEventHandler<HTMLSelectElement> = ({ currentTarget }) => {
63-
const portalPlacement =
52+
const setPlacement: ChangeEventHandler<HTMLSelectElement> = ({
53+
currentTarget,
54+
}) => {
55+
const newPortalPlacement =
6456
currentTarget && (currentTarget.value as MenuPlacement);
65-
this.setState({ portalPlacement });
57+
setPortalPlacement(newPortalPlacement);
6658
};
6759

68-
render() {
69-
const { isFixed, portalPlacement, blockScroll } = this.state;
70-
const { selectComponent: SelectComp, idSuffix } = this.props;
71-
const menuPortalTarget = !isFixed ? document.body : null;
72-
return (
73-
<div id={`cypress-container-${idSuffix}`}>
74-
<div id={`cypress-${idSuffix}`}>
75-
<SelectComp
76-
autoFocus
77-
id={`basic-select-${idSuffix}`}
78-
instanceId={`basic-select-${idSuffix}`}
79-
classNamePrefix="react-select"
80-
defaultValue={colourOptions[0]}
81-
styles={{
82-
menuPortal: (base) => ({ ...base, zIndex: 999 }),
83-
}}
84-
isDisabled={this.state.isDisabled}
85-
isLoading={this.state.isLoading}
86-
options={colourOptions}
87-
/>
88-
<Note Tag="label">
89-
<input
90-
type="checkbox"
91-
onChange={this.toggleDisabled}
92-
className="disable-checkbox"
93-
id={`cypress-${idSuffix}__disabled-checkbox`}
94-
/>
95-
Disabled
96-
</Note>
97-
<Note Tag="label" style={{ marginLeft: '1em' }}>
98-
<input
99-
type="checkbox"
100-
onChange={this.toggleLoading}
101-
id={`cypress-${idSuffix}__loading-checkbox`}
102-
/>
103-
Loading
104-
</Note>
105-
</div>
60+
const menuPortalTarget = !isFixed ? document.body : null;
10661

107-
<h4>Grouped</h4>
108-
<div id={`cypress-${idSuffix}-grouped`}>
109-
<SelectComp
110-
id={`grouped-options-${idSuffix}`}
111-
classNamePrefix="react-select"
112-
defaultValue={colourOptions[1]}
113-
options={groupedOptions}
62+
return (
63+
<div id={`cypress-container-${idSuffix}`}>
64+
<div id={`cypress-${idSuffix}`}>
65+
<SelectComp
66+
autoFocus
67+
id={`basic-select-${idSuffix}`}
68+
instanceId={`basic-select-${idSuffix}`}
69+
classNamePrefix="react-select"
70+
defaultValue={colourOptions[0]}
71+
styles={{
72+
menuPortal: (base) => ({ ...base, zIndex: 999 }),
73+
}}
74+
isDisabled={isDisabled}
75+
isLoading={isLoading}
76+
options={colourOptions}
77+
/>
78+
<Note Tag="label">
79+
<input
80+
type="checkbox"
81+
onChange={toggleDisabled}
82+
className="disable-checkbox"
83+
id={`cypress-${idSuffix}__disabled-checkbox`}
84+
/>
85+
Disabled
86+
</Note>
87+
<Note Tag="label" style={{ marginLeft: '1em' }}>
88+
<input
89+
type="checkbox"
90+
onChange={toggleLoading}
91+
id={`cypress-${idSuffix}__loading-checkbox`}
11492
/>
115-
</div>
93+
Loading
94+
</Note>
95+
</div>
96+
97+
<h4>Grouped</h4>
98+
<div id={`cypress-${idSuffix}-grouped`}>
99+
<SelectComp
100+
id={`grouped-options-${idSuffix}`}
101+
classNamePrefix="react-select"
102+
defaultValue={colourOptions[1]}
103+
options={groupedOptions}
104+
/>
105+
</div>
116106

117-
<h4>Clearable</h4>
118-
<div id={`cypress-${idSuffix}-clearable`}>
119-
<SelectComp
120-
id={`clearable-select-${idSuffix}`}
121-
isClearable
122-
escapeClearsValue={this.state.escapeClearsValue}
123-
classNamePrefix="react-select"
124-
defaultValue={colourOptions[1]}
125-
options={groupedOptions}
107+
<h4>Clearable</h4>
108+
<div id={`cypress-${idSuffix}-clearable`}>
109+
<SelectComp
110+
id={`clearable-select-${idSuffix}`}
111+
isClearable
112+
escapeClearsValue={escapeClearsValue}
113+
classNamePrefix="react-select"
114+
defaultValue={colourOptions[1]}
115+
options={groupedOptions}
116+
/>
117+
<Note Tag="label">
118+
<input
119+
type="checkbox"
120+
onChange={toggleEscapeClearsValue}
121+
className="escape-clears-value-checkbox"
126122
/>
127-
<Note Tag="label">
128-
<input
129-
type="checkbox"
130-
onChange={this.toggleEscapeClearsValue}
131-
className="escape-clears-value-checkbox"
132-
/>
133-
escapeClearsValue
134-
</Note>
135-
</div>
123+
escapeClearsValue
124+
</Note>
125+
</div>
136126

137-
<h4>Portalled</h4>
138-
<div
139-
id={`cypress-${idSuffix}-portalled`}
140-
style={{
141-
backgroundColor: 'papayaWhip',
142-
borderRadius: 5,
143-
boxSizing: 'border-box',
144-
height: 200,
145-
overflow: 'auto',
146-
padding: 15,
147-
width: '100%',
148-
}}
149-
>
150-
<div style={{ height: 100 }} />
151-
<pre>{'overflow: hidden; position: absolute;'}</pre>
152-
<SelectComp
153-
id={`portalled-select-${idSuffix}`}
154-
instanceId={`portalled-select-${idSuffix}`}
155-
classNamePrefix="react-select"
156-
defaultValue={colourOptions[0]}
157-
options={colourOptions}
158-
menuPortalTarget={menuPortalTarget}
159-
menuShouldBlockScroll={blockScroll}
160-
menuShouldScrollIntoView
161-
menuPlacement={portalPlacement}
162-
menuPosition={isFixed ? 'fixed' : 'absolute'}
127+
<h4>Portalled</h4>
128+
<div
129+
id={`cypress-${idSuffix}-portalled`}
130+
style={{
131+
backgroundColor: 'papayaWhip',
132+
borderRadius: 5,
133+
boxSizing: 'border-box',
134+
height: 200,
135+
overflow: 'auto',
136+
padding: 15,
137+
width: '100%',
138+
}}
139+
>
140+
<div style={{ height: 100 }} />
141+
<pre>{'overflow: hidden; position: absolute;'}</pre>
142+
<SelectComp
143+
id={`portalled-select-${idSuffix}`}
144+
instanceId={`portalled-select-${idSuffix}`}
145+
classNamePrefix="react-select"
146+
defaultValue={colourOptions[0]}
147+
options={colourOptions}
148+
menuPortalTarget={menuPortalTarget}
149+
menuShouldBlockScroll={blockScroll}
150+
menuShouldScrollIntoView
151+
menuPlacement={portalPlacement}
152+
menuPosition={isFixed ? 'fixed' : 'absolute'}
153+
/>
154+
<Note Tag="label">
155+
<select
156+
onChange={setPlacement}
157+
value={portalPlacement}
158+
id="cypress-portalled__radio-bottom"
159+
>
160+
<option value="auto">auto</option>
161+
<option value="bottom">bottom</option>
162+
<option value="top">top</option>
163+
</select>
164+
</Note>
165+
<Note Tag="label" style={{ marginLeft: '1em' }}>
166+
<input
167+
type="radio"
168+
onChange={toggleMode}
169+
value="fixed"
170+
checked={isFixed}
171+
id="cypress-portalled__fixed"
172+
/>
173+
Fixed
174+
</Note>
175+
<Note Tag="label" style={{ marginLeft: '1em' }}>
176+
<input
177+
type="radio"
178+
onChange={toggleMode}
179+
value="portal"
180+
checked={!isFixed}
181+
id="cypress-portalled__portal"
182+
/>
183+
Portal
184+
</Note>
185+
<Note Tag="label" style={{ marginLeft: '1em' }}>
186+
<input
187+
type="checkbox"
188+
onChange={toggleScroll}
189+
value="blockScroll"
190+
checked={blockScroll}
191+
id="cypress-portalled__scroll"
163192
/>
164-
<Note Tag="label">
165-
<select
166-
onChange={this.setPlacement}
167-
value={portalPlacement}
168-
id="cypress-portalled__radio-bottom"
169-
>
170-
<option value="auto">auto</option>
171-
<option value="bottom">bottom</option>
172-
<option value="top">top</option>
173-
</select>
174-
</Note>
175-
<Note Tag="label" style={{ marginLeft: '1em' }}>
176-
<input
177-
type="radio"
178-
onChange={this.toggleMode}
179-
value="fixed"
180-
checked={isFixed}
181-
id="cypress-portalled__fixed"
182-
/>
183-
Fixed
184-
</Note>
185-
<Note Tag="label" style={{ marginLeft: '1em' }}>
186-
<input
187-
type="radio"
188-
onChange={this.toggleMode}
189-
value="portal"
190-
checked={!isFixed}
191-
id="cypress-portalled__portal"
192-
/>
193-
Portal
194-
</Note>
195-
<Note Tag="label" style={{ marginLeft: '1em' }}>
196-
<input
197-
type="checkbox"
198-
onChange={this.toggleScroll}
199-
value="blockScroll"
200-
checked={blockScroll}
201-
id="cypress-portalled__scroll"
202-
/>
203-
Block Scroll
204-
</Note>
205-
<div style={{ height: 100 }} />
206-
</div>
193+
Block Scroll
194+
</Note>
195+
<div style={{ height: 100 }} />
207196
</div>
208-
);
209-
}
210-
}
197+
</div>
198+
);
199+
};
211200

212201
export default function Tests() {
213202
return (

0 commit comments

Comments
 (0)