Skip to content

Commit 848e222

Browse files
committed
Move css prop into its own arg
1 parent 8693ff1 commit 848e222

File tree

3 files changed

+30
-37
lines changed

3 files changed

+30
-37
lines changed

bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"purescript-indexed-monad": "^1.1.0",
2020
"purescript-unsafe-reference": "^3.0.1",
2121
"purescript-aff": "^5.1.1",
22-
"purescript-typelevel-prelude": "^5.0.0"
22+
"purescript-typelevel-prelude": "^5.0.0",
23+
"purescript-colors": "^5.0.0"
2324
},
2425
"devDependencies": {
2526
"purescript-psci-support": "^4.0.0",

examples/basic/src/Basic.purs

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Effect (Effect)
55
import React.Basic.DOM as R
66
import React.Basic.Emotion as E
77
import React.Basic.Hooks (JSX, ReactComponent, component, element, fragment)
8-
import Record (merge)
98

109
data Size
1110
= S
@@ -62,15 +61,16 @@ mkSlat = do
6261
box <- mkBox
6362
component "Slat" \props ->
6463
pure
65-
$ E.element box
66-
{ css:
67-
E.merge
64+
$ E.element
65+
( E.merge
6866
[ border props
6967
, text L
7068
, E.css { flexDirection: E.str "row" }
7169
, spaceChildrenEvenly
7270
]
73-
, className: props.className
71+
)
72+
box
73+
{ className: props.className
7474
, content: props.content
7575
}
7676

@@ -84,20 +84,19 @@ mkEx = do
8484
slatDefaults
8585
{ content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
8686
}
87-
, E.element slat
88-
$ merge
89-
{ css:
90-
E.merge
91-
[ E.css
92-
{ padding: E.int 4
93-
, maxWidth: E.int 200
94-
}
95-
, text S
96-
]
97-
}
98-
slatDefaults
99-
{ content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
100-
}
87+
, E.element
88+
( E.merge
89+
[ E.css
90+
{ padding: E.int 4
91+
, maxWidth: E.int 200
92+
}
93+
, text S
94+
]
95+
)
96+
slat
97+
slatDefaults
98+
{ content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
99+
}
101100
]
102101

103102
type BoxProps
@@ -124,9 +123,8 @@ mkBox :: Effect (ReactComponent BoxProps)
124123
mkBox = do
125124
component "Box" \props ->
126125
pure
127-
$ E.element R.div'
128-
{ css: boxStyle
129-
, className: props.className
126+
$ E.element boxStyle R.div'
127+
{ className: props.className
130128
, children: props.content
131129
}
132130

src/React/Basic/Emotion.purs

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ module React.Basic.Emotion
66
, class IsStyleProperty
77
, prop
88
, element
9-
, elementKeyed
109
, css
1110
, selector
1211
, merge
@@ -28,7 +27,9 @@ import Data.Array as Array
2827
import Data.Either (Either(..))
2928
import Data.Function.Uncurried (Fn2, runFn2)
3029
import Foreign as F
30+
import Prim.Row (class Nub)
3131
import React.Basic (JSX, ReactComponent)
32+
import Record as Record
3233
import Type.Row.Homogeneous (class Homogeneous)
3334
import Unsafe.Coerce (unsafeCoerce)
3435
import Web.HTML.History (URL(..))
@@ -85,21 +86,14 @@ class IsStyleProperty a where
8586
-- | `css` prop.
8687
element ::
8788
forall props.
89+
Nub
90+
( className :: String, css :: Style | props )
91+
( className :: String, css :: Style | props ) =>
92+
Style ->
8893
ReactComponent { className :: String | props } ->
89-
{ className :: String, css :: Style | props } ->
94+
{ className :: String | props } ->
9095
JSX
91-
element = runFn2 element_
92-
93-
-- | Create a `JSX` node from a `ReactComponent`, by providing the props and a key.
94-
-- |
95-
-- | This function is identical to `React.Basic.elementKeyed` plus Emotion's
96-
-- | `css` prop.
97-
elementKeyed ::
98-
forall props.
99-
ReactComponent { className :: String | props } ->
100-
{ key :: String, className :: String, css :: Style | props } ->
101-
JSX
102-
elementKeyed = runFn2 elementKeyed_
96+
element s c p = runFn2 element_ c (Record.merge { css: s } p)
10397

10498
foreign import element_ ::
10599
forall props.

0 commit comments

Comments
 (0)