Thank you, I’m currently looking into it. I must say I am not familiar with React and I’m struggling to initialize my view’s props. Here is the complete snippet for the form component:
import * as React from 'react';
import { AlertMessage } from '@theia/core/lib/browser/widgets/alert-message';
import { Sensor } from './theia-swizard-extension-widget';
export class SensorView extends React.Component<Sensor> {
render(): JSX.Element {
return <React.Fragment>
<ul>
<li>Brand: {this.props.brand}</li>
<li>Model: {this.props.model}</li>
<li>Name: {this.props.name}</li>
</ul>
</React.Fragment>;
}
}
export class TheiaSwizardExtensionView extends React.Component<{}, Sensor> {
constructor(props: {}) {
super(props);
this.state = {
brand: '',
model: '',
name: ''
}
}
render(): JSX.Element {
const header = `From this panel, you can create a new sensor driver using a base skeleton.`;
return <div id="widget-container">
<AlertMessage type='INFO' header={header} />
<h2>New Sensor</h2>
<SensorView brand={this.state.brand} model={this.state.model} name={this.state.name} />
<form onSubmit={this.handleSubmit}>
<label>Brand: <input value={this.state.brand} onChange={this.updateBrand} /></label>
<label>Model: <input value={this.state.model} onChange={this.updateModel} /></label>
<input type="submit" value="OK" />
</form>
</div>;
}
protected handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
this.getName();
}
protected updateBrand = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
brand: e.currentTarget.value
});
protected updateModel = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
model: e.currentTarget.value
});
protected getName = () => this.setState({
name: `${this.cleanString(this.state.brand)}_${this.cleanString(this.state.model)}`
});
protected cleanString = (s: string) => s.toUpperCase().replace(/ /g, "_");
}
And here is is how it is rendered, from the widget:
protected render(): React.ReactNode {
return <TheiaSwizardExtensionView />;
}
Noob alert: I didn’t find a way to pass down any value to TheiaSwizardExtensionView from the widget 