Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b539ea4

Browse files
authored
Improve Drawer bindings (#48)
- add missing options - enable creating screen with children (`ScreenWithCallback`) - small improvements in existing options
1 parent 8ce4313 commit b539ea4

File tree

2 files changed

+161
-28
lines changed

2 files changed

+161
-28
lines changed

‎src/Drawer.bs.js‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use strict';
22

3+
var Interop = require("./Interop");
34
var Core$ReactNavigation = require("./Core.bs.js");
45
var Drawer = require("@react-navigation/drawer");
56

@@ -9,22 +10,57 @@ function Make(M) {
910
var M1ドル = {};
1011
var include = Core$ReactNavigation.NavigationScreenProp(M1ドル);
1112
var Navigation = include;
13+
var t = function (prim) {
14+
return Interop.identity(prim.VAL);
15+
};
16+
var string = function (s) {
17+
return Interop.identity(s);
18+
};
19+
var render = function (x) {
20+
return Interop.identity(x);
21+
};
22+
var HeaderTitle = {
23+
t: t,
24+
string: string,
25+
render: render
26+
};
27+
var t1ドル = function (prim) {
28+
return Interop.identity(prim.VAL);
29+
};
30+
var string1ドル = function (s) {
31+
return Interop.identity(s);
32+
};
33+
var render1ドル = function (x) {
34+
return Interop.identity(x);
35+
};
36+
var DrawerLabel = {
37+
t: t1ドル,
38+
string: string1ドル,
39+
render: render1ドル
40+
};
1241
var stack = Drawer.createDrawerNavigator();
1342
var make = stack.Screen;
14-
var $$Screen = {
43+
var ScreenWithCallback = {
1544
make: make
1645
};
17-
var make1ドル = stack.Navigator;
18-
var $$Navigator = {
46+
var make1ドル = stack.Screen;
47+
var $$Screen = {
1948
make: make1ドル
2049
};
21-
var make2ドル = stack.Group;
22-
var Group = {
50+
var make2ドル = stack.Navigator;
51+
var $$Navigator = {
2352
make: make2ドル
2453
};
54+
var make3ドル = stack.Group;
55+
var Group = {
56+
make: make3ドル
57+
};
2558
return {
2659
Navigation: Navigation,
60+
HeaderTitle: HeaderTitle,
61+
DrawerLabel: DrawerLabel,
2762
stack: stack,
63+
ScreenWithCallback: ScreenWithCallback,
2864
$$Screen: $$Screen,
2965
$$Navigator: $$Navigator,
3066
Group: Group
@@ -33,4 +69,4 @@ function Make(M) {
3369

3470
exports.DrawerNavigationProp = DrawerNavigationProp;
3571
exports.Make = Make;
36-
/* @react-navigation/drawer Not a pure module */
72+
/* ./Interop Not a pure module */

‎src/Drawer.res‎

Lines changed: 119 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ open Core
22

33
type options
44

5+
type layoutChangeEvent
6+
57
module DrawerNavigationProp = (
68
M: {
79
type params
@@ -27,32 +29,69 @@ module Make = (
2729
type options = options
2830
})
2931

32+
module HeaderTitle = {
33+
type t
34+
35+
type headerTitleProps = {
36+
children: option<string>,
37+
allowFontScaling: option<bool>,
38+
tintColor: option<ReactNative.Color.t>,
39+
onLayout: layoutChangeEvent => unit,
40+
style: option<ReactNative.Style.t>, //textStyle
41+
}
42+
43+
@val @module("./Interop")
44+
external t: @unwrap
45+
[
46+
| #String(string)
47+
| #Render(headerTitleProps => React.element)
48+
] => t = "identity"
49+
50+
let string = s => t(#String(s))
51+
let render = x => t(#Render(x))
52+
}
53+
54+
module DrawerLabel = {
55+
type t
56+
57+
type drawerLabelProps = {
58+
focused: bool,
59+
color: string,
60+
}
61+
62+
@val @module("./Interop")
63+
external t: @unwrap
64+
[
65+
| #String(string)
66+
| #Render(drawerLabelProps => React.element)
67+
] => t = "identity"
68+
69+
let string = s => t(#String(s))
70+
let render = x => t(#Render(x))
71+
}
72+
3073
type animatedNode = ReactNative.Animated.Value.t
3174

3275
type scene = {
3376
route: route<M.params>,
3477
index: int,
3578
focused: bool,
36-
tintColor: option<string>,
79+
tintColor: option<ReactNative.Color.t>,
3780
}
3881

39-
type drawerLabelProps = {
40-
focused: bool,
41-
color: string,
42-
}
4382
type drawerIconProps = {
4483
focused: bool,
45-
color: string,
84+
color: ReactNative.Color.t,
4685
size: float,
4786
}
4887

4988
type contentOptions = {
5089
"items": array<route<M.params>>,
5190
"activeItemKey": option<Js.nullable<string>>,
52-
"activeTintColor": option<string>,
53-
"activeBackgroundColor": option<string>,
54-
"inactiveTintColor": option<string>,
55-
"inactiveBackgroundColor": option<string>,
91+
"activeTintColor": option<ReactNative.Color.t>,
92+
"activeBackgroundColor": option<ReactNative.Color.t>,
93+
"inactiveTintColor": option<ReactNative.Color.t>,
94+
"inactiveBackgroundColor": option<ReactNative.Color.t>,
5695
"itemsContainerStyle": option<ReactNative.Style.t>,
5796
"itemStyle": option<ReactNative.Style.t>,
5897
"labelStyle": option<ReactNative.Style.t>,
@@ -75,16 +114,31 @@ module Make = (
75114
"drawerOpenProgress": animatedNode,
76115
}
77116

117+
type headerRightOptions = {
118+
tintColor: option<ReactNative.Color.t>,
119+
pressColor: option<ReactNative.Color.t>,
120+
pressOpacity: option<float>,
121+
}
122+
123+
type headerLeftOptions = {
124+
tintColor: option<ReactNative.Color.t>,
125+
pressColor: option<ReactNative.Color.t>,
126+
pressOpacity: option<float>,
127+
labelVisible: option<bool>,
128+
}
129+
130+
type headerBackgroundOptions = {style: option<ReactNative.Style.t>}
131+
78132
@obj
79133
external options: (
80134
~title: string=?,
81135
~_lazy: bool=?,
82-
~drawerLabel: drawerLabelProps=>React.element=?,
136+
~drawerLabel: DrawerLabel.t=?,
83137
~drawerIcon: drawerIconProps => React.element=?,
84-
~drawerActiveTintColor: string=?,
85-
~drawerActiveBackgroundColor: string=?,
86-
~drawerInactiveTintColor: string=?,
87-
~drawerInactiveBackgroundColor: string=?,
138+
~drawerActiveTintColor: ReactNative.Color.t=?,
139+
~drawerActiveBackgroundColor: ReactNative.Color.t=?,
140+
~drawerInactiveTintColor: ReactNative.Color.t=?,
141+
~drawerInactiveBackgroundColor: ReactNative.Color.t=?,
88142
~drawerItemStyle: ReactNative.Style.t=?,
89143
~drawerLabelStyle: ReactNative.Style.t=?,
90144
~drawerContentContainerStyle: ReactNative.Style.t=?,
@@ -94,7 +148,7 @@ module Make = (
94148
~drawerType: [#front | #back | #slide | #permanent]=?,
95149
~drawerHideStatusBarOnOpen: bool=?,
96150
~drawerStatusBarAnimation: [#slide | #fade | #none]=?,
97-
~overlayColor: string=?,
151+
~overlayColor: ReactNative.Color.t=?,
98152
~sceneContainerStyle: ReactNative.Style.t=?,
99153
~gestureEnabled: bool=?,
100154
~gestureHandlerProps: 'gestureHandlerProps=?,
@@ -108,9 +162,28 @@ module Make = (
108162
]=?,
109163
~unmountOnBlur: bool=?,
110164
~headerShown: bool=?,
165+
// ~header: Header.t=?,
166+
~headerTitle: HeaderTitle.t=?,
167+
~headerTitleAlign: [#left | #center]=?,
168+
~headerTitleStyle: ReactNative.Style.t=?,
169+
~headerTitleContainerStyle: ReactNative.Style.t=?,
170+
~headerTitleAllowFontScaling: bool=?,
171+
~headerLeft: headerLeftOptions => React.element=?,
172+
~headerLeftLabelVisible: bool=?,
173+
~headerLeftContainerStyle: ReactNative.Style.t=?,
174+
~headerRight: headerRightOptions => React.element=?,
175+
~headerRightContainerStyle: ReactNative.Style.t=?,
176+
~headerPressColor: ReactNative.Color.t=?,
177+
~headerPressOpacity: float=?,
178+
~headerTintColor: ReactNative.Color.t=?,
179+
~headerBackground: headerBackgroundOptions => React.element=?,
180+
~headerBackgroundContainerStyle: ReactNative.Style.t=?,
181+
~headerTransparent: bool=?,
182+
~headerStyle: ReactNative.Style.t=?,
183+
~headerShadowVisible: bool=?,
184+
~headerStatusBarHeight: ReactNative.Style.size=?,
111185
unit,
112186
) => options = ""
113-
// TODO Header options: https://reactnavigation.org/docs/drawer-navigator/#header-related-options
114187
// ~drawerLockMode: [@bs.string] [
115188
// | `unlocked
116189
// | [@bs.as "locked-closed"] `lockedClosed
@@ -127,19 +200,43 @@ module Make = (
127200

128201
type navigatorProps
129202

130-
type screenProps
203+
type groupProps= {screenOptions: option<optionsCallback>}
131204

132-
type groupProps
205+
type renderCallbackProp = {
206+
navigation: navigation,
207+
route: route<M.params>,
208+
}
209+
210+
type screenProps<'params> = {
211+
name: string,
212+
options: option<optionsCallback>,
213+
initialParams: option<'params>,
214+
component: option<React.component<{"navigation": navigation, "route": route<M.params>}>>,
215+
children: option<renderCallbackProp => React.element>,
216+
}
133217

134218
@module("@react-navigation/drawer")
135219
external make: unit => {
136220
"Navigator": navigatorProps => React.element,
137-
"Screen": screenProps => React.element,
221+
"Screen": screenProps<M.params> => React.element,
138222
"Group": groupProps => React.element,
139223
} = "createDrawerNavigator"
140224

141225
let stack = make()
142226

227+
module ScreenWithCallback = {
228+
@obj
229+
external makeProps: (
230+
~name: string,
231+
~options: optionsCallback=?,
232+
~initialParams: M.params=?,
233+
~children: renderCallbackProp => React.element,
234+
~key: string=?,
235+
unit,
236+
) => screenProps<M.params> = ""
237+
let make = stack["Screen"]
238+
}
239+
143240
module Screen = {
144241
@obj
145242
external makeProps: (
@@ -149,7 +246,7 @@ module Make = (
149246
~component: React.component<{"navigation": navigation, "route": route<M.params>}>,
150247
~key: string=?,
151248
unit,
152-
) => screenProps = ""
249+
) => screenProps<M.params> = ""
153250
let make = stack["Screen"]
154251
}
155252

@@ -190,7 +287,7 @@ module Make = (
190287
~children: React.element,
191288
~key: string=?,
192289
unit,
193-
) => screenProps = ""
290+
) => groupProps = ""
194291
let make = stack["Group"]
195292
}
196293
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /