update Elements bindings

rescript-react-native · Jan 15, 2025 · 33601ed · 33601ed
1 parent fc0ac66
commit 33601ed
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 46 deletions.
diff --git a/src/Elements.bs.js b/src/Elements.bs.js
@@ -5,9 +5,15 @@ var Header = {};
 
 var HeaderBackground = {};
 
+var HeaderTitle = {};
+
+var HeaderButton = {};
+
 var HeaderBackButton = {};
 
 exports.Header = Header;
 exports.HeaderBackground = HeaderBackground;
+exports.HeaderTitle = HeaderTitle;
+exports.HeaderButton = HeaderButton;
 exports.HeaderBackButton = HeaderBackButton;
 /* No side effect */
diff --git a/src/Elements.res b/src/Elements.res
@@ -2,9 +2,9 @@ open ReactNative
 
 module Header = {
   type headerTitleProps = {
-    allowFontScaling: option<bool>,
-    tintColor: option<Color.t>,
-    style: option<Style.t>,
+    allowFontScaling?: bool,
+    tintColor?: Color.t,
+    style?: Style.t,
     children: string,
   }
 
@@ -15,63 +15,133 @@ module Header = {
 
   type displayMode = [#default | #generic | #minimal]
 
-  type headerLeftProps = {
-    tintColor: option<Color.t>,
-    pressColor: option<Color.t>,
-    pressOpacity: option<float>,
-    displayMode: option<displayMode>,
+  type headerButtonCommonProps = {
+    tintColor?: Color.t,
+    pressColor?: Color.t,
+    pressOpacity?: float,
   }
 
   type headerRightProps = {
-    tintColor: option<Color.t>,
-    pressColor: option<Color.t>,
-    pressOpacity: option<float>,
+    ...headerButtonCommonProps,
+    canGoBack?: bool,
+  }
+  type headerLeftProps = {
+    ...headerRightProps,
+    displayMode?: displayMode,
+    href?: string,
   }
 
-  type headerBackgroundOptions = {style: option<Style.t>}
+  type headerBackgroundOptions = {style?: Style.t}
 
   type headerTitleAlign = [#left | #center]
 
-  @react.component @module("@react-navigation/elements")
-  external make: (
-    ~title: string=?,
-    ~headerTitle: headerTitle=?,
-    ~headerTitleAlign: headerTitleAlign=?,
-    ~headerTitleAllowFontScaling: bool=?,
-    ~headerTitleStyle: Style.t=?,
-    ~headerTitleContainerStyle: Style.t=?,
-    ~headerLeft: headerLeftProps => React.element=?,
-    ~headerLeftLabelVisible: bool=?,
-    ~headerLeftContainerStyle: Style.t=?,
-    ~headerRight: headerRightProps => React.element=?,
-    ~headerRightContainerStyle: Style.t=?,
-    ~headerPressColor: Color.t=?,
-    ~headerPressOpacity: float=?,
-    ~headerTintColor: Color.t=?,
-    ~headerBackground: headerBackgroundOptions => React.element=?,
-    ~headerBackgroundContainerStyle: Style.t=?,
-    ~headerTransparent: bool=?,
-    ~headerStyle: Style.t=?,
-    ~headerShadowVisible: bool=?,
-    ~headerStatusBarHeight: Style.size=?,
-  ) => React.element = "Header"
+  type inputType = [
+    | #text
+    | #phone
+    | #number
+    | #email
+  ]
+
+  type headerSearchBarOptions = {
+    ref?: TextInputElement.ref,
+    autoCapitalize?: TextInput.autoCapitalize,
+    autoFocus?: bool,
+    cancelButtonText?: string,
+    inputType?: inputType,
+    onBlur?: Event.targetEvent => unit,
+    onChangeText?: string => unit,
+    onClose?: unit => unit,
+    onFocus?: Event.targetEvent => unit,
+    placeholder?: string,
+  }
+
+  type headerOptions = {
+    headerTitle?: headerTitle,
+    headerTitleAlign?: headerTitleAlign,
+    headerTitleAllowFontScaling?: bool,
+    headerTitleStyle?: Style.t,
+    headerTitleContainerStyle?: Style.t,
+    headerLeft?: headerLeftProps => React.element,
+    headerLeftContainerStyle?: Style.t,
+    headerRight?: headerRightProps => React.element,
+    headerRightContainerStyle?: Style.t,
+    headerSearchBarOptions?: headerSearchBarOptions,
+    headerPressColor?: Color.t,
+    headerPressOpacity?: float,
+    headerTintColor?: Color.t,
+    headerBackground?: headerBackgroundOptions => React.element,
+    headerBackgroundContainerStyle?: Style.t,
+    headerTransparent?: bool,
+    headerStyle?: Style.t,
+    headerShadowVisible?: bool,
+    headerStatusBarHeight?: Style.size,
+  }
+
+  type backProp = {
+    title?: string,
+    href?: string,
+  }
+
+  type props = {
+    ...headerOptions,
+    backProp?: backProp,
+    modal?: bool,
+    layout?: Core.layout,
+    title: string,
+  }
+
+  @module("@react-navigation/elements")
+  external make: React.component<props> = "Header"
 }
 
 module HeaderBackground = {
-  @react.component @module("@react-navigation/elements")
-  external make: (
-    // actually all RN view props
-    ~children: React.element=?,
-  ) => React.element = "HeaderBackground"
+  @module("@react-navigation/elements")
+  external make: React.component<View.props> = "HeaderBackground"
+}
+
+module HeaderTitle = {
+  @module("@react-navigation/elements")
+  external make: React.component<Text.props> = "HeaderTitle"
+}
+
+module HeaderButton = {
+  type headerButtonProps = {
+    ...Header.headerButtonCommonProps,
+    onPress?: unit => unit,
+    href?: string,
+    disabled?: bool,
+    accessibilityLabel?: string,
+    testID?: string,
+    style?: Style.t,
+  }
+
+  type props = {
+    ...headerButtonProps,
+    children: React.element,
+  }
+
+  @module("@react-navigation/elements")
+  external make: React.component<props> = "HeaderTitle"
 }
 
 module HeaderBackButton = {
-  @react.component @module("@react-navigation/elements")
-  external make: (
-    ~displayMode: Header.displayMode=?,
-    ~tintColor: Color.t=?,
-    ~onPress: unit => unit,
-  ) => React.element = "HeaderBackButton"
+  type backImageProps = {tintColor?: Color.t}
+
+  type props = {
+    ...HeaderButton.headerButtonProps,
+    backImage?: backImageProps => React.element,
+    label?: string,
+    truncatedLabel?: string,
+    displayMode?: Header.displayMode,
+    labelStyle?: Style.t,
+    allowFontScaling?: bool,
+    onLabelLayout?: Event.layoutEvent => unit,
+    screenLayout?: Core.layout,
+    titleLayout?: Core.layout,
+  }
+
+  @module("@react-navigation/elements")
+  external make: React.component<props> = "HeaderBackButton"
 }
 
 @module("@react-navigation/elements")