API - Style: Bring back 'boxShadow' style property

examples/Boxshadow.re

@@ -10,52 +10,40 @@ let parentStyles =
     flexDirection(`Column),
   ];
 
-let firstBoxStyle =
+let firstShadow =
   Style.[
     backgroundColor(Colors.blue),
     position(`Relative),
     width(100),
     height(100),
+    boxShadow(
+      ~yOffset=-10.,
+      ~xOffset=0.,
+      ~blurRadius=15.,
+      ~color=Colors.black,
+      ~spreadRadius=10.,
+    ),
+    marginVertical(30),
   ];
 
-let secondBoxStyle =
+let secondShadow =
   Style.[
     backgroundColor(Colors.red),
     position(`Relative),
     width(100),
     height(100),
+    boxShadow(
+      ~yOffset=10.,
+      ~xOffset=-30.,
+      ~blurRadius=20.,
+      ~color=Colors.green,
+      ~spreadRadius=0.,
+    ),
+    marginVertical(30),
   ];
 
-let firstShadow =
-  Style.BoxShadow.make(
-    ~yOffset=-10.,
-    ~xOffset=0.,
-    ~blurRadius=15.,
-    ~color=Colors.black,
-    ~spreadRadius=10.,
-    (),
-  );
-
-let secondShadow =
-  Style.BoxShadow.make(
-    ~yOffset=10.,
-    ~xOffset=-30.,
-    ~blurRadius=20.,
-    ~color=Colors.green,
-    ~spreadRadius=0.,
-    (),
-  );
-
 let render = () =>
   <View style=parentStyles>
-    <Padding padding=30>
-      <BoxShadow boxShadow=firstShadow>
-        <View style=firstBoxStyle />
-      </BoxShadow>
-    </Padding>
-    <Padding padding=30>
-      <BoxShadow boxShadow=secondShadow>
-        <View style=secondBoxStyle />
-      </BoxShadow>
-    </Padding>
+    <View style=firstShadow />
+    <View style=secondShadow />
   </View>;

src/UI/Selector.re

@@ -45,6 +45,8 @@ type selector('a) =
   | BorderHorizontal: selector(Border.t)
   | BorderVertical: selector(Border.t)
   | Transform: selector(list(Transform.t))
+  | Opacity: selector(float)
+  | BoxShadow: selector(BoxShadow.properties)
   | Cursor: selector(option(MouseCursors.t));
 
 /**
@@ -124,6 +126,9 @@ let rec select:
     | ([`BorderVertical(bv), ...rest], BorderVertical) =>
       select(rest, selector, bv)
     | ([`Transform(tr), ...rest], Transform) => select(rest, selector, tr)
+    | ([`Opacity(op), ...rest], Opacity) => select(rest, selector, op)
+    | ([`BoxShadow(bxsh), ...rest], BoxShadow) =>
+      select(rest, selector, bxsh)
     | ([`Cursor(cur), ...rest], Cursor) => select(rest, selector, cur)
     | ([_, ...rest], _) => select(rest, selector, default)
     };

src/UI/Style.re

@@ -61,7 +61,6 @@ module PointerEvents = {
 
 type t = {
   backgroundColor: Color.t,
-  boxShadow: BoxShadow.t,
   color: Color.t,
   width: int,
   height: int,
@@ -113,14 +112,14 @@ type t = {
   borderRadius: float,
   transform: list(Transform.t),
   opacity: float,
+  boxShadow: BoxShadow.properties,
   cursor: option(MouseCursors.t),
 };
 
 let make =
     (
       ~textOverflow=TextOverflow.Overflow,
       ~backgroundColor: Color.t=Colors.transparentBlack,
-      ~boxShadow=BoxShadow.default,
       ~color: Color.t=Colors.white,
       ~width=Encoding.cssUndefined,
       ~height=Encoding.cssUndefined,
@@ -171,13 +170,19 @@ let make =
       ~transform=[],
       ~opacity=1.0,
       ~pointerEvents=PointerEvents.Default,
+      ~boxShadow=BoxShadow.{
+                   xOffset: 0.0,
+                   yOffset: 0.0,
+                   blurRadius: 0.0,
+                   spreadRadius: 0.0,
+                   color: Colors.black,
+                 },
       ~cursor=?,
       _unit: unit,
     ) => {
   let ret: t = {
     textOverflow,
     backgroundColor,
-    boxShadow,
     color,
     width,
     height,
@@ -228,6 +233,7 @@ let make =
     borderVertical,
     borderRadius,
     opacity,
+    boxShadow,
     cursor,
   };
 
@@ -347,6 +353,8 @@ type coreStyleProps = [
   | `BorderVertical(Border.t)
   | `BorderRadius(float)
   | `Transform(list(Transform.t))
+  | `Opacity(float)
+  | `BoxShadow(BoxShadow.properties)
   | `Cursor(option(MouseCursors.t))
   | `PointerEvents(PointerEvents.t)
 ];
@@ -506,6 +514,8 @@ let alignSelf = a => `AlignSelf(alignment(a));
 let cursor = c => `Cursor(Some(c));
 
 let transform = t => `Transform(t);
+let boxShadow = (~xOffset, ~yOffset, ~spreadRadius, ~blurRadius, ~color) =>
+  `BoxShadow(BoxShadow.{xOffset, yOffset, spreadRadius, blurRadius, color});
 
 let overflow = o =>
   switch (o) {
@@ -593,6 +603,8 @@ let applyStyle = (style, styleRule) =>
   | `BorderVertical(borderVertical) => {...style, borderVertical}
   | `BorderHorizontal(borderHorizontal) => {...style, borderHorizontal}
   | `BorderRadius(borderRadius) => {...style, borderRadius}
+  | `Opacity(opacity) => {...style, opacity}
+  | `BoxShadow(boxShadow) => {...style, boxShadow}
   | `Transform(transform) => {...style, transform}
   | `FontFamily(fontFamily) => {...style, fontFamily}
   | `FontSize(fontSize) => {...style, fontSize}
@@ -666,6 +678,8 @@ let merge = (~source, ~target) =>
               | (`BorderRadius(_), `BorderRadius(_)) => targetStyle
               | (`Transform(_), `Transform(_)) => targetStyle
               | (`PointerEvents(_), `PointerEvents(_)) => targetStyle
+              | (`Opacity(_), `Opacity(_)) => targetStyle
+              | (`BoxShadow(_), `BoxShadow(_)) => targetStyle
               | (newRule, _) => newRule
               }
             )

src/UI/ViewNode.re

@@ -284,6 +284,12 @@ let renderShadow = (~boxShadow, ~width, ~height, ~world, ~m) => {
     Color.toVec3(color),
   );
 
+  /* Shaders.CompiledShader.setUniform3fv( */
+  /*   gradientShader, */
+  /*   "uShadowColor", */
+  /*   Color.toVec3(color), */
+  /* ); */
+
   Shaders.CompiledShader.setUniform2fv(
     gradientShader.uniformShadowAmount,
     Vec2.create(blurRadius /. width, blurRadius /. height),

src/UI_Primitives/BoxShadow.re

@@ -2,7 +2,7 @@ open Revery_UI;
 open React;
 open Style;
 
-let%nativeComponent make = (~boxShadow=BoxShadow.make(), ~children, (), hooks) => (
+let%nativeComponent make = (~boxShadow=Style.BoxShadow.make(), ~children, (), hooks) => (
   {
     make: () => {
       let styles = Style.make(~boxShadow, ());