Make it possible to get ReactAdapterComponent functionality with some other super class about flow HOT 6 OPEN

We can create a new interface and move there the functionality from ReactAdapterComponent, and then keep the ReactAdapterComponent abstract class as a shortcut for simple cases that implements this new interface and extends Component. What do you think?

Also, maybe a separate docs issue - we need an example of how to wrap a React component as a Flow field, e.g. to be able to use it with the Binder on a form.

from flow.

As long as we can have an interface to avoid the boilerplate, I'm not against a abstract class in addition. I don't know if that will make things easier.

With ReactAdapterComponent class:

@JsModule("./react-component.tsx")
@Tag("react-component")
public class ReactMonthYearField
        extends ReactAdapterComponent {

With the interface:

@JsModule("./react-component.tsx")
@Tag("react-component")
public class ReactMonthYearField
        extends Component
        implements IReactAdapter {

Also, maybe a separate docs issue - we need an example of how to wrap a React component as a Flow field, e.g. to be able to use it with the Binder on a form.

Or a blog post, it depends a bit of what you want to implement (HasTooltip, HasLabel, HasHelper, HasValidation,...), that can be tough.
And that could be done for Lit or a webcomponent also :).

But at least in the repository I linked (https://github.com/jcgueriaud1/vaadin-react-field/), you have an example for both React and Lit.

from flow.

I don't think an interface is the right option since interfaces define the public API of a class and you wouldn't want to make methods like setState part of the API that users of your component would see.

Instead, there might be an opportunity for a "connector" that you can use from your component. A simple example could thus look like this:

@Tag("some-tag")
@JsModule("./someModule")
public class MyComponent extends SomeOtherComponent {
  private final ReactComponentConnector connector = new ReactComponentConnector(this);
  public void setValue(String value) {
    connector.setState("value", value);
  }
}

from flow.

I've just noticed that I'm not using the interface at all, since I'm using getElement().setProperty("invalid", invalid); and not setState("invalid",invalid);

I think the connector could handle the other case and leave everything protected. (I'm not sure if everything can be handled with properties)

from flow.

The implementation of ReactAdapterComponent is basically just some helpers around Element::setPropertyJson, Element::getPropertyRaw and Element::addPropertyChangeListener. All of the actual magic is handled by Flow and/or the client-side base class for the custom element.

from flow.

thumbs up for the connector idea This would allow the usage of AbstractSinglePropertyField and other important classes without cluttering the public interface.

from flow.