diff --git a/src/Drawer.bs.js b/src/Drawer.bs.js index c46f669..d943ac6 100644 --- a/src/Drawer.bs.js +++ b/src/Drawer.bs.js @@ -1,5 +1,6 @@ 'use strict'; +var Interop = require("./Interop"); var Core$ReactNavigation = require("./Core.bs.js"); var Drawer = require("@react-navigation/drawer"); @@ -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 @@ -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 */ diff --git a/src/Drawer.res b/src/Drawer.res index f80e492..7254837 100644 --- a/src/Drawer.res +++ b/src/Drawer.res @@ -2,6 +2,8 @@ open Core type options +type layoutChangeEvent + module DrawerNavigationProp = ( M: { type params @@ -27,32 +29,69 @@ module Make = ( type options = options }) + module HeaderTitle = { + type t + + type headerTitleProps = { + children: option, + allowFontScaling: option, + tintColor: option, + onLayout: layoutChangeEvent => unit, + style: option, //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, index: int, focused: bool, - tintColor: option, + tintColor: option, } - type drawerLabelProps = { - focused: bool, - color: string, - } type drawerIconProps = { focused: bool, - color: string, + color: ReactNative.Color.t, size: float, } type contentOptions = { "items": array>, "activeItemKey": option>, - "activeTintColor": option, - "activeBackgroundColor": option, - "inactiveTintColor": option, - "inactiveBackgroundColor": option, + "activeTintColor": option, + "activeBackgroundColor": option, + "inactiveTintColor": option, + "inactiveBackgroundColor": option, "itemsContainerStyle": option, "itemStyle": option, "labelStyle": option, @@ -75,16 +114,31 @@ module Make = ( "drawerOpenProgress": animatedNode, } + type headerRightOptions = { + tintColor: option, + pressColor: option, + pressOpacity: option, + } + + type headerLeftOptions = { + tintColor: option, + pressColor: option, + pressOpacity: option, + labelVisible: option, + } + + type headerBackgroundOptions = {style: option} + @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=?, @@ -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=?, @@ -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 @@ -127,19 +200,43 @@ module Make = ( type navigatorProps - type screenProps + type groupProps = {screenOptions: option} - type groupProps + type renderCallbackProp = { + navigation: navigation, + route: route, + } + + type screenProps<'params> = { + name: string, + options: option, + initialParams: option<'params>, + component: option}>>, + children: option React.element>, + } @module("@react-navigation/drawer") external make: unit => { "Navigator": navigatorProps => React.element, - "Screen": screenProps => React.element, + "Screen": screenProps => 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 = "" + let make = stack["Screen"] + } + module Screen = { @obj external makeProps: ( @@ -149,7 +246,7 @@ module Make = ( ~component: React.component<{"navigation": navigation, "route": route}>, ~key: string=?, unit, - ) => screenProps = "" + ) => screenProps = "" let make = stack["Screen"] } @@ -190,7 +287,7 @@ module Make = ( ~children: React.element, ~key: string=?, unit, - ) => screenProps = "" + ) => groupProps = "" let make = stack["Group"] } }