36cb947 · rowtype-yoga/purescript-yoga-react-native

git.iko.soy/rowtype-yoga/purescript-yoga-react-native

on main help sign in

WIP: React Native bindings development

36cb947Mark7 months ago

docs/src/Docs/Pages/DataViews.purs+29−16

compare with main

unifiedsplit

@@ -15,15 +15,24 @@ page =

16tableView :: Nut

17tableView = L.componentDoc "nativeTableView" "Yoga.React.Native.MacOS.TableView (nativeTableView)"

18+ """selected /\ setSelected <- useState' ""

19+

18− """nativeTableView

20+nativeTableView

19 { columns:

21 { columns:

20− [ { id: "name", title: "Name", width: 200.0 }

22+ [ { id: "name", title: "Name", width: 150.0 }

23+ , { id: "type", title: "Type", width: 100.0 }

21− , { id: "size", title: "Size", width: 100.0 }

24+ , { id: "size", title: "Size", width: 80.0 }

25+ ]

26+ , rows:

27+ [ [ "Main.purs", "PureScript", "12 KB" ]

28+ , [ "App.tsx", "TypeScript", "8 KB" ]

29+ , [ "style.css", "CSS", "3 KB" ]

30+ , [ "index.html", "HTML", "1 KB" ]

22 ]

31 ]

23− , rows: [ ["file.txt", "4 KB"], ["image.png", "1.2 MB"] ]

24 , headerVisible: true

32 , headerVisible: true

25 , alternatingRows: true

33 , alternatingRows: true

26− , onSelectRow: setSelected

34+ , onSelectRow: \i -> setSelected ("Row " <> show i)

35+ , onDoubleClickRow: \i -> setSelected ("Double-clicked row " <> show i)

27 }"""

36 }"""

28 [ propsTable

37 [ propsTable

29 [ { name: "columns", type_: "Array TableColumn", description: "Column definitions ({ id, title, width })" }

38 [ { name: "columns", type_: "Array TableColumn", description: "Column definitions ({ id, title, width })" }

@@ -37,20 +46,24 @@ tableView = L.componentDoc "nativeTableView" "Yoga.React.Native.MacOS.TableView

38outlineView :: Nut

47outlineView :: Nut

39outlineView = L.componentDoc "nativeOutlineView" "Yoga.React.Native.MacOS.OutlineView (nativeOutlineView)"

48outlineView = L.componentDoc "nativeOutlineView" "Yoga.React.Native.MacOS.OutlineView (nativeOutlineView)"

49+ """selection /\ setSelection <- useState' ""

50+let file id title = OutlineItem { id, title, sfSymbol: "doc", children: [] }

51+let folder id title children = OutlineItem { id, title, sfSymbol: "folder", children }

52+

40− """nativeOutlineView

53+nativeOutlineView

41 { items:

54 { items:

42− [ OutlineItem

55+ [ folder "src" "src"

43− { id: "docs"

56+ [ file "main" "Main.purs"

44− , title: "Documents"

57+ , folder "macos" "MacOS"

45− , sfSymbol: "folder"

58+ [ file "btn" "Button.purs"

46− , children:

59+ , file "sl" "Slider.purs"

47− [ OutlineItem { id: "report", title: "report.pdf", sfSymbol: "doc", children: [] }

48− , OutlineItem { id: "notes", title: "notes.txt", sfSymbol: "doc.text", children: [] }

49 ]

60 ]

50− }

61+ ]

62+ , folder "test" "test"

63+ [ file "t1" "MacOSComponents.test.js" ]

51 ]

64 ]

52− , headerVisible: true

65+ , headerVisible: false

53− , onSelectItem: setSelected

66+ , onSelectItem: setSelection

54 }"""

67 }"""

55 [ propsTable

68 [ propsTable

56 [ { name: "items", type_: "Array OutlineItem", description: "Hierarchical tree data (newtype with { id, title, sfSymbol, children })" }

69 [ { name: "items", type_: "Array OutlineItem", description: "Hierarchical tree data (newtype with { id, title, sfSymbol, children })" }

docs/src/Docs/Pages/FilesAndDragDrop.purs+8−7

@@ -16,16 +16,17 @@ page =

17filePicker :: Nut

18filePicker = L.componentDoc "nativeFilePicker" "Yoga.React.Native.MacOS.FilePicker (nativeFilePicker)"

19+ """picked /\ setPicked <- useState' ""

20+

19− """nativeFilePicker

21+nativeFilePicker

20 { mode: T.openFile

22 { mode: T.openFile

21− , title: "Choose files"

23+ , title: "Open Files"

22 , sfSymbol: "doc.badge.plus"

24 , sfSymbol: "doc.badge.plus"

23− , message: "Select one or more files"

24− , allowedTypes: ["pdf", "txt", "png"]

25 , allowMultiple: true

26− , canChooseDirectories: false

26+ , allowedTypes: [ "public.image", "public.text" ]

27+ , message: "Select files to open"

27− , onPickFiles: \files -> setFiles (map _.path files)

28+ , onPickFiles: \files -> setPicked (joinWith ", " (map _.path files))

28− , onCancel: pure unit

29+ , onCancel: setPicked "Cancelled"

29 }"""

30 }"""

30 [ propsTable

31 [ propsTable

31 [ { name: "mode", type_: "FilePickerMode", description: "openFile or saveFile" }

32 [ { name: "mode", type_: "FilePickerMode", description: "openFile or saveFile" }

docs/src/Docs/Pages/InputControls.purs+88−45

@@ -27,10 +27,13 @@ page =

28button :: Nut

29button = L.componentDoc "nativeButton" "Yoga.React.Native.MacOS.Button (nativeButton)"

30+ """status /\ setStatus <- useState' "Ready"

31+

30− """nativeButton

32+nativeButton

31− { title: "Click me"

33+ { title: "Say Hello"

32 , bezelStyle: T.push

34 , bezelStyle: T.push

33− , onPress: doSomething

35+ , primary: true

36+ , onPress: setStatus "Hello from PureScript!"

34 }"""

37 }"""

35 [ propsTable

38 [ propsTable

36 [ { name: "title", type_: "String", description: "Button label text (mutually exclusive with sfSymbol)" }

39 [ { name: "title", type_: "String", description: "Button label text (mutually exclusive with sfSymbol)" }

@@ -45,8 +48,10 @@ button = L.componentDoc "nativeButton" "Yoga.React.Native.MacOS.Button (nativeBu

46switch :: Nut

49switch :: Nut

47switch = L.componentDoc "nativeSwitch" "Yoga.React.Native.MacOS.Switch (nativeSwitch)"

50switch = L.componentDoc "nativeSwitch" "Yoga.React.Native.MacOS.Switch (nativeSwitch)"

51+ """on /\ setOn <- useState' false

52+

48− """nativeSwitch

53+nativeSwitch

49− { on: true

54+ { on

50 , onChange: setOn

55 , onChange: setOn

51 }"""

56 }"""

52 [ propsTable

57 [ propsTable

@@ -57,10 +62,13 @@ switch = L.componentDoc "nativeSwitch" "Yoga.React.Native.MacOS.Switch (nativeSw

58slider :: Nut

63slider :: Nut

59slider = L.componentDoc "nativeSlider" "Yoga.React.Native.MacOS.Slider (nativeSlider)"

64slider = L.componentDoc "nativeSlider" "Yoga.React.Native.MacOS.Slider (nativeSlider)"

60− """nativeSlider

65+ """value /\ setValue <- useState' 50.0

61− { value: 50.0

66+

67+nativeSlider

68+ { value

62 , minValue: 0.0

69 , minValue: 0.0

63 , maxValue: 100.0

70 , maxValue: 100.0

71+ , numberOfTickMarks: 11

64 , onChange: setValue

72 , onChange: setValue

65 }"""

73 }"""

66 [ propsTable

74 [ propsTable

@@ -75,10 +83,12 @@ slider = L.componentDoc "nativeSlider" "Yoga.React.Native.MacOS.Slider (nativeSl

76stepper :: Nut

84stepper :: Nut

77stepper = L.componentDoc "nativeStepper" "Yoga.React.Native.MacOS.Stepper (nativeStepper)"

85stepper = L.componentDoc "nativeStepper" "Yoga.React.Native.MacOS.Stepper (nativeStepper)"

78− """nativeStepper

86+ """value /\ setValue <- useState' 5.0

79− { value: 1.0

87+

88+nativeStepper

89+ { value

80 , minValue: 0.0

90 , minValue: 0.0

81− , maxValue: 10.0

91+ , maxValue: 50.0

82 , increment: 1.0

92 , increment: 1.0

83 , onChange: setValue

93 , onChange: setValue

84 }"""

94 }"""

@@ -93,10 +103,13 @@ stepper = L.componentDoc "nativeStepper" "Yoga.React.Native.MacOS.Stepper (nativ

103

94checkbox :: Nut

104checkbox :: Nut

95checkbox = L.componentDoc "nativeCheckbox" "Yoga.React.Native.MacOS.Checkbox (nativeCheckbox)"

105checkbox = L.componentDoc "nativeCheckbox" "Yoga.React.Native.MacOS.Checkbox (nativeCheckbox)"

106+ """a /\ setA <- useState' true

107+

96− """nativeCheckbox

108+nativeCheckbox

109+ { checked: a

97− { title: "Enable notifications"

110+ , title: "Enable notifications"

98− , checked: true

111+ , enabled: true

99− , onChange: setChecked

112+ , onChange: setA

100 }"""

113 }"""

101 [ propsTable

114 [ propsTable

102 [ { name: "title", type_: "String", description: "Label text" }

115 [ { name: "title", type_: "String", description: "Label text" }

@@ -108,10 +121,19 @@ checkbox = L.componentDoc "nativeCheckbox" "Yoga.React.Native.MacOS.Checkbox (na

108

121

109radioButton :: Nut

122radioButton :: Nut

110radioButton = L.componentDoc "nativeRadioButton" "Yoga.React.Native.MacOS.RadioButton (nativeRadioButton)"

123radioButton = L.componentDoc "nativeRadioButton" "Yoga.React.Native.MacOS.RadioButton (nativeRadioButton)"

124+ """choice /\ setChoice <- useState' "option1"

125+

111− """nativeRadioButton

126+nativeRadioButton

127+ { selected: choice == "option1"

112− { title: "Option A"

128+ , title: "Small"

129+ , enabled: true

130+ , onChange: \_ -> setChoice "option1"

131+ }

132+nativeRadioButton

113− , selected: true

133+ { selected: choice == "option2"

134+ , title: "Medium"

135+ , enabled: true

114− , onChange: \_ -> setChoice "optionA"

136+ , onChange: \_ -> setChoice "option2"

115 }"""

137 }"""

116 [ propsTable

138 [ propsTable

117 [ { name: "title", type_: "String", description: "Label text" }

139 [ { name: "title", type_: "String", description: "Label text" }

@@ -123,11 +145,12 @@ radioButton = L.componentDoc "nativeRadioButton" "Yoga.React.Native.MacOS.RadioB

123

145

124segmented :: Nut

146segmented :: Nut

125segmented = L.componentDoc "nativeSegmented" "Yoga.React.Native.MacOS.Segmented (nativeSegmented)"

147segmented = L.componentDoc "nativeSegmented" "Yoga.React.Native.MacOS.Segmented (nativeSegmented)"

148+ """mapType /\ setMapType <- useState' 0

149+

126− """nativeSegmented

150+nativeSegmented

127− { labels: ["One", "Two", "Three"]

151+ { labels: [ "Standard", "Satellite", "Hybrid" ]

128− , sfSymbols: ["1.circle", "2.circle", "3.circle"]

129− , selectedIndex: 0

152+ , selectedIndex: mapType

130− , onChange: setIndex

153+ , onChange: setMapType

131 }"""

154 }"""

132 [ propsTable

155 [ propsTable

133 [ { name: "labels", type_: "Array String", description: "Segment labels" }

156 [ { name: "labels", type_: "Array String", description: "Segment labels" }

@@ -139,10 +162,16 @@ segmented = L.componentDoc "nativeSegmented" "Yoga.React.Native.MacOS.Segmented

139

162

140popUp :: Nut

163popUp :: Nut

141popUp = L.componentDoc "nativePopUp" "Yoga.React.Native.MacOS.PopUp (nativePopUp)"

164popUp = L.componentDoc "nativePopUp" "Yoga.React.Native.MacOS.PopUp (nativePopUp)"

142− """nativePopUp

165+ """idx /\ setIdx <- useState' 0

166+title /\ setTitle <- useState' "Small"

143− { items: ["Small", "Medium", "Large"]

167+let items = [ "Small", "Medium", "Large", "Extra Large" ]

168+

169+nativePopUp

170+ { items

144− , selectedIndex: 1

171+ , selectedIndex: idx

145− , onChange: setIndex

172+ , onChange: \i -> do

173+ setIdx i

174+ setTitle (fromMaybe "" (items !! i))

146 }"""

175 }"""

147 [ propsTable

176 [ propsTable

148 [ { name: "items", type_: "Array String", description: "Menu items" }

177 [ { name: "items", type_: "Array String", description: "Menu items" }

@@ -153,12 +182,17 @@ popUp = L.componentDoc "nativePopUp" "Yoga.React.Native.MacOS.PopUp (nativePopUp

153

182

154comboBox :: Nut

183comboBox :: Nut

155comboBox = L.componentDoc "nativeComboBox" "Yoga.React.Native.MacOS.ComboBox (nativeComboBox)"

184comboBox = L.componentDoc "nativeComboBox" "Yoga.React.Native.MacOS.ComboBox (nativeComboBox)"

185+ """txt /\ setTxt <- useState' ""

186+result /\ setResult <- useState' ""

187+

156− """nativeComboBox

188+nativeComboBox

157− { items: ["Apple", "Banana", "Cherry"]

189+ { items: [ "Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape" ]

158− , text: "Apple"

190+ , text: txt

159− , placeholder: "Choose a fruit..."

191+ , placeholder: "Type a fruit..."

160− , onChangeText: setText

192+ , onChangeText: setTxt

161− , onSelectItem: setText

193+ , onSelectItem: \t -> do

194+ setTxt t

195+ setResult ("Selected: " <> t)

162 }"""

196 }"""

163 [ propsTable

197 [ propsTable

164 [ { name: "items", type_: "Array String", description: "Autocomplete suggestions" }

198 [ { name: "items", type_: "Array String", description: "Autocomplete suggestions" }

@@ -171,11 +205,14 @@ comboBox = L.componentDoc "nativeComboBox" "Yoga.React.Native.MacOS.ComboBox (na

171

205

172searchField :: Nut

206searchField :: Nut

173searchField = L.componentDoc "nativeSearchField" "Yoga.React.Native.MacOS.SearchField (nativeSearchField)"

207searchField = L.componentDoc "nativeSearchField" "Yoga.React.Native.MacOS.SearchField (nativeSearchField)"

208+ """query /\ setQuery <- useState' ""

209+result /\ setResult <- useState' ""

210+

174− """nativeSearchField

211+nativeSearchField

212+ { text: query

175− { placeholder: "Search..."

213+ , placeholder: "Search..."

176− , text: ""

177− , onChangeText: setText

214+ , onChangeText: setQuery

178− , onSearch: \q -> search q

215+ , onSearch: \t -> setResult ("Searched: " <> t)

179 }"""

216 }"""

180 [ propsTable

217 [ propsTable

181 [ { name: "text", type_: "String", description: "Current search text" }

218 [ { name: "text", type_: "String", description: "Current search text" }

@@ -187,8 +224,10 @@ searchField = L.componentDoc "nativeSearchField" "Yoga.React.Native.MacOS.Search

187

224

188tokenField :: Nut

225tokenField :: Nut

189tokenField = L.componentDoc "nativeTokenField" "Yoga.React.Native.MacOS.TokenField (nativeTokenField)"

226tokenField = L.componentDoc "nativeTokenField" "Yoga.React.Native.MacOS.TokenField (nativeTokenField)"

190− """nativeTokenField

227+ """tokens /\ setTokens <- useState' [ "PureScript", "React", "macOS" ]

191− { tokens: ["tag1", "tag2"]

228+

229+nativeTokenField

230+ { tokens

192 , placeholder: "Add tags..."

231 , placeholder: "Add tags..."

193 , onChangeTokens: setTokens

232 , onChangeTokens: setTokens

194 }"""

233 }"""

@@ -201,9 +240,11 @@ tokenField = L.componentDoc "nativeTokenField" "Yoga.React.Native.MacOS.TokenFie

201

240

202datePicker :: Nut

241datePicker :: Nut

203datePicker = L.componentDoc "nativeDatePicker" "Yoga.React.Native.MacOS.DatePicker (nativeDatePicker)"

242datePicker = L.componentDoc "nativeDatePicker" "Yoga.React.Native.MacOS.DatePicker (nativeDatePicker)"

243+ """dateText /\ setDateText <- useState' ""

244+

204− """nativeDatePicker

245+nativeDatePicker

205− { graphical: true

246+ { graphical: false

206− , onChange: setDate

247+ , onChange: setDateText

207 }"""

248 }"""

208 [ propsTable

249 [ propsTable

209 [ { name: "graphical", type_: "Boolean", description: "Show graphical calendar picker" }

250 [ { name: "graphical", type_: "Boolean", description: "Show graphical calendar picker" }

@@ -213,8 +254,10 @@ datePicker = L.componentDoc "nativeDatePicker" "Yoga.React.Native.MacOS.DatePick

213

254

214colorWell :: Nut

255colorWell :: Nut

215colorWell = L.componentDoc "nativeColorWell" "Yoga.React.Native.MacOS.ColorWell (nativeColorWell)"

256colorWell = L.componentDoc "nativeColorWell" "Yoga.React.Native.MacOS.ColorWell (nativeColorWell)"

257+ """color /\ setColor <- useState' "#FF6600"

258+

216− """nativeColorWell

259+nativeColorWell

217− { color: "#ff0000"

260+ { color

218 , minimal: true

261 , minimal: true

219 , onChange: setColor

262 , onChange: setColor

220 }"""

263 }"""

docs/src/Docs/Pages/LayoutPage.purs+10−10

@@ -57,13 +57,16 @@ nativeSplitView

58tabView :: Nut

59tabView = L.componentDoc "nativeTabView" "Yoga.React.Native.MacOS.TabView (nativeTabView)"

60+ """selected /\ setSelected <- useState' "general"

61+

60− """nativeTabView

62+nativeTabView

61 { items:

63 { items:

62 [ { id: "general", label: "General" }

64 [ { id: "general", label: "General" }

63 , { id: "advanced", label: "Advanced" }

65 , { id: "advanced", label: "Advanced" }

66+ , { id: "about", label: "About" }

64 ]

67 ]

65− , selectedItem: "general"

68+ , selectedItem: selected

66− , onSelectTab: setTab

69+ , onSelectTab: setSelected

67 }"""

70 }"""

68 [ propsTable

71 [ propsTable

69 [ { name: "items", type_: "Array TabItem", description: "Tab items ({ id :: String, label :: String })" }

72 [ { name: "items", type_: "Array TabItem", description: "Tab items ({ id :: String, label :: String })" }

@@ -109,14 +112,11 @@ sidebarLayout

109toolbar :: Nut

112toolbar :: Nut

110toolbar = L.componentDoc "nativeToolbar" "Yoga.React.Native.MacOS.Toolbar (nativeToolbar)"

113toolbar = L.componentDoc "nativeToolbar" "Yoga.React.Native.MacOS.Toolbar (nativeToolbar)"

111 """nativeToolbar

114 """nativeToolbar

112− { items:

115+ { items: []

113− [ { id: "add", label: "Add", sfSymbol: "plus" }

114− , { id: "delete", label: "Delete", sfSymbol: "trash" }

115− ]

116− , selectedItem: "add"

116+ , selectedItem: ""

117 , toolbarStyle: T.unified

118− , windowTitle: "My App"

118+ , windowTitle: "PureScript React Native"

119− , onSelectItem: setItem

119+ , onSelectItem: \_ -> pure unit

120 }"""

121 [ propsTable

122 [ { name: "items", type_: "Array ToolbarItem", description: "Toolbar items ({ id, label, sfSymbol })" }

docs/src/Docs/Pages/Overlays.purs+32−13

@@ -35,12 +35,22 @@ alert = L.componentDoc "macosAlert" "Yoga.React.Native.MacOS.Alert (macosAlert)"

36sheet :: Nut

37sheet = L.componentDoc "nativeSheet" "Yoga.React.Native.MacOS.Sheet (nativeSheet)"

38− """-- FFINativeComponent: takes props then children

38+ """visible /\ setVisible <- useState' false

39+

40+nativeButton

41+ { title: "Show Sheet"

42+ , bezelStyle: T.push

43+ , onPress: setVisible true

44+ }

39nativeSheet

45nativeSheet

40− { visible: true

46+ { visible

41− , onDismiss: hideSheet

47+ , onDismiss: setVisible false

42 }

48 }

43− [ sheetContent ]"""

49+ [ nativeButton

50+ { title: "Dismiss"

51+ , onPress: setVisible false

52+ }

53+ ]"""

44 [ propsTable

54 [ propsTable

45 [ { name: "visible", type_: "Boolean", description: "Show/hide the sheet" }

55 [ { name: "visible", type_: "Boolean", description: "Show/hide the sheet" }

46 , { name: "onDismiss", type_: "Effect Unit", description: "Dismiss callback" }

56 , { name: "onDismiss", type_: "Effect Unit", description: "Dismiss callback" }

@@ -51,14 +61,19 @@ nativeSheet

52popover :: Nut

62popover :: Nut

53popover = L.componentDoc "nativePopover" "Yoga.React.Native.MacOS.Popover (nativePopover)"

63popover = L.componentDoc "nativePopover" "Yoga.React.Native.MacOS.Popover (nativePopover)"

54− """-- FFINativeComponent: takes props then children

64+ """visible /\ setVisible <- useState' false

65+

55nativePopover

66nativePopover

56− { visible: true

67+ { visible

57− , preferredEdge: T.maxY

68+ , preferredEdge: T.bottom

58 , behavior: T.transient

69 , behavior: T.transient

59− , onClose: hidePopover

70+ , onClose: setVisible false

60 }

71 }

61− [ popoverContent ]"""

72+ [ nativeButton

73+ { title: if visible then "Hide" else "Show Popover"

74+ , onPress: setVisible (not visible)

75+ }

76+ ]"""

62 [ propsTable

77 [ propsTable

63 [ { name: "visible", type_: "Boolean", description: "Show/hide" }

78 [ { name: "visible", type_: "Boolean", description: "Show/hide" }

64 , { name: "preferredEdge", type_: "PopoverEdge", description: "Preferred edge for popover placement" }

79 , { name: "preferredEdge", type_: "PopoverEdge", description: "Preferred edge for popover placement" }

@@ -71,15 +86,19 @@ nativePopover

72contextMenu :: Nut

87contextMenu :: Nut

73contextMenu = L.componentDoc "nativeContextMenu" "Yoga.React.Native.MacOS.ContextMenu (nativeContextMenu)"

88contextMenu = L.componentDoc "nativeContextMenu" "Yoga.React.Native.MacOS.ContextMenu (nativeContextMenu)"

74− """-- FFINativeComponent: takes props then children

89+ """result /\ setResult <- useState' ""

90+

75nativeContextMenu

91nativeContextMenu

76 { items:

92 { items:

93+ [ { id: "cut", title: "Cut", sfSymbol: "scissors" }

77− [ { id: "copy", title: "Copy", sfSymbol: "doc.on.doc" }

94+ , { id: "copy", title: "Copy", sfSymbol: "doc.on.doc" }

78 , { id: "paste", title: "Paste", sfSymbol: "doc.on.clipboard" }

95 , { id: "paste", title: "Paste", sfSymbol: "doc.on.clipboard" }

96+ , { id: "sep", title: "-", sfSymbol: "" }

97+ , { id: "delete", title: "Delete", sfSymbol: "trash" }

79 ]

98 ]

80− , onSelectItem: setSelected

99+ , onSelectItem: setResult

81 }

100 }

82− [ rightClickTarget ]"""

101+ [ text_ "Right-click me!" ]"""

83 [ propsTable

102 [ propsTable

84 [ { name: "items", type_: "Array ContextMenuItem", description: "Menu items ({ id, title, sfSymbol })" }

103 [ { name: "items", type_: "Array ContextMenuItem", description: "Menu items ({ id, title, sfSymbol })" }

85 , { name: "onSelectItem", type_: "String -> Effect Unit", description: "Item selection callback" }

104 , { name: "onSelectItem", type_: "String -> Effect Unit", description: "Item selection callback" }

docs/src/Docs/Pages/RichMedia.purs+27−14

@@ -19,21 +19,27 @@ page =

20mapView :: Nut

21mapView = L.componentDoc "nativeMapView" "Yoga.React.Native.MacOS.MapView (nativeMapView)"

22+ """mapType /\ setMapType <- useState' 0

23+let mt = case mapType of

24+ 1 -> T.satelliteMap

25+ 2 -> T.hybridMap

26+ _ -> T.standardMap

27+

22− """nativeMapView

28+nativeMapView

23 { latitude: 37.7749

29 { latitude: 37.7749

24 , longitude: -122.4194

30 , longitude: -122.4194

25 , latitudeDelta: 0.05

31 , latitudeDelta: 0.05

26 , longitudeDelta: 0.05

32 , longitudeDelta: 0.05

27− , mapType: T.standard

33+ , mapType: mt

28− , showsUserLocation: true

34+ , showsUserLocation: false

29 , annotations:

35 , annotations:

30− [ { latitude: 37.7749

31− , longitude: -122.4194

36+ [ { latitude: 37.7749, longitude: -122.4194

32− , title: "San Francisco"

37+ , title: "San Francisco", subtitle: "California"

38+ }

39+ , { latitude: 37.8199, longitude: -122.4783

33− , subtitle: "CA"

40+ , title: "Golden Gate Bridge", subtitle: ""

34 }

41 }

35 ]

42 ]

36− , onRegionChange: \region -> setLat region.latitude

37 }"""

43 }"""

38 [ propsTable

44 [ propsTable

39 [ { name: "latitude", type_: "Number", description: "Center latitude" }

45 [ { name: "latitude", type_: "Number", description: "Center latitude" }

@@ -51,9 +57,9 @@ mapView = L.componentDoc "nativeMapView" "Yoga.React.Native.MacOS.MapView (nativ

51pdfView :: Nut

57pdfView :: Nut

52pdfView = L.componentDoc "nativePDFView" "Yoga.React.Native.MacOS.PDFView (nativePDFView)"

58pdfView = L.componentDoc "nativePDFView" "Yoga.React.Native.MacOS.PDFView (nativePDFView)"

53 """nativePDFView

59 """nativePDFView

54− { source: "/path/to/document.pdf"

60+ { source: "https://example.com/document.pdf"

55 , autoScales: true

61 , autoScales: true

56− , displayMode: T.singlePage

62+ , displayMode: T.singlePageContinuous

57 , onPageChange: setPage

63 , onPageChange: setPage

58 }"""

64 }"""

59 [ propsTable

65 [ propsTable

@@ -66,10 +72,17 @@ pdfView = L.componentDoc "nativePDFView" "Yoga.React.Native.MacOS.PDFView (nativ

67webView :: Nut

73webView :: Nut

68webView = L.componentDoc "nativeWebView" "Yoga.React.Native.MacOS.WebView (nativeWebView)"

74webView = L.componentDoc "nativeWebView" "Yoga.React.Native.MacOS.WebView (nativeWebView)"

75+ """url /\ setUrl <- useState' "https://pursuit.purescript.org"

76+urlBar /\ setUrlBar <- useState' "https://pursuit.purescript.org"

77+

78+nativeTextField

79+ { text: urlBar

80+ , onChangeText: setUrlBar

81+ , onSubmit: setUrl

82+ }

69− """nativeWebView

83+nativeWebView

70− { url: "https://purescript.org"

84+ { url

71− , onNavigate: setUrl

72− , onFinishLoad: \url -> log ("Loaded: " <> url)

85+ , onFinishLoad: setUrlBar

73 }"""

86 }"""

74 [ propsTable

87 [ propsTable

75 [ { name: "url", type_: "String", description: "URL to load" }

88 [ { name: "url", type_: "String", description: "URL to load" }

docs/src/Docs/Pages/TextEditing.purs+9−9

@@ -15,12 +15,13 @@ page =

16textField :: Nut

17textField = L.componentDoc "nativeTextField" "Yoga.React.Native.MacOS.TextField (nativeTextField)"

18+ """txt /\ setTxt <- useState' ""

19+

18− """nativeTextField

20+nativeTextField

19− { text: "Hello"

20− , placeholder: "Enter text..."

21+ { placeholder: "Type something..."

21− , secure: false

22+ , search: true

23+ , text: txt

22− , onChangeText: setText

24+ , onChangeText: setTxt

23− , onSubmit: doSubmit

24 }"""

25 }"""

25 [ propsTable

26 [ propsTable

26 [ { name: "text", type_: "String", description: "Current text value" }

27 [ { name: "text", type_: "String", description: "Current text value" }

@@ -36,10 +37,9 @@ textField = L.componentDoc "nativeTextField" "Yoga.React.Native.MacOS.TextField

36textEditor :: Nut

37textEditor :: Nut

37textEditor = L.componentDoc "nativeTextEditor" "Yoga.React.Native.MacOS.TextEditor (nativeTextEditor)"

38textEditor = L.componentDoc "nativeTextEditor" "Yoga.React.Native.MacOS.TextEditor (nativeTextEditor)"

38 """nativeTextEditor

39 """nativeTextEditor

39− { text: "Rich text content..."

40+ { text: "Welcome to the PureScript-driven native text editor."

40 , richText: true

41 , richText: true

41− , showsRuler: false

42+ , showsRuler: true

42− , onChangeText: setText

43 }"""

44 [ propsTable

45 [ { name: "text", type_: "String", description: "Current text content" }