diff --git a/src/React/Basic/DOM/Events.js b/src/React/Basic/DOM/Events.js
new file mode 100644
index 0000000..8e46b86
--- /dev/null
+++ b/src/React/Basic/DOM/Events.js
@@ -0,0 +1,5 @@
+"use strict";
+
+export const propagateThis = (f) => (t) => () => {
+ return f.call(t);
+}
diff --git a/src/React/Basic/DOM/Events.purs b/src/React/Basic/DOM/Events.purs
index 0207c16..f7241d1 100644
--- a/src/React/Basic/DOM/Events.purs
+++ b/src/React/Basic/DOM/Events.purs
@@ -102,7 +102,7 @@ nativeEvent = unsafeEventFn \e -> (unsafeCoerce e).nativeEvent
preventDefault :: EventFn SyntheticEvent SyntheticEvent
preventDefault = unsafeEventFn \e -> unsafePerformEffect do
- _ <- (unsafeCoerce e).preventDefault
+ _ <- propagateThis (unsafeCoerce e).preventDefault e
pure e
isDefaultPrevented :: EventFn SyntheticEvent Boolean
@@ -111,7 +111,7 @@ isDefaultPrevented = unsafeEventFn \e -> unsafePerformEffect do
stopPropagation :: EventFn SyntheticEvent SyntheticEvent
stopPropagation = unsafeEventFn \e -> unsafePerformEffect do
- _ <- (unsafeCoerce e).stopPropagation
+ _ <- propagateThis (unsafeCoerce e).stopPropagation e
pure e
isPropagationStopped :: EventFn SyntheticEvent Boolean
@@ -207,3 +207,5 @@ clipboardData = unsafeEventFn \e -> toMaybe (unsafeCoerce e).clipboardData
-- \ Composition Events
compositionData :: EventFn SyntheticEvent (Maybe String)
compositionData = unsafeEventFn \e -> toMaybe (unsafeCoerce e).data
+
+foreign import propagateThis :: forall f t a. f -> t -> Effect a
diff --git a/src/React/Basic/DOM/Simplified/ToJSX.purs b/src/React/Basic/DOM/Simplified/ToJSX.purs
index 37516f6..dd9e806 100644
--- a/src/React/Basic/DOM/Simplified/ToJSX.purs
+++ b/src/React/Basic/DOM/Simplified/ToJSX.purs
@@ -1,15 +1,55 @@
module React.Basic.DOM.Simplified.ToJSX
( class ToJSX
+ , el
, toJSX
- ) where
+ )
+ where
import Prelude
import Data.Array (singleton)
import Data.Maybe (Maybe(..))
-import React.Basic (JSX)
+import Prim.Row (class Lacks)
+import React.Basic (JSX, ReactComponent)
+import React.Basic as React
+import Record as Record
+import Type.Proxy (Proxy(..))
import Unsafe.Coerce (unsafeCoerce)
+-- | Helper function to easily use any `ReactComponent` and compose it with the simplified html tags.
+-- | E.g. using NextUI:
+-- | ```purescript
+-- | -- Import the simplified elements
+-- | import React.Basic.DOM.Simplified.Generated as R
+-- |
+-- | ...
+-- |
+-- | -- Import your react components
+-- | foreign import container :: forall props. ReactComponent { | props }
+-- | foreign import row :: forall props. ReactComponent { | props }
+-- | foreign import col :: forall props. ReactComponent { | props }
+-- |
+-- | ...
+-- |
+-- | -- Build your jsx
+-- | el container {} $
+-- | el row {} $
+-- | el col {} $
+-- | R.div {} "Some text"
+-- | ```
+el
+ ∷ ∀ props jsx
+ . Lacks "children" props
+ => ToJSX jsx
+ ⇒ ReactComponent { children ∷ Array JSX | props }
+ → Record props
+ → jsx
+ → JSX
+el cmp props children =
+ (React.element)
+ cmp
+ (Record.insert (Proxy ∷ Proxy "children") (toJSX children) props)
+
class ToJSX jsx where
toJSX :: jsx -> Array JSX
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy