8862eee · rowtype-yoga/purescript-yoga-react-native

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

WIP: React Native bindings development

commit8862eeef92eab9505da727ecfd4caaf4ee5967b1 authorMark <mark.eibes@gmail.com> dateMon 16 Feb 2026, 23:20 (8 months ago) parentde95017

15 files changed+90−31

compare with main

unifiedsplit

example-macos/src/Demo/DataViews.purs+2−3

@@ -8,7 +8,6 @@ import React.Basic.Hooks (useState', (/\))

88import React.Basic.Hooks as React

99import Yoga.React (component)

1010import Yoga.React.Native (tw)

11−import Yoga.React.Native.MacOS.Events as E

1211import Yoga.React.Native.MacOS.OutlineView (OutlineItem(..), nativeOutlineView)

1312import Yoga.React.Native.MacOS.TableView (nativeTableView)

1413import Yoga.React.Native.Style as Style

@@ -35,8 +34,8 @@ tableViewDemo = component "TableViewDemo" \dp -> React.do

3534 ]

3635 , headerVisible: true

3736 , alternatingRows: true

38− , onSelectRow: E.onInt "rowIndex" \i -> setSelected ("Row " <> show i)

39− , onDoubleClickRow: E.onInt "rowIndex" \i -> setSelected ("Double-clicked row " <> show i)

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

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

4039 , style: Style.style { height: 180.0 } <> tw "rounded-lg overflow-hidden mb-2"

4140 }

4241 , if selected == "" then mempty

example-macos/src/Demo/InputControls.purs+7−7

@@ -17,7 +17,7 @@ import Prelude

1717

1818import Demo.Shared (DemoProps, card, desc, label, round, scrollWrap, sectionTitle)

1919import React.Basic (JSX)

20−import React.Basic.Events (handler, handler_, unsafeEventFn)

20+import React.Basic.Events (handler, unsafeEventFn)

2121import React.Basic.Hooks (useState', (/\))

2222import React.Basic.Hooks as React

2323import Yoga.React (component)

@@ -180,7 +180,7 @@ stepperDemo = component "StepperDemo" \dp -> React.do

180180 , minValue: 0.0

181181 , maxValue: 50.0

182182 , increment: 1.0

183− , onChange: E.onNumber "value" setValue

183+ , onChange: setValue

184184 , style: Style.style { width: 100.0, height: 24.0 }

185185 }

186186 ]

@@ -240,14 +240,14 @@ checkboxDemo = component "CheckboxDemo" \dp -> React.do

240240 { checked: a

241241 , title: "Enable notifications"

242242 , enabled: true

243− , onChange: E.onBool "checked" setA

243+ , onChange: setA

244244 , style: Style.style { height: 24.0 } <> tw "mb-1"

245245 }

246246 , nativeCheckbox

247247 { checked: b

248248 , title: "Dark mode"

249249 , enabled: true

250− , onChange: E.onBool "checked" setB

250+ , onChange: setB

251251 , style: Style.style { height: 24.0 }

252252 }

253253 ]

@@ -264,21 +264,21 @@ radioButtonDemo = component "RadioButtonDemo" \dp -> React.do

264264 { selected: choice == "option1"

265265 , title: "Small"

266266 , enabled: true

267− , onChange: handler_ (setChoice "option1")

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

268268 , style: Style.style { height: 24.0 } <> tw "mb-1"

269269 }

270270 , nativeRadioButton

271271 { selected: choice == "option2"

272272 , title: "Medium"

273273 , enabled: true

274− , onChange: handler_ (setChoice "option2")

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

275275 , style: Style.style { height: 24.0 } <> tw "mb-1"

276276 }

277277 , nativeRadioButton

278278 { selected: choice == "option3"

279279 , title: "Large"

280280 , enabled: true

281− , onChange: handler_ (setChoice "option3")

281+ , onChange: \_ -> setChoice "option3"

282282 , style: Style.style { height: 24.0 }

283283 }

284284 , label dp.dimFg ("Selected: " <> choice)

example-macos/src/Demo/MapsDocs.purs+1−2

@@ -8,7 +8,6 @@ import React.Basic.Hooks (useState', (/\))

88import React.Basic.Hooks as React

99import Yoga.React (component)

1010import Yoga.React.Native (text, tw, view)

11−import Yoga.React.Native.MacOS.Events as E

1211import Yoga.React.Native.MacOS.MapView (nativeMapView)

1312import Yoga.React.Native.MacOS.PDFView (nativePDFView)

1413import Yoga.React.Native.MacOS.Segmented (nativeSegmented)

@@ -30,7 +29,7 @@ mapViewDemo = component "MapViewDemo" \dp -> React.do

3029 , nativeSegmented

3130 { labels: [ "Standard", "Satellite", "Hybrid" ]

3231 , selectedIndex: mapType

33− , onChange: E.onInt "selectedIndex" setMapType

32+ , onChange: setMapType

3433 , style: Style.style { width: 240.0, height: 24.0 }

3534 }

3635 ]

src/Yoga/React/Native/MacOS/Checkbox.js+9−1

@@ -1,2 +1,10 @@

1+import React from "react";

12import { requireNativeComponent } from "react-native";

2−export const checkboxImpl = requireNativeComponent("MacOSCheckbox");

3+const NativeCheckbox = requireNativeComponent("MacOSCheckbox");

4+export const checkboxImpl = React.forwardRef((props, ref) => {

5+ const nativeProps = { ...props };

6+ if (typeof props.onChange === "function") {

7+ nativeProps.onChange = (e) => props.onChange(!!e.nativeEvent.checked)();

8+ }

9+ return React.createElement(NativeCheckbox, { ...nativeProps, ref });

10+});

src/Yoga/React/Native/MacOS/Checkbox.purs+3−2

@@ -3,8 +3,9 @@ module Yoga.React.Native.MacOS.Checkbox

33 , NativeCheckboxAttributes

44 ) where

6+import Prelude

7+import Effect (Effect)

68import React.Basic (ReactComponent)

7−import React.Basic.Events (EventHandler)

89import Yoga.React.Native.Attributes (BaseAttributes)

910import Yoga.React.Native.Internal (FFINativeComponent_, createNativeElement_)

1011

@@ -17,5 +18,5 @@ type NativeCheckboxAttributes = BaseAttributes

1718 ( checked :: Boolean

1819 , title :: String

1920 , enabled :: Boolean

20− , onChange :: EventHandler

21+ , onChange :: Boolean -> Effect Unit

2122 )

src/Yoga/React/Native/MacOS/PDFView.js+10−1

@@ -1,2 +1,11 @@

1+import React from "react";

12import { requireNativeComponent } from "react-native";

2−export const pdfViewImpl = requireNativeComponent("MacOSPDFView");

3+const NativePDFView = requireNativeComponent("MacOSPDFView");

4+export const pdfViewImpl = React.forwardRef((props, ref) => {

5+ const nativeProps = { ...props };

6+ if (typeof props.onPageChange === "function") {

7+ nativeProps.onPageChange = (e) =>

8+ props.onPageChange(e.nativeEvent.pageIndex | 0)();

9+ }

10+ return React.createElement(NativePDFView, { ...nativeProps, ref });

11+});

src/Yoga/React/Native/MacOS/PDFView.purs+3−2

@@ -3,8 +3,9 @@ module Yoga.React.Native.MacOS.PDFView

33 , NativePDFViewAttributes

44 ) where

6+import Prelude

7+import Effect (Effect)

68import React.Basic (ReactComponent)

7−import React.Basic.Events (EventHandler)

89import Yoga.React.Native.Attributes (BaseAttributes)

910import Yoga.React.Native.Internal (FFINativeComponent_, createNativeElement_)

1011import Yoga.React.Native.MacOS.Types (PDFDisplayMode)

@@ -18,5 +19,5 @@ type NativePDFViewAttributes = BaseAttributes

1819 ( source :: String

1920 , autoScales :: Boolean

2021 , displayMode :: PDFDisplayMode

21− , onPageChange :: EventHandler

22+ , onPageChange :: Int -> Effect Unit

2223 )

src/Yoga/React/Native/MacOS/RadioButton.js+9−1

@@ -1,2 +1,10 @@

1+import React from "react";

12import { requireNativeComponent } from "react-native";

2−export const radioButtonImpl = requireNativeComponent("MacOSRadioButton");

3+const NativeRadioButton = requireNativeComponent("MacOSRadioButton");

4+export const radioButtonImpl = React.forwardRef((props, ref) => {

5+ const nativeProps = { ...props };

6+ if (typeof props.onChange === "function") {

7+ nativeProps.onChange = (e) => props.onChange(!!e.nativeEvent.selected)();

8+ }

9+ return React.createElement(NativeRadioButton, { ...nativeProps, ref });

10+});

src/Yoga/React/Native/MacOS/RadioButton.purs+3−2

@@ -3,8 +3,9 @@ module Yoga.React.Native.MacOS.RadioButton

33 , NativeRadioButtonAttributes

44 ) where

6+import Prelude

7+import Effect (Effect)

68import React.Basic (ReactComponent)

7−import React.Basic.Events (EventHandler)

89import Yoga.React.Native.Attributes (BaseAttributes)

910import Yoga.React.Native.Internal (FFINativeComponent_, createNativeElement_)

1011

@@ -17,5 +18,5 @@ type NativeRadioButtonAttributes = BaseAttributes

1718 ( selected :: Boolean

1819 , title :: String

1920 , enabled :: Boolean

20− , onChange :: EventHandler

21+ , onChange :: Boolean -> Effect Unit

2122 )

src/Yoga/React/Native/MacOS/Segmented.js+10−1

@@ -1,2 +1,11 @@

1+import React from "react";

12import { requireNativeComponent } from "react-native";

2−export const segmentedImpl = requireNativeComponent("NativeSegmented");

3+const NativeSegmented = requireNativeComponent("NativeSegmented");

4+export const segmentedImpl = React.forwardRef((props, ref) => {

5+ const nativeProps = { ...props };

6+ if (typeof props.onChange === "function") {

7+ nativeProps.onChange = (e) =>

8+ props.onChange(e.nativeEvent.selectedIndex | 0)();

9+ }

10+ return React.createElement(NativeSegmented, { ...nativeProps, ref });

11+});

src/Yoga/React/Native/MacOS/Segmented.purs+3−2

@@ -1,7 +1,8 @@

11module Yoga.React.Native.MacOS.Segmented (nativeSegmented, NativeSegmentedAttributes) where

3+import Prelude

4+import Effect (Effect)

35import React.Basic (ReactComponent)

4−import React.Basic.Events (EventHandler)

56import Yoga.React.Native.Attributes (BaseAttributes)

67import Yoga.React.Native.Internal (FFINativeComponent_, createNativeElement_)

@@ -14,5 +15,5 @@ type NativeSegmentedAttributes = BaseAttributes

1415 ( labels :: Array String

1516 , sfSymbols :: Array String

1617 , selectedIndex :: Int

17− , onChange :: EventHandler

18+ , onChange :: Int -> Effect Unit

1819 )

src/Yoga/React/Native/MacOS/Stepper.js+9−1

@@ -1,2 +1,10 @@

1+import React from "react";

12import { requireNativeComponent } from "react-native";

2−export const stepperImpl = requireNativeComponent("MacOSStepper");

3+const NativeStepper = requireNativeComponent("MacOSStepper");

4+export const stepperImpl = React.forwardRef((props, ref) => {

5+ const nativeProps = { ...props };

6+ if (typeof props.onChange === "function") {

7+ nativeProps.onChange = (e) => props.onChange(e.nativeEvent.value ?? 0)();

8+ }

9+ return React.createElement(NativeStepper, { ...nativeProps, ref });

10+});

src/Yoga/React/Native/MacOS/Stepper.purs+3−2

@@ -3,8 +3,9 @@ module Yoga.React.Native.MacOS.Stepper

33 , NativeStepperAttributes

44 ) where

6+import Prelude

7+import Effect (Effect)

68import React.Basic (ReactComponent)

7−import React.Basic.Events (EventHandler)

89import Yoga.React.Native.Attributes (BaseAttributes)

910import Yoga.React.Native.Internal (FFINativeComponent_, createNativeElement_)

1011

@@ -18,5 +19,5 @@ type NativeStepperAttributes = BaseAttributes

1819 , minValue :: Number

1920 , maxValue :: Number

2021 , increment :: Number

21− , onChange :: EventHandler

22+ , onChange :: Number -> Effect Unit

2223 )

src/Yoga/React/Native/MacOS/TableView.js+14−1

@@ -1,2 +1,15 @@

1+import React from "react";

12import { requireNativeComponent } from "react-native";

2−export const tableViewImpl = requireNativeComponent("MacOSTableView");

3+const NativeTableView = requireNativeComponent("MacOSTableView");

4+export const tableViewImpl = React.forwardRef((props, ref) => {

5+ const nativeProps = { ...props };

6+ if (typeof props.onSelectRow === "function") {

7+ nativeProps.onSelectRow = (e) =>

8+ props.onSelectRow(e.nativeEvent.rowIndex | 0)();

9+ }

10+ if (typeof props.onDoubleClickRow === "function") {

11+ nativeProps.onDoubleClickRow = (e) =>

12+ props.onDoubleClickRow(e.nativeEvent.rowIndex | 0)();

13+ }

14+ return React.createElement(NativeTableView, { ...nativeProps, ref });

15+});

src/Yoga/React/Native/MacOS/TableView.purs+4−3

@@ -4,8 +4,9 @@ module Yoga.React.Native.MacOS.TableView

44 , TableColumn

55 ) where

7+import Prelude

8+import Effect (Effect)

79import React.Basic (ReactComponent)

8−import React.Basic.Events (EventHandler)

910import Yoga.React.Native.Attributes (BaseAttributes)

1011import Yoga.React.Native.Internal (FFINativeComponent_, createNativeElement_)

1112

@@ -25,6 +26,6 @@ type NativeTableViewAttributes = BaseAttributes

2526 , rows :: Array (Array String)

2627 , headerVisible :: Boolean

2728 , alternatingRows :: Boolean

28− , onSelectRow :: EventHandler

29− , onDoubleClickRow :: EventHandler

29+ , onSelectRow :: Int -> Effect Unit

30+ , onDoubleClickRow :: Int -> Effect Unit

3031 )