Skip to content

Commit

Permalink
Improve Drawer bindings (#48)
Browse files Browse the repository at this point in the history 
- add missing options
- enable creating screen with children (`ScreenWithCallback`)
- small improvements in existing options
  • Loading branch information
@reck753
reck753 authored Dec 6, 2021
1 parent 8ce4313 commit b539ea4
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 28 deletions.
48 changes: 42 additions & 6 deletions src/Drawer.bs.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use strict';

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

Expand All @@ -9,22 +10,57 @@ function Make(M) {
var M$1 = {};
var include = Core$ReactNavigation.NavigationScreenProp(M$1);
var Navigation = include;
var t = function (prim) {
return Interop.identity(prim.VAL);
};
var string = function (s) {
return Interop.identity(s);
};
var render = function (x) {
return Interop.identity(x);
};
var HeaderTitle = {
t: t,
string: string,
render: render
};
var t$1 = function (prim) {
return Interop.identity(prim.VAL);
};
var string$1 = function (s) {
return Interop.identity(s);
};
var render$1 = function (x) {
return Interop.identity(x);
};
var DrawerLabel = {
t: t$1,
string: string$1,
render: render$1
};
var stack = Drawer.createDrawerNavigator();
var make = stack.Screen;
var $$Screen = {
var ScreenWithCallback = {
make: make
};
var make$1 = stack.Navigator;
var $$Navigator = {
var make$1 = stack.Screen;
var $$Screen = {
make: make$1
};
var make$2 = stack.Group;
var Group = {
var make$2 = stack.Navigator;
var $$Navigator = {
make: make$2
};
var make$3 = stack.Group;
var Group = {
make: make$3
};
return {
Navigation: Navigation,
HeaderTitle: HeaderTitle,
DrawerLabel: DrawerLabel,
stack: stack,
ScreenWithCallback: ScreenWithCallback,
$$Screen: $$Screen,
$$Navigator: $$Navigator,
Group: Group
Expand All @@ -33,4 +69,4 @@ function Make(M) {

exports.DrawerNavigationProp = DrawerNavigationProp;
exports.Make = Make;
/* @react-navigation/drawer Not a pure module */
/* ./Interop Not a pure module */
141 changes: 119 additions & 22 deletions src/Drawer.res
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ open Core

type options

type layoutChangeEvent

module DrawerNavigationProp = (
M: {
type params
Expand All @@ -27,32 +29,69 @@ module Make = (
type options = options
})

module HeaderTitle = {
type t

type headerTitleProps = {
children: option<string>,
allowFontScaling: option<bool>,
tintColor: option<ReactNative.Color.t>,
onLayout: layoutChangeEvent => unit,
style: option<ReactNative.Style.t>, //textStyle
}

@val @module("./Interop")
external t: @unwrap
[
| #String(string)
| #Render(headerTitleProps => React.element)
] => t = "identity"

let string = s => t(#String(s))
let render = x => t(#Render(x))
}

module DrawerLabel = {
type t

type drawerLabelProps = {
focused: bool,
color: string,
}

@val @module("./Interop")
external t: @unwrap
[
| #String(string)
| #Render(drawerLabelProps => React.element)
] => t = "identity"

let string = s => t(#String(s))
let render = x => t(#Render(x))
}

type animatedNode = ReactNative.Animated.Value.t

type scene = {
route: route<M.params>,
index: int,
focused: bool,
tintColor: option<string>,
tintColor: option<ReactNative.Color.t>,
}

type drawerLabelProps = {
focused: bool,
color: string,
}
type drawerIconProps = {
focused: bool,
color: string,
color: ReactNative.Color.t,
size: float,
}

type contentOptions = {
"items": array<route<M.params>>,
"activeItemKey": option<Js.nullable<string>>,
"activeTintColor": option<string>,
"activeBackgroundColor": option<string>,
"inactiveTintColor": option<string>,
"inactiveBackgroundColor": option<string>,
"activeTintColor": option<ReactNative.Color.t>,
"activeBackgroundColor": option<ReactNative.Color.t>,
"inactiveTintColor": option<ReactNative.Color.t>,
"inactiveBackgroundColor": option<ReactNative.Color.t>,
"itemsContainerStyle": option<ReactNative.Style.t>,
"itemStyle": option<ReactNative.Style.t>,
"labelStyle": option<ReactNative.Style.t>,
Expand All @@ -75,16 +114,31 @@ module Make = (
"drawerOpenProgress": animatedNode,
}

type headerRightOptions = {
tintColor: option<ReactNative.Color.t>,
pressColor: option<ReactNative.Color.t>,
pressOpacity: option<float>,
}

type headerLeftOptions = {
tintColor: option<ReactNative.Color.t>,
pressColor: option<ReactNative.Color.t>,
pressOpacity: option<float>,
labelVisible: option<bool>,
}

type headerBackgroundOptions = {style: option<ReactNative.Style.t>}

@obj
external options: (
~title: string=?,
~_lazy: bool=?,
~drawerLabel: drawerLabelProps => React.element=?,
~drawerLabel: DrawerLabel.t=?,
~drawerIcon: drawerIconProps => React.element=?,
~drawerActiveTintColor: string=?,
~drawerActiveBackgroundColor: string=?,
~drawerInactiveTintColor: string=?,
~drawerInactiveBackgroundColor: string=?,
~drawerActiveTintColor: ReactNative.Color.t=?,
~drawerActiveBackgroundColor: ReactNative.Color.t=?,
~drawerInactiveTintColor: ReactNative.Color.t=?,
~drawerInactiveBackgroundColor: ReactNative.Color.t=?,
~drawerItemStyle: ReactNative.Style.t=?,
~drawerLabelStyle: ReactNative.Style.t=?,
~drawerContentContainerStyle: ReactNative.Style.t=?,
Expand All @@ -94,7 +148,7 @@ module Make = (
~drawerType: [#front | #back | #slide | #permanent]=?,
~drawerHideStatusBarOnOpen: bool=?,
~drawerStatusBarAnimation: [#slide | #fade | #none]=?,
~overlayColor: string=?,
~overlayColor: ReactNative.Color.t=?,
~sceneContainerStyle: ReactNative.Style.t=?,
~gestureEnabled: bool=?,
~gestureHandlerProps: 'gestureHandlerProps=?,
Expand All @@ -108,9 +162,28 @@ module Make = (
]=?,
~unmountOnBlur: bool=?,
~headerShown: bool=?,
// ~header: Header.t=?,
~headerTitle: HeaderTitle.t=?,
~headerTitleAlign: [#left | #center]=?,
~headerTitleStyle: ReactNative.Style.t=?,
~headerTitleContainerStyle: ReactNative.Style.t=?,
~headerTitleAllowFontScaling: bool=?,
~headerLeft: headerLeftOptions => React.element=?,
~headerLeftLabelVisible: bool=?,
~headerLeftContainerStyle: ReactNative.Style.t=?,
~headerRight: headerRightOptions => React.element=?,
~headerRightContainerStyle: ReactNative.Style.t=?,
~headerPressColor: ReactNative.Color.t=?,
~headerPressOpacity: float=?,
~headerTintColor: ReactNative.Color.t=?,
~headerBackground: headerBackgroundOptions => React.element=?,
~headerBackgroundContainerStyle: ReactNative.Style.t=?,
~headerTransparent: bool=?,
~headerStyle: ReactNative.Style.t=?,
~headerShadowVisible: bool=?,
~headerStatusBarHeight: ReactNative.Style.size=?,
unit,
) => options = ""
// TODO Header options: https://reactnavigation.org/docs/drawer-navigator/#header-related-options
// ~drawerLockMode: [@bs.string] [
// | `unlocked
// | [@bs.as "locked-closed"] `lockedClosed
Expand All @@ -127,19 +200,43 @@ module Make = (

type navigatorProps

type screenProps
type groupProps = {screenOptions: option<optionsCallback>}

type groupProps
type renderCallbackProp = {
navigation: navigation,
route: route<M.params>,
}

type screenProps<'params> = {
name: string,
options: option<optionsCallback>,
initialParams: option<'params>,
component: option<React.component<{"navigation": navigation, "route": route<M.params>}>>,
children: option<renderCallbackProp => React.element>,
}

@module("@react-navigation/drawer")
external make: unit => {
"Navigator": navigatorProps => React.element,
"Screen": screenProps => React.element,
"Screen": screenProps<M.params> => React.element,
"Group": groupProps => React.element,
} = "createDrawerNavigator"

let stack = make()

module ScreenWithCallback = {
@obj
external makeProps: (
~name: string,
~options: optionsCallback=?,
~initialParams: M.params=?,
~children: renderCallbackProp => React.element,
~key: string=?,
unit,
) => screenProps<M.params> = ""
let make = stack["Screen"]
}

module Screen = {
@obj
external makeProps: (
Expand All @@ -149,7 +246,7 @@ module Make = (
~component: React.component<{"navigation": navigation, "route": route<M.params>}>,
~key: string=?,
unit,
) => screenProps = ""
) => screenProps<M.params> = ""
let make = stack["Screen"]
}

Expand Down Expand Up @@ -190,7 +287,7 @@ module Make = (
~children: React.element,
~key: string=?,
unit,
) => screenProps = ""
) => groupProps = ""
let make = stack["Group"]
}
}

0 comments on commit b539ea4

Please sign in to comment.