Invoke command from React.Component?

[JonasHelming]

Posted by: on 2/17/2021, 9:35:52 AM

Hi,

I’m building a widget extension with a backend service. The general idea is to provide the user with a form which will create files based on the user input on submit.

The widget (which extends ReactWidget) instantiates a React.Component on render():

    protected render(): React.ReactNode {
        return <TheiaSwizardExtensionView />;
    }

That component provides the form and handles user input manipulation by storing values into its state. Once the user clicks “Submit”, I would like to be able to trigger a callback in the widget (the “parent” ReactWidget), which holds the CommandRegistry, with the ReactNode state as argument to that callback.

I failed to find examples in Theia but I might have overlooked something.

Could someone provide me with any pointer?

Thank you!

[JonasHelming]

Posted by: on 2/17/2021, 10:57:35 AM

I am not sure if I got this, but you can pass down the service in the props just like in pure React. Here is an example, if you are looking for something like this.

github.com

eclipse-theia/theia/blob/f3a15db2e364549922a843f195371f5a19a1a403/packages/timeline/src/browser/timeline-tree-widget.tsx#L52-L56

const content = <TimelineItemNode
    timelineItem={node.timelineItem}
    commandRegistry={this.commandRegistry}
    contextKeys={this.contextKeys}
    contextMenuRenderer={this.contextMenuRenderer}/>;

[JonasHelming]

Posted by: on 2/17/2021, 11:13:02 AM

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 &lt;div id="widget-container"&gt;
        &lt;AlertMessage type='INFO' header={header} /&gt;

        &lt;h2&gt;New Sensor&lt;/h2&gt;

        &lt;SensorView brand={this.state.brand} model={this.state.model} name={this.state.name} /&gt;

        &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;label&gt;Brand: &lt;input value={this.state.brand} onChange={this.updateBrand} /&gt;&lt;/label&gt;
            &lt;label&gt;Model: &lt;input value={this.state.model} onChange={this.updateModel} /&gt;&lt;/label&gt;
            &lt;input type="submit" value="OK" /&gt;
        &lt;/form&gt;
    &lt;/div&gt;;
}

protected handleSubmit = (e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
    e.preventDefault();
    this.getName();
}

protected updateBrand = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; this.setState({
    brand: e.currentTarget.value
});

protected updateModel = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; this.setState({
    model: e.currentTarget.value
});

protected getName = () =&gt; this.setState({
    name: `${this.cleanString(this.state.brand)}_${this.cleanString(this.state.model)}`
});

protected cleanString = (s: string) =&gt; 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

[JonasHelming]

Posted by: on 2/17/2021, 11:35:52 AM

vincent:

Noob alert: I didn’t find a way to pass down any value to TheiaSwizardExtensionView from the widg

No worries. I added a quick example. Open the Sample Unclosable View and see how it works. Also, check the console (in the dev tools). My example does not call the command service eventually, but it’s there. You can use it. I hope this helps.

[JonasHelming]

Posted by: on 2/17/2021, 11:41:02 AM

This is great. Thank you very much. I got close but you just nailed it!

Now I just have to find out how to declare commands which accept arguments

[JonasHelming]

Posted by: on 2/17/2021, 9:13:47 PM

vincent:

Now I just have to find out how to declare commands which accept arguments

You can take a look at our test cases for an example on a command that can accept arguments:

github.com

eclipse-theia/theia/blob/f3a15db2e364549922a843f195371f5a19a1a403/packages/core/src/common/command.spec.ts#L32-L38

it('should register and execute a given command', async () => {
    const concatId = 'concat';
    const command: Command = { id: concatId };
    commandRegistry.registerCommand(command, new ConcatCommandHandler());
    const result = await commandRegistry.executeCommand(concatId, 'a', 'b', 'c');
    expect('abc').equals(result);
});

You can take a look how the command is registered, and how to invoke it

[JonasHelming]

Posted by: on 2/17/2021, 9:28:52 PM

You know what? That’s exactly what I did, and it worked out just the way it should have

Thank you again for your promptness. It’s a pleasure to work with Theia with such great help.