From a980163dea9d0fadacb73e23e42ea2133f2f84fe Mon Sep 17 00:00:00 2001
From: sigma-andex <77549848+sigma-andex@users.noreply.github.com>
Date: Tue, 20 Dec 2022 10:04:53 +0000
Subject: [PATCH 1/2] Add el helper
---
src/React/Basic/DOM/Simplified/ToJSX.purs | 44 +++++++++++++++++++++--
1 file changed, 42 insertions(+), 2 deletions(-)
diff --git a/src/React/Basic/DOM/Simplified/ToJSX.purs b/src/React/Basic/DOM/Simplified/ToJSX.purs
index 37516f6..7f7ab96 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 NextUI.container {} $
+-- | el NextUI.row {} $
+-- | el NextUI.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
From a7532f992c8e36ea4b092a89a3efd6080edb5bed Mon Sep 17 00:00:00 2001
From: sigma-andex <77549848+sigma-andex@users.noreply.github.com>
Date: Tue, 20 Dec 2022 10:07:39 +0000
Subject: [PATCH 2/2] Fix comment
---
src/React/Basic/DOM/Simplified/ToJSX.purs | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/React/Basic/DOM/Simplified/ToJSX.purs b/src/React/Basic/DOM/Simplified/ToJSX.purs
index 7f7ab96..dd9e806 100644
--- a/src/React/Basic/DOM/Simplified/ToJSX.purs
+++ b/src/React/Basic/DOM/Simplified/ToJSX.purs
@@ -32,9 +32,9 @@ import Unsafe.Coerce (unsafeCoerce)
-- | ...
-- |
-- | -- Build your jsx
--- | el NextUI.container {} $
--- | el NextUI.row {} $
--- | el NextUI.col {} $
+-- | el container {} $
+-- | el row {} $
+-- | el col {} $
-- | R.div {} "Some text"
-- | ```
el
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