@@ -27,10 +27,13 @@ page =
2727
2828button :: Nut
2929button = L.componentDoc "nativeButton" "Yoga.React.Native.MacOS.Button (nativeButton)"
30− """nativeButton
31− { title: "Click me"
30+ """status /\ setStatus <- useState' "Ready"
31+
32+nativeButton
33+ { title: "Say Hello"
3234 , bezelStyle: T.push
33− , onPress: doSomething
35+ , primary: true
36+ , onPress: setStatus "Hello from PureScript!"
3437 }"""
3538 [ propsTable
3639 [ { name: "title", type_: "String", description: "Button label text (mutually exclusive with sfSymbol)" }
@@ -45,23 +48,28 @@ button = L.componentDoc "nativeButton" "Yoga.React.Native.MacOS.Button (nativeBu
4548
4649switch :: Nut
4750switch = L.componentDoc "nativeSwitch" "Yoga.React.Native.MacOS.Switch (nativeSwitch)"
48− """nativeSwitch
49− { on: true
50− , onChange: E.onBool "on" setOn
51+ """on /\ setOn <- useState' false
52+
53+nativeSwitch
54+ { on
55+ , onChange: setOn
5156 }"""
5257 [ propsTable
5358 [ { name: "on", type_: "Boolean", description: "Current on/off state" }
54− , { name: "onChange", type_: "EventHandler", description: "Toggle callback" }
59+ , { name: "onChange", type_: "Boolean -> Effect Unit", description: "Toggle callback" }
5560 ]
5661 ]
5762
5863slider :: Nut
5964slider = L.componentDoc "nativeSlider" "Yoga.React.Native.MacOS.Slider (nativeSlider)"
60− """nativeSlider
61− { value: 50.0
65+ """value /\ setValue <- useState' 50.0
66+
67+nativeSlider
68+ { value
6269 , minValue: 0.0
6370 , maxValue: 100.0
64− , onChange: E.onNumber "value" setValue
71+ , numberOfTickMarks: 11
72+ , onChange: setValue
6573 }"""
6674 [ propsTable
6775 [ { name: "value", type_: "Number", description: "Current value" }
@@ -69,159 +77,194 @@ slider = L.componentDoc "nativeSlider" "Yoga.React.Native.MacOS.Slider (nativeSl
6977 , { name: "maxValue", type_: "Number", description: "Range maximum" }
7078 , { name: "numberOfTickMarks", type_: "Int", description: "Number of tick marks" }
7179 , { name: "allowsTickMarkValuesOnly", type_: "Boolean", description: "Snap to tick marks only" }
72− , { name: "onChange", type_: "EventHandler", description: "Value change callback" }
80+ , { name: "onChange", type_: "Number -> Effect Unit", description: "Value change callback" }
7381 ]
7482 ]
7583
7684stepper :: Nut
7785stepper = L.componentDoc "nativeStepper" "Yoga.React.Native.MacOS.Stepper (nativeStepper)"
78− """nativeStepper
79− { value: 1.0
86+ """value /\ setValue <- useState' 5.0
87+
88+nativeStepper
89+ { value
8090 , minValue: 0.0
81− , maxValue: 10.0
91+ , maxValue: 50.0
8292 , increment: 1.0
83− , onChange: E.onNumber "value" setValue
93+ , onChange: setValue
8494 }"""
8595 [ propsTable
8696 [ { name: "value", type_: "Number", description: "Current value" }
8797 , { name: "minValue", type_: "Number", description: "Range minimum" }
8898 , { name: "maxValue", type_: "Number", description: "Range maximum" }
8999 , { name: "increment", type_: "Number", description: "Step increment" }
90− , { name: "onChange", type_: "EventHandler", description: "Value change callback" }
100+ , { name: "onChange", type_: "Number -> Effect Unit", description: "Value change callback" }
91101 ]
92102 ]
93103
94104checkbox :: Nut
95105checkbox = L.componentDoc "nativeCheckbox" "Yoga.React.Native.MacOS.Checkbox (nativeCheckbox)"
96− """nativeCheckbox
97− { title: "Enable notifications"
98− , checked: true
99− , onChange: E.onBool "checked" setChecked
106+ """a /\ setA <- useState' true
107+
108+nativeCheckbox
109+ { checked: a
110+ , title: "Enable notifications"
111+ , enabled: true
112+ , onChange: setA
100113 }"""
101114 [ propsTable
102115 [ { name: "title", type_: "String", description: "Label text" }
103116 , { name: "checked", type_: "Boolean", description: "Checked state" }
104117 , { name: "enabled", type_: "Boolean", description: "Enable/disable" }
105− , { name: "onChange", type_: "EventHandler", description: "Toggle callback" }
118+ , { name: "onChange", type_: "Boolean -> Effect Unit", description: "Toggle callback" }
106119 ]
107120 ]
108121
109122radioButton :: Nut
110123radioButton = L.componentDoc "nativeRadioButton" "Yoga.React.Native.MacOS.RadioButton (nativeRadioButton)"
111− """nativeRadioButton
112− { title: "Option A"
113− , selected: true
114− , onChange: E.onBool "selected" setSelected
124+ """choice /\ setChoice <- useState' "option1"
125+
126+nativeRadioButton
127+ { selected: choice == "option1"
128+ , title: "Small"
129+ , enabled: true
130+ , onChange: \_ -> setChoice "option1"
131+ }
132+nativeRadioButton
133+ { selected: choice == "option2"
134+ , title: "Medium"
135+ , enabled: true
136+ , onChange: \_ -> setChoice "option2"
115137 }"""
116138 [ propsTable
117139 [ { name: "title", type_: "String", description: "Label text" }
118140 , { name: "selected", type_: "Boolean", description: "Selection state" }
119141 , { name: "enabled", type_: "Boolean", description: "Enable/disable" }
120− , { name: "onChange", type_: "EventHandler", description: "Selection callback" }
142+ , { name: "onChange", type_: "Boolean -> Effect Unit", description: "Selection callback" }
121143 ]
122144 ]
123145
124146segmented :: Nut
125147segmented = L.componentDoc "nativeSegmented" "Yoga.React.Native.MacOS.Segmented (nativeSegmented)"
126− """nativeSegmented
127− { labels: ["One", "Two", "Three"]
128− , sfSymbols: ["1.circle", "2.circle", "3.circle"]
129− , selectedIndex: 0
130− , onChange: E.onInt "selectedIndex" setIndex
148+ """mapType /\ setMapType <- useState' 0
149+
150+nativeSegmented
151+ { labels: [ "Standard", "Satellite", "Hybrid" ]
152+ , selectedIndex: mapType
153+ , onChange: setMapType
131154 }"""
132155 [ propsTable
133156 [ { name: "labels", type_: "Array String", description: "Segment labels" }
134157 , { name: "sfSymbols", type_: "Array String", description: "SF Symbol icons per segment" }
135158 , { name: "selectedIndex", type_: "Int", description: "Currently selected index" }
136− , { name: "onChange", type_: "EventHandler", description: "Selection callback" }
159+ , { name: "onChange", type_: "Int -> Effect Unit", description: "Selection callback" }
137160 ]
138161 ]
139162
140163popUp :: Nut
141164popUp = L.componentDoc "nativePopUp" "Yoga.React.Native.MacOS.PopUp (nativePopUp)"
142− """nativePopUp
143− { items: ["Small", "Medium", "Large"]
144− , selectedIndex: 1
145− , onChange: E.onInt "selectedIndex" setIndex
165+ """idx /\ setIdx <- useState' 0
166+title /\ setTitle <- useState' "Small"
167+let items = [ "Small", "Medium", "Large", "Extra Large" ]
168+
169+nativePopUp
170+ { items
171+ , selectedIndex: idx
172+ , onChange: \i -> do
173+ setIdx i
174+ setTitle (fromMaybe "" (items !! i))
146175 }"""
147176 [ propsTable
148177 [ { name: "items", type_: "Array String", description: "Menu items" }
149178 , { name: "selectedIndex", type_: "Int", description: "Selected item index" }
150− , { name: "onChange", type_: "EventHandler", description: "Selection callback" }
179+ , { name: "onChange", type_: "Int -> Effect Unit", description: "Selection callback" }
151180 ]
152181 ]
153182
154183comboBox :: Nut
155184comboBox = L.componentDoc "nativeComboBox" "Yoga.React.Native.MacOS.ComboBox (nativeComboBox)"
156− """nativeComboBox
157− { items: ["Apple", "Banana", "Cherry"]
158− , text: "Apple"
159− , placeholder: "Choose a fruit..."
160− , onChangeText: E.onString "text" setText
161− , onSelectItem: E.onString "text" setText
185+ """txt /\ setTxt <- useState' ""
186+result /\ setResult <- useState' ""
187+
188+nativeComboBox
189+ { items: [ "Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape" ]
190+ , text: txt
191+ , placeholder: "Type a fruit..."
192+ , onChangeText: setTxt
193+ , onSelectItem: \t -> do
194+ setTxt t
195+ setResult ("Selected: " <> t)
162196 }"""
163197 [ propsTable
164198 [ { name: "items", type_: "Array String", description: "Autocomplete suggestions" }
165199 , { name: "text", type_: "String", description: "Current text value" }
166200 , { name: "placeholder", type_: "String", description: "Placeholder text" }
167− , { name: "onChangeText", type_: "EventHandler", description: "Text change callback" }
168− , { name: "onSelectItem", type_: "EventHandler", description: "Item selection callback" }
201+ , { name: "onChangeText", type_: "String -> Effect Unit", description: "Text change callback" }
202+ , { name: "onSelectItem", type_: "String -> Effect Unit", description: "Item selection callback" }
169203 ]
170204 ]
171205
172206searchField :: Nut
173207searchField = L.componentDoc "nativeSearchField" "Yoga.React.Native.MacOS.SearchField (nativeSearchField)"
174− """nativeSearchField
175− { placeholder: "Search..."
176− , text: ""
177− , onChangeText: E.onString "text" setText
178− , onSearch: E.onString "text" \q -> search q
208+ """query /\ setQuery <- useState' ""
209+result /\ setResult <- useState' ""
210+
211+nativeSearchField
212+ { text: query
213+ , placeholder: "Search..."
214+ , onChangeText: setQuery
215+ , onSearch: \t -> setResult ("Searched: " <> t)
179216 }"""
180217 [ propsTable
181218 [ { name: "text", type_: "String", description: "Current search text" }
182219 , { name: "placeholder", type_: "String", description: "Placeholder text" }
183− , { name: "onChangeText", type_: "EventHandler", description: "Text change callback" }
184− , { name: "onSearch", type_: "EventHandler", description: "Search submit callback" }
220+ , { name: "onChangeText", type_: "String -> Effect Unit", description: "Text change callback" }
221+ , { name: "onSearch", type_: "String -> Effect Unit", description: "Search submit callback" }
185222 ]
186223 ]
187224
188225tokenField :: Nut
189226tokenField = L.componentDoc "nativeTokenField" "Yoga.React.Native.MacOS.TokenField (nativeTokenField)"
190− """nativeTokenField
191− { tokens: ["tag1", "tag2"]
227+ """tokens /\ setTokens <- useState' [ "PureScript", "React", "macOS" ]
228+
229+nativeTokenField
230+ { tokens
192231 , placeholder: "Add tags..."
193− , onChangeTokens: E.onStrings "tokens" setTokens
232+ , onChangeTokens: setTokens
194233 }"""
195234 [ propsTable
196235 [ { name: "tokens", type_: "Array String", description: "Current tokens" }
197236 , { name: "placeholder", type_: "String", description: "Placeholder text" }
198− , { name: "onChangeTokens", type_: "EventHandler", description: "Tokens change callback" }
237+ , { name: "onChangeTokens", type_: "Array String -> Effect Unit", description: "Tokens change callback" }
199238 ]
200239 ]
201240
202241datePicker :: Nut
203242datePicker = L.componentDoc "nativeDatePicker" "Yoga.React.Native.MacOS.DatePicker (nativeDatePicker)"
204− """nativeDatePicker
205− { graphical: true
206− , onChange: E.onString "date" setDate
243+ """dateText /\ setDateText <- useState' ""
244+
245+nativeDatePicker
246+ { graphical: false
247+ , onChange: setDateText
207248 }"""
208249 [ propsTable
209250 [ { name: "graphical", type_: "Boolean", description: "Show graphical calendar picker" }
210− , { name: "onChange", type_: "EventHandler", description: "Date change callback" }
251+ , { name: "onChange", type_: "String -> Effect Unit", description: "Date change callback" }
211252 ]
212253 ]
213254
214255colorWell :: Nut
215256colorWell = L.componentDoc "nativeColorWell" "Yoga.React.Native.MacOS.ColorWell (nativeColorWell)"
216− """nativeColorWell
217− { color: "#ff0000"
257+ """color /\ setColor <- useState' "#FF6600"
258+
259+nativeColorWell
260+ { color
218261 , minimal: true
219− , onChange: E.onString "color" setColor
262+ , onChange: setColor
220263 }"""
221264 [ propsTable
222265 [ { name: "color", type_: "String", description: "Current color hex value" }
223266 , { name: "minimal", type_: "Boolean", description: "Minimal inline style" }
224− , { name: "onChange", type_: "EventHandler", description: "Color change callback" }
267+ , { name: "onChange", type_: "String -> Effect Unit", description: "Color change callback" }
225268 ]
226269 ]
227270