Skip to content

Commit 400b215

Browse files
cknittcknitt
authored
Remove Margin and Size modules, add size type in Style module. (#478)
1 parent 5d1d159 commit 400b215

18 files changed

Lines changed: 383 additions & 226 deletions

File tree

‎reason-react-native/src/apis/Platform.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ let styles =
3333
Style.{
3434
"wrapper":
3535
style(
36-
~width=Size.pct(Platform.os == Platform.ios ? 100. : 200.),
36+
~width=pct(Platform.os == Platform.ios ? 100. : 200.),
3737
(),
3838
),
3939
},
@@ -62,7 +62,7 @@ let styles =
6262
| _ => 150.
6363
}
6464
)
65-
->Size.pct,
65+
->pct,
6666
(),
6767
),
6868
},

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */
1+
'use strict';
2+
3+
4+
function pct(num) {
5+
return num.toString() + "%";
6+
}
7+
8+
exports.pct = pct;
9+
/* No side effect */

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

Lines changed: 50 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -5,48 +5,16 @@ wip: true
55
---
66

77
```reason
8-
let pct = num => num->Js.Float.toString ++ "%";
8+
type size;
99
10-
module Margin = {
11-
type t;
10+
external pt: float => size = "%identity";
1211
13-
external pt: float => t = "%identity";
14-
let pct: float => t = pct->Obj.magic;
15-
let auto: t = "auto"->Obj.magic;
16-
};
12+
let pct: float => size;
1713
18-
module Size = {
19-
type t;
14+
type margin = size;
2015
21-
external pt: float => t = "%identity";
22-
let pct: float => t = pct->Obj.magic;
23-
};
24-
25-
type color;
26-
external color: string => color = "%identity";
27-
28-
module Transform = {
29-
type angle;
30-
31-
let deg: float => angle =
32-
num => (num->Js.Float.toString ++ "deg")->Obj.magic;
33-
let rad: float => angle =
34-
num => (num->Js.Float.toString ++ "rad")->Obj.magic;
35-
36-
type t;
37-
[@bs.obj] external perspective: (~perspective: float) => t = "";
38-
[@bs.obj] external rotate: (~rotate: angle) => t = "";
39-
[@bs.obj] external rotateX: (~rotateX: angle) => t = "";
40-
[@bs.obj] external rotateY: (~rotateY: angle) => t = "";
41-
[@bs.obj] external rotateZ: (~rotateZ: angle) => t = "";
42-
[@bs.obj] external scale: (~scale: float) => t = "";
43-
[@bs.obj] external scaleX: (~scaleX: float) => t = "";
44-
[@bs.obj] external scaleY: (~scaleY: float) => t = "";
45-
[@bs.obj] external translateX: (~translateX: float) => t = "";
46-
[@bs.obj] external translateY: (~translateY: float) => t = "";
47-
[@bs.obj] external skewX: (~skewX: angle) => t = "";
48-
[@bs.obj] external skewY: (~skewY: angle) => t = "";
49-
};
16+
[@bs.inline "auto"]
17+
let auto: margin;
5018
5119
type offset;
5220
[@bs.obj] external offset: (~height: float, ~width: float) => offset = "";
@@ -85,38 +53,38 @@ external style:
8553
=?,
8654
~aspectRatio: float=?,
8755
~backfaceVisibility: [@bs.string] [ | `visible | `hidden]=?,
88-
~backgroundColor: color=?,
89-
~borderBottomColor: color=?,
56+
~backgroundColor: Color.t=?,
57+
~borderBottomColor: Color.t=?,
9058
~borderBottomEndRadius: float=?,
9159
~borderBottomLeftRadius: float=?,
9260
~borderBottomRightRadius: float=?,
9361
~borderBottomStartRadius: float=?,
9462
~borderBottomWidth: float=?,
95-
~borderColor: color=?,
96-
~borderEndColor: color=?,
63+
~borderColor: Color.t=?,
64+
~borderEndColor: Color.t=?,
9765
~borderEndWidth: float=?,
98-
~borderLeftColor: color=?,
66+
~borderLeftColor: Color.t=?,
9967
~borderLeftWidth: float=?,
10068
~borderRadius: float=?,
101-
~borderRightColor: color=?,
69+
~borderRightColor: Color.t=?,
10270
~borderRightWidth: float=?,
103-
~borderStartColor: color=?,
71+
~borderStartColor: Color.t=?,
10472
~borderStartWidth: float=?,
10573
~borderStyle: [@bs.string] [ | `solid | `dotted | `dashed]=?,
106-
~borderTopColor: color=?,
74+
~borderTopColor: Color.t=?,
10775
~borderTopEndRadius: float=?,
10876
~borderTopLeftRadius: float=?,
10977
~borderTopRightRadius: float=?,
11078
~borderTopStartRadius: float=?,
11179
~borderTopWidth: float=?,
11280
~borderWidth: float=?,
113-
~bottom: Size.t=?,
81+
~bottom: size=?,
11482
~direction: [@bs.string] [ | [@bs.as "inherit"] `inherit_ | `ltr | `ltr]=?,
11583
~display: [@bs.string] [ | `none | `flex]=?,
11684
~elevation: float=?,
11785
~_end: float=?,
11886
~flex: float=?,
119-
~flexBasis: Margin.t=?,
87+
~flexBasis: size=?,
12088
~flexDirection: [@bs.string] [
12189
| `row
12290
| [@bs.as "row-reverse"] `rowReverse
@@ -127,7 +95,7 @@ external style:
12795
~flexGrow: float=?,
12896
~flexShrink: float=?,
12997
~flexWrap: [@bs.string] [ | `wrap | `nowrap]=?,
130-
~height: Size.t=?,
98+
~height: size=?,
13199
~justifyContent: [@bs.string] [
132100
| [@bs.as "flex-start"] `flexStart
133101
| [@bs.as "flex-end"] `flexEnd
@@ -137,46 +105,46 @@ external style:
137105
| [@bs.as "space-evenly"] `spaceEvenly
138106
]
139107
=?,
140-
~left: Size.t=?,
141-
~margin: Margin.t=?,
142-
~marginBottom: Margin.t=?,
143-
~marginEnd: Margin.t=?,
144-
~marginHorizontal: Margin.t=?,
145-
~marginLeft: Margin.t=?,
146-
~marginRight: Margin.t=?,
147-
~marginStart: Margin.t=?,
148-
~marginTop: Margin.t=?,
149-
~marginVertical: Margin.t=?,
150-
~maxHeight: Size.t=?,
151-
~maxWidth: Size.t=?,
152-
~minHeight: Size.t=?,
153-
~minWidth: Size.t=?,
108+
~left: size=?,
109+
~margin: size=?,
110+
~marginBottom: size=?,
111+
~marginEnd: size=?,
112+
~marginHorizontal: size=?,
113+
~marginLeft: size=?,
114+
~marginRight: size=?,
115+
~marginStart: size=?,
116+
~marginTop: size=?,
117+
~marginVertical: size=?,
118+
~maxHeight: size=?,
119+
~maxWidth: size=?,
120+
~minHeight: size=?,
121+
~minWidth: size=?,
154122
~opacity: float=?,
155123
~overflow: [@bs.string] [ | `visible | `hidden | `scroll]=?,
156-
~padding: Size.t=?,
157-
~paddingBottom: Size.t=?,
158-
~paddingEnd: Size.t=?,
159-
~paddingHorizontal: Size.t=?,
160-
~paddingLeft: Size.t=?,
161-
~paddingRight: Size.t=?,
162-
~paddingStart: Size.t=?,
163-
~paddingTop: Size.t=?,
164-
~paddingVertical: Size.t=?,
124+
~padding: size=?,
125+
~paddingBottom: size=?,
126+
~paddingEnd: size=?,
127+
~paddingHorizontal: size=?,
128+
~paddingLeft: size=?,
129+
~paddingRight: size=?,
130+
~paddingStart: size=?,
131+
~paddingTop: size=?,
132+
~paddingVertical: size=?,
165133
~position: [@bs.string] [ | `absolute | `relative]=?,
166-
~right: Size.t=?,
167-
~start: Size.t=?,
168-
~top: Size.t=?,
169-
~width: Size.t=?,
134+
~right: size=?,
135+
~start: size=?,
136+
~top: size=?,
137+
~width: size=?,
170138
~zIndex: int=?,
171139
// Shadow Props (https://facebook.github.io/react-native/docs/shadow-props)
172-
~shadowColor: color=?,
140+
~shadowColor: Color.t=?,
173141
~shadowOffset: offset=?,
174142
~shadowOpacity: float=?,
175143
~shadowRadius: float=?,
176144
// Transform Props (https://facebook.github.io/react-native/docs/transforms#props)
177145
~transform: array(Transform.t)=?, // all other transform props are deprecated
178146
// Text Style Props (https://facebook.github.io/react-native/docs/text-style-props)
179-
~color: color=?,
147+
~color: Color.t=?,
180148
~fontFamily: string=?,
181149
~fontSize: float=?,
182150
~fontStyle: [@bs.string] [ | `normal | `italic]=?,
@@ -200,7 +168,7 @@ external style:
200168
~lineHeight: float=?,
201169
~textAlign: [@bs.string] [ | `auto | `left | `right | `center | `justify]=?,
202170
~textAlignVertical: [@bs.string] [ | `auto | `top | `bottom | `center]=?,
203-
~textDecorationColor: color=?,
171+
~textDecorationColor: Color.t=?,
204172
~textDecorationLine: [@bs.string] [
205173
| `none
206174
| `underline
@@ -216,7 +184,7 @@ external style:
216184
| `dashed
217185
]
218186
=?,
219-
~textShadowColor: color=?,
187+
~textShadowColor: Color.t=?,
220188
~textShadowOffset: offset=?,
221189
~textShadowRadius: float=?,
222190
~textTransform: [@bs.string] [
@@ -236,8 +204,8 @@ external style:
236204
| `center
237205
]
238206
=?,
239-
~overlayColor: color=?,
240-
~tintColor: color=?,
207+
~overlayColor: Color.t=?,
208+
~tintColor: Color.t=?,
241209
unit
242210
) =>
243211
t =

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

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
type size = string;
2+
3+
external pt: float => size = "%identity";
4+
5+
let pct = num => num->Js.Float.toString ++ "%";
6+
7+
type margin = size;
8+
9+
[@bs.inline]
10+
let auto = "auto";
11+
112
type offset;
213
[@bs.obj] external offset: (~height: float, ~width: float) => offset = "";
314

@@ -60,13 +71,13 @@ external style:
6071
~borderTopStartRadius: float=?,
6172
~borderTopWidth: float=?,
6273
~borderWidth: float=?,
63-
~bottom: Size.t=?,
74+
~bottom: size=?,
6475
~direction: [@bs.string] [ | [@bs.as "inherit"] `inherit_ | `ltr | `ltr]=?,
6576
~display: [@bs.string] [ | `none | `flex]=?,
6677
~elevation: float=?,
6778
~_end: float=?,
6879
~flex: float=?,
69-
~flexBasis: Margin.t=?,
80+
~flexBasis: margin=?,
7081
~flexDirection: [@bs.string] [
7182
| `row
7283
| [@bs.as "row-reverse"] `rowReverse
@@ -77,7 +88,7 @@ external style:
7788
~flexGrow: float=?,
7889
~flexShrink: float=?,
7990
~flexWrap: [@bs.string] [ | `wrap | `nowrap]=?,
80-
~height: Size.t=?,
91+
~height: size=?,
8192
~justifyContent: [@bs.string] [
8293
| [@bs.as "flex-start"] `flexStart
8394
| [@bs.as "flex-end"] `flexEnd
@@ -87,36 +98,36 @@ external style:
8798
| [@bs.as "space-evenly"] `spaceEvenly
8899
]
89100
=?,
90-
~left: Size.t=?,
91-
~margin: Margin.t=?,
92-
~marginBottom: Margin.t=?,
93-
~marginEnd: Margin.t=?,
94-
~marginHorizontal: Margin.t=?,
95-
~marginLeft: Margin.t=?,
96-
~marginRight: Margin.t=?,
97-
~marginStart: Margin.t=?,
98-
~marginTop: Margin.t=?,
99-
~marginVertical: Margin.t=?,
100-
~maxHeight: Size.t=?,
101-
~maxWidth: Size.t=?,
102-
~minHeight: Size.t=?,
103-
~minWidth: Size.t=?,
101+
~left: size=?,
102+
~margin: margin=?,
103+
~marginBottom: margin=?,
104+
~marginEnd: margin=?,
105+
~marginHorizontal: margin=?,
106+
~marginLeft: margin=?,
107+
~marginRight: margin=?,
108+
~marginStart: margin=?,
109+
~marginTop: margin=?,
110+
~marginVertical: margin=?,
111+
~maxHeight: size=?,
112+
~maxWidth: size=?,
113+
~minHeight: size=?,
114+
~minWidth: size=?,
104115
~opacity: float=?,
105116
~overflow: [@bs.string] [ | `visible | `hidden | `scroll]=?,
106-
~padding: Size.t=?,
107-
~paddingBottom: Size.t=?,
108-
~paddingEnd: Size.t=?,
109-
~paddingHorizontal: Size.t=?,
110-
~paddingLeft: Size.t=?,
111-
~paddingRight: Size.t=?,
112-
~paddingStart: Size.t=?,
113-
~paddingTop: Size.t=?,
114-
~paddingVertical: Size.t=?,
117+
~padding: size=?,
118+
~paddingBottom: size=?,
119+
~paddingEnd: size=?,
120+
~paddingHorizontal: size=?,
121+
~paddingLeft: size=?,
122+
~paddingRight: size=?,
123+
~paddingStart: size=?,
124+
~paddingTop: size=?,
125+
~paddingVertical: size=?,
115126
~position: [@bs.string] [ | `absolute | `relative]=?,
116-
~right: Size.t=?,
117-
~start: Size.t=?,
118-
~top: Size.t=?,
119-
~width: Size.t=?,
127+
~right: size=?,
128+
~start: size=?,
129+
~top: size=?,
130+
~width: size=?,
120131
~zIndex: int=?,
121132
// Shadow Props (https://facebook.github.io/react-native/docs/shadow-props)
122133
~shadowColor: Color.t=?,

0 commit comments

Comments
 (0)