111 lines
4.0 KiB
JavaScript
111 lines
4.0 KiB
JavaScript
import {parse, stringify} from 'query-string';
|
|
import VersionPicker from './VersionPicker';
|
|
|
|
const React = window.React;
|
|
|
|
class Header extends React.Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
const query = parse(window.location.search);
|
|
const version = query.version || 'local';
|
|
const production = query.production || false;
|
|
const versions = [version];
|
|
|
|
this.state = {version, versions, production};
|
|
}
|
|
handleVersionChange(version) {
|
|
const query = parse(window.location.search);
|
|
query.version = version;
|
|
if (query.version === 'local') {
|
|
delete query.version;
|
|
}
|
|
window.location.search = stringify(query);
|
|
}
|
|
handleProductionChange(event) {
|
|
const query = parse(window.location.search);
|
|
query.production = event.target.checked;
|
|
if (!query.production) {
|
|
delete query.production;
|
|
}
|
|
window.location.search = stringify(query);
|
|
}
|
|
handleFixtureChange(event) {
|
|
window.location.pathname = event.target.value;
|
|
}
|
|
render() {
|
|
return (
|
|
<header className="header">
|
|
<div className="header__inner">
|
|
<span className="header__logo">
|
|
<img
|
|
src={process.env.PUBLIC_URL + '/react-logo.svg'}
|
|
alt="React"
|
|
width="20"
|
|
height="20"
|
|
/>
|
|
<a href="/">
|
|
DOM Test Fixtures (v
|
|
{React.version})
|
|
</a>
|
|
</span>
|
|
|
|
<div className="header-controls">
|
|
<input
|
|
id="react_production"
|
|
className="header__checkbox"
|
|
type="checkbox"
|
|
checked={this.state.production}
|
|
onChange={this.handleProductionChange}
|
|
/>
|
|
<label htmlFor="react_production" className="header__label">
|
|
Production
|
|
</label>
|
|
<label htmlFor="example">
|
|
<span className="sr-only">Select an example</span>
|
|
<select
|
|
value={window.location.pathname}
|
|
onChange={this.handleFixtureChange}>
|
|
<option value="/">Home</option>
|
|
<option value="/hydration">Hydration</option>
|
|
<option value="/range-inputs">Range Inputs</option>
|
|
<option value="/text-inputs">Text Inputs</option>
|
|
<option value="/number-inputs">Number Input</option>
|
|
<option value="/password-inputs">Password Input</option>
|
|
<option value="/email-inputs">Email Input</option>
|
|
<option value="/selects">Selects</option>
|
|
<option value="/textareas">Textareas</option>
|
|
<option value="/progress">Progress</option>
|
|
<option value="/input-change-events">
|
|
Input change events
|
|
</option>
|
|
<option value="/buttons">Buttons</option>
|
|
<option value="/date-inputs">Date Inputs</option>
|
|
<option value="/error-handling">Error Handling</option>
|
|
<option value="/event-pooling">Event Pooling</option>
|
|
<option value="/custom-elements">Custom Elements</option>
|
|
<option value="/media-events">Media Events</option>
|
|
<option value="/pointer-events">Pointer Events</option>
|
|
<option value="/mouse-events">Mouse Events</option>
|
|
<option value="/selection-events">Selection Events</option>
|
|
<option value="/suspense">Suspense</option>
|
|
<option value="/form-state">Form State</option>
|
|
</select>
|
|
</label>
|
|
<label htmlFor="global_version">
|
|
<span className="sr-only">Select a version to test</span>
|
|
<VersionPicker
|
|
id="global_version"
|
|
name="global_version"
|
|
version={this.state.version}
|
|
onChange={this.handleVersionChange}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Header;
|