Style: move Transform method into Style for convenience (#509)

I deleted all the style docs as I am working on it & don't want to keep it in sync ftm.

Closes #503

Author: MoOx

reason-react-native/src/apis/Animated.md

@@ -270,15 +270,15 @@ let reset = Animation.reset;
 
 module StyleProp = {
   // methods to allow use of Animated values with Style props
-  
+
   // these methods should not be used to get the current value
 
   // for angle, Color.t, and size expressed as percentage,
   // interpolated values are needed where the outputRange is
   // an appropriate array of strings
 
   external float: value('a) => float = "%identity";
-  external angle: value(calculated) => Transform.angle = "%identity";
+  external angle: value(calculated) => Style.angle = "%identity";
   external size: value('a) => Style.size = "%identity";
   external margin: value('a) => Style.margin = "%identity";
   external color: value(calculated) => Color.t = "%identity";

reason-react-native/src/apis/Animated.re

@@ -263,15 +263,15 @@ let reset = Animation.reset;
 
 module StyleProp = {
   // methods to allow use of Animated values with Style props
-  
+
   // these methods should not be used to get the current value
 
   // for angle, Color.t, and size expressed as percentage,
   // interpolated values are needed where the outputRange is
   // an appropriate array of strings
 
   external float: value('a) => float = "%identity";
-  external angle: value(calculated) => Transform.angle = "%identity";
+  external angle: value(calculated) => Style.angle = "%identity";
   external size: value('a) => Style.size = "%identity";
   external margin: value('a) => Style.margin = "%identity";
   external color: value(calculated) => Color.t = "%identity";

reason-react-native/src/apis/Style.bs.js

@@ -5,5 +5,15 @@ function pct(num) {
   return num.toString() + "%";
 }
 
+function deg(num) {
+  return num.toString() + "deg";
+}
+
+function rad(num) {
+  return num.toString() + "rad";
+}
+
 exports.pct = pct;
+exports.deg = deg;
+exports.rad = rad;
 /* No side effect */

reason-react-native/src/apis/Style.md

@@ -1,251 +1,7 @@
 ---
 id: apis/Style
 title: Style
-wip: true
+officialDoc: https://facebook.github.io/react-native/docs/style
 ---
 
-```reason
-type size;
-
-external pt: float => size = "%identity";
-
-let pct: float => size;
-
-type margin = size;
-
-[@bs.inline "auto"]
-let auto: margin;
-
-type offset;
-[@bs.obj] external offset: (~height: float, ~width: float) => offset = "";
-
-type t;
-
-[@bs.obj]
-// Layout Props (https://facebook.github.io/react-native/docs/layout-props#props)
-// View Style Props https://facebook.github.io/react-native/docs/view-style-props#props
-external style:
-  (
-    ~alignContent: [@bs.string] [
-                     | [@bs.as "flex-start"] `flexStart
-                     | [@bs.as "flex-end"] `flexEnd
-                     | `center
-                     | `stretch
-                     | [@bs.as "space-around"] `spaceAround
-                     | [@bs.as "space-between"] `spaceBetween
-                   ]
-                     =?,
-    ~alignItems: [@bs.string] [
-                   | [@bs.as "flex-start"] `flexStart
-                   | [@bs.as "flex-end"] `flexEnd
-                   | `center
-                   | `stretch
-                   | `baseline
-                 ]
-                   =?,
-    ~alignSelf: [@bs.string] [
-                  | [@bs.as "flex-start"] `flexStart
-                  | [@bs.as "flex-end"] `flexEnd
-                  | `center
-                  | `stretch
-                  | `baseline
-                ]
-                  =?,
-    ~aspectRatio: float=?,
-    ~backfaceVisibility: [@bs.string] [ | `visible | `hidden]=?,
-    ~backgroundColor: Color.t=?,
-    ~borderBottomColor: Color.t=?,
-    ~borderBottomEndRadius: float=?,
-    ~borderBottomLeftRadius: float=?,
-    ~borderBottomRightRadius: float=?,
-    ~borderBottomStartRadius: float=?,
-    ~borderBottomWidth: float=?,
-    ~borderColor: Color.t=?,
-    ~borderEndColor: Color.t=?,
-    ~borderEndWidth: float=?,
-    ~borderLeftColor: Color.t=?,
-    ~borderLeftWidth: float=?,
-    ~borderRadius: float=?,
-    ~borderRightColor: Color.t=?,
-    ~borderRightWidth: float=?,
-    ~borderStartColor: Color.t=?,
-    ~borderStartWidth: float=?,
-    ~borderStyle: [@bs.string] [ | `solid | `dotted | `dashed]=?,
-    ~borderTopColor: Color.t=?,
-    ~borderTopEndRadius: float=?,
-    ~borderTopLeftRadius: float=?,
-    ~borderTopRightRadius: float=?,
-    ~borderTopStartRadius: float=?,
-    ~borderTopWidth: float=?,
-    ~borderWidth: float=?,
-    ~bottom: size=?,
-    ~direction: [@bs.string] [ | [@bs.as "inherit"] `inherit_ | `ltr | `ltr]=?,
-    ~display: [@bs.string] [ | `none | `flex]=?,
-    ~elevation: float=?,
-    ~_end: float=?,
-    ~flex: float=?,
-    ~flexBasis: size=?,
-    ~flexDirection: [@bs.string] [
-                      | `row
-                      | [@bs.as "row-reverse"] `rowReverse
-                      | `column
-                      | [@bs.as "column-reverse"] `columnReverse
-                    ]
-                      =?,
-    ~flexGrow: float=?,
-    ~flexShrink: float=?,
-    ~flexWrap: [@bs.string] [ | `wrap | `nowrap]=?,
-    ~height: size=?,
-    ~justifyContent: [@bs.string] [
-                       | [@bs.as "flex-start"] `flexStart
-                       | [@bs.as "flex-end"] `flexEnd
-                       | `center
-                       | [@bs.as "space-around"] `spaceAround
-                       | [@bs.as "space-between"] `spaceBetween
-                       | [@bs.as "space-evenly"] `spaceEvenly
-                     ]
-                       =?,
-    ~left: size=?,
-    ~margin: size=?,
-    ~marginBottom: size=?,
-    ~marginEnd: size=?,
-    ~marginHorizontal: size=?,
-    ~marginLeft: size=?,
-    ~marginRight: size=?,
-    ~marginStart: size=?,
-    ~marginTop: size=?,
-    ~marginVertical: size=?,
-    ~maxHeight: size=?,
-    ~maxWidth: size=?,
-    ~minHeight: size=?,
-    ~minWidth: size=?,
-    ~opacity: float=?,
-    ~overflow: [@bs.string] [ | `visible | `hidden | `scroll]=?,
-    ~padding: size=?,
-    ~paddingBottom: size=?,
-    ~paddingEnd: size=?,
-    ~paddingHorizontal: size=?,
-    ~paddingLeft: size=?,
-    ~paddingRight: size=?,
-    ~paddingStart: size=?,
-    ~paddingTop: size=?,
-    ~paddingVertical: size=?,
-    ~position: [@bs.string] [ | `absolute | `relative]=?,
-    ~right: size=?,
-    ~start: size=?,
-    ~top: size=?,
-    ~width: size=?,
-    ~zIndex: int=?,
-    // Shadow Props (https://facebook.github.io/react-native/docs/shadow-props)
-    ~shadowColor: Color.t=?,
-    ~shadowOffset: offset=?,
-    ~shadowOpacity: float=?,
-    ~shadowRadius: float=?,
-    // Transform Props (https://facebook.github.io/react-native/docs/transforms#props)
-    ~transform: array(Transform.t)=?, // all other transform props are deprecated
-    // Text Style Props (https://facebook.github.io/react-native/docs/text-style-props)
-    ~color: Color.t=?,
-    ~fontFamily: string=?,
-    ~fontSize: float=?,
-    ~fontStyle: [@bs.string] [ | `normal | `italic]=?,
-    ~fontVariant: array(FontVariant.t)=?,
-    ~fontWeight: [@bs.string] [
-                   | `normal
-                   | `bold
-                   | [@bs.as "100"] `_100
-                   | [@bs.as "200"] `_200
-                   | [@bs.as "300"] `_300
-                   | [@bs.as "400"] `_400
-                   | [@bs.as "500"] `_500
-                   | [@bs.as "600"] `_600
-                   | [@bs.as "700"] `_700
-                   | [@bs.as "800"] `_800
-                   | [@bs.as "900"] `_900
-                 ]
-                   =?,
-    ~includeFontPadding: bool=?,
-    ~letterSpacing: float=?,
-    ~lineHeight: float=?,
-    ~textAlign: [@bs.string] [ | `auto | `left | `right | `center | `justify]=?,
-    ~textAlignVertical: [@bs.string] [ | `auto | `top | `bottom | `center]=?,
-    ~textDecorationColor: Color.t=?,
-    ~textDecorationLine: [@bs.string] [
-                           | `none
-                           | `underline
-                           | [@bs.as "line-through"] `lineThrough
-                           | [@bs.as "underline line-through"]
-                             `underlineLineThrough
-                         ]
-                           =?,
-    ~textDecorationStyle: [@bs.string] [
-                            | `solid
-                            | `double
-                            | `dotted
-                            | `dashed
-                          ]
-                            =?,
-    ~textShadowColor: Color.t=?,
-    ~textShadowOffset: offset=?,
-    ~textShadowRadius: float=?,
-    ~textTransform: [@bs.string] [
-                      | `none
-                      | `uppercase
-                      | `lowercase
-                      | `capitalize
-                    ]
-                      =?,
-    ~writingDirection: [@bs.string] [ | `auto | `ltr | `ltr]=?,
-    // Image Style Props (https://facebook.github.io/react-native/docs/image-style-props)
-    ~resizeMode: [@bs.string] [
-                   | `cover
-                   | `contain
-                   | `stretch
-                   | `repeat
-                   | `center
-                 ]
-                   =?,
-    ~overlayColor: Color.t=?,
-    ~tintColor: Color.t=?,
-    unit
-  ) =>
-  t =
-  "";
-
-/*
- <View style=array([|
-   styles##thing,
-   styles##whatever,
- |])>
-   */
-external array: array(t) => t = "%identity";
-
-/*
- <View style=arrayOption([|
-   Some(styles##thing),
-   Some(styles##whatever),
-   optionalStyle,
-   cond ? Some({something:"dynamic"}) : None
- |])>
- */
-external arrayOption: array(option(t)) => t = "%identity";
-
-/* list works too since RN accept recursive array of styles (list are just recursive arrays)*/
-/*
- <View style=list([
-   styles##thing,
-   styles##whatever,
- ])>
-   */
-external list: list(t) => t = "%identity";
-
-/*
- <View style=listOption([
-   Some(styles##thing),
-   Some(styles##whatever),
-   optionalStyle,
-   cond ? Some({something:"dynamic"}) : None
- ])>
- */
-external listOption: list(option(t)) => t = "%identity";
-
-```
+@todo

reason-react-native/src/apis/Style.re

@@ -1,3 +1,5 @@
+type t;
+
 type size = string;
 
 external pt: float => size = "%identity";
@@ -12,7 +14,24 @@ let auto = "auto";
 type offset;
 [@bs.obj] external offset: (~height: float, ~width: float) => offset = "";
 
-type t;
+type angle;
+let deg: float => angle = num => (num->Js.Float.toString ++ "deg")->Obj.magic;
+let rad: float => angle = num => (num->Js.Float.toString ++ "rad")->Obj.magic;
+
+type transform;
+[@bs.obj] external perspective: (~perspective: float) => transform = "";
+[@bs.obj] external rotate: (~rotate: angle) => transform = "";
+[@bs.obj] external rotateX: (~rotateX: angle) => transform = "";
+[@bs.obj] external rotateY: (~rotateY: angle) => transform = "";
+[@bs.obj] external rotateZ: (~rotateZ: angle) => transform = "";
+[@bs.obj] external scale: (~scale: float) => transform = "";
+[@bs.obj] external scaleX: (~scaleX: float) => transform = "";
+[@bs.obj] external scaleY: (~scaleY: float) => transform = "";
+[@bs.obj] external translateX: (~translateX: float) => transform = "";
+[@bs.obj] external translateY: (~translateY: float) => transform = "";
+[@bs.obj] external skewX: (~skewX: angle) => transform = "";
+[@bs.obj] external skewY: (~skewY: angle) => transform = "";
+// @todo matrix
 
 [@bs.obj]
 // Layout Props (https://facebook.github.io/react-native/docs/layout-props#props)
@@ -135,7 +154,7 @@ external style:
     ~shadowOpacity: float=?,
     ~shadowRadius: float=?,
     // Transform Props (https://facebook.github.io/react-native/docs/transforms#props)
-    ~transform: array(Transform.t)=?, // all other transform props are deprecated
+    ~transform: array(transform)=?, // all other transform props are deprecated
     // Text Style Props (https://facebook.github.io/react-native/docs/text-style-props)
     ~color: Color.t=?,
     ~fontFamily: string=?,

reason-react-native/src/apis/Style.rei

@@ -1,3 +1,5 @@
+type t;
+
 type size;
 
 external pt: float => size = "%identity";
@@ -12,7 +14,24 @@ let auto: margin;
 type offset;
 [@bs.obj] external offset: (~height: float, ~width: float) => offset = "";
 
-type t;
+type angle;
+let deg: float => angle;
+let rad: float => angle;
+
+type transform;
+[@bs.obj] external perspective: (~perspective: float) => transform = "";
+[@bs.obj] external rotate: (~rotate: angle) => transform = "";
+[@bs.obj] external rotateX: (~rotateX: angle) => transform = "";
+[@bs.obj] external rotateY: (~rotateY: angle) => transform = "";
+[@bs.obj] external rotateZ: (~rotateZ: angle) => transform = "";
+[@bs.obj] external scale: (~scale: float) => transform = "";
+[@bs.obj] external scaleX: (~scaleX: float) => transform = "";
+[@bs.obj] external scaleY: (~scaleY: float) => transform = "";
+[@bs.obj] external translateX: (~translateX: float) => transform = "";
+[@bs.obj] external translateY: (~translateY: float) => transform = "";
+[@bs.obj] external skewX: (~skewX: angle) => transform = "";
+[@bs.obj] external skewY: (~skewY: angle) => transform = "";
+// @todo matrix
 
 [@bs.obj]
 // Layout Props (https://facebook.github.io/react-native/docs/layout-props#props)
@@ -135,7 +154,7 @@ external style:
     ~shadowOpacity: float=?,
     ~shadowRadius: float=?,
     // Transform Props (https://facebook.github.io/react-native/docs/transforms#props)
-    ~transform: array(Transform.t)=?, // all other transform props are deprecated
+    ~transform: array(transform)=?, // all other transform props are deprecated
     // Text Style Props (https://facebook.github.io/react-native/docs/text-style-props)
     ~color: Color.t=?,
     ~fontFamily: string=?,