Created
May 4, 2018 05:37
-
-
Save broerjuang/bc954c313abb09327dd32d049e3fee2c to your computer and use it in GitHub Desktop.
Binding of react native web
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let option_map = (fn, opt_value) => | |
switch (opt_value) { | |
| None => None | |
| Some(value) => Some(fn(value)) | |
}; | |
module View = { | |
[@bs.module "react-native-web"] | |
external _view : ReasonReact.reactClass = "View"; | |
let make = | |
( | |
~className: option(string)=?, | |
~onMouseEnter: option(ReactEventRe.Mouse.t => unit)=?, | |
~onMouseOver: option(ReactEventRe.Mouse.t => unit)=?, | |
~onMouseLeave: option(ReactEventRe.Mouse.t => unit)=?, | |
~onClick: option(ReactEventRe.Mouse.t => unit)=?, | |
~onBlur: option(ReactEventRe.Mouse.t => unit)=?, | |
~style: option(Js.t({..}))=?, | |
children, | |
) => | |
ReasonReact.wrapJsForReason( | |
~reactClass=_view, | |
~props= | |
Js.Nullable.( | |
{ | |
"className": fromOption(className), | |
"onMouseEnter": fromOption(onMouseEnter), | |
"onMouseLeave": fromOption(onMouseLeave), | |
"onMouseOver": fromOption(onMouseOver), | |
"onClick": fromOption(onClick), | |
"onBlur": fromOption(onBlur), | |
"style": fromOption(style), | |
} | |
), | |
children, | |
); | |
}; | |
module Text = { | |
[@bs.module "react-native-web"] | |
external _text : ReasonReact.reactClass = "Text"; | |
let make = | |
( | |
~value: option(string)=?, | |
~accessible: option(bool)=?, | |
~accessibilityLabel: option(string)=?, | |
~accessibilityLiveRegion: option([ | `assertive | `none | `polite])=?, | |
~importantForAccessibility: | |
option([ | `auto | `no | `noHideDescendants | `yes])=?, | |
~numberOfLines: option(int)=?, | |
~onBlur: option(ReactEventRe.Mouse.t => unit)=?, | |
~onContextMenu: option(ReactEventRe.Mouse.t => unit)=?, | |
~onFocus: option(Js.t({..}) => unit)=?, | |
~onLayout: option(Js.t({..}) => unit)=?, | |
~onPress: option(ReactEventRe.Mouse.t => unit)=?, | |
~className: option(string)=?, | |
~style: option(ReactDOMRe.style)=?, | |
children, | |
) => | |
ReasonReact.wrapJsForReason( | |
~reactClass=_text, | |
~props= | |
Js.Nullable.( | |
{ | |
"accessibilityLabel": fromOption(accessibilityLabel), | |
"accessible": fromOption(accessible), | |
"accessibilityLiveRegion": | |
fromOption( | |
option_map( | |
fun | |
| `assertive => "assertive" | |
| `none => "none" | |
| `polite => "polite", | |
accessibilityLiveRegion, | |
), | |
), | |
"importantForAccessibility": | |
fromOption( | |
option_map( | |
fun | |
| `auto => "auto" | |
| `no => "no" | |
| `noHideDescendants => "no-hide-descendants" | |
| `yes => "yes", | |
importantForAccessibility, | |
), | |
), | |
"numberOfLines": fromOption(numberOfLines), | |
"onBlur": fromOption(onBlur), | |
"onContextMenu": fromOption(onContextMenu), | |
"onFocus": fromOption(onFocus), | |
"onLayout": fromOption(onLayout), | |
"onPress": fromOption(onPress), | |
"className": fromOption(className), | |
"style": fromOption(style), | |
} | |
), | |
switch (value) { | |
| Some(string) => | |
Array.append([|ReasonReact.stringToElement(string)|], children) | |
| None => children | |
}, | |
); | |
}; | |
module TouchableOpacity = { | |
[@bs.module "react-native-web"] | |
external _touchableOpacity : ReasonReact.reactClass = "TouchableOpacity"; | |
let make = | |
( | |
~delayLongPress: option(int)=?, | |
~delayPressIn: option(int)=?, | |
~delayPressOut: option(int)=?, | |
~disabled: option(bool)=?, | |
~activeOpacity: option(float)=?, | |
~focusedOpacity: option(float)=?, | |
~onPress: option(ReactEventRe.Mouse.t => unit)=?, | |
children, | |
) => | |
ReasonReact.wrapJsForReason( | |
~reactClass=_touchableOpacity, | |
~props= | |
Js.Nullable.( | |
{ | |
"delayLongPress": fromOption(delayLongPress), | |
"delayPressIn": fromOption(delayPressIn), | |
"delayPressOut": fromOption(delayPressOut), | |
"disabled": fromOption(disabled), | |
"activeOpacity": fromOption(activeOpacity), | |
"focusedOpacity": fromOption(focusedOpacity), | |
"onPress": fromOption(onPress), | |
} | |
), | |
children, | |
); | |
}; | |
module ScrollView = { | |
[@bs.module "react-native-web"] | |
external _scrollView : ReasonReact.reactClass = "ScrollView"; | |
let make = | |
( | |
~className: option(string)=?, | |
~contentContainerStyle: option(ReactDOMRe.Style.t)=?, | |
~style: option(ReactDOMRe.Style.t)=?, | |
children, | |
) => | |
ReasonReact.wrapJsForReason( | |
~reactClass=_scrollView, | |
~props= | |
Js.Nullable.( | |
{ | |
"className": fromOption(className), | |
"contentContainerStyle": fromOption(contentContainerStyle), | |
"style": fromOption(style), | |
} | |
), | |
children, | |
); | |
}; | |
module TextInput = { | |
[@bs.module "react-native-web"] | |
external _textInput : ReasonReact.reactClass = "TextInput"; | |
let make = | |
( | |
~accessibilityLabel=?, | |
~accessible=?, | |
~hitSlop=?, | |
~onAccessibilityTap=?, | |
~onLayout=?, | |
~onMagicTap=?, | |
~responderHandlers=?, | |
~pointerEvents=?, | |
~removeClippedSubviews=?, | |
~style: option(ReactDOMRe.style)=?, | |
~testID=?, | |
~accessibilityComponentType=?, | |
~accessibilityLiveRegion=?, | |
~collapsable=?, | |
~importantForAccessibility=?, | |
~needsOffscreenAlphaCompositing=?, | |
~renderToHardwareTextureAndroid=?, | |
~accessibilityTraits=?, | |
~accessibilityViewIsModal=?, | |
~shouldRasterizeIOS=?, | |
~autoCapitalize: | |
option([ | `none | `sentences | `words | `characters])=?, | |
~autoCorrect: option(bool)=?, | |
~autoFocus: option(bool)=?, | |
~blurOnSubmit: option(bool)=?, | |
~caretHidden: option(bool)=?, | |
~defaultValue: option(string)=?, | |
~editable: option(bool)=?, | |
~keyboardType: | |
option( | |
[ | |
| `default | |
| `emailAddress | |
| `numeric | |
| `phonePad | |
| `asciiCapable | |
| `numbersAndPunctuation | |
| `url | |
| `numberPad | |
| `namePhonePad | |
| `decimalPad | |
| `webSearch | |
], | |
)=?, | |
~maxLength: option(int)=?, | |
~multiline: option(bool)=?, | |
~onBlur=?, | |
~onChange: option(_ => _)=?, | |
~onChangeText: option(_ => _)=?, | |
~onContentSizeChange: option(_ => _)=?, | |
~onEndEditing: option(_ => _)=?, | |
~onFocus: option(_ => _)=?, | |
~onScroll: option(_ => _)=?, | |
~onSelectionChange: option(_ => _)=?, | |
~onSubmitEditing: option(_ => _)=?, | |
~placeholder: option(string)=?, | |
~placeholderTextColor=?, | |
~returnKeyType: | |
option( | |
[ | |
| `done_ | |
| `go | |
| `next | |
| `search | |
| `send | |
| `none | |
| `previous | |
| `default | |
| `emergencyCall | |
| `join | |
| `route | |
| `yahoo | |
], | |
)=?, | |
~secureTextEntry: option(bool)=?, | |
~selectTextOnFocus: option(bool)=?, | |
~selection=?, | |
~selectionColor=?, | |
~value: option(string)=?, | |
~disableFullscreenUI: option(bool)=?, | |
~inlineImageLeft=?, | |
~inlineImagePadding=?, | |
~numberOfLines=?, | |
~returnKeyLabel=?, | |
~textBreakStrategy: option([ | `simple | `highQuality | `balanced])=?, | |
~underlineColorAndroid=?, | |
~clearButtonMode: | |
option([ | `never | `whileEditing | `unlessEditing | `always])=?, | |
~clearTextOnFocus=?, | |
~dataDetectorTypes: | |
option( | |
array([ | `phoneNumber | `link | `calendarEvent | `none | `all]), | |
)=?, | |
~enablesReturnKeyAutomatically: option(bool)=?, | |
~keyboardAppearance: option([ | `default | `light | `dark])=?, | |
~onKeyPress: option(_ => _)=?, | |
~selectionState=?, | |
~spellCheck: option(bool)=?, | |
children, | |
) => | |
ReasonReact.wrapJsForReason( | |
~reactClass=_textInput, | |
~props= | |
Js.Nullable.( | |
{ | |
"autoCapitalize": | |
fromOption( | |
option_map( | |
v => | |
switch (v) { | |
| `none => "none" | |
| `sentences => "sentences" | |
| `words => "words" | |
| `characters => "characters" | |
}, | |
autoCapitalize, | |
), | |
), | |
"keyboardType": | |
fromOption( | |
option_map( | |
x => | |
switch (x) { | |
| `default => "default" | |
| `emailAddress => "email-address" | |
| `numeric => "numeric" | |
| `phonePad => "phone-pad" | |
| `asciiCapable => "ascii-capable" | |
| `numbersAndPunctuation => "numbers-and-punctuation" | |
| `url => "url" | |
| `numberPad => "number-pad" | |
| `namePhonePad => "name-phone-pad" | |
| `decimalPad => "decimal-pad" | |
| `twitter => "twitter" | |
| `webSearch => "web-search" | |
}, | |
keyboardType, | |
), | |
), | |
"autoCorrect": fromOption(autoCorrect), | |
"autoFocus": fromOption(autoFocus), | |
"blurOnSubmit": fromOption(blurOnSubmit), | |
"caretHidden": fromOption(caretHidden), | |
"defaultValue": fromOption(defaultValue), | |
"editable": fromOption(editable), | |
"maxLength": fromOption(maxLength), | |
"multiline": fromOption(multiline), | |
"onBlur": fromOption(onBlur), | |
"onChange": fromOption(onChange), | |
"onChangeText": fromOption(onChangeText), | |
"onContentSizeChange": fromOption(onContentSizeChange), | |
"onEndEditing": fromOption(onEndEditing), | |
"onFocus": fromOption(onFocus), | |
"onScroll": fromOption(onScroll), | |
"onSelectionChange": fromOption(onSelectionChange), | |
"onSubmitEditing": fromOption(onSubmitEditing), | |
"placeholder": fromOption(placeholder), | |
"placeholderTextColor": fromOption(placeholderTextColor), | |
"returnKeyType": | |
fromOption( | |
option_map( | |
x => | |
switch (x) { | |
| `done_ => "done" | |
| `go => "go" | |
| `next => "next" | |
| `search => "search" | |
| `send => "send" | |
| `none => "none" | |
| `previous => "previous" | |
| `default => "default" | |
| `emergencyCall => "emergencyCall" | |
| `google => "google" | |
| `join => "join" | |
| `route => "route" | |
| `yahoo => "yahoo" | |
}, | |
returnKeyType, | |
), | |
), | |
"secureTextEntry": fromOption(secureTextEntry), | |
"selectTextOnFocus": fromOption(selectTextOnFocus), | |
"selection": fromOption(selection), | |
"selectionColor": fromOption(selectionColor), | |
"value": fromOption(value), | |
"disableFullscreenUI": fromOption(disableFullscreenUI), | |
"inlineImageLeft": fromOption(inlineImageLeft), | |
"inlineImagePadding": fromOption(inlineImagePadding), | |
"numberOfLines": fromOption(numberOfLines), | |
"returnKeyLabel": fromOption(returnKeyLabel), | |
"textBreakStrategy": | |
fromOption( | |
option_map( | |
x => | |
switch (x) { | |
| `simple => "simple" | |
| `highQuality => "highQuality" | |
| `balanced => "balanced" | |
}, | |
textBreakStrategy, | |
), | |
), | |
"underlineColorAndroid": fromOption(underlineColorAndroid), | |
"clearButtonMode": | |
fromOption( | |
option_map( | |
x => | |
switch (x) { | |
| `never => "never" | |
| `whileEditing => "whileEditing" | |
| `unlessEditing => "unless-editing" | |
| `always => "always" | |
}, | |
clearButtonMode, | |
), | |
), | |
"clearTextOnFocus": fromOption(clearTextOnFocus), | |
"dataDetectorTypes": | |
fromOption( | |
option_map( | |
Array.map(x => | |
switch (x) { | |
| `phoneNumber => "phoneNumber" | |
| `link => "link" | |
| `calendarEvent => "calendarEvent" | |
| `none => "none" | |
| `all => "all" | |
} | |
), | |
dataDetectorTypes, | |
), | |
), | |
"enablesReturnKeyAutomatically": | |
fromOption(enablesReturnKeyAutomatically), | |
"keyboardAppearance": | |
fromOption( | |
option_map( | |
x => | |
switch (x) { | |
| `default => "never" | |
| `light => "light" | |
| `dark => "dark" | |
}, | |
keyboardAppearance, | |
), | |
), | |
"onKeyPress": fromOption(onKeyPress), | |
"selectionState": fromOption(selectionState), | |
"spellCheck": fromOption(spellCheck), | |
"accessibilityLabel": fromOption(accessibilityLabel), | |
"accessible": fromOption(accessible), | |
"hitSlop": fromOption(hitSlop), | |
"onAccessibilityTap": fromOption(onAccessibilityTap), | |
"onLayout": fromOption(onLayout), | |
"onMagicTap": fromOption(onMagicTap), | |
"responderHandlers": fromOption(responderHandlers), | |
"pointerEvents": fromOption(pointerEvents), | |
"removeClippedSubviews": fromOption(removeClippedSubviews), | |
"style": fromOption(style), | |
"testID": fromOption(testID), | |
"accessibilityComponentType": | |
fromOption(accessibilityComponentType), | |
"accessibilityLiveRegion": fromOption(accessibilityLiveRegion), | |
"collapsable": fromOption(collapsable), | |
"importantForAccessibility": | |
fromOption(importantForAccessibility), | |
"needsOffscreenAlphaCompositing": | |
fromOption(needsOffscreenAlphaCompositing), | |
"renderToHardwareTextureAndroid": | |
fromOption(renderToHardwareTextureAndroid), | |
"accessibilityTraits": fromOption(accessibilityTraits), | |
"accessibilityViewIsModal": fromOption(accessibilityViewIsModal), | |
"shouldRasterizeOs": fromOption(shouldRasterizeIOS), | |
} | |
), | |
children, | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment