Component: <KeyboardInput />

src/UI_Components/KeyboardInput.re

@@ -0,0 +1,75 @@
+/*
+ * KeyboardInput.re
+ */
+
+open Revery_UI;
+open Revery_Core;
+open Revery_Math;
+open Revery_UI_Primitives;
+
+module Hooks = Revery_UI_Hooks;
+
+type keyDownFunction = NodeEvents.keyEventParams => unit;
+
+let noop = _ => ();
+
+type action =
+  | Focused(bool)
+  | SetRef(node);
+
+type state = {
+  ref: option(node),
+  hasFocus: bool,
+};
+
+let reducer = (action, state) =>
+  switch (action) {
+  | Focused(v) => {...state, hasFocus: v}
+  | SetRef(v) => {...state, ref: Some(v)}
+  };
+
+let component = React.component("KeyboardInput");
+
+let make =
+    (~onKeyDown: keyDownFunction=noop, children: React.syntheticElement) =>
+  component(hooks => {
+    let (v, dispatch, hooks) =
+      Hooks.reducer(
+        ~initialState={ref: None, hasFocus: false},
+        reducer,
+        hooks,
+      );
+
+    let hooks =
+      Hooks.effect(
+        Always,
+        () => {
+          if (!v.hasFocus) {
+            switch (v.ref) {
+            | Some(v) => Focus.focus(v)
+            | None => ()
+            };
+          };
+          None;
+        },
+        hooks,
+      );
+
+    let onBlur = () => {
+      dispatch(Focused(false));
+    };
+
+    let onFocus = () => {
+      dispatch(Focused(true));
+    };
+
+    (
+      hooks,
+      <View ref={r => dispatch(SetRef(r))} onBlur onFocus onKeyDown>
+        children
+      </View>,
+    );
+  });
+
+let createElement = (~onKeyDown=?, ~children, ()) =>
+  make(~onKeyDown?, React.listToElement(children));

src/UI_Components/KeyboardInput.rei

@@ -0,0 +1,25 @@
+open Revery_UI;
+
+type keyDownFunction = NodeEvents.keyEventParams => unit;
+
+/**
+{2 Description:}
+
+This component is a helper for getting input from the keyboard, outside of a `<Input />`
+component.
+
+{2 Usage:}
+
+{[
+<KeyboardInput onKeyDown={(key) => print_endline("Key: " ++ Key.toString(key))}>>
+  <Container width=100 height=100 />
+</KeyboardInput>
+]}
+ */
+let createElement:
+  (
+    ~onKeyDown: keyDownFunction=?,
+    ~children: list(Revery_UI.React.syntheticElement),
+    unit
+  ) =>
+  Revery_UI.React.syntheticElement;

src/UI_Components/Revery_UI_Components.re

@@ -13,6 +13,7 @@ module Column = Column;
 module Container = Container;
 module Dropdown = Dropdown;
 module ExpandContainer = ExpandContainer;
+module KeyboardInput = KeyboardInput;
 module Input = Input;
 module Positioned = Positioned;
 module Row = Row;

src/index.mld

@@ -49,6 +49,7 @@ Framework for fast, native code, cross-platform GUI applications.
                 {li {{:../Revery/Revery_UI_Components/ClipContainer/index.html} ClipContainer}}
                 {li {{:../Revery/Revery_UI_Components/Container/index.html} Container}}
                 {li {{:../Revery/Revery_UI_Components/Dropdown/index.html} Dropdown}}
+                {li {{:../Revery/Revery_UI_Components/KeyboardInput/index.html} KeyboardInput}}
                 {li {{:../Revery/Revery_UI_Components/Input/index.html} Input}}
                 {li {{:../Revery/Revery_UI_Components/Positioned/index.html} Positioned}}
                 {li {{:../Revery/Revery_UI_Components/RadioButtons/index.html} RadioButtons}}