Skip to content

Commit 134b4bd

Browse files
easafeeasafe
committedAug 9, 2024·
add styleshets
1 parent f7138a0 commit 134b4bd

File tree

7 files changed

+70
-100
lines changed

7 files changed

+70
-100
lines changed
 

‎src/Flame/Application/Native.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ noMessages ∷ ∀ model message. model → Tuple model (Array (Aff (Maybe messa
4040
noMessages model = model :> []
4141

4242
-- | Mount a Flame application that can be fed arbitrary external messages
43-
mount ∷ ∀ model message. String → Application model message → Effect Unit
43+
mount ∷ ∀ model message. String → Application model message → Effect Unit
4444
mount name application = run name application
4545

4646
run ∷ ∀ model message. String → Application model message → Effect Unit

‎src/Flame/Html/Attribute/Internal.purs

+9-6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Data.Foldable as DF
77
import Data.Maybe as DM
88
import Data.String (Pattern(..))
99
import Data.String as DS
10+
import Data.String.Regex (Regex)
1011
import Data.String.Regex as DSR
1112
import Data.String.Regex.Flags (global)
1213
import Data.Tuple (Tuple(..))
@@ -68,7 +69,7 @@ booleanToFalsyString =
6869
false → ""
6970

7071
class' ∷ ∀ a b. ToClassList b ⇒ b → NodeData a
71-
class' = createClass <<< map caseify <<< to
72+
class' = createClass <<< to
7273

7374
-- | Sets the node style
7475
-- |
@@ -87,13 +88,15 @@ caseify name'
8788
where
8889
{ head, tail } = PU.unsafePartial (DM.fromJust $ DS.uncons name')
8990

90-
regex = PU.unsafePartial case DSR.regex "[A-Z]" global of
91-
DE.Right rgx → rgx
92-
DE.Left err → P.crashWith $ show err
91+
hyphenated = DSR.replace' regex replacer tail
9392

94-
replacer = const <<< ("-" <> _) <<< DS.toLower
93+
regex ∷ Regex
94+
regex = PU.unsafePartial case DSR.regex "[A-Z]" global of
95+
DE.Right rgx → rgx
96+
DE.Left err → P.crashWith $ show err
9597

96-
hyphenated = DSR.replace' regex replacer tail
98+
replacer ∷ ∀ r. String → r → String
99+
replacer = const <<< ("-" <> _) <<< DS.toLower
97100

98101
-- | Set the key attribute for "keyed" rendering
99102
key ∷ ToStringAttribute

‎src/Flame/Native/Attribute/Internal.purs

+7-42
Original file line numberDiff line numberDiff line change
@@ -36,56 +36,21 @@ instance ToClassList String where
3636
instance Homogeneous r Boolean ⇒ ToClassList { | r } where
3737
to = FO.keys <<< FO.filterWithKey (flip const) <<< FO.fromHomogeneous
3838

39-
-- | Enables either tuples, arrays or records be used as an argument to `style`
40-
class ToStyleList a where
41-
toStyleList ∷ a → Object String
42-
43-
instance ToStyleList (Tuple String String) where
44-
toStyleList (Tuple a b) = FO.singleton a b
45-
else instance Homogeneous r String ⇒ ToStyleList { | r } where
46-
toStyleList = FO.fromFoldable <<< map go <<< toArray
47-
where
48-
go (Tuple name' value') = Tuple (caseify name') value'
49-
50-
toArray ∷ _ → Array (Tuple String String)
51-
toArray = FO.toUnfoldable <<< FO.fromHomogeneous
52-
else instance DF.Foldable f ⇒ ToStyleList (f (Tuple String String)) where
53-
toStyleList = FO.fromFoldable
54-
5539
-- | Sets a react native property
5640
foreign import createProperty ∷ ∀ message v. String → v → NodeData message
5741

5842
foreign import createClass ∷ ∀ message. Array String → NodeData message
5943

60-
foreign import createStyle ∷ ∀ message. Object String → NodeData message
61-
62-
class' ∷ ∀ a b. ToClassList b ⇒ b → NodeData a
63-
class' = createClass <<< map caseify <<< to
64-
65-
-- | Sets the node style
44+
-- | Sets the element style
6645
-- |
6746
-- | https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style
68-
style ∷ ∀ a r. ToStyleList r ⇒ r → NodeData a
69-
style record = createStyle $ toStyleList record
47+
foreign import createStyle ∷ ∀ r message. r -> NodeData message
7048

71-
style1 ∷ ∀ a. String → String → NodeData a
72-
style1 a b = createStyle $ FO.singleton a b
49+
style :: ∀ r message. Homogeneous r String => { | r } -> NodeData message
50+
style = createStyle
7351

74-
-- | Transforms its input into a proper html attribute/tag name, i.e. lower case and hyphenated
75-
caseify ∷ String → String
76-
caseify name'
77-
| name' == DS.toUpper name' = DS.toLower name'
78-
| otherwise = DS.toLower (DS.singleton head) <> hyphenated
79-
where
80-
{ head, tail } = PU.unsafePartial (DM.fromJust $ DS.uncons name')
81-
82-
regex = PU.unsafePartial case DSR.regex "[A-Z]" global of
83-
DE.Right rgx → rgx
84-
DE.Left err → P.crashWith $ show err
85-
86-
replacer = const <<< ("-" <> _) <<< DS.toLower
87-
88-
hyphenated = DSR.replace' regex replacer tail
52+
class' ∷ ∀ a b. ToClassList b ⇒ b → NodeData a
53+
class' = createClass <<< to
8954

9055
id ∷ ToStringAttribute
9156
id = createProperty "id"
@@ -138,5 +103,5 @@ disabled = createProperty "disabled"
138103
selected ∷ ToBooleanAttribute
139104
selected = createProperty "selected"
140105

141-
keyboardType :: ToStringAttribute
106+
keyboardType ∷ ToStringAttribute
142107
keyboardType = createProperty "keyboardType"

‎src/Flame/Native/Element.js

+4-10
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { View, Text, Button, TextInput, StyleSheet, Image } from 'react-native';
33

44
let styleData = 1,
55
classData = 2,
6-
propertyData = 3,
7-
attributeData = 4,
86
keyData = 7;
97

108
let initialStyles = StyleSheet.create({
@@ -171,14 +169,10 @@ function fromNodeData(allData) {
171169
let dataOne = data[1];
172170
//[0] also always contain the data type
173171
switch (data[0]) {
174-
// case styleData:
175-
// if (nodeData.styles === undefined)
176-
// nodeData.styles = {};
177-
178-
// for (let key in dataOne)
179-
// nodeData.styles[key] = dataOne[key];
180-
// break;
181-
// case classData:
172+
case styleData:
173+
nodeData.style = dataOne;
174+
break;
175+
// case classData:
182176
// if (nodeData.classes === undefined)
183177
// nodeData.classes = [];
184178

‎src/Flame/Native/Element.purs

+39-41
Original file line numberDiff line numberDiff line change
@@ -38,114 +38,114 @@ type ToHtml' a h = ToNode a h NodeData ⇒ a → Html h
3838

3939
foreign import createViewNode ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
4040

41-
foreign import createButtonNode ∷ ∀ message. Array (NodeData message) → Array (Html message) -> Html message
41+
foreign import createButtonNode ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
4242

43-
foreign import createBrNode :: forall message. Array (NodeData message) -> Html message
43+
foreign import createBrNode ∷ ∀ message. Array (NodeData message) → Html message
4444

45-
foreign import createImageNode :: forall message. Array (NodeData message) -> Html message
45+
foreign import createImageNode ∷ ∀ message. Array (NodeData message) → Html message
4646

47-
foreign import createHrNode :: forall message. Array (NodeData message) -> Html message
47+
foreign import createHrNode ∷ ∀ message. Array (NodeData message) → Html message
4848

49-
foreign import createANode :: forall message. Array (NodeData message) -> Array (Html message) -> Html message
49+
foreign import createANode ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
5050

51-
foreign import createInputNode :: forall message. Array (NodeData message) -> Html message
51+
foreign import createInputNode ∷ ∀ message. Array (NodeData message) → Html message
5252

53-
foreign import createBNode :: forall message. Array (NodeData message) -> Array (Html message) -> Html message
53+
foreign import createBNode ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
5454

55-
foreign import createLabelNode :: forall message. Array (NodeData message) -> Array (Html message) -> Html message
55+
foreign import createLabelNode ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
5656

57-
foreign import createTableNode :: forall message. Array (NodeData message) -> Array (Html message) -> Html message
57+
foreign import createTableNode ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
5858

59-
foreign import createTrNode :: forall message. Array (NodeData message) -> Array (Html message) -> Html message
59+
foreign import createTrNode ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
6060

6161
-- | Creates a text node
6262
foreign import text ∷ ∀ message. String → Html message
6363

64-
hr' :: forall a h. ToHtml' a h
64+
hr' ∷ ∀ a h. ToHtml' a h
6565
hr' nodeData = createHrNode (toNode nodeData)
6666

67-
br :: forall message. Html message
67+
br ∷ ∀ message. Html message
6868
br = createBrNode []
6969

70-
br' :: forall a h. ToHtml' a h
70+
br' ∷ ∀ a h. ToHtml' a h
7171
br' nodeData = createBrNode (toNode nodeData)
7272

73-
input :: forall a h. ToHtml' a h
73+
input ∷ ∀ a h. ToHtml' a h
7474
input nodeData = createInputNode (toNode nodeData)
7575

76-
a :: forall a b h. ToHtml a b h
76+
a ∷ ∀ a b h. ToHtml a b h
7777
a nodeData children = createANode (toNode nodeData) $ toNode children
7878

79-
a_ :: forall b h. ToHtml_ b h
79+
a_ ∷ ∀ b h. ToHtml_ b h
8080
a_ children = createANode [] $ toNode children
8181

82-
a' :: forall a h. ToHtml' a h
82+
a' ∷ ∀ a h. ToHtml' a h
8383
a' nodeData = createANode (toNode nodeData) []
8484

85-
b :: forall a b h. ToHtml a b h
85+
b ∷ ∀ a b h. ToHtml a b h
8686
b nodeData children = createBNode (toNode nodeData) $ toNode children
8787

88-
b_ :: forall b h. ToHtml_ b h
88+
b_ ∷ ∀ b h. ToHtml_ b h
8989
b_ children = createBNode [] $ toNode children
9090

91-
b' :: forall a h. ToHtml' a h
91+
b' ∷ ∀ a h. ToHtml' a h
9292
b' nodeData = createBNode (toNode nodeData) []
9393

94-
body :: forall a b h. ToHtml a b h
94+
body ∷ ∀ a b h. ToHtml a b h
9595
body nodeData children = createViewNode (toNode nodeData) $ toNode children
9696

97-
body_ :: forall b h. ToHtml_ b h
97+
body_ ∷ ∀ b h. ToHtml_ b h
9898
body_ children = createViewNode [] $ toNode children
9999

100-
body' :: forall a h. ToHtml' a h
100+
body' ∷ ∀ a h. ToHtml' a h
101101
body' nodeData = createViewNode (toNode nodeData) []
102102

103-
button :: forall a b h. ToHtml a b h
104-
button nodeData children = createButtonNode (toNode nodeData ) $ toNode children
103+
button ∷ ∀ a b h. ToHtml a b h
104+
button nodeData children = createButtonNode (toNode nodeData) $ toNode children
105105

106-
button_ :: forall b h. ToHtml_ b h
106+
button_ ∷ ∀ b h. ToHtml_ b h
107107
button_ children = createButtonNode [] $ toNode children
108108

109-
button' :: forall a h. ToHtml' a h
109+
button' ∷ ∀ a h. ToHtml' a h
110110
button' nodeData = createButtonNode (toNode nodeData) []
111111

112-
div :: forall a b h. ToHtml a b h
112+
div ∷ ∀ a b h. ToHtml a b h
113113
div nodeData children = createViewNode (toNode nodeData) $ toNode children
114114

115-
div_ :: forall b h. ToHtml_ b h
115+
div_ ∷ ∀ b h. ToHtml_ b h
116116
div_ children = createViewNode [] $ toNode children
117117

118-
div' :: forall a h. ToHtml' a h
118+
div' ∷ ∀ a h. ToHtml' a h
119119
div' nodeData = createViewNode (toNode nodeData) []
120120

121121
img ∷ ∀ a h. ToHtml' a h
122122
img nodeData = createImageNode (toNode nodeData)
123123

124-
table :: forall a b h. ToHtml a b h
124+
table ∷ ∀ a b h. ToHtml a b h
125125
table nodeData children = createTableNode (toNode nodeData) $ toNode children
126126

127-
table_ :: forall b h. ToHtml_ b h
127+
table_ ∷ ∀ b h. ToHtml_ b h
128128
table_ children = createTableNode [] $ toNode children
129129

130-
table' :: forall a h. ToHtml' a h
130+
table' ∷ ∀ a h. ToHtml' a h
131131
table' nodeData = createTableNode (toNode nodeData) []
132132

133-
tr :: forall a b h. ToHtml a b h
133+
tr ∷ ∀ a b h. ToHtml a b h
134134
tr nodeData children = createTrNode (toNode nodeData) $ toNode children
135135

136-
tr_ :: forall b h. ToHtml_ b h
136+
tr_ ∷ ∀ b h. ToHtml_ b h
137137
tr_ children = createTrNode [] $ toNode children
138138

139-
tr' :: forall a h. ToHtml' a h
139+
tr' ∷ ∀ a h. ToHtml' a h
140140
tr' nodeData = createTrNode (toNode nodeData) []
141141

142-
td :: forall a b h. ToHtml a b h
142+
td ∷ ∀ a b h. ToHtml a b h
143143
td nodeData children = createViewNode (toNode nodeData) $ toNode children
144144

145-
td_ :: forall b h. ToHtml_ b h
145+
td_ ∷ ∀ b h. ToHtml_ b h
146146
td_ children = createViewNode [] $ toNode children
147147

148-
td' :: forall a h. ToHtml' a h
148+
td' ∷ ∀ a h. ToHtml' a h
149149
td' nodeData = createViewNode (toNode nodeData) []
150150

151151
-- h1 ∷ ∀ a b h. ToHtml a b h
@@ -229,7 +229,6 @@ td' nodeData = createViewNode (toNode nodeData) []
229229
-- i' ∷ ∀ a h. ToHtml' a h
230230
-- i' = createElement' "i"
231231

232-
233232
label ∷ ∀ a b h. ToHtml a b h
234233
label nodeData children = createLabelNode (toNode nodeData) $ toNode children
235234

@@ -305,7 +304,6 @@ label' nodeData = createLabelNode (toNode nodeData) []
305304
-- strong' ∷ ∀ a h. ToHtml' a h
306305
-- strong' = createElement' "strong"
307306

308-
309307
-- table ∷ ∀ a b h. ToHtml a b h
310308
-- table = createElement "table"
311309

‎src/Flame/Native/Style.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { StyleSheet } from "react-native";
2+
3+
export function create(obj) {
4+
return StyleSheet.create(obj);
5+
}

‎src/Flame/Native/Style.purs

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module Flame.Native.Style where
2+
3+
import Prelude
4+
5+
foreign import create ∷ ∀ r. { | r } → { | r }

0 commit comments

Comments
 (0)
Please sign in to comment.