juliensanmartin

// Callback when the Circle triggers 'onClick' props callback
const _handleClickCircle = (element, clickedDate) => {
  // Create a detail object containing the data that is send 
  // from the react component. Here we send back the current date
  const detail = { clickedDate };

  // We create then an event 'onClickCircle' and pass this detail object
  const event = new CustomEvent('onClickCircle', { detail });

  // And dispatch the event

juliensanmartin

...
// Save in one spot the event's name
private static final String CLICK_CIRCLE_EVENT_TYPE = "onClickCircle";

...
// pass down the element where to attach onClickCircle event 
addClickOnCircleEventListener(circleReactElement, CLICK_CIRCLE_EVENT_TYPE, this, true);

...
// Java method using native JS code 

juliensanmartin

package mypackage;

public class ReactEventDetail extends JavaScriptObject {
    protected ReactEventDetail() {
        // GWT needs this empty constructor
    }

    public final native String getDate() /*-{ return this.clickedDate; }-*/;
}

juliensanmartin

// import React and ReactDom that will inject
// our div created in the GWT Widget to our React component
import React from 'react';
import ReactDOM from 'react-dom';

// Circle React component
import { Circle } from 'my-react-shapes';

// An IIFE (Immediately Invoked Function Expression) 
// Will runs as soon as it is defined.

juliensanmartin

package mypackage;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.user.client.ui.Widget;

import mypackage.ReactEventDetail;

juliensanmartin

const styleCircle = (color, diameter) => ({
  background: color,
  width: `${diameter}px`,
  height: `${diameter}px`,
  borderRadius: '50%'
});

const Circle = ({ diameter, color, onClick }) => (
    <div
      style={styleCircle(color, diameter)}

juliensanmartin

package mypackage;

import com.google.gwt.core.client.JavaScriptObject;

public class ReactEventDetail extends JavaScriptObject {
    protected ReactEventDetail() {
        // GWT needs this empty constructor
    }

    public final native String getDate() /*-{ return this.currentDate; }-*/;

juliensanmartin

import React from 'react';
import { getSquareData } from 'square-endpoint';

const styleCircle = (color, diameter) => ({
  background: color,
  width: `${diameter}px`,
  height: `${diameter}px`,
  borderRadius: '50%'
});

juliensanmartin

package mypackage;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.user.client.ui.Widget;

import mypackage.ReactEventDetail;

juliensanmartin

import React from 'react';
import ReactDOM from 'react-dom';
import { Square, Circle } from 'my-react-shapes';

(function(global) {
  const renderSquare = (parentDiv, squareId, color, size) => {
    const mySquare = (
      <Square
        squareId={squareId}
        color={color}