SplitView bindings

examples/components-macos/bin/app.re

@@ -26,86 +26,104 @@ module Component = {
           />
         </EffectView>
       | None =>
-        <ScrollView
+        <SplitView
           style=[
             position(~top=0., ~left=0., ~right=0., ~bottom=0., `Absolute),
-            background(Color.hex("#f7f8f9")),
+            SplitView.vertical(true),
           ]>
-          <Text
-            style=[
-              font(~size=24., ~weight=`Medium, ()),
-              kern(0.5),
-              align(`Center),
-              color(Color.hex("#ffffff")),
-              background(Color.hex("#263ac5")),
-              padding(10.),
-            ]
-            value="Welcome to Brisk"
-          />
-          <View
+          <View>
+            <EffectView
+              style=EffectView.[
+                position(~top=0., ~left=0., ~right=0., ~bottom=0., `Relative),
+                blendingMode(`BehindWindow),
+              ]>
+              <Button
+                style=[width(100.), height(100.), align(`Center)]
+                title="Menu"
+              />
+            </EffectView>
+          </View>
+          <ScrollView
             style=[
-              justifyContent(`Center),
-              alignContent(`Center),
-              background(Color.hex("#eeeeee")),
+              position(~top=0., ~left=0., ~right=0., ~bottom=0., `Relative),
+              background(Color.hex("#f7f8f9")),
             ]>
-            <Image
-              style=[margin4(~top=10., ()), alignSelf(`Center)]
-              source={`Bundle("reason")}
-            />
             <Text
               style=[
-                font(~size=18., ()),
+                font(~size=24., ~weight=`Medium, ()),
+                kern(0.5),
                 align(`Center),
-                alignSelf(`Center),
-                width(200.),
-                border(~radius=10., ()),
                 color(Color.hex("#ffffff")),
-                background(Color.hexa("#263ac5", 0.9)),
-                margin(20.),
-                padding2(~h=10., ~v=10., ()),
+                background(Color.hex("#263ac5")),
+                padding(10.),
               ]
-              value="Text bubble"
+              value="Welcome to Brisk"
             />
-          </View>
-          <Button
-            style=[
-              width(400.),
-              height(60.),
-              margin4(~top=20., ()),
-              alignSelf(`Center),
-              font(~size=16., ()),
-              color(Color.hex("#ffffff")),
-              background(Color.hex("#263ac5")),
-              align(`Center),
-            ]
-            title="You're gonna have to wait 1 second"
-            callback={() =>
-              Lwt.Infix.(
-                ignore(
-                  Lwt_unix.sleep(1.)
-                  >>= (_ => Lwt.return(setState(Some(100)))),
-                )
-              )
-            }
-          />
-          <View style=[alignContent(`Center), height(900.)]>
-            <Text
+            <View
               style=[
-                font(~size=18., ()),
-                align(`Center),
+                justifyContent(`Center),
+                alignContent(`Center),
+                background(Color.hex("#eeeeee")),
+              ]>
+              <Image
+                style=[margin4(~top=10., ()), alignSelf(`Center)]
+                source={`Bundle("reason")}
+              />
+              <Text
+                style=[
+                  font(~size=18., ()),
+                  align(`Center),
+                  alignSelf(`Center),
+                  width(200.),
+                  border(~radius=10., ()),
+                  color(Color.hex("#ffffff")),
+                  background(Color.hexa("#263ac5", 0.9)),
+                  margin(20.),
+                  padding2(~h=10., ~v=10., ()),
+                ]
+                value="Text bubble"
+              />
+            </View>
+            <Button
+              style=[
+                width(400.),
+                height(60.),
+                margin4(~top=20., ()),
                 alignSelf(`Center),
-                width(200.),
-                height(600.),
-                border(~radius=10., ()),
-                color(Color.hex("#011021")),
-                background(Color.hex("#f0f0f0")),
-                margin(20.),
-                padding2(~h=10., ~v=10., ()),
+                font(~size=16., ()),
+                color(Color.hex("#ffffff")),
+                background(Color.hex("#263ac5")),
+                align(`Center),
               ]
-              value="Very large height for scrolling"
+              title="You're gonna have to wait 1 second"
+              callback={() =>
+                Lwt.Infix.(
+                  ignore(
+                    Lwt_unix.sleep(1.)
+                    >>= (_ => Lwt.return(setState(Some(100)))),
+                  )
+                )
+              }
             />
-          </View>
-        </ScrollView>
+            <View style=[alignContent(`Center), height(900.)]>
+              <Text
+                style=[
+                  font(~size=18., ()),
+                  align(`Center),
+                  alignSelf(`Center),
+                  width(200.),
+                  height(600.),
+                  border(~radius=10., ()),
+                  color(Color.hex("#011021")),
+                  background(Color.hex("#f0f0f0")),
+                  margin(20.),
+                  padding2(~h=10., ~v=10., ()),
+                ]
+                value="Very large height for scrolling"
+              />
+            </View>
+          </ScrollView>
+        </SplitView>
       };
     });
 };

renderer-macos/lib/Brisk_macos.re

@@ -15,6 +15,7 @@ module Cocoa = {
   module GCD = GCD;
 
   module BriskEffectView = BriskEffectView;
+  module BriskSplitView = BriskSplitView;
 };
 
 /* Components */
@@ -24,3 +25,4 @@ module Text = Text;
 module Image = Image;
 module Button = Button;
 module EffectView = EffectView;
+module SplitView = SplitView;

renderer-macos/lib/bindings/BriskSplitView.re

@@ -0,0 +1,48 @@
+module DividerStyle = {
+  type t;
+
+  [@noalloc]
+  external thick: unit => t =
+    "ml_getNSSplitViewDividerStyleThick_bc"
+    "ml_getNSSplitViewDividerStyleThick";
+
+  [@noalloc]
+  external thin: unit => t =
+    "ml_getNSSplitViewDividerStyleThin_bc" "ml_getNSSplitViewDividerStyleThin";
+
+  [@noalloc]
+  external paneSplitter: unit => t =
+    "ml_getNSSplitViewDividerStylePaneSplitter_bc"
+    "ml_getNSSplitViewDividerStylePaneSplitter";
+};
+
+type dividerStyle = [ | `Thick | `Thin | `PaneSplitter];
+
+type style = [ | `Vertical(bool) | `DividerStyle(dividerStyle)];
+
+type t = CocoaTypes.view;
+
+[@noalloc] external make: unit => t = "ml_BriskSplitView_make";
+
+[@noalloc]
+external setVertical: (t, [@untagged] int) => unit =
+  "ml_BriskSplitView_setVertical_bc" "ml_BriskSplitView_setVertical";
+
+[@noalloc]
+external setDividerStyle: (t, DividerStyle.t) => unit =
+  "ml_BriskSplitView_setDividerStyle";
+
+let setStyle = (split, attribute: [> style]) =>
+  switch (attribute) {
+  | `Vertical(vertical) => setVertical(split, vertical ? 1 : 0)
+  | `DividerStyle(dividerStyle) =>
+    (
+      switch (dividerStyle) {
+      | `Thick => DividerStyle.thick()
+      | `Thin => DividerStyle.thin()
+      | `PaneSplitter => DividerStyle.paneSplitter()
+      }
+    )
+    |> setDividerStyle(split)
+  | _ => ()
+  };

renderer-macos/lib/components/SplitView.re

@@ -0,0 +1,35 @@
+open Brisk;
+
+type attribute = [ Layout.style | BriskSplitView.style];
+
+type style = list(attribute);
+
+let dividerStyle = dividerStyle => `DividerStyle(dividerStyle);
+let vertical = vertical => `Vertical(vertical);
+
+let component = nativeComponent("SplitView");
+
+let make = (~style: style=[], children) =>
+  component((_: Hooks.empty) =>
+    {
+      make: () => {
+        let view = BriskSplitView.make();
+        {view, layoutNode: Layout.Node.make(~style, view)};
+      },
+      configureInstance: (~isFirstRender as _, {view} as node) => {
+        style
+        |> List.iter(attribute =>
+             switch (attribute) {
+             | #BriskSplitView.style =>
+               BriskSplitView.setStyle(view, attribute)
+             | #Layout.style => ()
+             }
+           );
+        node;
+      },
+      children,
+    }
+  );
+
+let createElement = (~style=[], ~children, ()) =>
+  element(make(~style, listToElement(children)));

renderer-macos/lib/dune

@@ -19,6 +19,7 @@
           BriskMenu
           BriskView
           BriskScrollView
+          BriskSplitView
           BriskStylableText
           BriskTextView
           BriskImage

renderer-macos/lib/stubs/BriskCocoa.h

@@ -4,6 +4,13 @@
 #import <caml/callback.h>
 #import <caml/memory.h>
 
+#define ACCESSOR(VALUE)                                                        \
+  intnat ml_get##VALUE() { return VALUE; }                                     \
+  value ml_get##VALUE##_bc() {                                                 \
+    CAMLparam0();                                                              \
+    CAMLreturn(VALUE);                                                         \
+  }
+
 // Memoize registered OCaml callbacks
 void brisk_caml_memoize(const char *name, value **staticPointer);
 

renderer-macos/lib/stubs/BriskEffectView.c

@@ -1,13 +1,6 @@
 #import "Availability.h"
 #import "BriskCocoa.h"
 
-#define ACCESSOR(VALUE)                                                        \
-  intnat ml_get##VALUE() { return VALUE; }                                     \
-  value ml_get##VALUE##_bc() {                                                 \
-    CAMLparam0();                                                              \
-    CAMLreturn(VALUE);                                                         \
-  }
-
 #define VISUAL_EFFECT(VALUE) ACCESSOR(NSVisualEffectMaterial##VALUE)
 #define BLENDING_MODE(VALUE) ACCESSOR(NSVisualEffectBlendingMode##VALUE)
 #define EFFECT_STATE(VALUE) ACCESSOR(NSVisualEffectState##VALUE)

renderer-macos/lib/stubs/BriskSplitView.c

@@ -0,0 +1,37 @@
+#import "BriskCocoa.h"
+
+#define DIVIDER_STYLE(VALUE) ACCESSOR(NSSplitViewDividerStyle##VALUE)
+
+DIVIDER_STYLE(Thick)
+DIVIDER_STYLE(Thin)
+DIVIDER_STYLE(PaneSplitter)
+
+@interface BriskSplitView : NSSplitView
+@end
+
+@implementation BriskSplitView
+@end
+
+BriskSplitView *ml_BriskSplitView_make() {
+  BriskSplitView *split = [BriskSplitView new];
+  retainView(split);
+
+  return split;
+}
+
+void ml_BriskSplitView_setVertical(BriskSplitView *split, intnat vertical) {
+  split.vertical = (BOOL)vertical;
+}
+
+CAMLprim value ml_BriskSplitView_setVertical_bc(BriskSplitView *split,
+                                                value vertical_v) {
+  CAMLparam1(vertical_v);
+  ml_BriskSplitView_setVertical(split, Int_val(vertical_v));
+
+  CAMLreturn(Val_unit);
+}
+
+void ml_BriskSplitView_setDividerStyle(BriskSplitView *split,
+                                       NSSplitViewDividerStyle dividerStyle) {
+  split.dividerStyle = dividerStyle;
+}