Skip to content

Commit

Permalink
API - Style: Bring back 'boxShadow' style property (#719)
Browse files Browse the repository at this point in the history
* Bring back 'boxShadow' style property

* Remove commented code

* Fix warning

* Fix formatting

* Keep formatting working on windows
  • Loading branch information
bryphe authored Jan 18, 2020
1 parent 7ede78a commit 674ddf1
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 42 deletions.
52 changes: 20 additions & 32 deletions examples/Boxshadow.re
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"build:js": "esy b dune build examples/Examples.bc.js",
"build:js:release": "esy b dune build examples/Examples.bc.js",
"test": "esy b dune runtest",
"format": "esy b bash .ci/format.sh #{os}",
"format": "esy #{os == 'windows' ? 'b' : ''} bash .ci/format.sh #{os}",
"run": "esy x Examples"
},
"homepage": "https://github.com/bryphe/revery#readme",
Expand Down
2 changes: 1 addition & 1 deletion src/Native/cocoa/ReveryAppDelegate.c
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

+(id)newWithSDLDelegate:(SDLAppDelegate *)sdlDelegate {
return [[ReveryAppDelegate alloc] initWithSDLDelegate:sdlDelegate];
return [[ReveryAppDelegate alloc] initWithSDLDelegate:sdlDelegate];
}


Expand Down
6 changes: 3 additions & 3 deletions src/Native/cocoa/ReveryAppDelegate.h
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
(longs which represent OCaml callbacks)
*/
@property(nonatomic, strong) NSMutableDictionary *notificationActions;
@property(nonatomic, strong) SDLAppDelegate *sdlDelegate;
@property(nonatomic, strong) SDLAppDelegate *sdlDelegate;

-(id)initWithSDLDelegate:(SDLAppDelegate *)sdlDelegate;
+(id)newWithSDLDelegate:(SDLAppDelegate *)sdlDelegate;
-(id)initWithSDLDelegate:(SDLAppDelegate *)sdlDelegate;
+(id)newWithSDLDelegate:(SDLAppDelegate *)sdlDelegate;
@end
#endif
5 changes: 5 additions & 0 deletions src/UI/Selector.re
Original file line number Diff line number Diff line change
Expand Up @@ -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));

/**
Expand Down Expand Up @@ -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)
};
Expand Down
20 changes: 17 additions & 3 deletions src/UI/Style.re
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ module PointerEvents = {

type t = {
backgroundColor: Color.t,
boxShadow: BoxShadow.t,
color: Color.t,
width: int,
height: int,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -228,6 +233,7 @@ let make =
borderVertical,
borderRadius,
opacity,
boxShadow,
cursor,
};

Expand Down Expand Up @@ -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)
];
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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
}
)
Expand Down
4 changes: 2 additions & 2 deletions src/UI_Primitives/BoxShadow.re
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
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, ());
Expand Down

0 comments on commit 674ddf1

Please sign in to comment.