Reason-Revery Showcase

App.re

/*FOR REASONML-REVERY SHOWCASE*/

open Revery;
open Revery.UI;
open Revery.UI.Components;

type color =
  | Red
  | Green
  | Blue
  | SomethingElse
  | SomethingBright;

let getHex = color =>
  switch (color) {
  | Red => "#DB4D3F"
  | Green => "#00FF00"
  | Blue => "#1D62F0"
  | _ => "#FFF"
  };

module ButtonUI = {
  let component = React.component("Button");

  let wrapperStyle =
    Style.[
      backgroundColor(Color.rgba(1., 1., 1., 0.1)),
      border(~width=2, ~color=Colors.white),
      width(122),
      padding(20),
      margin(16),
    ];

  let textHeaderStyle =
    Style.[
      color(Colors.white),
      fontFamily("Roboto-Regular.ttf"),
      fontSize(20),
      margin(4),
    ];

  let createElement = (~children, ~onClick, ~text, ()) =>
    component(_hooks =>
      (
        _hooks,
        <Clickable onClick>
          <View style=wrapperStyle> <Text style=textHeaderStyle text /> </View>
        </Clickable>,
      )
    );
};

module TheBox = {
  let component = React.component("TheBox");

  let createElement = (~children as _, ()) =>
    component(hooks => {
      // Use similar API like React Hooks loh nyet!
      // And also a tuple!
      let (state, setState, hooks) = React.Hooks.state(0, hooks);

      // Array of Variants
      let _arrayOfColor = [|Red, Green, Blue|];

      // Recursive Function
      let rec _getIndex = () => {
        let index = Random.int(3);
        // No return here yeay!
        index === state ? _getIndex() : index;
      };

      let _randColor = () => setState(_getIndex());

      let containerStyle =
        Style.[
          backgroundColor(getHex(_arrayOfColor[state]) |> Color.hex),
          height(4600),
          width(2200),
          justifyContent(`Center),
          alignItems(`Center),
        ];

      (
        hooks,
        <View style=containerStyle>
          <ButtonUI onClick={() => _randColor()} text="Click Me!" />
        </View>,
      );
    });
};

let init = app => {
  let win = App.createWindow(app, "Not todo App");

  let containerStyle =
    Style.[
      flexDirection(`Row),
      backgroundColor(Color.hex("#EAEAEA")),
      position(`Absolute),
      justifyContent(`Center),
      alignItems(`Center),
      bottom(0),
      top(0),
      left(0),
      right(0),
    ];

  let render = () => <View style=containerStyle> <TheBox /> </View>;

  UI.start(win, render);
};

App.start(init);