Skip to content
This repository was archived by the owner on Feb 10, 2023. It is now read-only.

Commit 49328b1

Browse files
cquirozcquiroz
authored
Merge pull request #66 from cquiroz/better-props
Use simpler style to define components and props
2 parents e99c106 + c51a071 commit 49328b1

File tree

121 files changed

+3294
-2153
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+3294
-2153
lines changed

‎.github/workflows/scala.yml

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ jobs:
1212
uses: olafurpg/setup-scala@v2
1313
with:
1414
java-version: 1.8
15-
- name: Checking your code to see if u r naughty or nice
16-
uses: openlawteam/scalafmt-ci@v2
17-
with:
18-
args: "--exclude=third_party --list"
15+
- name: Checking your code format
16+
run: csbt scalafmtCheckAll
1917
- name: Run tests
2018
run: csbt facade/test facade/fastOptJS facade/fullOptJS demo/fastOptJS::webpack

‎.scalafmt.conf

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
version = "2.2.2"
1+
version = "2.3.2"
22
style = default
33

44
maxColumn = 100

‎build.sbt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ lazy val facade =
117117
name := "react-semantic-ui",
118118
version in webpack := "4.32.0",
119119
version in startWebpackDevServer := "3.3.1",
120+
version in installJsdom := "15.2.1",
120121
// Requires the DOM for tests
121122
requireJsDomEnv in Test := true,
122123
// Compile tests to JS using fast-optimisation

‎demo/src/main/scala/react/semanticui/demo/elements/IconsComponent.scala

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,27 @@ package react.semanticui.demo
33
import japgolly.scalajs.react._
44
import japgolly.scalajs.react.vdom.html_<^._
55
import react.common.syntax._
6+
import react.common._
67
import react.semanticui.elements.icon.IconFlip._
78
import react.semanticui.elements.icon.IconRotated._
9+
import react.semanticui.elements.icon.IconCorner
810
import react.semanticui.elements.icon._
911
import react.semanticui.sizes._
1012
import react.semanticui.colors._
1113

1214
object IconsComponent {
13-
val IconMailOutline = Icon(Icon.props(name = "mail outline"))
14-
val IconSearch = Icon(Icon.props(name = "search"))
15-
val IconFeed = Icon(Icon.props(name = "feed"))
16-
val IconCloudUpload = Icon(Icon.props(name = "cloud upload"))
17-
val IconEdit = Icon(Icon.props(name = "edit"))
18-
val IconDashboard = Icon(Icon.props(name = "dashboard"))
19-
val IconNewspaper = Icon(Icon.props(name = "newspaper"))
20-
val IconAreaChart = Icon(Icon.props(name = "area chart"))
21-
val IconTwitter = Icon(Icon.props(name = "twitter"))
22-
val IconAdd = Icon(Icon.props(name = "add"))
23-
val IconCircleThin = Icon(Icon.props(name = "circle thin"))
24-
val IconUser = Icon(Icon.props(name = "user"))
15+
val IconMailOutline = Icon(name = "mail outline")
16+
val IconSearch = Icon(name = "search")
17+
val IconFeed = Icon(name = "feed")
18+
val IconCloudUpload = Icon(name = "cloud upload")
19+
val IconEdit = Icon(name = "edit")
20+
val IconDashboard = Icon(name = "dashboard")
21+
val IconNewspaper = Icon(name = "newspaper")
22+
val IconAreaChart = Icon(name = "area chart")
23+
val IconTwitter = Icon(name = "twitter")
24+
val IconAdd = Icon(name = "add")
25+
val IconCircleThin = Icon(name = "circle thin")
26+
val IconUser = Icon(name = "user")
2527
val AllSizes: List[SemanticSize] = List(Mini, Tiny, Small, Medium, Large, Big, Huge, Massive)
2628
val AllColors: List[SemanticColor] =
2729
List(Red, Orange, Yellow, Olive, Green, Teal, Blue, Violet, Purple, Pink, Brown, Grey, Black)
@@ -138,7 +140,7 @@ object IconsComponent {
138140
section("Bordered", "Icons can have a border") {
139141
<.div(
140142
^.cls := "column docs-icon-set-column",
141-
IconNewspaper.bordered,
143+
IconNewspaper.bordered(),
142144
<.p(
143145
^.cls := "name",
144146
"bordered"
@@ -148,7 +150,7 @@ object IconsComponent {
148150
section("Circular", "Icons can be circular") {
149151
<.div(
150152
^.cls := "column docs-icon-set-column",
151-
IconAreaChart.circular,
153+
IconAreaChart.circular(),
152154
<.p(
153155
^.cls := "name",
154156
"circular"
@@ -158,7 +160,7 @@ object IconsComponent {
158160
section("Icon Group", "Icons can be grouped") {
159161
<.div(
160162
^.cls := "column docs-icon-set-column",
161-
IconGroup(IconGroup.props(size = Huge), IconCircleThin.size(Big), IconUser),
163+
IconGroup(size = Huge)(IconCircleThin.size(Big), IconUser),
162164
<.p(
163165
^.cls := "name",
164166
"icon group"
@@ -168,13 +170,7 @@ object IconsComponent {
168170
section("Corner Icon", "An icon can be in a corner") {
169171
<.div(
170172
^.cls := "column docs-icon-set-column",
171-
IconGroup(
172-
IconGroup.props(size = Large,
173-
children = <.div(
174-
IconTwitter,
175-
IconAdd.corner
176-
): VdomNode)
177-
),
173+
IconGroup(size = Large)(IconTwitter, IconAdd.corner(IconCorner.BottomRight)),
178174
<.p(
179175
^.cls := "name",
180176
"icon group"

‎demo/src/main/scala/react/semanticui/demo/elements/LabelsComponent.scala

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import react.semanticui.elements.label.LabelDetail
88
import react.semanticui.colors._
99

1010
object LabelsComponent {
11-
private val IconNewspaper = Icon(Icon.props(name = "newspaper"))
12-
private val IconDelete = Icon(Icon.props(name = "delete"))
11+
private val IconNewspaper = Icon(name = "newspaper")
12+
private val IconDelete = Icon(name = "delete")
1313
def section(title: String, description: String)(items: TagMod): TagMod =
1414
<.div(
1515
^.cls := "equal width row",
@@ -56,75 +56,73 @@ object LabelsComponent {
5656
section("Samples", "A label") {
5757
<.div(
5858
^.cls := "column docs-icon-set-column",
59-
Label(Label.props(), IconNewspaper, "23")
59+
Label()(IconNewspaper, "23")
6060
)
6161
},
6262
section("Image", "As a link and an image") {
6363
List(
6464
<.div(
6565
^.cls := "column docs-icon-set-column",
66-
Label(Label.props(as = "a", image = true),
67-
<.img(
68-
^.src := WebpackResources.AdaAvatar.resource
69-
),
70-
"Ade")
66+
Label(as = "a", image = true)(<.img(
67+
^.src := WebpackResources.AdaAvatar.resource
68+
),
69+
"Ade")
7170
),
7271
<.div(
7372
^.cls := "column docs-icon-set-column",
74-
Label(Label.props(as = "a", image = true, color = Blue),
75-
<.img(
76-
^.src := WebpackResources.AdaAvatar.resource
77-
),
78-
"Ade",
79-
LabelDetail(LabelDetail.props(), "Friend"))
73+
Label(as = "a", image = true, color = Blue)(
74+
<.img(
75+
^.src := WebpackResources.AdaAvatar.resource
76+
),
77+
"Ade",
78+
LabelDetail("Friend")
79+
)
8080
),
8181
<.div(
8282
^.cls := "column docs-icon-set-column",
83-
Label(Label.props(as = "a", image = true),
84-
<.img(
85-
^.src := WebpackResources.AdaAvatar.resource
86-
),
87-
"Ade",
88-
IconDelete)
83+
Label(as = "a", image = true)(<.img(
84+
^.src := WebpackResources.AdaAvatar.resource
85+
),
86+
"Ade",
87+
IconDelete)
8988
)
9089
).toTagMod
9190
},
9291
section("Tag", "A label can be formated as a tag") {
9392
List(
9493
<.div(
9594
^.cls := "column docs-icon-set-column",
96-
Label(Label.props(as = "a", tag = true), "New")
95+
Label(as = "a", tag = true)("New")
9796
),
9897
<.div(
9998
^.cls := "column docs-icon-set-column",
100-
Label(Label.props(color = Red, as = "a", tag = true), "Upcoming")
99+
Label(color = Red, as = "a", tag = true)("Upcoming")
101100
),
102101
<.div(
103102
^.cls := "column docs-icon-set-column",
104-
Label(Label.props(color = Teal, as = "a", tag = true), "Featured")
103+
Label(color = Teal, as = "a", tag = true)("Featured")
105104
)
106105
).toTagMod
107106
},
108107
section("Callback", "A label can have a callback") {
109108
List(
110109
<.div(
111110
^.cls := "column docs-icon-set-column",
112-
Label(Label.props(as = "a",
113-
onClickE = (e: ReactMouseEvent, p: Label.LabelProps) =>
114-
Callback.log(s"${e.screenX} $p")),
115-
"Callback")
111+
Label(as = "a",
112+
onClickE = (e: ReactMouseEvent, p: Label.LabelProps) =>
113+
Callback.log(s"${e.screenX} $p"))("Callback")
116114
)
117115
).toTagMod
118116
},
119117
section("Icon", "A label can have an icon") {
120118
List(
121119
<.div(
122120
^.cls := "column docs-icon-set-column",
123-
Label(Label.props(as = "a"), IconNewspaper, "Icon")
121+
Label(as = "a")(IconNewspaper, "Icon")
124122
),
125123
<.div(
126124
^.cls := "column docs-icon-set-column",
127-
Label(Label.props(as = "a"), "Icon2", IconDelete.color(Red))
125+
Label(as = "a")("Icon2", IconDelete.color(Red))
128126
)
129127
).toTagMod
130128
}

‎facade/src/main/scala/react/semanticui/addons/confirm/Confirm.scala

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,36 @@ import scala.scalajs.js
44
import js.annotation._
55
import js.|
66
import japgolly.scalajs.react._
7-
import japgolly.scalajs.react.component.Js.RawMounted
8-
import japgolly.scalajs.react.component.Js.UnmountedMapped
97
import japgolly.scalajs.react.vdom.VdomNode
10-
import japgolly.scalajs.react.internal.Effect.Id
118
import react.common.syntax._
9+
import react.common._
1210
import react.semanticui._
1311
import react.semanticui.elements.button.Button
1412
import react.semanticui.modules.modal._
1513
import react.semanticui.{ raw => suiraw }
1614

15+
final case class Confirm(
16+
cancelButton: js.UndefOr[VdomNode | Button.ButtonProps] = js.undefined,
17+
confirmButton: js.UndefOr[VdomNode | Button.ButtonProps] = js.undefined,
18+
content: js.UndefOr[VdomNode | ModalContent.ModalContentProps] = js.undefined,
19+
header: js.UndefOr[VdomNode | ModalHeader.ModalHeaderProps] = js.undefined,
20+
onCancelE: js.UndefOr[Confirm.OnCancel] = js.undefined,
21+
onCancel: js.UndefOr[Callback] = js.undefined,
22+
onConfirmE: js.UndefOr[Confirm.OnConfirm] = js.undefined,
23+
onConfirm: js.UndefOr[Callback] = js.undefined,
24+
open: js.UndefOr[Boolean] = js.undefined,
25+
size: js.UndefOr[ModalSize] = js.undefined,
26+
override val children: CtorType.ChildrenArgs = Seq.empty
27+
) extends GenericComponentPC[Confirm.ConfirmProps] {
28+
@inline def renderWith =
29+
Confirm.component(Confirm.props(this))
30+
override def withChildren(children: CtorType.ChildrenArgs) =
31+
copy(children = children)
32+
}
33+
1734
object Confirm {
18-
type RawOnCancel = js.Function2[ReactMouseEvent, Confirm.ModalProps, Unit]
19-
type OnCancel = (ReactMouseEvent, Confirm.ModalProps) => Callback
35+
type RawOnCancel = js.Function2[ReactMouseEvent, Confirm.ConfirmProps, Unit]
36+
type OnCancel = (ReactMouseEvent, Confirm.ConfirmProps) => Callback
2037
type RawOnConfirm = RawOnCancel
2138
type OnConfirm = OnCancel
2239

@@ -25,7 +42,7 @@ object Confirm {
2542
object RawComponent extends js.Object
2643

2744
@js.native
28-
trait ModalProps extends js.Object {
45+
trait ConfirmProps extends js.Object {
2946
@JSBracketAccess
3047
def apply(key: String): js.Any = js.native
3148

@@ -69,7 +86,19 @@ object Confirm {
6986
var size: js.UndefOr[String] = js.native
7087
}
7188

72-
def props(
89+
def props(q: Confirm): ConfirmProps =
90+
rawprops(q.cancelButton,
91+
q.confirmButton,
92+
q.content,
93+
q.header,
94+
q.onCancelE,
95+
q.onCancel,
96+
q.onConfirmE,
97+
q.onConfirm,
98+
q.open,
99+
q.size)
100+
101+
def rawprops(
73102
cancelButton: js.UndefOr[VdomNode | Button.ButtonProps] = js.undefined,
74103
confirmButton: js.UndefOr[VdomNode | Button.ButtonProps] = js.undefined,
75104
content: js.UndefOr[VdomNode | ModalContent.ModalContentProps] = js.undefined,
@@ -80,8 +109,8 @@ object Confirm {
80109
onConfirm: js.UndefOr[Callback] = js.undefined,
81110
open: js.UndefOr[Boolean] = js.undefined,
82111
size: js.UndefOr[ModalSize] = js.undefined
83-
): ModalProps = {
84-
val p = (new js.Object).asInstanceOf[ModalProps]
112+
): ConfirmProps = {
113+
val p = (new js.Object).asInstanceOf[ConfirmProps]
85114
p.cancelButton = cancelButton.toRaw
86115
p.confirmButton = confirmButton.toRaw
87116
p.content = content.toRaw
@@ -94,25 +123,10 @@ object Confirm {
94123
}
95124

96125
private val component =
97-
JsComponent[ModalProps, Children.Varargs, Null](RawComponent)
98-
99-
def apply(p: ModalProps, children: VdomNode*): UnmountedMapped[
100-
Id,
101-
ModalProps,
102-
Null,
103-
RawMounted[ModalProps, Null],
104-
ModalProps,
105-
Null
106-
] =
107-
component(p)(children: _*)
108-
109-
def apply(children: VdomNode*): UnmountedMapped[
110-
Id,
111-
ModalProps,
112-
Null,
113-
RawMounted[ModalProps, Null],
114-
ModalProps,
115-
Null
116-
] =
117-
component(props())(children: _*)
126+
JsComponent[ConfirmProps, Children.Varargs, Null](RawComponent)
127+
128+
def apply(
129+
content: VdomNode*
130+
): Confirm =
131+
new Confirm(children = content)
118132
}

0 commit comments

Comments
 (0)