Replace Style.pt with Style.dp (facebook#535)

To avoid brutal breaking change, I used `[@deprecated]` for pt. We can remove it  a bit later, because we know some people rely on this bindings already :)

Closes facebook#530

react-native-template-reason/src/App.re

@@ -29,14 +29,9 @@ let styles =
           (),
         ),
       "welcome":
-        style(~fontSize=20., ~textAlign=`center, ~margin=pt(10.), ()),
+        style(~fontSize=20., ~textAlign=`center, ~margin=10.->dp, ()),
       "instructions":
-        style(
-          ~textAlign=`center,
-          ~color="#333333",
-          ~marginBottom=pt(5.),
-          (),
-        ),
+        style(~textAlign=`center, ~color="#333333", ~marginBottom=5.->dp, ()),
     })
   );
 

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

@@ -162,28 +162,28 @@ let styles = Style.(
       ),
     "getPhotosExample":
       style(
-        ~height=pt(0.25 *. windowHeight),
+        ~height=(0.25 *. windowHeight)->dp,
         ~justifyContent=`spaceBetween,
         (),
       ),
     "saveToCameraRollExample":
       style(
-        ~width=pt(0.8 *. windowWidth),
-        ~height=pt(0.6 *. windowHeight),
-        ~margin=pt(0.1 *. windowWidth),
+        ~width=(0.8 *. windowWidth)->dp,
+        ~height=(0.6 *. windowHeight)->dp,
+        ~margin=(0.1 *. windowWidth)->dp,
         ~justifyContent=`spaceAround,
         (),
       ),
     "image":
       style(
-        ~width=pt(0.8 *. windowWidth),
-        ~height=pt(0.56 *. windowWidth),
+        ~width=(0.8 *. windowWidth)->dp,
+        ~height=(0.56 *. windowWidth)->dp,
         (),
       ),
     "imageContainer":
       style(
-        ~width=pt(0.8 *. windowWidth),
-        ~height=pt(0.56 *. windowWidth),
+        ~width=(0.8 *. windowWidth)->dp,
+        ~height=(0.56 *. windowWidth)->dp,
         ~borderWidth=1.,
         ~justifyContent=`center,
         (),
@@ -193,20 +193,20 @@ let styles = Style.(
       style(
         ~textAlign=`center,
         ~borderRadius=8.,
-        ~padding=pt(4.),
+        ~padding=4.->dp,
         ~borderWidth=1.,
         ~backgroundColor=Color.linen,
         (),
       ),
     "thumbnail":
       style(
-        ~width=pt(0.21 *. windowHeight),
-        ~height=pt(0.15 *. windowHeight),
+        ~width=(0.21 *. windowHeight)->dp,
+        ~height=(0.15 *. windowHeight)->dp,
         (),
       ),
     "thumbnails":
       style(
-        ~height=pt(0.15 *. windowHeight),
+        ~height=(0.15 *. windowHeight)->dp,
         (),
       ),
   })

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

@@ -103,17 +103,17 @@ let styles =
     StyleSheet.create({
       "container":
         style(
-          ~width=windowWidth->pt,
-          ~height=windowHeight->pt,
+          ~width=windowWidth->dp,
+          ~height=windowHeight->dp,
           ~flexDirection=`column,
           ~alignItems=`center,
           ~justifyContent=`center,
           (),
         ),
       "frame":
         style(
-          ~width=displayWidth->pt,
-          ~height=displayHeight->pt,
+          ~width=displayWidth->dp,
+          ~height=displayHeight->dp,
           ~alignItems=`center,
           ~justifyContent=`center,
           ~borderWidth=StyleSheet.hairlineWidth,

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

@@ -134,7 +134,7 @@ let styles =
   Style.(
     StyleSheet.create({
       "container": style(~flex=1., ~flexDirection=`column, ()),
-      "screen": style(~width=pt(windowWidth), ()),
+      "screen": style(~width=windowWidth->dp, ()),
     })
   );
 
@@ -164,15 +164,8 @@ let make = () => {
       style=Style.(
         {style(
            ~flex=1.,
-           ~width=pt(2.0 *. windowWidth),
-           ~left=
-             pt(
-               if (state.register) {
-                 0.;
-               } else {
-                 0. -. windowWidth;
-               },
-             ),
+           ~width=(2.0 *. windowWidth)->dp,
+           ~left= (state.register ? 0. : 0. -. windowWidth)->dp,
            ~flexDirection=`row,
            (),
          )}

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

@@ -119,8 +119,8 @@ let windowWidth = Dimensions.get(`window)##width;
 let containerStyle =
   Style.(
     style(
-      ~width=windowWidth->pt,
-      ~height=windowHeight->pt,
+      ~width=windowWidth->dp,
+      ~height=windowHeight->dp,
       ~justifyContent=`center,
       ~alignItems=`center,
       (),

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

@@ -14,9 +14,11 @@ handlers are extended to also depend upon the `gestureState`.
 ## Types
 
 ### `Event.pressEvent`
+
 see [`Event`](../Event/#pressevent)
 
 ### `gestureState`
+
 `gestureState` contains additional information on the state of the \_Gesture
 Responder System\_
 
@@ -37,12 +39,14 @@ type gestureState = {
 ```
 
 ### `t`
-`t` is the abstract type for a `PanResponder`, which can be created by means
-of the `create` method, given a `config` object
+
+`t` is the abstract type for a `PanResponder`, which can be created by means of
+the `create` method, given a `config` object
 
 ### `config`
-`config` is the abstract type for a custom `PanResponder` configuration; it
-can be created by means of the `config` constructor
+
+`config` is the abstract type for a custom `PanResponder` configuration; it can
+be created by means of the `config` constructor
 
 ```reason
 config:
@@ -70,10 +74,12 @@ config:
 ```
 
 ### `panHandlers`
-`panHandlers` is the abstract type for `panHandlers` of a `PanResponder`,
-which can be accessed by means of the getter method `panHandlers`
+
+`panHandlers` is the abstract type for `panHandlers` of a `PanResponder`, which
+can be accessed by means of the getter method `panHandlers`
 
 ### `callback('a)`
+
 `callback('a)` is the type of the usual callback function specified for each
 _Gesture Responder System_ handler defined as
 
@@ -86,20 +92,23 @@ where `'a` is either `bool` or `unit`
 ## Methods
 
 ### `create`
+
 `create` allows creation of a `PanResponder` given a `config`
 
 ```reason
 create: config => t
 ```
 
 ### `panHandlers`
+
 `panHandlers` is a getter method to access `panHandlers` within a `PanResponder`
 
 ```reason
 panHandlers: t => panHandlers
 ```
 
 ### `onMoveShouldSetResponder`
+
 `onMoveShouldSetResponder` is a getter method to access the
 `onMoveShouldSetResponder` callback of a `panHandlers` object
 
@@ -108,6 +117,7 @@ onMoveShouldSetResponder: panHandlers => callback(bool)
 ```
 
 ### `onMoveShouldSetResponderCapture`
+
 `onMoveShouldSetResponderCapture` is a getter method to access the
 `onMoveShouldSetResponderCapture` callback of a `panHandlers` object
 
@@ -116,6 +126,7 @@ onMoveShouldSetResponderCapture: panHandlers => callback(bool)
 ```
 
 ### `onStartShouldSetResponder`
+
 `onStartShouldSetResponder` is a getter method to access the
 `onStartShouldSetResponder` callback of a `panHandlers` object
 
@@ -124,6 +135,7 @@ onStartShouldSetResponder: panHandlers => callback(bool)
 ```
 
 ### `onStartShouldSetResponderCapture`
+
 `onStartShouldSetResponderCapture` is a getter method to access the
 `onStartShouldSetResponderCapture` callback of a `panHandlers` object
 
@@ -132,6 +144,7 @@ onStartShouldSetResponderCapture: panHandlers => callback(bool)
 ```
 
 ### `onResponderReject`
+
 `onResponderReject` is a getter method to access the `onResponderReject`
 callback of a `panHandlers` object
 
@@ -140,14 +153,16 @@ onResponderReject: panHandlers => callback(unit)
 ```
 
 ### `onResponderGrant`
-`onResponderGrant` is a getter method to access the `onResponderGrant`
-callback of a `panHandlers` object
+
+`onResponderGrant` is a getter method to access the `onResponderGrant` callback
+of a `panHandlers` object
 
 ```reason
 onResponderGrant: panHandlers => callback(unit)
 ```
 
 ### `onResponderRelease`
+
 `onResponderRelease` is a getter method to access the `onResponderRelease`
 callback of a `panHandlers` object
 
@@ -156,14 +171,16 @@ onResponderRelease: panHandlers => callback(unit)
 ```
 
 ### `onResponderMove`
-`onResponderMove` is a getter method to access the `onResponderMove` callback
-of a `panHandlers` object
+
+`onResponderMove` is a getter method to access the `onResponderMove` callback of
+a `panHandlers` object
 
 ```reason
 onResponderMove: panHandlers => callback(unit)
 ```
 
 ### `onResponderTerminate`
+
 `onResponderTerminate` is a getter method to access the `onResponderTerminate`
 callback of a `panHandlers` object
 
@@ -172,14 +189,16 @@ onResponderTerminate: panHandlers => callback(unit)
 ```
 
 ### `onResponderStart`
-`onResponderStart` is a getter method to access the `onResponderStart`
-callback of a `panHandlers` object
+
+`onResponderStart` is a getter method to access the `onResponderStart` callback
+of a `panHandlers` object
 
 ```reason
 onResponderStart: panHandlers => callback(unit)
 ```
 
 ### `onResponderTerminationRequest`
+
 `onResponderTerminationRequest` is a getter method to access the
 `onResponderTerminationRequest` callback of a `panHandlers` object
 
@@ -188,8 +207,9 @@ onResponderTerminationRequest: panHandlers => callback(bool)
 ```
 
 ### `onResponderEnd`
-`onResponderEnd` is a getter method to access the `onResponderEnd` callback of
-a `panHandlers` object
+
+`onResponderEnd` is a getter method to access the `onResponderEnd` callback of a
+`panHandlers` object
 
 ```reason
 onResponderEnd: panHandlers => callback(unit)
@@ -240,8 +260,8 @@ let windowWidth = Dimensions.get(`window)##width;
 let containerStyle =
   Style.(
     style(
-      ~width=windowWidth->pt,
-      ~height=windowHeight->pt,
+      ~width=windowWidth->dp,
+      ~height=windowHeight->dp,
       ~justifyContent=`center,
       ~alignItems=`center,
       (),