@samitouri / QOS-React-2
Code Commits Issues Pulls Sessions CI/CD
main
main
js 112 lines 4.11 KB
Raw
1 import {parse, stringify} from 'query-string';
2 import VersionPicker from './VersionPicker';
3
4 const React = window.React;
5
6 class Header extends React.Component {
7 constructor(props, context) {
8 super(props, context);
9 const query = parse(window.location.search);
10 const version = query.version || 'local';
11 const production = query.production || false;
12 const versions = [version];
13
14 this.state = {version, versions, production};
15 }
16 handleVersionChange(version) {
17 const query = parse(window.location.search);
18 query.version = version;
19 if (query.version === 'local') {
20 delete query.version;
21 }
22 window.location.search = stringify(query);
23 }
24 handleProductionChange(event) {
25 const query = parse(window.location.search);
26 query.production = event.target.checked;
27 if (!query.production) {
28 delete query.production;
29 }
30 window.location.search = stringify(query);
31 }
32 handleFixtureChange(event) {
33 window.location.pathname = event.target.value;
34 }
35 render() {
36 return (
37 <header className="header">
38 <div className="header__inner">
39 <span className="header__logo">
40 <img
41 src={process.env.PUBLIC_URL + '/react-logo.svg'}
42 alt="React"
43 width="20"
44 height="20"
45 />
46 <a href="/">
47 DOM Test Fixtures (v
48 {React.version})
49 </a>
50 </span>
51
52 <div className="header-controls">
53 <input
54 id="react_production"
55 className="header__checkbox"
56 type="checkbox"
57 checked={this.state.production}
58 onChange={this.handleProductionChange}
59 />
60 <label htmlFor="react_production" className="header__label">
61 Production
62 </label>
63 <label htmlFor="example">
64 <span className="sr-only">Select an example</span>
65 <select
66 value={window.location.pathname}
67 onChange={this.handleFixtureChange}>
68 <option value="/">Home</option>
69 <option value="/hydration">Hydration</option>
70 <option value="/range-inputs">Range Inputs</option>
71 <option value="/text-inputs">Text Inputs</option>
72 <option value="/number-inputs">Number Input</option>
73 <option value="/password-inputs">Password Input</option>
74 <option value="/email-inputs">Email Input</option>
75 <option value="/selects">Selects</option>
76 <option value="/textareas">Textareas</option>
77 <option value="/progress">Progress</option>
78 <option value="/input-change-events">
79 Input change events
80 </option>
81 <option value="/buttons">Buttons</option>
82 <option value="/date-inputs">Date Inputs</option>
83 <option value="/error-handling">Error Handling</option>
84 <option value="/event-pooling">Event Pooling</option>
85 <option value="/custom-elements">Custom Elements</option>
86 <option value="/media-events">Media Events</option>
87 <option value="/pointer-events">Pointer Events</option>
88 <option value="/mouse-events">Mouse Events</option>
89 <option value="/selection-events">Selection Events</option>
90 <option value="/suspense">Suspense</option>
91 <option value="/form-actions">Form Actions</option>
92 <option value="/form-state">Form State</option>
93 <option value="/fragment-refs">Fragment Refs</option>
94 </select>
95 </label>
96 <label htmlFor="global_version">
97 <span className="sr-only">Select a version to test</span>
98 <VersionPicker
99 id="global_version"
100 name="global_version"
101 version={this.state.version}
102 onChange={this.handleVersionChange}
103 />
104 </label>
105 </div>
106 </div>
107 </header>
108 );
109 }
110 }
111
112 export default Header;