git.iko.soy/rowtype-yoga/purescript-yoga-react-native
on main help sign in
WIP: React Native bindings development
commit1ae2c2186fb662359ab994e2166ec6739894e94e authorMark <mark.eibes@gmail.com> dateMon 16 Feb 2026, 23:37 (7 months ago) parent36cb947
2 files changed+28−19
compare with main
unifiedsplit
docs/src/Docs/Pages/FilesAndDragDrop.purs+9−5 example-macos/src/Demo/DragDropFiles.purs+19−14
docs/src/Docs/Pages/FilesAndDragDrop.purs+9−5
@@ -44,13 +44,17 @@ nativeFilePicker
4444
4545dropZone :: Nut
4646dropZone = L.componentDoc "nativeDropZone" "Yoga.React.Native.MacOS.DropZone (nativeDropZone)"
47− """-- FFINativeComponent: takes props then children
47+ """dropped /\ setDropped <- useState' ""
48+dragging /\ setDragging <- useState' false
49+
4850nativeDropZone
49− { onFileDrop: \dropped -> setFiles dropped.files
50− , onFilesDragEnter: setDragActive
51− , onFilesDragExit: clearDragActive
51+ { onFileDrop: \d -> do
52+ setDropped (joinWith ", " (map _.name d.files))
53+ setDragging false
54+ , onFilesDragEnter: setDragging true
55+ , onFilesDragExit: setDragging false
5256 }
53− [ dropTargetContent ]"""
57+ [ text_ (if dragging then "Release to drop!" else "Drop files here") ]"""
5458 [ propsTable
5559 [ { name: "onFileDrop", type_: "DroppedData -> Effect Unit", description: "Drop callback ({ files, strings })" }
5660 , { name: "onFilesDragEnter", type_: "Effect Unit", description: "Drag enter callback" }
example-macos/src/Demo/DragDropFiles.purs+19−14
@@ -3,13 +3,13 @@ module Demo.DragDropFiles (dropZoneDemo, filePickerDemo) where
33import Prelude
44
55import Data.String (joinWith)
6−import Demo.Shared (DemoProps, card, desc, getFieldJSON, label, scrollWrap, sectionTitle)
6+import Demo.Shared (DemoProps, card, desc, label, scrollWrap, sectionTitle)
77import React.Basic (JSX)
8−import React.Basic.Events (handler, handler_, unsafeEventFn)
98import React.Basic.Hooks (useState', (/\))
109import React.Basic.Hooks as React
1110import Yoga.React (component)
12−import Yoga.React.Native (nativeEvent, text, tw, view)
11+import Yoga.React.Native (text, tw, view)
12+import Yoga.React.Native.MacOS.DropZone (nativeDropZone)
1313import Yoga.React.Native.MacOS.FilePicker (nativeFilePicker)
1414import Yoga.React.Native.MacOS.Types as T
1515import Yoga.React.Native.Style as Style
@@ -24,18 +24,23 @@ dropZoneDemo = component "DropZoneDemo" \dp -> React.do
2424 scrollWrap dp
2525 [ sectionTitle dp.fg "Drop Zone"
2626 , desc dp "Drag files from Finder into the area below"
27− , view
28− { draggedTypes: [ "NSFilenamesPboardType" ]
29− , onDrop: handler
30− (nativeEvent >>> unsafeEventFn \e -> getFieldJSON "dataTransfer" e)
31− \r -> do
32− setDropped r
33− setStatus "Drop files here"
34− setDragging false
35− , onDragEnter: handler_ do
27+ , nativeDropZone
28+ { onFileDrop: \d -> do
29+ let fileNames = joinWith ", " (map _.name d.files)
30+ let stringItems = joinWith ", " d.strings
31+ let
32+ info = case fileNames, stringItems of
33+ "", "" -> "Empty drop"
34+ fs, "" -> "Files: " <> fs
35+ "", ss -> "Strings: " <> ss
36+ fs, ss -> "Files: " <> fs <> " | Strings: " <> ss
37+ setDropped info
38+ setStatus "Drop files here"
39+ setDragging false
40+ , onFilesDragEnter: do
3641 setStatus "Release to drop!"
3742 setDragging true
38− , onDragLeave: handler_ do
43+ , onFilesDragExit: do
3944 setStatus "Drop files here"
4045 setDragging false
4146 , style: tw "rounded-lg items-center justify-center mb-2"
@@ -49,7 +54,7 @@ dropZoneDemo = component "DropZoneDemo" \dp -> React.do
4954 [ text { style: tw "text-sm" <> Style.style { color: dp.fg } } status
5055 , if dropped == "" then mempty
5156 else text { style: tw "text-xs mt-2 px-4" <> Style.style { color: dp.dimFg } }
52− ("Dropped: " <> dropped)
57+ dropped
5358 ]
5459 ]
5560