diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 6fee54b6..3ac1e345 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -33,4 +33,4 @@ jobs: key: ${{ runner.os }}-sbt-cache-v2-${{ hashFiles('**/*.sbt') }}-${{ hashFiles('project/build.properties') }} - name: Test - run: sbt ++${{ matrix.scala }} clean test "scalafixAll --check" + run: sbt ++${{ matrix.scala }} clean test scalafmtCheckAll scalafmtSbtCheck "scalafixAll --check" diff --git a/.scalafmt.conf b/.scalafmt.conf new file mode 100644 index 00000000..4f9d2001 --- /dev/null +++ b/.scalafmt.conf @@ -0,0 +1,146 @@ +version = 3.3.0 + +maxColumn = 120 + +assumeStandardLibraryStripMargin = true + +runner.dialect = scala213source3 + +indent.main = 2 +indent.callSite = 2 +indent.ctrlSite = 2 +indent.defnSite = 2 +indent.ctorSite = 2 +indent.caseSite = 2 +indent.extendSite = 4 +indent.withSiteRelativeToExtends = 2 +indent.commaSiteRelativeToExtends = 4 +indent.extraBeforeOpenParenDefnSite = 2 + +indentOperator.topLevelOnly = false + +align.preset = some +align.tokens = [ + {code = "%", owner = "Term.ApplyInfix"}, + {code = "%%", owner = "Term.ApplyInfix"}, + {code = "%%%", owner = "Term.ApplyInfix"}, + {code = "=>", owner = "Case"} +] +align.arrowEnumeratorGenerator = false +align.closeParenSite = false +align.openParenCallSite = false +align.openParenDefnSite = false +align.openParenTupleSite = true +align.stripMargin = true +align.multiline = false + +newlines.source = keep +newlines.topLevelStatementBlankLines = [ + { + blanks { before = 1, after = 1 } + } +] +newlines.beforeTemplateBodyIfBreakInParentCtors = true +newlines.beforeMultiline = fold +newlines.alwaysBeforeElseAfterCurlyIf = false +newlines.beforeCurlyLambdaParams = never +newlines.afterCurlyLambdaParams = squash +newlines.implicitParamListModifierForce = [after] +newlines.avoidForSimpleOverflow = [punct] +newlines.avoidInResultType = true +newlines.neverBeforeJsNative = true +newlines.sometimesBeforeColonInMethodReturnType = false + +danglingParentheses.defnSite = true +danglingParentheses.callSite = true +danglingParentheses.ctrlSite = true +danglingParentheses.tupleSite = true + +runner.optimizer.forceConfigStyleOnOffset = 60 +runner.optimizer.forceConfigStyleMinArgCount = 1 + +rewrite.rules = [ + AvoidInfix, + RedundantBraces, + RedundantParens, + SortModifiers, + PreferCurlyFors +] +rewrite.neverInfix.excludeFilters."+" = [ + # better for play-framework + and, andKeep, andThen, + # For scalatest + in, should, shouldBe, when, must, mustEqual, mustBe, "must_===" +] +rewrite.redundantBraces.stringInterpolation = true +rewrite.redundantBraces.generalExpressions = true +rewrite.redundantBraces.ifElseExpressions = true +rewrite.redundantBraces.methodBodies = true +rewrite.redundantBraces.includeUnitMethods = false +rewrite.redundantBraces.parensForOneLineApply = true +rewrite.trailingCommas.style = never + +verticalMultiline.atDefnSite = false +verticalMultiline.newlineAfterOpenParen = true + +spaces.beforeContextBoundColon = Never +spaces.inImportCurlyBraces = false +spaces.inInterpolatedStringCurlyBraces = false +spaces.inParentheses = false +spaces.afterKeywordBeforeParen = true +spaces.inByNameTypes = true +spaces.afterSymbolicDefs = false +spaces.neverAroundInfixTypes = ["##"] + +literals.long = Upper +literals.float = Upper +literals.double = Upper +literals.hexPrefix = Lower +literals.hexDigits = Lower +literals.scientific = Lower + +xmlLiterals.assumeFormatted = true + +binPack.literalArgumentLists = true + +includeCurlyBraceInSelectChains = true +includeNoParensInSelectChains = true + +optIn.annotationNewlines = true +optIn.configStyleArguments = true +optIn.breakChainOnFirstMethodDot = true +optIn.breaksInsideChains = false +optIn.encloseClassicChains = false +optIn.forceBlankLineBeforeDocstring = true + +rewriteTokens = { + "⇒": "=>" + "→": "->" + "←": "<-" +} + +project.includePaths."+" = ["glob:**.md"] + +fileOverride { + "glob:**/project/**.scala" { + newlines.source = unfold + } + "glob:**/project/Dependencies.scala" { + maxColumn = 150 + align.preset = most + align.multiline = true + danglingParentheses.preset = false + } + "glob:**/project/DependenciesNPM.scala" { + maxColumn = 150 + align.preset = more + align.multiline = true + align.tokens."+" = [ + {code = "->", owner = "Term.ApplyInfix"} + ] + } + "glob:**/build.sbt" { + maxColumn = 80 + newlines.source = unfold + } +} diff --git a/build.sbt b/build.sbt index 70c517f1..8140e80e 100755 --- a/build.sbt +++ b/build.sbt @@ -1,8 +1,12 @@ lazy val root = - if (ProjectSettings.isDemoEnabled) - project.in(file(".")).aggregate(core, icons, lab, bridge, demo).configure(ProjectSettings.rootProfile) - else - project.in(file(".")).aggregate(core, icons, lab, bridge).configure(ProjectSettings.rootProfile) + if (ProjectSettings.isDemoEnabled) project + .in(file(".")) + .aggregate(core, icons, lab, bridge, demo) + .configure(ProjectSettings.rootProfile) + else project + .in(file(".")) + .aggregate(core, icons, lab, bridge) + .configure(ProjectSettings.rootProfile) lazy val core = project .in(file("core")) @@ -51,9 +55,6 @@ inThisBuild( ) // format: on -onLoad in Global := ( - "project bridge" :: - "bridgeImplicitsGenerator" :: - "project root" :: - (_: State) -) compose (onLoad in Global).value +onLoad in Global := + ("project bridge" :: "bridgeImplicitsGenerator" :: "project root" :: (_: State)) + .compose((onLoad in Global).value) diff --git a/commands.sbt b/commands.sbt index 8d7996dd..90900776 100644 --- a/commands.sbt +++ b/commands.sbt @@ -1,3 +1,8 @@ addCommandAlias("fix", "+scalafixAll") +addCommandAlias("fmt", "+scalafmtAll; +demo/scalafmt; +scalafmtSbt;") +addCommandAlias("format", "fix;fmt;") -addCommandAlias("dev", "; demo/fastOptJS::stopWebpackDevServer; ~demo/fastOptJS::startWebpackDevServer") +addCommandAlias( + "dev", + "; demo/fastOptJS::stopWebpackDevServer; ~demo/fastOptJS::startWebpackDevServer" +) diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiAppBar.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiAppBar.scala index 03cbbe9b..ec54c1f3 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiAppBar.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiAppBar.scala @@ -21,9 +21,11 @@ object MuiAppBar extends ReactBridgeComponent with MuiAppBarExtensions { elevation: js.UndefOr[Int] = js.undefined, square: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiAppBarExtensions { + object Color extends Enumeration { type Value = String @@ -56,4 +58,5 @@ trait MuiAppBarExtensions { val colorPrimary = "colorPrimary" val colorSecondary = "colorSecondary" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiAvatar.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiAvatar.scala index f2bee9f5..9524ec92 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiAvatar.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiAvatar.scala @@ -17,9 +17,11 @@ object MuiAvatar extends ReactBridgeComponent with MuiAvatarExtensions { component: js.UndefOr[ComponentPropType] = js.undefined, imgProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiAvatarExtensions { + object ClassKey extends Enumeration { type Value = String @@ -27,4 +29,5 @@ trait MuiAvatarExtensions { val colorDefault = "colorDefault" val img = "img" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBackdrop.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBackdrop.scala index f3cd9b7b..7d2c7673 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBackdrop.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBackdrop.scala @@ -14,18 +14,21 @@ object MuiBackdrop extends ReactBridgeComponent with MuiBackdropExtensions { object RawComponent extends js.Function def apply( - classes:js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, + classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, invisible: js.UndefOr[Boolean] = js.undefined, open: Boolean, transitionDuration: js.UndefOr[Int | js.Object] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiBackdropExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" val invisible = "invisible" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBadge.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBadge.scala index 8533c947..408572dc 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBadge.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBadge.scala @@ -16,7 +16,7 @@ object MuiBadge extends ReactBridgeComponent with MuiBadgeExtensions { def apply( badgeContent: js.UndefOr[VdomNode] = js.undefined, - classes: js.UndefOr[Map[ClassKey.Value, String]] =js.undefined, + classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, color: js.UndefOr[Color.Value] = js.undefined, component: js.UndefOr[ComponentPropType] = js.undefined, invisible: js.UndefOr[Boolean] = js.undefined, @@ -24,9 +24,11 @@ object MuiBadge extends ReactBridgeComponent with MuiBadgeExtensions { showZero: js.UndefOr[Boolean] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiBadgeExtensions { + object Color extends Enumeration { type Value = String @@ -54,4 +56,5 @@ trait MuiBadgeExtensions { val invisible = "invisible" val dot = "dot" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBottomNavigation.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBottomNavigation.scala index 45e653c3..7c45e72e 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBottomNavigation.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBottomNavigation.scala @@ -20,12 +20,15 @@ object MuiBottomNavigation extends ReactBridgeComponent with MuiBottomNavigation onChange: js.UndefOr[ReactHandler2[ReactEvent, js.Any]] = js.undefined, showLabels: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiBottomNavigationExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBottomNavigationAction.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBottomNavigationAction.scala index 388747c1..3d37e156 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBottomNavigationAction.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiBottomNavigationAction.scala @@ -30,9 +30,11 @@ object MuiBottomNavigationAction extends ReactBridgeComponent with MuiBottomNavi onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiBottomNavigationActionExtensions { + object ClassKey extends Enumeration { type Value = String @@ -44,4 +46,5 @@ trait MuiBottomNavigationActionExtensions { val disabled = "disabled" val focusVisible = "focusVisible" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiButton.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiButton.scala index 1f60da42..20d97f53 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiButton.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiButton.scala @@ -31,9 +31,11 @@ object MuiButton extends ReactBridgeComponent with MuiButtonExtensions { onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiButtonExtensions { + object Color extends Enumeration { type Value = String @@ -93,4 +95,5 @@ trait MuiButtonExtensions { val sizeLarge = "sizeLarge" val fullWidth = "fullWidth" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiButtonBase.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiButtonBase.scala index a928aa72..80e2d444 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiButtonBase.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiButtonBase.scala @@ -25,9 +25,11 @@ object MuiButtonBase extends ReactBridgeComponent with MuiButtonBaseExtensions { onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiButtonBaseExtensions { + object ClassKey extends Enumeration { type Value = String @@ -35,4 +37,5 @@ trait MuiButtonBaseExtensions { val disabled = "disabled" val focusVisible = "focusVisible" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCard.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCard.scala index 7b9917c8..a687422f 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCard.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCard.scala @@ -20,10 +20,13 @@ object MuiCard extends ReactBridgeComponent with MuiCardExtensions { elevation: js.UndefOr[Int] = js.undefined, square: js.UndefOr[Boolean] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiCardExtensions { + object ClassKey extends Enumeration with PaperClassKey { type Value = String } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardActionArea.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardActionArea.scala index 78bcf5d7..2a0a8328 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardActionArea.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardActionArea.scala @@ -25,9 +25,11 @@ object MuiCardActionArea extends ReactBridgeComponent with MuiCardActionAreaExte onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiCardActionAreaExtensions { + object ClassKey extends Enumeration { type Value = String @@ -36,4 +38,5 @@ trait MuiCardActionAreaExtensions { val focusHighlight = "focusHighlight" val disabled = "disabled" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardActions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardActions.scala index 7c193395..5ee564b8 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardActions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardActions.scala @@ -16,9 +16,11 @@ object MuiCardActions extends ReactBridgeComponent with MuiCardActionsExtensions classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, disableActionSpacing: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiCardActionsExtensions { + object ClassKey extends Enumeration { type Value = String @@ -26,4 +28,5 @@ trait MuiCardActionsExtensions { val disableActionSpacing = "disableActionSpacing" val action = "action" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardContent.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardContent.scala index 5fd38a7b..05476368 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardContent.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardContent.scala @@ -16,12 +16,15 @@ object MuiCardContent extends ReactBridgeComponent with MuiCardContentExtensions classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, component: js.UndefOr[ComponentPropType] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiCardContentExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardHeader.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardHeader.scala index ff898771..f36523ac 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardHeader.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardHeader.scala @@ -25,9 +25,11 @@ object MuiCardHeader extends ReactBridgeComponent with MuiCardHeaderExtensions { title: js.UndefOr[VdomNode] = js.undefined, titleTypographyProps: js.UndefOr[js.Object] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiCardHeaderExtensions { + object ClassKey extends Enumeration { type Value = String @@ -38,4 +40,5 @@ trait MuiCardHeaderExtensions { val title = "title" val subheader = "subheader" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardMedia.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardMedia.scala index 8b31327a..3bbf1760 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardMedia.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCardMedia.scala @@ -17,13 +17,16 @@ object MuiCardMedia extends ReactBridgeComponent with MuiCardMediaExtensions { component: js.UndefOr[ComponentPropType] = js.undefined, image: js.UndefOr[String] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiCardMediaExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" val media = "media" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCheckbox.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCheckbox.scala index 7bb4d00d..f045a432 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCheckbox.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCheckbox.scala @@ -26,9 +26,11 @@ object MuiCheckbox extends ReactBridgeComponent with MuiCheckboxExtensions { inputRef: js.UndefOr[ComponentRefType] = js.undefined, defaultChecked: js.UndefOr[Boolean] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiCheckboxExtensions { + object Color extends Enumeration { type Value = String @@ -47,4 +49,5 @@ trait MuiCheckboxExtensions { val colorPrimary = "colorPrimary" val colorSecondary = "colorSecondary" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiChip.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiChip.scala index 98d6dbf2..921d4b1d 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiChip.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiChip.scala @@ -28,9 +28,11 @@ object MuiChip extends ReactBridgeComponent with MuiChipExtensions { onDelete: js.UndefOr[ReactHandler1[ReactEvent]] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiChipExtensions { + object Color extends Enumeration { type Value = String @@ -75,4 +77,5 @@ trait MuiChipExtensions { val deleteIconOutlinedColorPrimary = "deleteIconOutlinedColorPrimary" val deleteIconOutlinedColorSecondary = "deleteIconOutlinedColorSecondary" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCircularProgress.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCircularProgress.scala index a35399ba..1a8e3ac1 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCircularProgress.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCircularProgress.scala @@ -22,9 +22,11 @@ object MuiCircularProgress extends ReactBridgeComponent with MuiCircularProgress value: js.UndefOr[Int] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiCircularProgressExtensions { + object Color extends Enumeration { type Value = String @@ -55,4 +57,5 @@ trait MuiCircularProgressExtensions { val circleIndeterminate = "circleIndeterminate" val circleDisableShrink = "circleDisableShrink" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiClickAwayListener.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiClickAwayListener.scala index d1b6ea17..c3b9c71f 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiClickAwayListener.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiClickAwayListener.scala @@ -20,9 +20,11 @@ object MuiClickAwayListener extends ReactBridgeComponent with MuiClickAwayListen onClickAway: js.UndefOr[ReactHandler1[ReactEventFromHtml]], touchEvent: js.UndefOr[Boolean | TouchEvent.Value] = js.undefined ): WithProps = auto + } trait MuiClickAwayListenerExtensions { + object MouseEvent extends Enumeration { type Value = String @@ -37,4 +39,5 @@ trait MuiClickAwayListenerExtensions { val onTouchStart = "onTouchStart" val onTouchEnd = "onTouchEnd" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCollapse.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCollapse.scala index 35895074..d8d9fd55 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCollapse.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiCollapse.scala @@ -16,7 +16,7 @@ object MuiCollapse extends ReactBridgeComponent with MuiCollapseExtensions { object RawComponent extends js.Function def apply( - classes: js.UndefOr[Map[ClassKey.Value, String]] =js.undefined, + classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, collapsedHeight: js.UndefOr[String] = js.undefined, component: js.UndefOr[ComponentPropType] = js.undefined, in: js.UndefOr[Boolean] = js.undefined, @@ -33,9 +33,11 @@ object MuiCollapse extends ReactBridgeComponent with MuiCollapseExtensions { onExiting: js.UndefOr[Handler1[html.Element]] = js.undefined, onExited: js.UndefOr[Handler1[html.Element]] = js.undefined ): WithProps = auto + } trait MuiCollapseExtensions { + object Timeout extends Enumeration { type Value = String @@ -50,4 +52,5 @@ trait MuiCollapseExtensions { val wrapper = "wrapper" val wrapperInner = "wrapperInner" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialog.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialog.scala index 3eb068ca..fd1765f9 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialog.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialog.scala @@ -51,9 +51,11 @@ object MuiDialog extends ReactBridgeComponent with MuiDialogExtensions { keepMounted: js.UndefOr[Boolean] = js.undefined, onRendered: js.UndefOr[JsFun0] = js.undefined ): WithProps = auto + } trait MuiDialogExtensions { + object MaxWidth extends Enumeration { type Value = String @@ -90,4 +92,5 @@ trait MuiDialogExtensions { val paperFullScreen = "paperFullScreen" val hidden = "hidden" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogActions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogActions.scala index d0e8c270..53d41fb2 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogActions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogActions.scala @@ -16,13 +16,16 @@ object MuiDialogActions extends ReactBridgeComponent with MuiDialogActionsExtens classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, disableActionSpacing: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiDialogActionsExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" val action = "action" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogContent.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogContent.scala index 8ffd02dc..f36b7841 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogContent.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogContent.scala @@ -15,12 +15,15 @@ object MuiDialogContent extends ReactBridgeComponent with MuiDialogContentExtens def apply( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined ): WithProps = auto + } trait MuiDialogContentExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogContentText.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogContentText.scala index c771bbfd..19c6d018 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogContentText.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogContentText.scala @@ -25,9 +25,11 @@ object MuiDialogContentText extends ReactBridgeComponent with MuiDialogContentTe paragraph: js.UndefOr[Boolean] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiDialogContentTextExtensions { + object Alignment extends Enumeration { type Value = String @@ -117,4 +119,5 @@ trait MuiDialogContentTextExtensions { val colorError = "colorError" val inline = "inline" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogTitle.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogTitle.scala index 38b957a3..c6c75722 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogTitle.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDialogTitle.scala @@ -16,12 +16,15 @@ object MuiDialogTitle extends ReactBridgeComponent with MuiDialogTitleExtensions classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, disableTypography: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiDialogTitleExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDivider.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDivider.scala index ce7cbfd2..42765c53 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDivider.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDivider.scala @@ -20,9 +20,11 @@ object MuiDivider extends ReactBridgeComponent with MuiDividerExtensions { light: js.UndefOr[Boolean] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiDividerExtensions { + object Variant extends Enumeration { type Value = String @@ -40,4 +42,5 @@ trait MuiDividerExtensions { val light = "light" val middle = "middle" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDrawer.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDrawer.scala index 488f32bf..74194664 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDrawer.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiDrawer.scala @@ -27,9 +27,11 @@ object MuiDrawer extends ReactBridgeComponent with MuiDrawerExtensions { transitionDuration: js.UndefOr[Int | js.Object] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiDrawerExtensions { + object Anchor extends Enumeration { type Value = String @@ -63,4 +65,5 @@ trait MuiDrawerExtensions { val paperAnchorDockedBottom = "paperAnchorDockedBottom" val modal = "modal" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanel.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanel.scala index 7970d9eb..8f66ee3a 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanel.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanel.scala @@ -22,9 +22,11 @@ object MuiExpansionPanel extends ReactBridgeComponent with MuiExpansionPanelExte elevation: js.UndefOr[Int] = js.undefined, square: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiExpansionPanelExtensions { + object ClassKey extends Enumeration with PaperClassKey { type Value = String @@ -33,4 +35,5 @@ trait MuiExpansionPanelExtensions { val expanded = "expanded" val disabled = "disabled" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelActions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelActions.scala index 8ad34cb6..793df534 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelActions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelActions.scala @@ -15,13 +15,16 @@ object MuiExpansionPanelActions extends ReactBridgeComponent with MuiExpansionPa def apply( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined ): WithProps = auto + } trait MuiExpansionPanelActionsExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" val action = "action" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelDetails.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelDetails.scala index 0282e736..8f1bf3ea 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelDetails.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelDetails.scala @@ -15,12 +15,15 @@ object MuiExpansionPanelDetails extends ReactBridgeComponent with MuiExpansionPa def apply( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined ): WithProps = auto + } trait MuiExpansionPanelDetailsExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelSummary.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelSummary.scala index 1b23f21e..1c9b7be2 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelSummary.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiExpansionPanelSummary.scala @@ -17,7 +17,7 @@ object MuiExpansionPanelSummary extends ReactBridgeComponent with MuiExpansionPa def apply( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, expandIcon: js.UndefOr[VdomNode] = js.undefined, - IconButtonProps: js.UndefOr[js.Object]= js.undefined, + IconButtonProps: js.UndefOr[js.Object] = js.undefined, action: js.UndefOr[js.Function] = js.undefined, buttonRef: js.UndefOr[ComponentRefType] = js.undefined, centerRipple: js.UndefOr[Boolean] = js.undefined, @@ -29,9 +29,11 @@ object MuiExpansionPanelSummary extends ReactBridgeComponent with MuiExpansionPa onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiExpansionPanelSummaryExtensions { + object ClassKey extends Enumeration { type Value = String @@ -43,4 +45,5 @@ trait MuiExpansionPanelSummaryExtensions { val expandIcon = "expandIcon" val focusVisible = "focusVisible" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFab.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFab.scala index 0f2f7582..0e6d62ef 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFab.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFab.scala @@ -29,9 +29,11 @@ object MuiFab extends ReactBridgeComponent with MuiFabExtensions { onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiFabExtensions { + object Color extends Enumeration { type Value = String @@ -70,4 +72,5 @@ trait MuiFabExtensions { val sizeSmall = "sizeSmall" val sizeMedium = "sizeMedium" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFade.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFade.scala index a3ccacf2..1d675fdd 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFade.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFade.scala @@ -30,12 +30,15 @@ object MuiFade extends ReactBridgeComponent with MuiFadeExtensions { onExiting: js.UndefOr[Handler1[html.Element]] = js.undefined, onExited: js.UndefOr[Handler1[html.Element]] = js.undefined ): WithProps = auto + } trait MuiFadeExtensions { + object Timeout extends Enumeration { type Value = String val auto = "auto" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFilledInput.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFilledInput.scala index 2899995f..5f833c7a 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFilledInput.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFilledInput.scala @@ -28,11 +28,13 @@ object MuiFilledInput extends ReactBridgeComponent with MuiFilledInputExtensions multiline: js.UndefOr[Boolean] = js.undefined, rows: js.UndefOr[String | Int] = js.undefined, rowsMax: js.UndefOr[String | Int] = js.undefined, - startAdornment: js.UndefOr[VdomNode] = js.undefined, + startAdornment: js.UndefOr[VdomNode] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiFilledInputExtensions { + object Margin extends Enumeration { type Value = String @@ -62,4 +64,5 @@ trait MuiFilledInputExtensions { val inputType = "inputType" val inputTypeSearch = "inputTypeSearch" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormControl.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormControl.scala index 686816ed..04c5e54c 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormControl.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormControl.scala @@ -20,9 +20,11 @@ object MuiFormControl extends ReactBridgeComponent with MuiFormControlExtensions margin: js.UndefOr[Margin.Value] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiFormControlExtensions { + object Margin extends Enumeration { type Value = String @@ -47,4 +49,5 @@ trait MuiFormControlExtensions { val marginDense = "marginDense" val fullWidth = "fullWidth" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormControlLabel.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormControlLabel.scala index dd805c8f..03e80f87 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormControlLabel.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormControlLabel.scala @@ -26,9 +26,11 @@ object MuiFormControlLabel extends ReactBridgeComponent with MuiFormControlLabel labelPlacement: js.UndefOr[LabelPlacement.Value] = js.undefined, onChange: js.UndefOr[ReactHandler2[ReactEvent, Boolean]] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiFormControlLabelExtensions { + object LabelPlacement extends Enumeration { type Value = String @@ -48,4 +50,5 @@ trait MuiFormControlLabelExtensions { val disabled = "disabled" val label = "label" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormGroup.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormGroup.scala index ab3e847d..f63da60c 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormGroup.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormGroup.scala @@ -16,13 +16,16 @@ object MuiFormGroup extends ReactBridgeComponent with MuiFormGroupExtensions { classes: js.UndefOr[Map[ClassKey.ClassKey, String]] = js.undefined, row: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiFormGroupExtensions { + object ClassKey extends Enumeration { type ClassKey = String val root = "root" val row = "row" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormHelperText.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormHelperText.scala index 9095a7c9..1e7d8700 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormHelperText.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormHelperText.scala @@ -21,9 +21,11 @@ object MuiFormHelperText extends ReactBridgeComponent with MuiFormHelperTextExte margin: js.UndefOr[Margin.Value] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiFormHelperTextExtensions { + object Margin extends Enumeration { type Value = String @@ -50,4 +52,5 @@ trait MuiFormHelperTextExtensions { val filled = "filled" val required = "required" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormLabel.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormLabel.scala index c6b5c56c..13eb9308 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormLabel.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiFormLabel.scala @@ -19,9 +19,11 @@ object MuiFormLabel extends ReactBridgeComponent with MuiFormLabelExtensions { filled: js.UndefOr[Boolean] = js.undefined, focused: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiFormLabelExtensions { + object ClassKey extends Enumeration { type Value = String @@ -33,4 +35,5 @@ trait MuiFormLabelExtensions { val required = "required" val asterisk = "asterisk" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGrid.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGrid.scala index 630bf5e6..8337534a 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGrid.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGrid.scala @@ -31,9 +31,11 @@ object MuiGrid extends ReactBridgeComponent with MuiGridExtensions { xs: js.UndefOr[Boolean | Int] = js.undefined, zeroMinWidth: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiGridExtensions { + object AlignContent extends Enumeration { type Value = String @@ -138,4 +140,5 @@ trait MuiGridExtensions { val gridXs11 = "grid-xs-11" val gridXs12 = "grid-xs-12" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridList.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridList.scala index 7b93baff..6a7fddef 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridList.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridList.scala @@ -19,9 +19,11 @@ object MuiGridList extends ReactBridgeComponent with MuiGridListExtensions { component: js.UndefOr[ComponentPropType] = js.undefined, spacing: js.UndefOr[Int] = js.undefined ): WithProps = auto + } trait MuiGridListExtensions { + object CellHeight extends Enumeration { type Value = String @@ -33,4 +35,5 @@ trait MuiGridListExtensions { val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridListTile.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridListTile.scala index 20eb6412..6812cc50 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridListTile.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridListTile.scala @@ -16,9 +16,11 @@ object MuiGridListTile extends ReactBridgeComponent with MuiGridListTileExtensio classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, component: js.UndefOr[ComponentPropType] = js.undefined ): WithProps = auto + } trait MuiGridListTileExtensions { + object ClassKey extends Enumeration { type Value = String @@ -27,4 +29,5 @@ trait MuiGridListTileExtensions { val imgFullHeight = "imgFullHeight" val imgFullWidth = "imgFullWidth" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridListTileBar.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridListTileBar.scala index bb2ef27a..c5da1978 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridListTileBar.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGridListTileBar.scala @@ -22,9 +22,11 @@ object MuiGridListTileBar extends ReactBridgeComponent with MuiGridListTileBarEx title: js.UndefOr[VdomNode] = js.undefined, titlePosition: js.UndefOr[TitlePosition.Value] = js.undefined ): WithProps = auto + } trait MuiGridListTileBarExtensions { + object ActionPosition extends Enumeration { type Value = String @@ -54,4 +56,5 @@ trait MuiGridListTileBarExtensions { val actionIcon = "actionIcon" val actionIconActionPosLeft = "actionIconActionPosLeft" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGrow.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGrow.scala index 317361ed..666bb3d9 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGrow.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiGrow.scala @@ -30,12 +30,15 @@ object MuiGrow extends ReactBridgeComponent with MuiGrowExtensions { onExiting: js.UndefOr[Handler1[html.Element]] = js.undefined, onExited: js.UndefOr[Handler1[html.Element]] = js.undefined ): WithProps = auto + } trait MuiGrowExtensions { + object Timeout extends Enumeration { type Value = String val auto = "auto" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiHidden.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiHidden.scala index 751ee99e..4d39734f 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiHidden.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiHidden.scala @@ -28,9 +28,11 @@ object MuiHidden extends ReactBridgeComponent with MuiHiddenExtensions { xsDown: js.UndefOr[Boolean] = js.undefined, xsUp: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiHiddenExtensions { + object Implementation extends Enumeration { type Value = String @@ -47,4 +49,5 @@ trait MuiHiddenExtensions { val lg = "lg" val xl = "xl" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiIcon.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiIcon.scala index e64914b7..ac400c50 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiIcon.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiIcon.scala @@ -18,9 +18,11 @@ object MuiIcon extends ReactBridgeComponent with MuiIconExtensions { component: js.UndefOr[ComponentPropType] = js.undefined, fontSize: js.UndefOr[FontSize.Value] = js.undefined ): WithProps = auto + } trait MuiIconExtensions { + object Color extends Enumeration { type Value = String @@ -54,4 +56,5 @@ trait MuiIconExtensions { val fontSizeSmall = "fontSizeSmall" val fontSizeLarge = "fontSizeLarge" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiIconButton.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiIconButton.scala index 7c4dffdb..207b5729 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiIconButton.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiIconButton.scala @@ -26,9 +26,11 @@ object MuiIconButton extends ReactBridgeComponent with MuiIconButtonExtensions { onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiIconButtonExtensions { + object Color extends Enumeration { type Value = String @@ -49,4 +51,5 @@ trait MuiIconButtonExtensions { val label = "label" val focusVisible = "focusVisible" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInput.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInput.scala index 7815eb6f..3058316c 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInput.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInput.scala @@ -30,9 +30,11 @@ object MuiInput extends ReactBridgeComponent with MuiInputExtensions { rowsMax: js.UndefOr[String | Int] = js.undefined, startAdornment: js.UndefOr[VdomNode] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiInputExtensions { + object Margin extends Enumeration { type Value = String @@ -62,4 +64,5 @@ trait MuiInputExtensions { val inputAdornedStart = "inputAdornedStart" val inputAdornedEnd = "inputAdornedEnd" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputAdornment.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputAdornment.scala index ee17acd5..92c8e495 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputAdornment.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputAdornment.scala @@ -20,9 +20,11 @@ object MuiInputAdornment extends ReactBridgeComponent with MuiInputAdornmentExte position: js.UndefOr[Position.Value] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiInputAdornmentExtensions { + object Position extends Enumeration { type Value = String @@ -47,4 +49,5 @@ trait MuiInputAdornmentExtensions { val positionEnd = "positionEnd" val disablePointerEvents = "disablePointerEvents" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputBase.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputBase.scala index 56984fb2..49b857ee 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputBase.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputBase.scala @@ -29,9 +29,11 @@ object MuiInputBase extends ReactBridgeComponent with MuiInputBaseExtensions { rowsMax: js.UndefOr[String | Int] = js.undefined, startAdornment: js.UndefOr[VdomNode] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiInputBaseExtensions { + object Margin extends Enumeration { type Value = String @@ -60,4 +62,5 @@ trait MuiInputBaseExtensions { val inputAdornedStart = "inputAdornedStart" val inputAdornedEnd = "inputAdornedEnd" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputLabel.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputLabel.scala index 903d6856..183b0ce9 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputLabel.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiInputLabel.scala @@ -24,9 +24,11 @@ object MuiInputLabel extends ReactBridgeComponent with MuiInputLabelExtensions { component: js.UndefOr[ComponentPropType] = js.undefined, filled: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiInputLabelExtensions { + object Margin extends Enumeration { type Value = String @@ -57,4 +59,5 @@ trait MuiInputLabelExtensions { val outlined = "outlined" val asterisk = "asterisk" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiLinearProgress.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiLinearProgress.scala index 00e9db19..373895a6 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiLinearProgress.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiLinearProgress.scala @@ -19,9 +19,11 @@ object MuiLinearProgress extends ReactBridgeComponent with MuiLinearProgressExte valueBuffer: js.UndefOr[Int] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiLinearProgressExtensions { + object Color extends Enumeration { type Value = String @@ -60,4 +62,5 @@ trait MuiLinearProgressExtensions { val bar2Indeterminate = "bar2Indeterminate" val bar2Buffer = "bar2Buffer" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiLink.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiLink.scala index a2bd71fc..e7e74a3d 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiLink.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiLink.scala @@ -15,7 +15,7 @@ object MuiLink extends ReactBridgeComponent with MuiLinkExtensions { def apply( block: js.UndefOr[Boolean] = js.undefined, classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, - color: js.UndefOr[Color.Value]= js.undefined, + color: js.UndefOr[Color.Value] = js.undefined, component: js.UndefOr[ComponentPropType] = js.undefined, TypographyClasses: js.UndefOr[js.Object] = js.undefined, underline: js.UndefOr[Underline.Value] = js.undefined, @@ -28,9 +28,11 @@ object MuiLink extends ReactBridgeComponent with MuiLinkExtensions { noWrap: js.UndefOr[Boolean] = js.undefined, paragraph: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiLinkExtensions { + object Color extends Enumeration { type Value = String @@ -70,4 +72,5 @@ trait MuiLinkExtensions { val underlineAlways = "underlineAlways" val button = "button" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiList.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiList.scala index 392fde15..aef66b7c 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiList.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiList.scala @@ -21,9 +21,11 @@ object MuiList extends ReactBridgeComponent with MuiListExtensions { disablePadding: js.UndefOr[Boolean] = js.undefined, subheader: js.UndefOr[VdomNode] = js.undefined ): WithProps = auto + } trait MuiListExtensions { + object ClassKey extends Enumeration { type Value = String @@ -32,4 +34,5 @@ trait MuiListExtensions { val dense = "dense" val subheader = "subheader" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItem.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItem.scala index 219be2f3..259f7cc2 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItem.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItem.scala @@ -23,9 +23,11 @@ object MuiListItem extends ReactBridgeComponent with MuiListItemExtensions { disableGutters: js.UndefOr[Boolean] = js.undefined, divider: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiListItemExtensions { + object AlignItems extends Enumeration { type Value = String @@ -49,4 +51,5 @@ trait MuiListItemExtensions { val secondaryAction = "secondaryAction" val selected = "selected" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemAvatar.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemAvatar.scala index e7160c33..f66c30f9 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemAvatar.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemAvatar.scala @@ -15,9 +15,11 @@ object MuiListItemAvatar extends ReactBridgeComponent with MuiListItemAvatarExte def apply( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined ): WithProps = auto + } trait MuiListItemAvatarExtensions { + object ClassKey extends Enumeration { type Value = String @@ -25,4 +27,5 @@ trait MuiListItemAvatarExtensions { val alignItemsFlexStart = "alignItemsFlexStart" val icon = "icon" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemIcon.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemIcon.scala index 72f34088..e15452f1 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemIcon.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemIcon.scala @@ -15,12 +15,15 @@ object MuiListItemIcon extends ReactBridgeComponent with MuiListItemIconExtensio def apply( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined ): WithProps = auto + } trait MuiListItemIconExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemSecondaryAction.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemSecondaryAction.scala index e07330b7..20f78b40 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemSecondaryAction.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemSecondaryAction.scala @@ -15,12 +15,15 @@ object MuiListItemSecondaryAction extends ReactBridgeComponent with MuiListItemS def apply( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined ): WithProps = auto + } trait MuiListItemSecondaryActionExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemText.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemText.scala index 9899ecaa..44ea37e7 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemText.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListItemText.scala @@ -23,9 +23,11 @@ object MuiListItemText extends ReactBridgeComponent with MuiListItemTextExtensio secondary: js.UndefOr[VdomNode] = js.undefined, secondaryTypographyProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiListItemTextExtensions { + object ClassKey extends Enumeration { type Value = String @@ -36,4 +38,5 @@ trait MuiListItemTextExtensions { val secondary = "secondary" val textDense = "textDense" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListSubheader.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListSubheader.scala index f38b1cb9..86c50c15 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListSubheader.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiListSubheader.scala @@ -20,9 +20,11 @@ object MuiListSubheader extends ReactBridgeComponent with MuiListSubheaderExtens disableSticky: js.UndefOr[Boolean] = js.undefined, inset: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiListSubheaderExtensions { + object Color extends Enumeration { type Value = String @@ -41,4 +43,5 @@ trait MuiListSubheaderExtensions { val inset = "inset" val sticky = "sticky" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenu.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenu.scala index c9c862d8..e5a0639d 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenu.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenu.scala @@ -59,9 +59,11 @@ object MuiMenu extends ReactBridgeComponent with MuiMenuExtensions { onEscapeKeyDown: js.UndefOr[ReactHandler1[ReactEvent]] = js.undefined, onRendered: js.UndefOr[JsFun0] = js.undefined ): WithProps = auto + } trait MuiMenuExtensions { + object AnchorReference extends Enumeration { type Value = String @@ -83,4 +85,5 @@ trait MuiMenuExtensions { val root = "root" val hidden = "hidden" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenuItem.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenuItem.scala index cd163dbb..9eae5386 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenuItem.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenuItem.scala @@ -23,9 +23,11 @@ object MuiMenuItem extends ReactBridgeComponent with MuiMenuItemExtensions { dense: js.UndefOr[Boolean] = js.undefined, divider: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiMenuItemExtensions { + object TransitionDuration extends Enumeration { type Value = String @@ -39,7 +41,6 @@ trait MuiMenuItemExtensions { val center = "center" } - object ClassKey extends Enumeration { type Value = String @@ -57,4 +58,5 @@ trait MuiMenuItemExtensions { val button = "button" val secondaryAction = "secondaryAction" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenuList.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenuList.scala index afad2576..a4d07b89 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenuList.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMenuList.scala @@ -22,4 +22,5 @@ object MuiMenuList extends ReactBridgeComponent with MuiListExtensions { disablePadding: js.UndefOr[Boolean] = js.undefined, subheader: js.UndefOr[VdomNode] = js.undefined ): WithProps = auto + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMobileStepper.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMobileStepper.scala index 84ac8d73..687d3260 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMobileStepper.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiMobileStepper.scala @@ -28,9 +28,11 @@ object MuiMobileStepper extends ReactBridgeComponent with MuiMobileStepperExtens elevation: js.UndefOr[Int] = js.undefined, square: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiMobileStepperExtensions { + object Position extends Enumeration { type Value = String @@ -59,4 +61,5 @@ trait MuiMobileStepperExtensions { val dotActive = "dotActive" val progress = "progress" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiModal.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiModal.scala index e34636f1..f8e0ccdd 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiModal.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiModal.scala @@ -34,13 +34,16 @@ object MuiModal extends ReactBridgeComponent with MuiModalExtensions { onRendered: js.UndefOr[JsFun0] = js.undefined, open: Boolean ): WithProps = auto + } trait MuiModalExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" val hidden = "hidden" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiNativeSelect.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiNativeSelect.scala index 9ce29776..d6646e12 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiNativeSelect.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiNativeSelect.scala @@ -34,9 +34,11 @@ object MuiNativeSelect extends ReactBridgeComponent with MuiNativeSelectExtensio rowsMax: js.UndefOr[String | Int] = js.undefined, startAdornment: js.UndefOr[VdomNode] = js.undefined ): WithProps = auto + } trait MuiNativeSelectExtensions { + object Variant extends Enumeration { type Value = String @@ -79,4 +81,5 @@ trait MuiNativeSelectExtensions { val inputAdornedStart = "inputAdornedStart" val inputAdornedEnd = "inputAdornedEnd" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiNoSsr.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiNoSsr.scala index 44510491..f679735d 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiNoSsr.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiNoSsr.scala @@ -18,4 +18,5 @@ object MuiNoSsr extends ReactBridgeComponent { defer: js.UndefOr[Boolean] = js.undefined, fallback: js.UndefOr[VdomNode] = js.undefined ): WithProps = auto + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiOutlinedInput.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiOutlinedInput.scala index 808ffa5c..d4feb47c 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiOutlinedInput.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiOutlinedInput.scala @@ -31,9 +31,11 @@ object MuiOutlinedInput extends ReactBridgeComponent with MuiOutlinedInputExtens rowsMax: js.UndefOr[String | Int] = js.undefined, startAdornment: js.UndefOr[VdomNode] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiOutlinedInputExtensions { + object Margin extends Enumeration { type Value = String @@ -63,4 +65,5 @@ trait MuiOutlinedInputExtensions { val inputType = "inputType" val inputTypeSearch = "inputTypeSearch" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPaper.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPaper.scala index 6fdea126..80ac1236 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPaper.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPaper.scala @@ -18,9 +18,11 @@ object MuiPaper extends ReactBridgeComponent with MuiPaperExtensions { elevation: js.UndefOr[Int] = js.undefined, square: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiPaperExtensions { + object ClassKey extends Enumeration { type Value = String @@ -52,4 +54,5 @@ trait MuiPaperExtensions { val elevation23 = "elevation23" val elevation24 = "elevation24" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPopover.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPopover.scala index b355bc1d..85aa09e0 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPopover.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPopover.scala @@ -57,9 +57,11 @@ object MuiPopover extends ReactBridgeComponent with MuiPopoverExtensions { onEscapeKeyDown: js.UndefOr[ReactHandler1[ReactEvent]] = js.undefined, onRendered: js.UndefOr[JsFun0] = js.undefined ): WithProps = auto + } trait MuiPopoverExtensions { + object AnchorReference extends Enumeration { type Value = String @@ -81,4 +83,5 @@ trait MuiPopoverExtensions { val root = "root" val hidden = "hidden" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPopper.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPopper.scala index 107534d4..93845005 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPopper.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPopper.scala @@ -26,9 +26,11 @@ object MuiPopper extends ReactBridgeComponent with MuiPopperExtensions { popperOptions: js.UndefOr[js.Object] = js.undefined, transition: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiPopperExtensions { + object Placement extends Enumeration { type Value = String @@ -45,4 +47,5 @@ trait MuiPopperExtensions { val topStart = "top-start" val top = "top" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPortal.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPortal.scala index 5ad75a53..ab8e0c7e 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPortal.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiPortal.scala @@ -17,4 +17,5 @@ object MuiPortal extends ReactBridgeComponent { disablePortal: js.UndefOr[Boolean] = js.undefined, onRendered: js.UndefOr[JsFun0] = js.undefined ): WithProps = auto + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRadio.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRadio.scala index 7bc34537..35d644c9 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRadio.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRadio.scala @@ -25,9 +25,11 @@ object MuiRadio extends ReactBridgeComponent with MuiRadioExtensions { inputProps: js.UndefOr[js.Object] = js.undefined, inputRef: js.UndefOr[ComponentRefType] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiRadioExtensions { + object Color extends Enumeration { type Value = String @@ -45,4 +47,5 @@ trait MuiRadioExtensions { val colorPrimary = "colorPrimary" val colorSecondary = "colorSecondary" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRadioGroup.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRadioGroup.scala index 2a4b5719..e95a892a 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRadioGroup.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRadioGroup.scala @@ -16,13 +16,16 @@ object MuiRadioGroup extends ReactBridgeComponent with MuiRadioGroupExtensions { classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, row: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiRadioGroupExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" val row = "row" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRootRef.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRootRef.scala index f141417c..e5a196c1 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRootRef.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiRootRef.scala @@ -15,4 +15,5 @@ object MuiRootRef extends ReactBridgeComponent { def apply( rootRef: ComponentRefType ): WithProps = auto + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSelect.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSelect.scala index ecec4a37..046a4652 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSelect.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSelect.scala @@ -45,9 +45,11 @@ object MuiSelect extends ReactBridgeComponent with MuiSelectExtensions { rowsMax: js.UndefOr[String | Int] = js.undefined, startAdornment: js.UndefOr[VdomNode] = js.undefined ): WithProps = auto + } trait MuiSelectExtensions { + object Variant extends Enumeration { type Value = String @@ -90,4 +92,5 @@ trait MuiSelectExtensions { val inputAdornedStart = "inputAdornedStart" val inputAdornedEnd = "inputAdornedEnd" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSlide.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSlide.scala index 3796e8a0..b318bddf 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSlide.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSlide.scala @@ -31,9 +31,11 @@ object MuiSlide extends ReactBridgeComponent with MuiSlideExtensions { onExiting: js.UndefOr[Handler1[html.Element]] = js.undefined, onExited: js.UndefOr[Handler1[html.Element]] = js.undefined ): WithProps = auto + } trait MuiSlideExtensions { + object Direction extends Enumeration { type Value = String @@ -42,4 +44,5 @@ trait MuiSlideExtensions { val up = "up" val down = "down" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSnackbar.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSnackbar.scala index 4e742da2..ac429ca1 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSnackbar.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSnackbar.scala @@ -40,9 +40,11 @@ object MuiSnackbar extends ReactBridgeComponent with MuiSnackbarExtensions { transitionDuration: js.UndefOr[Int | js.Object] = js.undefined, TransitionProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiSnackbarExtensions { + object Direction extends Enumeration { type Value = String @@ -63,4 +65,5 @@ trait MuiSnackbarExtensions { val anchorOriginTopLeft = "anchorOriginTopLeft" val anchorOriginBottomLeft = "anchorOriginBottomLeft" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSnackbarContent.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSnackbarContent.scala index 1481b6a7..c17f6315 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSnackbarContent.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSnackbarContent.scala @@ -22,9 +22,11 @@ object MuiSnackbarContent extends ReactBridgeComponent with MuiSnackbarContentEx elevation: js.UndefOr[Int] = js.undefined, square: js.UndefOr[Boolean] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiSnackbarContentExtensions { + object ClassKey extends Enumeration with MuiPaperExtensions { type Value = String @@ -32,4 +34,5 @@ trait MuiSnackbarContentExtensions { val message = "message" val action = "action" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStep.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStep.scala index 01c1e2ee..61836729 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStep.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStep.scala @@ -17,9 +17,11 @@ object MuiStep extends ReactBridgeComponent with MuiStepExtensions { classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, completed: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiStepExtensions { + object ClassKey extends Enumeration { type Value = String @@ -29,4 +31,5 @@ trait MuiStepExtensions { val alternativeLabel = "alternativeLabel" val completed = "completed" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepButton.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepButton.scala index 9721b369..d70eb7ff 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepButton.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepButton.scala @@ -31,9 +31,11 @@ object MuiStepButton extends ReactBridgeComponent with MuiStepButtonExtensions { onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiStepButtonExtensions { + object ClassKey extends Enumeration { type Value = String @@ -44,4 +46,5 @@ trait MuiStepButtonExtensions { val disabled = "disabled" val focusVisible = "focusVisible" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepConnector.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepConnector.scala index d4852f02..6ff78686 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepConnector.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepConnector.scala @@ -15,9 +15,11 @@ object MuiStepConnector extends ReactBridgeComponent with MuiStepConnectorExtens def apply( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiStepConnectorExtensions { + object ClassKey extends Enumeration { type Value = String @@ -32,4 +34,5 @@ trait MuiStepConnectorExtensions { val lineHorizontal = "lineHorizontal" val lineVertical = "lineVertical" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepContent.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepContent.scala index 3842ec5b..b4b23b7e 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepContent.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepContent.scala @@ -19,9 +19,11 @@ object MuiStepContent extends ReactBridgeComponent with MuiStepContentExtensions transitionDuration: js.UndefOr[Int | TransitionDuration.Value] = js.undefined, TransitionProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiStepContentExtensions { + object TransitionDuration extends Enumeration { type Value = String @@ -35,4 +37,5 @@ trait MuiStepContentExtensions { val last = "last" val transition = "transition" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepIcon.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepIcon.scala index b309197f..1075a9ff 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepIcon.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepIcon.scala @@ -21,9 +21,11 @@ object MuiStepIcon extends ReactBridgeComponent with MuiStepIconExtensions { error: js.UndefOr[Boolean] = js.undefined, icon: VdomNode ): WithPropsNoChildren = autoNoChildren + } trait MuiStepIconExtensions { + object ClassKey extends Enumeration { type Value = String @@ -33,4 +35,5 @@ trait MuiStepIconExtensions { val completed = "completed" val error = "error" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepLabel.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepLabel.scala index 2850ae77..71185955 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepLabel.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepLabel.scala @@ -22,9 +22,11 @@ object MuiStepLabel extends ReactBridgeComponent with MuiStepLabelExtensions { StepIconComponent: js.UndefOr[ComponentPropType] = js.undefined, StepIconProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiStepLabelExtensions { + object ClassKey extends Enumeration { type Value = String @@ -40,4 +42,5 @@ trait MuiStepLabelExtensions { val alternativeLabel = "alternativeLabel" val labelContainer = "labelContainer" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepper.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepper.scala index eda2b217..14efcf01 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepper.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiStepper.scala @@ -26,9 +26,11 @@ object MuiStepper extends ReactBridgeComponent with MuiStepperExtensions { elevation: js.UndefOr[Int] = js.undefined, square: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiStepperExtensions { + object Orientation extends Enumeration { type Value = String @@ -44,4 +46,5 @@ trait MuiStepperExtensions { val vertical = "vertical" val alternativeLabel = "alternativeLabel" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSvgIcon.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSvgIcon.scala index b087524a..ec1c27b4 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSvgIcon.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSvgIcon.scala @@ -22,9 +22,11 @@ object MuiSvgIcon extends ReactBridgeComponent with MuiSvgIconExtensions { titleAccess: js.UndefOr[String] = js.undefined, viewBox: js.UndefOr[String] = js.undefined ): WithProps = auto + } trait MuiSvgIconExtensions { + object Color extends Enumeration { type Value = String @@ -58,4 +60,5 @@ trait MuiSvgIconExtensions { val fontSizeSmall = "fontSizeSmall" val fontSizeLarge = "fontSizeLarge" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSwipeableDrawer.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSwipeableDrawer.scala index 1e1dc465..098dfacd 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSwipeableDrawer.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSwipeableDrawer.scala @@ -35,9 +35,11 @@ object MuiSwipeableDrawer extends ReactBridgeComponent with MuiSwipeableDrawerEx SlideProps: js.UndefOr[js.Object] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiSwipeableDrawerExtensions { + object Anchor extends Enumeration { type Value = String @@ -71,4 +73,5 @@ trait MuiSwipeableDrawerExtensions { val paperAnchorDockedBottom = "paperAnchorDockedBottom" val modal = "modal" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSwitch.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSwitch.scala index 2f8410a2..fe33579d 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSwitch.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiSwitch.scala @@ -26,9 +26,11 @@ object MuiSwitch extends ReactBridgeComponent with MuiSwitchExtensions { inputRef: js.UndefOr[ComponentRefType] = js.undefined, defaultChecked: js.UndefOr[Boolean] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiSwitchExtensions { + object Color extends Enumeration { type Value = String @@ -44,10 +46,11 @@ trait MuiSwitchExtensions { val icon = "icon" val iconChecked = "iconChecked" val switchBase = "switchBase" - val checked = "checked" + val checked = "checked" val colorPrimary = "colorPrimary" val colorSecondary = "colorSecondary" val disabled = "disabled" val bar = "bar" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTab.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTab.scala index 997c4518..1229f3ae 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTab.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTab.scala @@ -29,9 +29,11 @@ object MuiTab extends ReactBridgeComponent with MuiTabExtensions { onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiTabExtensions { + object ClassKey extends Enumeration { type Value = String @@ -40,7 +42,7 @@ trait MuiTabExtensions { val labelIcon = "labelIcon" val textColorInherit = "textColorInherit" val textColorPrimary = "textColorPrimary" - val textColorSecondary = "textColorSecondary" + val textColorSecondary = "textColorSecondary" val selected = "selected" val disabled = "disabled" val fullWidth = "fullWidth" @@ -49,4 +51,5 @@ trait MuiTabExtensions { val label = "label" val labelWrapped = "labelWrapped" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTable.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTable.scala index 3041ee65..16ba4a76 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTable.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTable.scala @@ -17,9 +17,11 @@ object MuiTable extends ReactBridgeComponent with MuiTableExtensions { component: js.UndefOr[ComponentPropType] = js.undefined, padding: js.UndefOr[Padding.Value] = js.undefined ): WithProps = auto + } trait MuiTableExtensions { + object Padding extends Enumeration { type Value = String @@ -34,4 +36,5 @@ trait MuiTableExtensions { val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableBody.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableBody.scala index 7803b4f6..36a421bd 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableBody.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableBody.scala @@ -16,13 +16,15 @@ object MuiTableBody extends ReactBridgeComponent with MuiTableBodyExtensions { classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, component: js.UndefOr[ComponentPropType] = js.undefined ): WithProps = auto -} +} trait MuiTableBodyExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableCell.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableCell.scala index d2324c1d..3198d8c6 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableCell.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableCell.scala @@ -22,9 +22,11 @@ object MuiTableCell extends ReactBridgeComponent with MuiTableCellExtensions { sortDirection: js.UndefOr[Boolean | SortDirection.Value] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiTableCellExtensions { + object Alignment extends Enumeration { type Value = String @@ -66,7 +68,7 @@ trait MuiTableCellExtensions { val head = "head" val body = "body" val footer = "footer" - val numeric = "numeric" + val numeric = "numeric" val paddingDense = "paddingDense" val paddingCheckbox = "paddingCheckbox" val paddingNone = "paddingNone" @@ -75,4 +77,5 @@ trait MuiTableCellExtensions { val alignRight = "alignRight" val alignJustify = "alignJustify" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableFooter.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableFooter.scala index a3cdfdae..0717890b 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableFooter.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableFooter.scala @@ -16,12 +16,15 @@ object MuiTableFooter extends ReactBridgeComponent with MuiTableFooterExtensions classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, component: js.UndefOr[ComponentPropType] = js.undefined ): WithProps = auto + } trait MuiTableFooterExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableHead.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableHead.scala index 3184e906..f9ec2669 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableHead.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableHead.scala @@ -16,12 +16,15 @@ object MuiTableHead extends ReactBridgeComponent with MuiTableHeadExtensions { classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, component: js.UndefOr[ComponentPropType] = js.undefined ): WithProps = auto + } trait MuiTableHeadExtensions { + object ClassKey extends Enumeration { type Value = String val root = "root" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTablePagination.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTablePagination.scala index 72449904..f65880a6 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTablePagination.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTablePagination.scala @@ -38,9 +38,11 @@ object MuiTablePagination extends ReactBridgeComponent with MuiTablePaginationEx sortDirection: js.UndefOr[Boolean | SortDirection.Value] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiTablePaginationExtensions { + object Alignment extends Enumeration { type Value = String @@ -91,7 +93,7 @@ trait MuiTablePaginationExtensions { val head = "head" val body = "body" val footer = "footer" - val numeric = "numeric" + val numeric = "numeric" val paddingDense = "paddingDense" val paddingCheckbox = "paddingCheckbox" val paddingNone = "paddingNone" @@ -100,4 +102,5 @@ trait MuiTablePaginationExtensions { val alignRight = "alignRight" val alignJustify = "alignJustify" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableRow.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableRow.scala index 79cc8e9a..8ca6360d 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableRow.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableRow.scala @@ -17,9 +17,11 @@ object MuiTableRow extends ReactBridgeComponent with MuiTableRowExtensions { component: js.UndefOr[ComponentPropType] = js.undefined, hover: js.UndefOr[Boolean] = js.undefined ): WithProps = auto + } trait MuiTableRowExtensions { + object ClassKey extends Enumeration { type Value = String @@ -29,4 +31,5 @@ trait MuiTableRowExtensions { val head = "head" val footer = "footer" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableSortLabel.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableSortLabel.scala index cc8ebd52..66c0df2c 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableSortLabel.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTableSortLabel.scala @@ -29,9 +29,11 @@ object MuiTableSortLabel extends ReactBridgeComponent with MuiTableSortLabelExte onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiTableSortLabelExtensions { + object Direction extends Enumeration { type Value = String @@ -50,4 +52,5 @@ trait MuiTableSortLabelExtensions { val iconDirectionDesc = "iconDirectionDesc" val iconDirectionAsc = "iconDirectionAsc" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTabs.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTabs.scala index 2c3a17b3..6cf099c6 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTabs.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTabs.scala @@ -27,9 +27,11 @@ object MuiTabs extends ReactBridgeComponent with MuiTabsExtensions { textColor: js.UndefOr[TextColor.Value] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiTabsExtensions { + object IndicatorColor extends Enumeration { type Value = String @@ -74,4 +76,5 @@ trait MuiTabsExtensions { val scrollButtonsAuto = "scrollButtonsAuto" val indicator = "indicator" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTextField.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTextField.scala index 27aa521c..5a8223ac 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTextField.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTextField.scala @@ -35,9 +35,11 @@ object MuiTextField extends ReactBridgeComponent with MuiTextFieldExtensions { classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, component: js.UndefOr[ComponentPropType] = js.undefined ): WithProps = auto + } trait MuiTextFieldExtensions { + object Margin extends Enumeration { type Value = String @@ -62,4 +64,5 @@ trait MuiTextFieldExtensions { val marginDense = "marginDense" val fullWidth = "fullWidth" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiToolbar.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiToolbar.scala index 8706dc24..991c0176 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiToolbar.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiToolbar.scala @@ -17,9 +17,11 @@ object MuiToolbar extends ReactBridgeComponent with MuiToolbarExtensions { disableGutters: js.UndefOr[Boolean] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiToolbarExtensions { + object Variant extends Enumeration { type Value = String @@ -35,4 +37,5 @@ trait MuiToolbarExtensions { val regular = "regular" val dense = "dense" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTooltip.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTooltip.scala index 6172e730..8c07697e 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTooltip.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTooltip.scala @@ -34,9 +34,11 @@ object MuiTooltip extends ReactBridgeComponent with MuiTooltipExtensions { TransitionComponent: js.UndefOr[ComponentPropType] = js.undefined, TransitionProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiTooltipExtensions { + object Placement extends Enumeration { type Value = String @@ -66,4 +68,5 @@ trait MuiTooltipExtensions { val tooltipPlacementTop = "tooltipPlacementTop" val tooltipPlacementBottom = "tooltipPlacementBottom" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTouchRipple.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTouchRipple.scala index de9ac950..9ad7ef75 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTouchRipple.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTouchRipple.scala @@ -16,9 +16,11 @@ object MuiTouchRipple extends ReactBridgeComponent with MuiTouchRippleExtensions center: js.UndefOr[Boolean] = js.undefined, classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiTouchRippleExtensions { + object ClassKey extends Enumeration { type Value = String @@ -30,4 +32,5 @@ trait MuiTouchRippleExtensions { val childLeaving = "childLeaving" val childPulsate = "childPulsate" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTypography.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTypography.scala index 05a4695c..83e77902 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTypography.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiTypography.scala @@ -25,9 +25,11 @@ object MuiTypography extends ReactBridgeComponent with MuiTypographyExtensions { paragraph: js.UndefOr[Boolean] = js.undefined, variant: js.UndefOr[Variant.Value] = js.undefined ): WithProps = auto + } trait MuiTypographyExtensions { + object Alignment extends Enumeration { type Value = String @@ -117,4 +119,5 @@ trait MuiTypographyExtensions { val colorError = "colorError" val inline = "inline" } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiZoom.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiZoom.scala index 0fc86dbe..d3057b8b 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiZoom.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/MuiZoom.scala @@ -30,4 +30,5 @@ object MuiZoom extends ReactBridgeComponent { onExiting: js.UndefOr[Handler1[html.Element]] = js.undefined, onExited: js.UndefOr[Handler1[html.Element]] = js.undefined ): WithProps = auto + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/Color.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/Color.scala index 7b2f6c36..c82aa25e 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/Color.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/Color.scala @@ -22,6 +22,7 @@ trait Color extends js.Object { } object Color { + def apply( `50`: String, `100`: String, @@ -57,4 +58,5 @@ object Color { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Color] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/ColorPartial.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/ColorPartial.scala index add56fc8..c62b101f 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/ColorPartial.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/ColorPartial.scala @@ -22,6 +22,7 @@ trait ColorPartial extends js.Object { } object ColorPartial { + def apply( `50`: js.UndefOr[String] = js.undefined, `100`: js.UndefOr[String] = js.undefined, @@ -57,4 +58,5 @@ object ColorPartial { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[ColorPartial] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/CommonColors.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/CommonColors.scala index f3812fc7..dcf4c435 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/CommonColors.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/CommonColors.scala @@ -10,6 +10,7 @@ trait CommonColors extends js.Object { } object CommonColors { + def apply( black: String, white: String @@ -21,4 +22,5 @@ object CommonColors { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[CommonColors] } -} \ No newline at end of file + +} diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/CommonColorsPartial.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/CommonColorsPartial.scala index d6bf1869..bb2d72e9 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/CommonColorsPartial.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/colors/CommonColorsPartial.scala @@ -10,6 +10,7 @@ trait CommonColorsPartial extends js.Object { } object CommonColorsPartial { + def apply( black: js.UndefOr[String] = js.undefined, white: js.UndefOr[String] = js.undefined @@ -21,4 +22,5 @@ object CommonColorsPartial { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[CommonColorsPartial] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/internal/Origin.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/internal/Origin.scala index ae9cc6a7..85168b2f 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/internal/Origin.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/internal/Origin.scala @@ -11,6 +11,7 @@ trait Origin extends js.Object { } object Origin { + def apply( horizontal: String | Double, vertical: String | Double @@ -22,4 +23,5 @@ object Origin { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Origin] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/internal/package.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/internal/package.scala index 2aa3a059..99089248 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/internal/package.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/internal/package.scala @@ -6,6 +6,7 @@ import scala.scalajs.js.annotation.JSImport import japgolly.scalajs.react.vdom.VdomNode package object internal { + @JSImport("@material-ui/core/internal/svg-icons/ArrowDropDown", JSImport.Default) @js.native object ArrowDropDown extends js.Function0[js.Function1[js.Object, VdomNode]] { @@ -17,4 +18,5 @@ package object internal { object ArrowDownward extends js.Function0[js.Function1[js.Object, VdomNode]] { def apply(): js.Function1[js.Object, VdomNode] = js.native } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/package.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/package.scala index 820176d3..625e9020 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/package.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/package.scala @@ -9,20 +9,20 @@ import japgolly.scalajs.react.facade.SyntheticEvent import org.scalajs.dom.HTMLElement package object core { - type JsFun0 = js.Function0[Callback] - type OptJsFun1[A] = js.Function1[A, Unit] - type OptJsFun2[A, B] = js.Function2[A, B, Unit] - type OnJSEv1[E <: SyntheticEvent[_]] = OptJsFun1[E] - type OnJSEv2[E <: SyntheticEvent[_], A] = OptJsFun2[E, A] - type Handler1[A] = A => Callback - type Handler2[A, B] = (A, B) => Callback - type Handler3[A, B, C] = (A, B, C) => Callback - type ReactHandler1[E <: SyntheticEvent[_]] = Handler1[E] + type JsFun0 = js.Function0[Callback] + type OptJsFun1[A] = js.Function1[A, Unit] + type OptJsFun2[A, B] = js.Function2[A, B, Unit] + type OnJSEv1[E <: SyntheticEvent[_]] = OptJsFun1[E] + type OnJSEv2[E <: SyntheticEvent[_], A] = OptJsFun2[E, A] + type Handler1[A] = A => Callback + type Handler2[A, B] = (A, B) => Callback + type Handler3[A, B, C] = (A, B, C) => Callback + type ReactHandler1[E <: SyntheticEvent[_]] = Handler1[E] type ReactHandler2[E <: SyntheticEvent[_], A] = Handler2[E, A] - type CssProperties = js.Any - type ComponentPropType = String | js.Function - type ComponentRefType = js.Function | js.Object - type ComponentContainerType = js.Function | js.Object + type CssProperties = js.Any + type ComponentPropType = String | js.Function + type ComponentRefType = js.Function | js.Object + type ComponentContainerType = js.Function | js.Object } @js.native diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/BreakpointValues.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/BreakpointValues.scala index f21030df..4ee81c03 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/BreakpointValues.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/BreakpointValues.scala @@ -13,6 +13,7 @@ trait BreakpointValues extends js.Object { } object BreakpointValues { + def apply( xs: Int, sm: Int, @@ -30,4 +31,5 @@ object BreakpointValues { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[BreakpointValues] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Breakpoints.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Breakpoints.scala index b2e30e0e..8329ebb6 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Breakpoints.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Breakpoints.scala @@ -16,6 +16,7 @@ trait Breakpoints extends js.Object { } object Breakpoints { + def apply( keys: js.Array[String], values: BreakpointValues, @@ -37,4 +38,5 @@ object Breakpoints { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Breakpoints] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/BreakpointsOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/BreakpointsOptions.scala index 5cd41631..268571b9 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/BreakpointsOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/BreakpointsOptions.scala @@ -18,6 +18,7 @@ trait BreakpointsOptions extends js.Object { } object BreakpointsOptions { + def apply( unit: js.UndefOr[String] = js.undefined, step: js.UndefOr[Double] = js.undefined, @@ -43,4 +44,5 @@ object BreakpointsOptions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[BreakpointsOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ColorFormatValues.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ColorFormatValues.scala index 111bbb04..2b72be82 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ColorFormatValues.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ColorFormatValues.scala @@ -12,6 +12,7 @@ trait ColorFormatValues extends js.Object { } object ColorFormatValues { + def apply( rgb: String, rgba: String, @@ -27,4 +28,5 @@ object ColorFormatValues { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[ColorFormatValues] } -} \ No newline at end of file + +} diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ColorObject.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ColorObject.scala index 17a79be1..ddb3cf31 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ColorObject.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ColorObject.scala @@ -11,6 +11,7 @@ trait ColorObject extends js.Object { } object ColorObject { + def apply( `type`: ColorFormatValues, values: (Double, Double, Double) | (Double, Double, Double, Double) @@ -22,4 +23,5 @@ object ColorObject { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[ColorObject] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/CreateTransitionsOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/CreateTransitionsOptions.scala index 73c65258..1d495663 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/CreateTransitionsOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/CreateTransitionsOptions.scala @@ -12,6 +12,7 @@ trait CreateTransitionsOptions extends js.Object { } object CreateTransitionsOptions { + def apply( duration: js.UndefOr[Int | String] = js.undefined, easing: js.UndefOr[String] = js.undefined, @@ -25,4 +26,5 @@ object CreateTransitionsOptions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[CreateTransitionsOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Direction.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Direction.scala index e175ca9f..6c7daf42 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Direction.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Direction.scala @@ -5,4 +5,4 @@ object Direction extends Enumeration { val ltr = "ltr" val rtl = "rtl" -} \ No newline at end of file +} diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Duration.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Duration.scala index f867c4fa..02c608bc 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Duration.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Duration.scala @@ -15,6 +15,7 @@ trait Duration extends js.Object { } object Duration { + def apply( shortest: Int, shorter: Int, @@ -36,4 +37,5 @@ object Duration { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Duration] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/DurationPartial.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/DurationPartial.scala index 8422eefc..f50e0024 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/DurationPartial.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/DurationPartial.scala @@ -15,6 +15,7 @@ trait DurationPartial extends js.Object { } object DurationPartial { + def apply( shortest: js.UndefOr[Int] = js.undefined, shorter: js.UndefOr[Int] = js.undefined, @@ -36,4 +37,5 @@ object DurationPartial { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[DurationPartial] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Easing.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Easing.scala index 3bab587e..2c9537b7 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Easing.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Easing.scala @@ -12,6 +12,7 @@ trait Easing extends js.Object { } object Easing { + def apply( easeInOut: String, easeOut: String, @@ -26,4 +27,5 @@ object Easing { ) o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Easing] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/EasingPartial.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/EasingPartial.scala index b2668956..c7766a94 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/EasingPartial.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/EasingPartial.scala @@ -12,6 +12,7 @@ trait EasingPartial extends js.Object { } object EasingPartial { + def apply( easeInOut: js.UndefOr[String] = js.undefined, easeOut: js.UndefOr[String] = js.undefined, @@ -27,4 +28,5 @@ object EasingPartial { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[EasingPartial] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Mixins.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Mixins.scala index bedf9b6c..a7371cf3 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Mixins.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Mixins.scala @@ -10,6 +10,7 @@ trait Mixins extends js.Object { } object Mixins { + def apply( gutters: js.UndefOr[CSSProperties] => CSSProperties, toolbar: CSSProperties @@ -21,4 +22,5 @@ object Mixins { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Mixins] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/MixinsOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/MixinsOptions.scala index 52fc8f21..3017779b 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/MixinsOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/MixinsOptions.scala @@ -10,6 +10,7 @@ trait MixinsOptions extends js.Object { } object MixinsOptions { + def apply( gutters: js.UndefOr[js.UndefOr[CSSProperties] => CSSProperties] = js.undefined, toolbar: js.UndefOr[CSSProperties] = js.undefined @@ -21,4 +22,5 @@ object MixinsOptions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MixinsOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/MuiThemeProvider.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/MuiThemeProvider.scala index cc43e513..441f6ba7 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/MuiThemeProvider.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/MuiThemeProvider.scala @@ -18,8 +18,8 @@ object MuiThemeProvider extends ReactBridgeComponent { sheetsManager: js.UndefOr[JSMap[StylesCreator, JSMap[Theme, SheetManagerTheme]]] = js.undefined, theme: js.Object | js.Function ): WithProps = auto -} +} @js.native @JSGlobal("Map") diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Overrides.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Overrides.scala index 7df80a1a..855cf981 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Overrides.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Overrides.scala @@ -100,6 +100,7 @@ trait Overrides extends js.Object { } object Overrides { + def apply( MuiAppBar: js.UndefOr[js.Object] = js.undefined, MuiAvatar: js.UndefOr[js.Object] = js.undefined, @@ -291,4 +292,5 @@ object Overrides { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Overrides] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Palette.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Palette.scala index 6d1ed185..4229a7d8 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Palette.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Palette.scala @@ -33,6 +33,7 @@ object Light extends TypeObject object Dark extends TypeObject object Palette { + def apply( common: CommonColors, `type`: PaletteType.Value, @@ -68,4 +69,5 @@ object Palette { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Palette] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteColor.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteColor.scala index 63f7ba26..b20e5b4e 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteColor.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteColor.scala @@ -14,6 +14,7 @@ trait PaletteColor extends Color { } object PaletteColor { + def apply( light: String, main: String, @@ -29,4 +30,5 @@ object PaletteColor { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[PaletteColor] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteColorOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteColorOptions.scala index 5b903d4d..8745bb80 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteColorOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteColorOptions.scala @@ -12,6 +12,7 @@ trait PaletteColorOptions extends js.Object { } object PaletteColorOptions { + def apply( light: js.UndefOr[String] = js.undefined, main: String, @@ -22,9 +23,10 @@ object PaletteColorOptions { light.toOption.map("light" -> _), Some("main" -> main), dark.toOption.map("dark" -> _), - contrastText.toOption.map("contrastText" -> _), + contrastText.toOption.map("contrastText" -> _) ).flatten.toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[PaletteColorOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteOptions.scala index f976f4a8..0f896aa6 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/PaletteOptions.scala @@ -24,6 +24,7 @@ trait PaletteOptions extends js.Object { } object PaletteOptions { + def apply( primary: js.UndefOr[PaletteColorOptions | ColorPartial | Color] = js.undefined, secondary: js.UndefOr[PaletteColorOptions | ColorPartial | Color] = js.undefined, @@ -57,4 +58,5 @@ object PaletteOptions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[PaletteOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Shape.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Shape.scala index 9e5e45cb..2eccdfc7 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Shape.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Shape.scala @@ -9,6 +9,7 @@ trait Shape extends js.Object { } object Shape { + def apply(borderRadius: Double) = { val o = Map[String, Any]( "borderRadius" -> borderRadius @@ -16,4 +17,5 @@ object Shape { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Shape] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ShapeOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ShapeOptions.scala index 67d9d620..ce6c09f2 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ShapeOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ShapeOptions.scala @@ -9,9 +9,11 @@ trait ShapeOptions extends js.Object { } object ShapeOptions { + def apply(borderRadius: js.UndefOr[Double] = js.undefined) = { val o: Map[String, Any] = borderRadius.toOption.map("borderRadius" -> _).toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[ShapeOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/SheetManagerTheme.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/SheetManagerTheme.scala index a69746d7..3814a373 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/SheetManagerTheme.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/SheetManagerTheme.scala @@ -10,6 +10,7 @@ trait SheetManagerTheme extends js.Object { } object SheetManagerTheme { + def apply( refs: Double, sheet: StyleSheet @@ -21,4 +22,5 @@ object SheetManagerTheme { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[SheetManagerTheme] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Spacing.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Spacing.scala index 076db68d..afa06a24 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Spacing.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Spacing.scala @@ -9,9 +9,11 @@ trait Spacing extends js.Object { } object Spacing { + def apply(unit: Double) = { val o: Map[String, Any] = Map("unit" -> unit) o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Spacing] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/SpacingOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/SpacingOptions.scala index 0f9abd4c..2e377459 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/SpacingOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/SpacingOptions.scala @@ -9,9 +9,11 @@ trait SpacingOptions extends js.Object { } object SpacingOptions { + def apply(unit: js.UndefOr[Double] = js.undefined) = { val o: Map[String, Any] = unit.toOption.map("unit" -> _).toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[SpacingOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StyleRulesCallback.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StyleRulesCallback.scala index d7d0649c..2300b50f 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StyleRulesCallback.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StyleRulesCallback.scala @@ -3,4 +3,4 @@ package io.kinoplan.scalajs.react.material.ui.core.styles import scala.scalajs.js @js.native -trait StyleRulesCallback extends js.Function1[Theme, StyleRules]{} +trait StyleRulesCallback extends js.Function1[Theme, StyleRules] {} diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StylesCreator.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StylesCreator.scala index beb42503..0ca9ca54 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StylesCreator.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StylesCreator.scala @@ -11,6 +11,7 @@ trait StylesCreator extends js.Object { } object StylesCreator { + def apply( create: (Theme, String) => StyleRules, options: StylesCreatorOptions, @@ -21,7 +22,8 @@ object StylesCreator { "options" -> options, "themingEnabled" -> themingEnabled ) - + o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[StylesCreator] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StylesCreatorOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StylesCreatorOptions.scala index 93596b71..781d154d 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StylesCreatorOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/StylesCreatorOptions.scala @@ -9,9 +9,11 @@ trait StylesCreatorOptions extends js.Object { } object StylesCreatorOptions { + def apply(index: Int) = { val o: Map[String, Any] = Map("index" -> index) o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[StylesCreatorOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Theme.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Theme.scala index f6d3faee..3b6fe9c7 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Theme.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Theme.scala @@ -20,6 +20,7 @@ trait Theme extends js.Object { } object Theme { + def apply( shape: Shape, breakpoints: Breakpoints, @@ -50,4 +51,5 @@ object Theme { ).flatten.toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Theme] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ThemeOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ThemeOptions.scala index 4ba6f529..fc930d77 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ThemeOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ThemeOptions.scala @@ -21,6 +21,7 @@ trait ThemeOptions extends js.Object { } object ThemeOptions { + def apply( shape: js.UndefOr[ShapeOptions] = js.undefined, breakpoints: js.UndefOr[BreakpointsOptions] = js.undefined, @@ -50,4 +51,5 @@ object ThemeOptions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[ThemeOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Transitions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Transitions.scala index cfc709e6..4cd4d1a4 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Transitions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Transitions.scala @@ -12,6 +12,7 @@ trait Transitions extends js.Object { } object Transitions { + def apply( easing: Easing, duration: Duration, @@ -27,4 +28,5 @@ object Transitions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Transitions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TransitionsOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TransitionsOptions.scala index 727a34d8..8505e80d 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TransitionsOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TransitionsOptions.scala @@ -12,6 +12,7 @@ trait TransitionsOptions extends js.Object { } object TransitionsOptions { + def apply( easing: js.UndefOr[EasingPartial] = js.undefined, duration: js.UndefOr[DurationPartial] = js.undefined, @@ -27,4 +28,5 @@ object TransitionsOptions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TransitionsOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeAction.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeAction.scala index 52aec4ef..6c5f0d54 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeAction.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeAction.scala @@ -14,6 +14,7 @@ trait TypeAction extends js.Object { } object TypeAction { + def apply( active: String, hover: String, @@ -33,4 +34,5 @@ object TypeAction { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypeAction] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeActionPartial.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeActionPartial.scala index b3e15059..ecd9e695 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeActionPartial.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeActionPartial.scala @@ -14,6 +14,7 @@ trait TypeActionPartial extends js.Object { } object TypeActionPartial { + def apply( active: js.UndefOr[String] = js.undefined, hover: js.UndefOr[String] = js.undefined, @@ -33,4 +34,5 @@ object TypeActionPartial { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypeActionPartial] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeBackground.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeBackground.scala index 742da583..d3ab9fd7 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeBackground.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeBackground.scala @@ -10,6 +10,7 @@ trait TypeBackground extends js.Object { } object TypeBackground { + def apply( default: String, paper: String @@ -21,4 +22,5 @@ object TypeBackground { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypeBackground] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeBackgroundPartial.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeBackgroundPartial.scala index 4a715386..617de01b 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeBackgroundPartial.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeBackgroundPartial.scala @@ -10,15 +10,17 @@ trait TypeBackgroundPartial extends js.Object { } object TypeBackgroundPartial { + def apply( default: js.UndefOr[String] = js.undefined, paper: js.UndefOr[String] = js.undefined ) = { val o: Map[String, Any] = Seq( default.toOption.map("default" -> _), - paper.toOption.map("paper" -> _), + paper.toOption.map("paper" -> _) ).flatten.toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypeBackgroundPartial] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeObject.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeObject.scala index 7fbd6a22..24e8414c 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeObject.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeObject.scala @@ -12,6 +12,7 @@ trait TypeObject extends js.Object { } object TypeObject { + def apply( text: TypeText, action: TypeAction, @@ -27,4 +28,5 @@ object TypeObject { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypeObject] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeText.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeText.scala index f5ece3f9..a81fddaa 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeText.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeText.scala @@ -12,6 +12,7 @@ trait TypeText extends js.Object { } object TypeText { + def apply( primary: String, secondary: String, @@ -27,4 +28,5 @@ object TypeText { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypeText] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeTextPartial.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeTextPartial.scala index a26be0e2..fa53c25a 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeTextPartial.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypeTextPartial.scala @@ -12,6 +12,7 @@ trait TypeTextPartial extends js.Object { } object TypeTextPartial { + def apply( primary: js.UndefOr[String] = js.undefined, secondary: js.UndefOr[String] = js.undefined, @@ -27,4 +28,5 @@ object TypeTextPartial { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypeTextPartial] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Typography.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Typography.scala index cb214b4c..d4bae5db 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Typography.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/Typography.scala @@ -29,6 +29,7 @@ trait Typography extends js.Object { } object Typography { + def apply( pxToRem: Int => String, round: Double => Int, @@ -78,4 +79,5 @@ object Typography { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[Typography] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyOptions.scala index c1e07d60..c2ded96b 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyOptions.scala @@ -30,6 +30,7 @@ trait TypographyOptions extends js.Object { } object TypographyOptions { + def apply( fontFamily: js.UndefOr[Int | String] = js.undefined, fontSize: js.UndefOr[Int] = js.undefined, @@ -79,4 +80,5 @@ object TypographyOptions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypographyOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyStyle.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyStyle.scala index 42334d97..084deb56 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyStyle.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyStyle.scala @@ -17,6 +17,7 @@ trait TypographyStyle extends js.Object { } object TypographyStyle { + def apply( fontFamily: Int | String, fontSize: Int | String, @@ -40,4 +41,5 @@ object TypographyStyle { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypographyStyle] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyStyleOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyStyleOptions.scala index e8306161..5196e468 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyStyleOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/TypographyStyleOptions.scala @@ -17,6 +17,7 @@ trait TypographyStyleOptions extends js.Object { } object TypographyStyleOptions { + def apply( fontFamily: js.UndefOr[Int | String] = js.undefined, fontSize: js.UndefOr[Int | String] = js.undefined, @@ -40,4 +41,5 @@ object TypographyStyleOptions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[TypographyStyleOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ZIndex.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ZIndex.scala index 6aace5f5..069a58db 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ZIndex.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ZIndex.scala @@ -14,6 +14,7 @@ trait ZIndex extends js.Object { } object ZIndex { + def apply( mobileStepper: Int, appBar: Int, @@ -33,4 +34,5 @@ object ZIndex { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[ZIndex] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ZIndexOptions.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ZIndexOptions.scala index 36975b95..986da22f 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ZIndexOptions.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/ZIndexOptions.scala @@ -14,6 +14,7 @@ trait ZIndexOptions extends js.Object { } object ZIndexOptions { + def apply( mobileStepper: js.UndefOr[Int] = js.undefined, appBar: js.UndefOr[Int] = js.undefined, @@ -33,4 +34,5 @@ object ZIndexOptions { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[ZIndexOptions] } + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/package.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/package.scala index f208f9c2..93d23e8f 100755 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/package.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/core/styles/package.scala @@ -7,6 +7,7 @@ import scala.scalajs.js.| import japgolly.scalajs.react.vdom.VdomNode package object styles { + @JSImport("@material-ui/core/styles/colorManipulator.js", JSImport.Default) @js.native object colorManipulator extends js.Object { @@ -59,11 +60,14 @@ package object styles { @JSImport("@material-ui/core/styles/createTypography.js", JSImport.Default) @js.native - object createTypography extends js.Function2[Palette, TypographyOptions | js.Function1[Palette, TypographyOptions], Typography] { + object createTypography + extends js.Function2[Palette, TypographyOptions | js.Function1[Palette, TypographyOptions], Typography] { + override def apply( palette: Palette, typography: TypographyOptions | js.Function1[Palette, TypographyOptions] ): Typography = js.native + } @JSImport("@material-ui/core/styles/getStylesCreator.js", JSImport.Default) @@ -107,4 +111,5 @@ package object styles { @JSImport("@material-ui/core/styles/zIndex.js", JSImport.Default) @js.native object zIndex extends ZIndex + } diff --git a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/utils/MuiSvgIconCustom.scala b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/utils/MuiSvgIconCustom.scala index 124853c3..cb34357d 100644 --- a/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/utils/MuiSvgIconCustom.scala +++ b/core/src/main/scala/io/kinoplan/scalajs/react/material/ui/utils/MuiSvgIconCustom.scala @@ -9,6 +9,7 @@ import io.kinoplan.scalajs.react.bridge.WithPropsAndTagsMods import io.kinoplan.scalajs.react.material.ui.core.{ComponentPropType, MuiSvgIcon, MuiSvgIconExtensions} case class MuiSvgIconCustom(attrs: TagMod*) extends MuiSvgIconExtensions { + def apply( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, color: js.UndefOr[Color.Value] = js.undefined, @@ -18,19 +19,20 @@ case class MuiSvgIconCustom(attrs: TagMod*) extends MuiSvgIconExtensions { shapeRendering: js.UndefOr[String] = js.undefined, titleAccess: js.UndefOr[String] = js.undefined, viewBox: js.UndefOr[String] = js.undefined - )(implicit attrAndChildren: TagMod*): WithPropsAndTagsMods = { - MuiSvgIcon( - classes, - color, - component, - fontSize, - nativeColor, - shapeRendering, - titleAccess, - viewBox - )( - attrs.toTagMod(identity), - attrAndChildren.toTagMod(identity) - ) - } + )(implicit + attrAndChildren: TagMod* + ): WithPropsAndTagsMods = MuiSvgIcon( + classes, + color, + component, + fontSize, + nativeColor, + shapeRendering, + titleAccess, + viewBox + )( + attrs.toTagMod(identity), + attrAndChildren.toTagMod(identity) + ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/AppCSS.scala b/demo/src/main/scala/io/kinoplan/demo/AppCSS.scala index f01cccc4..d7864a55 100755 --- a/demo/src/main/scala/io/kinoplan/demo/AppCSS.scala +++ b/demo/src/main/scala/io/kinoplan/demo/AppCSS.scala @@ -17,8 +17,16 @@ import io.kinoplan.demo.styles.demos.Dividers.DefaultDividersStyle import io.kinoplan.demo.styles.demos.Drawers._ import io.kinoplan.demo.styles.demos.ExpansionPanels._ import io.kinoplan.demo.styles.demos.GridList._ -import io.kinoplan.demo.styles.demos.Lists.{DefaultInteractiveListStyle, DefaultListStyle, DefaultPinnedSubheaderListStyle} -import io.kinoplan.demo.styles.demos.Menus.{DefaultListItemCompositionStyle, DefaultMenuStyle, DefaultTypographyMenuStyle} +import io.kinoplan.demo.styles.demos.Lists.{ + DefaultInteractiveListStyle, + DefaultListStyle, + DefaultPinnedSubheaderListStyle +} +import io.kinoplan.demo.styles.demos.Menus.{ + DefaultListItemCompositionStyle, + DefaultMenuStyle, + DefaultTypographyMenuStyle +} import io.kinoplan.demo.styles.demos.Paper.DefaultPaperStyle import io.kinoplan.demo.styles.demos.Pickers.DefaultPickersStyle import io.kinoplan.demo.styles.demos.Progress._ @@ -144,4 +152,5 @@ object AppCSS extends ScalaCssReactImplicits { CSSUtils.installStyle(style) } } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/AppMain.scala b/demo/src/main/scala/io/kinoplan/demo/AppMain.scala index 493f7657..287d1732 100755 --- a/demo/src/main/scala/io/kinoplan/demo/AppMain.scala +++ b/demo/src/main/scala/io/kinoplan/demo/AppMain.scala @@ -5,6 +5,7 @@ import org.scalajs.dom import io.kinoplan.demo.router.AppRouter object AppMain { + def main(args: Array[String]): Unit = { val root = dom.document.getElementById("root") @@ -12,4 +13,5 @@ object AppMain { AppCSS.load() } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/components/ComponentContainer.scala b/demo/src/main/scala/io/kinoplan/demo/components/ComponentContainer.scala index 6860d4c1..32028793 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/ComponentContainer.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/ComponentContainer.scala @@ -11,20 +11,26 @@ object ComponentContainer extends ScalaCssReactImplicits { case class Props(title: String, style: CommonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props, children: PropsChildren): VdomElement = { val css = props.style div( - div(css.componentTitleFont, css.componentTitlePadding, - MuiTypography(variant = MuiTypography.Variant.h4, gutterBottom = true, component = "h2")( + div( + css.componentTitleFont, + css.componentTitlePadding, + MuiTypography( + variant = MuiTypography.Variant.h4, + gutterBottom = true, + component = "h2" + )( props.title ) ), - div(css.demo, css.demoPaper(Layout.isPaletteLight), - children - ) + div(css.demo, css.demoPaper(Layout.isPaletteLight), children) ) } + } private val component = ScalaComponent.builder[Props]("ComponentContainer") @@ -34,5 +40,6 @@ object ComponentContainer extends ScalaCssReactImplicits { def apply( title: String, style: CommonStyle = DefaultCommonStyle - )(children: VdomNode*): VdomElement = component(Props(title, style))(children:_*) + )(children: VdomNode*): VdomElement = component(Props(title, style))(children: _*) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/components/Layout.scala b/demo/src/main/scala/io/kinoplan/demo/components/Layout.scala index f3b430a8..19ba683e 100755 --- a/demo/src/main/scala/io/kinoplan/demo/components/Layout.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/Layout.scala @@ -38,6 +38,7 @@ object Layout extends ScalaCssReactImplicits { def handlePaletteTypeChange = copy( paletteType = if (paletteType == PaletteType.light) PaletteType.dark else PaletteType.light ) + } class Backend(t: BackendScope[Props, State]) { @@ -50,17 +51,19 @@ object Layout extends ScalaCssReactImplicits { def render(props: Props, state: State): VdomElement = { val css = props.style - val theme = createMuiTheme(options = ThemeOptions( - typography = TypographyOptions( - useNextVariants = true - ), - palette = PaletteOptions( - `type` = state.paletteType, - primary = PaletteColorOptions( - main = state.primaryMainColor + val theme = createMuiTheme( + options = ThemeOptions( + typography = TypographyOptions( + useNextVariants = true + ), + palette = PaletteOptions( + `type` = state.paletteType, + primary = PaletteColorOptions( + main = state.primaryMainColor + ) ) ) - )) + ) defaultTheme = Some(theme) @@ -79,12 +82,17 @@ object Layout extends ScalaCssReactImplicits { val menuButtonHidden = if (state.open) css.menuButtonHidden else css.common.emptyStyle - div(css.root, + div( + css.root, MuiThemeProvider(theme = theme)( MuiCssBaseline(), - MuiAppBar(position = MuiAppBar.Position.fixed)(css.appBar, appBarShift, + MuiAppBar(position = MuiAppBar.Position.fixed)( + css.appBar, + appBarShift, MuiToolbar(disableGutters = !state.open)( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.menuButton, menuButtonHidden, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.menuButton, + menuButtonHidden, aria.label := "Open drawer", onClick --> handleDrawerOpen, MuiIcons(MuiIconsModule.Menu)() @@ -94,9 +102,7 @@ object Layout extends ScalaCssReactImplicits { variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit, noWrap = true - )(css.common.flexGrowOne, - "Dashboard" - ), + )(css.common.flexGrowOne, "Dashboard"), MuiTooltip(title = VdomNode("Toggle light/dark theme"), enterDelay = 300)( MuiIconButton(color = MuiIconButton.Color.inherit)( aria.label := "Toggle light/dark theme", @@ -113,23 +119,28 @@ object Layout extends ScalaCssReactImplicits { ) ) ), - MuiDrawer(variant = MuiDrawer.Variant.permanent, open = state.open, classes = drawerClasses)(css.drawer, + MuiDrawer( + variant = MuiDrawer.Variant.permanent, + open = state.open, + classes = drawerClasses + )( + css.drawer, if (state.open) css.drawerPaperOpen else css.common.emptyStyle, if (!state.open) css.drawerPaperClose else css.common.emptyStyle, - div(css.toolbar, - MuiIconButton()(onClick --> handleDrawerClose, + div( + css.toolbar, + MuiIconButton()( + onClick --> handleDrawerClose, MuiIcons(MuiIconsModule.ChevronLeft)() ) ), MainMenu(props.router, props.r) ), - main(css.content, - div(css.toolbar), - props.r.render() - ) + main(css.content, div(css.toolbar), props.r.render()) ) ) } + } val component = ScalaComponent.builder[Props]("Layout") @@ -142,4 +153,5 @@ object Layout extends ScalaCssReactImplicits { r: Resolution[Page], style: LayoutStyle = DefaultLayoutStyle ) = component(Props(router, r, style)) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/components/TabContainer.scala b/demo/src/main/scala/io/kinoplan/demo/components/TabContainer.scala index f9ba0566..80fb599d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/TabContainer.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/TabContainer.scala @@ -11,13 +11,13 @@ object TabContainer extends ScalaCssReactImplicits { case class Props(style: TabContainerStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props, children: PropsChildren): VdomNode = { val css = props.style - MuiTypography(component = "div")(css.root, - children - ) + MuiTypography(component = "div")(css.root, children) } + } private val component = ScalaComponent.builder[Props]("TabContainer") @@ -26,5 +26,6 @@ object TabContainer extends ScalaCssReactImplicits { def apply( style: TabContainerStyle = DefaultTabContainerStyle - )(children: VdomNode*): VdomNode = component(Props(style))(children:_*) + )(children: VdomNode*): VdomNode = component(Props(style))(children: _*) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/BottomAppBar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/BottomAppBar.scala index 20a30770..1948f788 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/BottomAppBar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/BottomAppBar.scala @@ -14,33 +14,45 @@ object BottomAppBar extends ScalaCssReactImplicits { case class Props(style: BottomAppBarStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Bottom App Bar")( - div(css.root, + div( + css.root, React.Fragment( MuiCssBaseline(), - MuiPaper(square = true)(css.paper, - MuiTypography(variant = MuiTypography.Variant.h5, gutterBottom = true)(css.text, - "Inbox" - ), - MuiList()(css.list, + MuiPaper(square = true)( + css.paper, + MuiTypography(variant = MuiTypography.Variant.h5, gutterBottom = true)(css.text, "Inbox"), + MuiList()( + css.list, Message.default.toVdomArray { message => React.Fragment.withKey(message.id)( - if (message.id == 1) MuiListSubheader()(css.subHeader(Layout.isPaletteLight), "Today") else EmptyVdom, - if (message.id == 3) MuiListSubheader()(css.subHeader(Layout.isPaletteLight), "Yesterday") else EmptyVdom, + if (message.id == 1) MuiListSubheader()(css.subHeader(Layout.isPaletteLight), "Today") + else EmptyVdom, + if (message.id == 3) MuiListSubheader()(css.subHeader(Layout.isPaletteLight), "Yesterday") + else EmptyVdom, MuiListItem(button = true)( MuiAvatar()(alt := "Profile Picture", src := message.person), - MuiListItemText(primary = VdomNode(message.primary), secondary = VdomNode(message.secondary)) + MuiListItemText( + primary = VdomNode(message.primary), + secondary = VdomNode(message.secondary) + ) ) ) } ) ), - MuiAppBar(position = MuiAppBar.Position.relative, color = MuiAppBar.Color.primary)(css.appBar, - MuiToolbar()(css.toolbar, + MuiAppBar( + position = MuiAppBar.Position.relative, + color = MuiAppBar.Color.primary + )( + css.appBar, + MuiToolbar()( + css.toolbar, MuiIconButton(color = MuiIconButton.Color.inherit)( aria.label := "Open drawer", MuiIcons(MuiIconsModule.Menu)() @@ -60,6 +72,7 @@ object BottomAppBar extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("BottomAppBar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/ButtonAppBar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/ButtonAppBar.scala index 408bce27..39c5591e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/ButtonAppBar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/ButtonAppBar.scala @@ -13,20 +13,25 @@ object ButtonAppBar extends ScalaCssReactImplicits { case class Props(style: CommonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("App Bar with buttons")( - div(css.flexGrowOne, + div( + css.flexGrowOne, MuiAppBar(position = MuiAppBar.Position.static)( MuiToolbar()( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.menuButton, aria.label := "Menu", + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.menuButton, + aria.label := "Menu", MuiIcons(MuiIconsModule.Menu)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit)(css.title, - "News" - ), + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit + )(css.title, "News"), MuiButton(color = MuiButton.Color.inherit)("Login") ) ) @@ -34,6 +39,7 @@ object ButtonAppBar extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ButtonAppBar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/DenseAppBar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/DenseAppBar.scala index 1ff7d9b0..99b29944 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/DenseAppBar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/DenseAppBar.scala @@ -13,19 +13,25 @@ object DenseAppBar extends ScalaCssReactImplicits { case class Props(style: CommonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Dense (desktop only)")( - div(css.flexGrowOne, + div( + css.flexGrowOne, MuiAppBar(position = MuiAppBar.Position.static)( MuiToolbar(variant = MuiToolbar.Variant.dense)( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.menuButtonDesktop, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.menuButtonDesktop, aria.label := "Menu", MuiIcons(MuiIconsModule.Menu)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit)( + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit + )( "Photos" ) ) @@ -34,6 +40,7 @@ object DenseAppBar extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("DenseAppBar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/MenuAppBar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/MenuAppBar.scala index 016419bc..c365d689 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/MenuAppBar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/MenuAppBar.scala @@ -2,7 +2,14 @@ package io.kinoplan.demo.components.demos.AppBar import scala.scalajs.js.JSConverters._ -import japgolly.scalajs.react.{BackendScope, Callback, ReactEvent, ReactEventFromHtml, ReactEventFromInput, ScalaComponent} +import japgolly.scalajs.react.{ + BackendScope, + Callback, + ReactEvent, + ReactEventFromHtml, + ReactEventFromInput, + ScalaComponent +} import japgolly.scalajs.react.vdom.Attr import japgolly.scalajs.react.vdom.all.{VdomElement, _} import org.scalajs.dom.HTMLElement @@ -28,6 +35,7 @@ object MenuAppBar extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChange(e: ReactEventFromInput): Callback = { val target = e.target.checked @@ -42,9 +50,8 @@ object MenuAppBar extends ScalaCssReactImplicits { def handleProfileMenuClose: Callback = t.modState(_.handleProfileMenuClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleProfileMenuClose - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -55,26 +62,21 @@ object MenuAppBar extends ScalaCssReactImplicits { val ariaOwns = if (open) "menu-appbar" else "" - def renderMenu() = { - MuiMenu( - anchorEl = state.anchorEl.orUndefined, - anchorOrigin = Origin(vertical = "top", horizontal = "right"), - transformOrigin = Origin(vertical = "top", horizontal = "right"), - open = open, - onClose = onClose, - )( - MuiMenuItem()(onClick --> handleProfileMenuClose, - "Profile" - ), - MuiMenuItem()(onClick --> handleProfileMenuClose, - "My account" - ) - ) - } + def renderMenu() = MuiMenu( + anchorEl = state.anchorEl.orUndefined, + anchorOrigin = Origin(vertical = "top", horizontal = "right"), + transformOrigin = Origin(vertical = "top", horizontal = "right"), + open = open, + onClose = onClose + )( + MuiMenuItem()(onClick --> handleProfileMenuClose, "Profile"), + MuiMenuItem()(onClick --> handleProfileMenuClose, "My account") + ) div( ComponentContainer("App Bar with menu")( - div(css.flexGrowOne, + div( + css.flexGrowOne, MuiFormGroup()( MuiFormControlLabel( control = MuiSwitch(checked = state.auth)( @@ -86,13 +88,15 @@ object MenuAppBar extends ScalaCssReactImplicits { ), MuiAppBar(position = MuiAppBar.Position.static)( MuiToolbar()( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.menuButton, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.menuButton, aria.label := "Menu", MuiIcons(MuiIconsModule.Menu)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit)(css.flexGrowOne, - "Photos" - ), + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit + )(css.flexGrowOne, "Photos"), div( MuiIconButton(color = MuiIconButton.Color.inherit)( aria.owns := ariaOwns, @@ -109,6 +113,7 @@ object MenuAppBar extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("MenuAppBar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/PrimarySearchAppBar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/PrimarySearchAppBar.scala index ee7d0d8a..2b76206a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/PrimarySearchAppBar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/PrimarySearchAppBar.scala @@ -31,6 +31,7 @@ object PrimarySearchAppBar extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleProfileMenuOpen(e: ReactEventFromHtml): Callback = { val target = e.currentTarget @@ -39,9 +40,8 @@ object PrimarySearchAppBar extends ScalaCssReactImplicits { def handleProfileMenuClose: Callback = t.modState(_.handleProfileMenuClose) - def onCloseProfile: (ReactEvent, String) => Callback = (_, _) => { + def onCloseProfile: (ReactEvent, String) => Callback = (_, _) => handleProfileMenuClose - } def handleMobileMenuOpen(e: ReactEventFromHtml): Callback = { val target = e.currentTarget @@ -49,9 +49,8 @@ object PrimarySearchAppBar extends ScalaCssReactImplicits { t.modState(_.handleMobileMenuOpen(target)) } - def handleMobileMenuClose: (ReactEvent, String) => Callback = (_, _) => { + def handleMobileMenuClose: (ReactEvent, String) => Callback = (_, _) => t.modState(_.handleMobileMenuClose) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -66,75 +65,74 @@ object PrimarySearchAppBar extends ScalaCssReactImplicits { val ariaOwns = if (isMenuOpen) "material-appbar" else "" - def renderMenu() = { - MuiMenu( - anchorEl = state.anchorEl.orUndefined, - anchorOrigin = Origin(vertical = "top", horizontal = "right"), - transformOrigin = Origin(vertical = "top", horizontal = "right"), - open = isMenuOpen, - onClose = onCloseProfile - )( - MuiMenuItem()(onClick --> handleProfileMenuClose, - "Profile" + def renderMenu() = MuiMenu( + anchorEl = state.anchorEl.orUndefined, + anchorOrigin = Origin(vertical = "top", horizontal = "right"), + transformOrigin = Origin(vertical = "top", horizontal = "right"), + open = isMenuOpen, + onClose = onCloseProfile + )( + MuiMenuItem()(onClick --> handleProfileMenuClose, "Profile"), + MuiMenuItem()(onClick --> handleProfileMenuClose, "My account") + ) + + def renderMobileMenu() = MuiMenu( + anchorEl = state.mobileMoreAnchorEl.orUndefined, + anchorOrigin = Origin(vertical = "top", horizontal = "right"), + transformOrigin = Origin(vertical = "top", horizontal = "right"), + open = isMobileMenuOpen, + onClose = handleMobileMenuClose + )( + MuiMenuItem()( + MuiIconButton(color = MuiIconButton.Color.inherit)( + MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.secondary)( + MuiIcons(MuiIconsModule.Mail)() + ) ), - MuiMenuItem()(onClick --> handleProfileMenuClose, - "My account" - ) - ) - } - - def renderMobileMenu() = { - MuiMenu( - anchorEl = state.mobileMoreAnchorEl.orUndefined, - anchorOrigin = Origin(vertical = "top", horizontal = "right"), - transformOrigin = Origin(vertical = "top", horizontal = "right"), - open = isMobileMenuOpen, - onClose = handleMobileMenuClose - )( - MuiMenuItem()( - MuiIconButton(color = MuiIconButton.Color.inherit)( - MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.secondary)( - MuiIcons(MuiIconsModule.Mail)() - ) - ), - p("Messages") + p("Messages") + ), + MuiMenuItem()( + MuiIconButton(color = MuiIconButton.Color.inherit)( + MuiBadge(badgeContent = VdomNode(11), color = MuiBadge.Color.secondary)( + MuiIcons(MuiIconsModule.Notifications)() + ) ), - MuiMenuItem()( - MuiIconButton(color = MuiIconButton.Color.inherit)( - MuiBadge(badgeContent = VdomNode(11), color = MuiBadge.Color.secondary)( - MuiIcons(MuiIconsModule.Notifications)() - ) - ), - p("Notifications") + p("Notifications") + ), + MuiMenuItem()( + onClick ==> handleProfileMenuOpen, + MuiIconButton(color = MuiIconButton.Color.inherit)( + MuiIcons(MuiIconsModule.AccountCircle)() ), - MuiMenuItem()(onClick ==> handleProfileMenuOpen, - MuiIconButton(color = MuiIconButton.Color.inherit)( - MuiIcons(MuiIconsModule.AccountCircle)() - ), - p("Profile") - ) + p("Profile") ) - } + ) div( ComponentContainer("App Bar with a primary search field")( - div(css.root, + div( + css.root, MuiAppBar(position = MuiAppBar.Position.static)( MuiToolbar()( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.common.menuButton, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.common.menuButton, aria.label := "Open drawer", Attr("edge") := "start", MuiIcons(MuiIconsModule.Menu)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit, noWrap = true)(css.title, - "Material-UI" - ), - div(css.search, + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit, + noWrap = true + )(css.title, "Material-UI"), + div( + css.search, div(css.searchIcon, MuiIcons(MuiIconsModule.Search)()), MuiInputBase(classes = inputBaseClasses)(placeholder := "Search…") ), div(css.common.flexGrowOne), - div(css.sectionDesktop, + div( + css.sectionDesktop, MuiIconButton(color = MuiIconButton.Color.inherit)( MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.secondary)( MuiIcons(MuiIconsModule.Mail)() @@ -153,7 +151,8 @@ object PrimarySearchAppBar extends ScalaCssReactImplicits { MuiIcons(MuiIconsModule.AccountCircle)() ) ), - div(css.sectionMobile, + div( + css.sectionMobile, MuiIconButton(color = MuiIconButton.Color.inherit)( aria.haspopup.`true`, onClick ==> handleMobileMenuOpen, @@ -168,6 +167,7 @@ object PrimarySearchAppBar extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("PrimarySearchAppBar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/SearchAppBar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/SearchAppBar.scala index a288a2c2..f3bf1fe0 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/SearchAppBar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/SearchAppBar.scala @@ -17,6 +17,7 @@ object SearchAppBar extends ScalaCssReactImplicits { case class Props(style: SearchAppBarStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -27,18 +28,23 @@ object SearchAppBar extends ScalaCssReactImplicits { div( ComponentContainer("App Bar with search field")( - div(css.root, + div( + css.root, MuiAppBar(position = MuiAppBar.Position.static)( MuiToolbar()( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.common.menuButton, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.common.menuButton, aria.label := "Open drawer", MuiIcons(MuiIconsModule.Menu)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit, noWrap = true)(css.title, - "Material-UI" - ), + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit, + noWrap = true + )(css.title, "Material-UI"), div(css.common.flexGrowOne), - div(css.search, + div( + css.search, div(css.searchIcon, MuiIcons(MuiIconsModule.Search)()), MuiInputBase(classes = inputBaseClasses)(placeholder := "Search…") ) @@ -48,6 +54,7 @@ object SearchAppBar extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SearchAppBar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/SimpleAppBar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/SimpleAppBar.scala index 31731249..97dd51e8 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/SimpleAppBar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/AppBar/SimpleAppBar.scala @@ -12,15 +12,23 @@ object SimpleAppBar extends ScalaCssReactImplicits { case class Props(style: CommonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Simple App Bar")( - div(css.flexGrowOne, - MuiAppBar(position = MuiAppBar.Position.static, color = MuiAppBar.Color.default)( + div( + css.flexGrowOne, + MuiAppBar( + position = MuiAppBar.Position.static, + color = MuiAppBar.Color.default + )( MuiToolbar()( - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit)( + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit + )( "Photos" ) ) @@ -29,6 +37,7 @@ object SimpleAppBar extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleAppBar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/IconAvatars.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/IconAvatars.scala index 3f24f520..fa2c3d4f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/IconAvatars.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/IconAvatars.scala @@ -13,25 +13,25 @@ object IconAvatars extends ScalaCssReactImplicits { case class Props(style: AvatarsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Icon avatars")( - MuiGrid(justify = MuiGrid.Justify.center, alignItems = MuiGrid.AlignItems.center, container = true)( - MuiAvatar()(css.avatar, - MuiIcons(MuiIconsModule.Folder)() - ), - MuiAvatar()(css.pinkAvatar, - MuiIcons(MuiIconsModule.Pageview)() - ), - MuiAvatar()(css.greenAvatar, - MuiIcons(MuiIconsModule.Assignment)() - ) + MuiGrid( + justify = MuiGrid.Justify.center, + alignItems = MuiGrid.AlignItems.center, + container = true + )( + MuiAvatar()(css.avatar, MuiIcons(MuiIconsModule.Folder)()), + MuiAvatar()(css.pinkAvatar, MuiIcons(MuiIconsModule.Pageview)()), + MuiAvatar()(css.greenAvatar, MuiIcons(MuiIconsModule.Assignment)()) ) ) ) } + } private val component = ScalaComponent.builder[Props]("IconAvatars") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/ImageAvatars.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/ImageAvatars.scala index 91c4fd67..34c521d8 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/ImageAvatars.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/ImageAvatars.scala @@ -12,18 +12,32 @@ object ImageAvatars extends ScalaCssReactImplicits { case class Props(style: AvatarsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Image avatars")( - MuiGrid(justify = MuiGrid.Justify.center, alignItems = MuiGrid.AlignItems.center, container = true)( - MuiAvatar()(css.avatar, alt := "Remy Sharp", src := "/static/images/avatar/1.jpg"), - MuiAvatar()(css.bigAvatar, alt := "Remy Sharp", src := "/static/images/avatar/1.jpg") + MuiGrid( + justify = MuiGrid.Justify.center, + alignItems = MuiGrid.AlignItems.center, + container = true + )( + MuiAvatar()( + css.avatar, + alt := "Remy Sharp", + src := "/static/images/avatar/1.jpg" + ), + MuiAvatar()( + css.bigAvatar, + alt := "Remy Sharp", + src := "/static/images/avatar/1.jpg" + ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("ImageAvatars") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/LetterAvatars.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/LetterAvatars.scala index 9043b72c..798a98fe 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/LetterAvatars.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Avatar/LetterAvatars.scala @@ -12,12 +12,17 @@ object LetterAvatars extends ScalaCssReactImplicits { case class Props(style: AvatarsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Letter avatars")( - MuiGrid(justify = MuiGrid.Justify.center, alignItems = MuiGrid.AlignItems.center, container = true)( + MuiGrid( + justify = MuiGrid.Justify.center, + alignItems = MuiGrid.AlignItems.center, + container = true + )( MuiAvatar()(css.avatar, "H"), MuiAvatar()(css.orangeAvatar, "N"), MuiAvatar()(css.purpleAvatar, "OP") @@ -25,6 +30,7 @@ object LetterAvatars extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("LetterAvatars") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/BadgeMax.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/BadgeMax.scala index 396ad4f3..e21fd489 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/BadgeMax.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/BadgeMax.scala @@ -13,25 +13,31 @@ object BadgeMax extends ScalaCssReactImplicits { case class Props(style: BadgeMaxStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Maximum Value")( React.Fragment( - MuiBadge(badgeContent = VdomNode(99), color = MuiBadge.Color.primary)(css.badgeMargin, + MuiBadge(badgeContent = VdomNode(99), color = MuiBadge.Color.primary)( + css.badgeMargin, MuiIcons(MuiIconsModule.Mail)() ), - MuiBadge(badgeContent = VdomNode(100), color = MuiBadge.Color.primary)(css.badgeMargin, + MuiBadge(badgeContent = VdomNode(100), color = MuiBadge.Color.primary)( + css.badgeMargin, MuiIcons(MuiIconsModule.Mail)() ), - MuiBadge(badgeContent = VdomNode(1000), max = 999, color = MuiBadge.Color.primary)(css.badgeMargin, - MuiIcons(MuiIconsModule.Mail)() - ) + MuiBadge( + badgeContent = VdomNode(1000), + max = 999, + color = MuiBadge.Color.primary + )(css.badgeMargin, MuiIcons(MuiIconsModule.Mail)()) ) ) ) } + } private val component = ScalaComponent.builder[Props]("BadgeMax") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/BadgeVisibility.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/BadgeVisibility.scala index ba8981a9..7a417c43 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/BadgeVisibility.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/BadgeVisibility.scala @@ -24,44 +24,47 @@ object BadgeVisibility extends ScalaCssReactImplicits { div( ComponentContainer("Badge visibility")( - div(css.root, - div(css.row, + div( + css.root, + div( + css.row, MuiBadge( badgeContent = VdomNode(4), invisible = state.invisible, color = MuiBadge.Color.secondary - )(css.badgeMargin, - MuiIcons(MuiIconsModule.Mail)() - ), + )(css.badgeMargin, MuiIcons(MuiIconsModule.Mail)()), MuiBadge( variant = MuiBadge.Variant.dot, invisible = state.invisible, color = MuiBadge.Color.secondary - )(css.badgeMargin, - MuiIcons(MuiIconsModule.Mail)() - ) + )(css.badgeMargin, MuiIcons(MuiIconsModule.Mail)()) ), MuiFormGroup(row = true)( MuiFormControlLabel( control = MuiSwitch(checked = !state.invisible, color = MuiSwitch.Color.primary)( - onChange --> handleBadgeVisibility, + onChange --> handleBadgeVisibility ).rawElement, label = VdomNode("Show Badge") ) ), MuiDivider()(css.divider), - div(css.row, - MuiBadge(badgeContent = VdomNode(0), color = MuiBadge.Color.secondary)(css.badgeMargin, + div( + css.row, + MuiBadge(badgeContent = VdomNode(0), color = MuiBadge.Color.secondary)( + css.badgeMargin, MuiIcons(MuiIconsModule.Mail)() ), - MuiBadge(badgeContent = VdomNode(0), showZero = true, color = MuiBadge.Color.secondary)(css.badgeMargin, - MuiIcons(MuiIconsModule.Mail)() - ) + MuiBadge( + badgeContent = VdomNode(0), + showZero = true, + color = MuiBadge.Color.secondary + )(css.badgeMargin, MuiIcons(MuiIconsModule.Mail)()) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("BadgeVisibility") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/CustomizedBadge.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/CustomizedBadge.scala index b7b8607c..fa70a704 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/CustomizedBadge.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/CustomizedBadge.scala @@ -14,6 +14,7 @@ object CustomizedBadge extends ScalaCssReactImplicits { case class Props(style: CustomizedBadgeStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -26,7 +27,11 @@ object CustomizedBadge extends ScalaCssReactImplicits { div( MuiIconButton()( aria.label := "Cart", - MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.primary, classes = badgeClasses)( + MuiBadge( + badgeContent = VdomNode(4), + color = MuiBadge.Color.primary, + classes = badgeClasses + )( MuiIcons(MuiIconsModule.Mail)() ) ) @@ -34,6 +39,7 @@ object CustomizedBadge extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedBadge") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/DotBadge.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/DotBadge.scala index 03dee458..b8355441 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/DotBadge.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/DotBadge.scala @@ -13,6 +13,7 @@ object DotBadge extends ScalaCssReactImplicits { case class Props(style: DotBadgeStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -20,20 +21,24 @@ object DotBadge extends ScalaCssReactImplicits { ComponentContainer("Dot Badge")( div( div( - MuiBadge(variant = MuiBadge.Variant.dot, color = MuiBadge.Color.primary)(css.badgeMargin, + MuiBadge(variant = MuiBadge.Variant.dot, color = MuiBadge.Color.primary)( + css.badgeMargin, MuiIcons(MuiIconsModule.Mail)() ), - MuiBadge(variant = MuiBadge.Variant.dot, color = MuiBadge.Color.secondary)(css.badgeMargin, + MuiBadge(variant = MuiBadge.Variant.dot, color = MuiBadge.Color.secondary)( + css.badgeMargin, MuiIcons(MuiIconsModule.Mail)() ) ), - MuiBadge(variant = MuiBadge.Variant.dot, color = MuiBadge.Color.primary)(css.badgeMargin, + MuiBadge(variant = MuiBadge.Variant.dot, color = MuiBadge.Color.primary)( + css.badgeMargin, MuiTypography()("Typography") ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("DotBadge") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/SimpleBadge.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/SimpleBadge.scala index c56f911a..fef69dd2 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/SimpleBadge.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Badges/SimpleBadge.scala @@ -7,40 +7,51 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.Badges.{DefaultSimpleBadgeStyle, SimpleBadgeStyle} import io.kinoplan.demo.utils.Helpers.StringExtended -import io.kinoplan.scalajs.react.material.ui.core.{MuiAppBar, MuiBadge, MuiButton, MuiIconButton, MuiTab, MuiTabs, MuiTypography} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiAppBar, + MuiBadge, + MuiButton, + MuiIconButton, + MuiTab, + MuiTabs, + MuiTypography +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object SimpleBadge extends ScalaCssReactImplicits { case class Props(style: SimpleBadgeStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style val tabLabel = VdomNode( - MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.secondary)(css.badgePadding, - "Item One" - ).rawNode + MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.secondary)(css.badgePadding, "Item One").rawNode ) div( ComponentContainer("Simple Badges")( div( div( - MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.primary)(css.badgeMargin, + MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.primary)( + css.badgeMargin, MuiIcons(MuiIconsModule.Mail)() ), - MuiBadge(badgeContent = VdomNode(10), color = MuiBadge.Color.secondary)(css.badgeMargin, + MuiBadge(badgeContent = VdomNode(10), color = MuiBadge.Color.secondary)( + css.badgeMargin, MuiIcons(MuiIconsModule.Mail)() ), - MuiIconButton()(css.badgeMargin, + MuiIconButton()( + css.badgeMargin, aria.label := "4 pending messages", MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.primary)( MuiIcons(MuiIconsModule.Mail)() ) ) ), - MuiAppBar(position = MuiAppBar.Position.static)(css.badgeMargin, + MuiAppBar(position = MuiAppBar.Position.static)( + css.badgeMargin, MuiTabs()( value := 0, MuiTab(label = tabLabel), @@ -48,18 +59,19 @@ object SimpleBadge extends ScalaCssReactImplicits { MuiTab(label = "Item Three".toVdom) ) ), - MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.primary)(css.badgeMargin, - MuiTypography()(css.badgePadding, - "Typography" - ) + MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.primary)( + css.badgeMargin, + MuiTypography()(css.badgePadding, "Typography") ), - MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.primary)(css.badgeMargin, + MuiBadge(badgeContent = VdomNode(4), color = MuiBadge.Color.primary)( + css.badgeMargin, MuiButton(variant = MuiButton.Variant.contained)("Button") ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleBadge") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/BottomNavigation/LabelBottomNavigation.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/BottomNavigation/LabelBottomNavigation.scala index 798942a2..6d5b1ba5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/BottomNavigation/LabelBottomNavigation.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/BottomNavigation/LabelBottomNavigation.scala @@ -19,9 +19,9 @@ object LabelBottomNavigation extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -29,15 +29,25 @@ object LabelBottomNavigation extends ScalaCssReactImplicits { div( ComponentContainer("Bottom Navigation with no label")( div( - MuiBottomNavigation(onChange = handleChange)(css.root, + MuiBottomNavigation(onChange = handleChange)( + css.root, value := state.value, - MuiBottomNavigationAction(label = VdomNode("Recents"), icon = MuiIcons(MuiIconsModule.Restore)()())( + MuiBottomNavigationAction( + label = VdomNode("Recents"), + icon = MuiIcons(MuiIconsModule.Restore)()() + )( value := "recents" ), - MuiBottomNavigationAction(label = VdomNode("Favorites"), icon = MuiIcons(MuiIconsModule.Favorite)()())( + MuiBottomNavigationAction( + label = VdomNode("Favorites"), + icon = MuiIcons(MuiIconsModule.Favorite)()() + )( value := "favorites" ), - MuiBottomNavigationAction(label = VdomNode("Nearby"), icon = MuiIcons(MuiIconsModule.LocationOn)()())( + MuiBottomNavigationAction( + label = VdomNode("Nearby"), + icon = MuiIcons(MuiIconsModule.LocationOn)()() + )( value := "nearby" ), MuiBottomNavigationAction(label = VdomNode("Folder"), icon = MuiIcon()("folder"))( @@ -48,6 +58,7 @@ object LabelBottomNavigation extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("LabelBottomNavigation") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/BottomNavigation/SimpleBottomNavigation.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/BottomNavigation/SimpleBottomNavigation.scala index b4214631..9a259790 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/BottomNavigation/SimpleBottomNavigation.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/BottomNavigation/SimpleBottomNavigation.scala @@ -19,9 +19,9 @@ object SimpleBottomNavigation extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -32,16 +32,27 @@ object SimpleBottomNavigation extends ScalaCssReactImplicits { MuiBottomNavigation( showLabels = true, onChange = handleChange - )(css.root, + )( + css.root, value := state.value, - MuiBottomNavigationAction(label = VdomNode("Recents"), icon = MuiIcons(MuiIconsModule.Restore)()()), - MuiBottomNavigationAction(label = VdomNode("Favorites"), icon = MuiIcons(MuiIconsModule.Favorite)()()), - MuiBottomNavigationAction(label = VdomNode("Nearby"), icon = MuiIcons(MuiIconsModule.LocationOn)()()) + MuiBottomNavigationAction( + label = VdomNode("Recents"), + icon = MuiIcons(MuiIconsModule.Restore)()() + ), + MuiBottomNavigationAction( + label = VdomNode("Favorites"), + icon = MuiIcons(MuiIconsModule.Favorite)()() + ), + MuiBottomNavigationAction( + label = VdomNode("Nearby"), + icon = MuiIcons(MuiIconsModule.LocationOn)()() + ) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleBottomNavigation") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ButtonBases.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ButtonBases.scala index 57afe878..039b145b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ButtonBases.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ButtonBases.scala @@ -16,36 +16,42 @@ object ButtonBases extends ScalaCssReactImplicits { case class Props(style: ButtonBasesStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Complex Buttons")( - div(css.root, - Image.default.zipWithIndex.toVdomArray { case (image, index) => - MuiButtonBase( - focusRipple = true, - focusVisibleClassName = css.focusVisible.htmlClass - )(css.image, style := js.Dictionary("width" -> image.width), - Attr("key") := index, - span(css.imageSrc, style := js.Dictionary("backgroundImage" -> s"url(${image.url})")), - span(css.imageBackdrop), - span(css.imageButton, - MuiTypography( - component = "span", - variant = MuiTypography.Variant.subtitle1, - color = MuiTypography.Color.inherit - )(css.imageTitle, - image.title, - span(css.imageMarked) + div( + css.root, + Image.default.zipWithIndex.toVdomArray { + case (image, index) => MuiButtonBase( + focusRipple = true, + focusVisibleClassName = css.focusVisible.htmlClass + )( + css.image, + style := js.Dictionary("width" -> image.width), + Attr("key") := index, + span( + css.imageSrc, + style := js.Dictionary("backgroundImage" -> s"url(${image.url})") + ), + span(css.imageBackdrop), + span( + css.imageButton, + MuiTypography( + component = "span", + variant = MuiTypography.Variant.subtitle1, + color = MuiTypography.Color.inherit + )(css.imageTitle, image.title, span(css.imageMarked)) ) ) - ) } ) ) ) } + } private val component = ScalaComponent.builder[Props]("ButtonBases") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ButtonSizes.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ButtonSizes.scala index 00b490b0..0b2387db 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ButtonSizes.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ButtonSizes.scala @@ -13,6 +13,7 @@ object ButtonSizes extends ScalaCssReactImplicits { case class Props(style: CommonButtonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -20,72 +21,57 @@ object ButtonSizes extends ScalaCssReactImplicits { ComponentContainer("Sizes")( div( div( - MuiButton(size = MuiButton.Size.small)(css.marginButton, - "Small" - ), - MuiButton(size = MuiButton.Size.medium)(css.marginButton, - "Medium" - ), - MuiButton(size = MuiButton.Size.large)(css.marginButton, - "Large" - ) + MuiButton(size = MuiButton.Size.small)(css.marginButton, "Small"), + MuiButton(size = MuiButton.Size.medium)(css.marginButton, "Medium"), + MuiButton(size = MuiButton.Size.large)(css.marginButton, "Large") ), div( MuiButton( variant = MuiButton.Variant.outlined, size = MuiButton.Size.small, color = MuiButton.Color.primary - )(css.marginButton, - "Small" - ), + )(css.marginButton, "Small"), MuiButton( variant = MuiButton.Variant.outlined, size = MuiButton.Size.medium, color = MuiButton.Color.primary - )(css.marginButton, - "Medium" - ), + )(css.marginButton, "Medium"), MuiButton( variant = MuiButton.Variant.outlined, size = MuiButton.Size.large, color = MuiButton.Color.primary - )(css.marginButton, - "Large" - ) + )(css.marginButton, "Large") ), div( MuiButton( variant = MuiButton.Variant.contained, size = MuiButton.Size.small, color = MuiButton.Color.primary - )(css.marginButton, - "Small" - ), + )(css.marginButton, "Small"), MuiButton( variant = MuiButton.Variant.contained, size = MuiButton.Size.medium, color = MuiButton.Color.primary - )(css.marginButton, - "Medium" - ), + )(css.marginButton, "Medium"), MuiButton( variant = MuiButton.Variant.contained, size = MuiButton.Size.large, color = MuiButton.Color.primary - )(css.marginButton, - "Large" - ) + )(css.marginButton, "Large") ), div( - MuiFab(size = MuiFab.Size.small, color = MuiFab.Color.secondary)(css.marginButton, + MuiFab(size = MuiFab.Size.small, color = MuiFab.Color.secondary)( + css.marginButton, aria.label := "Add", MuiIcons(MuiIconsModule.Add)() ), - MuiFab(size = MuiFab.Size.medium, color = MuiFab.Color.secondary)(css.marginButton, + MuiFab(size = MuiFab.Size.medium, color = MuiFab.Color.secondary)( + css.marginButton, aria.label := "Add", MuiIcons(MuiIconsModule.Add)() ), - MuiFab(color = MuiFab.Color.secondary)(css.marginButton, + MuiFab(color = MuiFab.Color.secondary)( + css.marginButton, aria.label := "Add", MuiIcons(MuiIconsModule.Add)() ) @@ -95,7 +81,8 @@ object ButtonSizes extends ScalaCssReactImplicits { variant = MuiFab.Variant.extended, size = MuiFab.Size.small, color = MuiFab.Color.primary - )(css.marginButton, + )( + css.marginButton, aria.label := "Add", MuiIcons(MuiIconsModule.Navigation)()(css.extendedIcon), "Extended" @@ -104,27 +91,32 @@ object ButtonSizes extends ScalaCssReactImplicits { variant = MuiFab.Variant.extended, size = MuiFab.Size.medium, color = MuiFab.Color.primary - )(css.marginButton, + )( + css.marginButton, aria.label := "Add", MuiIcons(MuiIconsModule.Navigation)()(css.extendedIcon), "Extended" ), - MuiFab(variant = MuiFab.Variant.extended, color = MuiFab.Color.primary)(css.marginButton, + MuiFab(variant = MuiFab.Variant.extended, color = MuiFab.Color.primary)( + css.marginButton, aria.label := "Add", MuiIcons(MuiIconsModule.Navigation)()(css.extendedIcon), "Extended" ) ), div( - MuiIconButton()(css.marginButton, + MuiIconButton()( + css.marginButton, aria.label := "Delete", MuiIcons(MuiIconsModule.Delete)(fontSize = MuiIcons.FontSize.small) ), - MuiIconButton()(css.marginButton, + MuiIconButton()( + css.marginButton, aria.label := "Delete", MuiIcons(MuiIconsModule.Delete)() ), - MuiIconButton()(css.marginButton, + MuiIconButton()( + css.marginButton, aria.label := "Delete", MuiIcons(MuiIconsModule.Delete)(fontSize = MuiIcons.FontSize.large) ) @@ -133,6 +125,7 @@ object ButtonSizes extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ButtonSizes") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ContainedButtons.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ContainedButtons.scala index 1da807c0..9b10bdd8 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ContainedButtons.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/ContainedButtons.scala @@ -12,39 +12,41 @@ object ContainedButtons extends ScalaCssReactImplicits { case class Props(style: CommonButtonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Contained Buttons")( div( - MuiButton(variant = MuiButton.Variant.contained)(css.marginButton, - "Default" - ), - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.primary)(css.marginButton, - "Primary" - ), - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.secondary)(css.marginButton, - "Secondary" + MuiButton(variant = MuiButton.Variant.contained)(css.marginButton, "Default"), + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.primary + )(css.marginButton, "Primary"), + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.secondary + )(css.marginButton, "Secondary"), + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.secondary + )(css.marginButton, disabled := true, "Disabled"), + MuiButton(variant = MuiButton.Variant.contained)(css.marginButton, href := "#contained-buttons", "Link"), + input.file( + css.inputButton, + accept := "image/*", + id := "contained-button-file", + multiple := true ), - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.secondary)(css.marginButton, - disabled := true, - "Disabled" - ), - MuiButton(variant = MuiButton.Variant.contained)(css.marginButton, - href := "#contained-buttons", - "Link" - ), - input.file(css.inputButton, accept := "image/*", id := "contained-button-file", multiple := true), label(htmlFor := "contained-button-file")( - MuiButton(variant = MuiButton.Variant.contained, component = "span")(css.marginButton, - "Upload" - ) + MuiButton(variant = MuiButton.Variant.contained, component = "span")(css.marginButton, "Upload") ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("ContainedButtons") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/CustomizedButtons.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/CustomizedButtons.scala index 54db7541..a7c490ab 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/CustomizedButtons.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/CustomizedButtons.scala @@ -13,35 +13,51 @@ object CustomizedButtons extends ScalaCssReactImplicits { case class Props(style: CustomizedButtonsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style - val theme = createMuiTheme(options = ThemeOptions( - typography = TypographyOptions(useNextVariants = true), - palette = PaletteOptions(primary = colors.green) - )) + val theme = createMuiTheme( + options = ThemeOptions( + typography = TypographyOptions(useNextVariants = true), + palette = PaletteOptions(primary = colors.green) + ) + ) div( ComponentContainer("Customized Buttons")( div( - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.primary)( - css.common.marginButton, css.cssRoot, + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.primary + )( + css.common.marginButton, + css.cssRoot, "Custom CSS" ), MuiThemeProvider(theme = theme)( - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.primary)( + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.primary + )( css.common.marginButton, "MuiThemeProvider" ) ), - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.primary, disableRipple = true)( - css.common.marginButton, css.bootstrapRoot, + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.primary, + disableRipple = true + )( + css.common.marginButton, + css.bootstrapRoot, "Bootstrap" ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedButtons") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/FloatingActionButtonZoom.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/FloatingActionButtonZoom.scala index 401414fa..e2330858 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/FloatingActionButtonZoom.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/FloatingActionButtonZoom.scala @@ -25,21 +25,28 @@ object FloatingActionButtonZoom extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } - def handleChangeIndex: (Double, Double) => Callback = (index, _) => { + def handleChangeIndex: (Double, Double) => Callback = (index, _) => t.modState(_.handleChange(index)) - } def render(props: Props, state: State): VdomElement = { val css = props.style val fabs = List( Fab(MuiFab.Color.inherit, css.fab, MuiIcons(MuiIconsModule.Add)()), - Fab(MuiFab.Color.secondary, css.fab, MuiIcons(MuiIconsModule.Edit)()), - Fab(MuiFab.Color.inherit, css.fabAndFabGreen, MuiIcons(MuiIconsModule.KeyboardArrowUp)()) + Fab( + MuiFab.Color.secondary, + css.fab, + MuiIcons(MuiIconsModule.Edit)() + ), + Fab( + MuiFab.Color.inherit, + css.fabAndFabGreen, + MuiIcons(MuiIconsModule.KeyboardArrowUp)() + ) ) val enter = css.theme.transitions.duration.enteringScreen @@ -47,16 +54,19 @@ object FloatingActionButtonZoom extends ScalaCssReactImplicits { val transitionDuration = js.Dynamic.literal(enter = enter, exit = exit) - val swipeableViewsAxis = if (css.theme.direction == Direction.rtl) { - AxisType.`x-reverse` - } else { - AxisType.x - } + val swipeableViewsAxis = + if (css.theme.direction == Direction.rtl) AxisType.`x-reverse` + else AxisType.x div( ComponentContainer("Floating Action Button Zoom")( - div(css.root, css.rootPaper(Layout.isPaletteLight), - MuiAppBar(position = MuiAppBar.Position.static, color = MuiAppBar.Color.default)( + div( + css.root, + css.rootPaper(Layout.isPaletteLight), + MuiAppBar( + position = MuiAppBar.Position.static, + color = MuiAppBar.Color.default + )( MuiTabs( onChange = handleChange, indicatorColor = MuiTabs.IndicatorColor.primary, @@ -80,7 +90,10 @@ object FloatingActionButtonZoom extends ScalaCssReactImplicits { TabContainer()("Item Three") ), fabs.zipWithIndex.toVdomArray { case (fab, index) => - MuiZoom(in = state.value == index.asInstanceOf[js.Any], timeout = transitionDuration)( + MuiZoom( + in = state.value == index.asInstanceOf[js.Any], + timeout = transitionDuration + )( style := js.Dictionary( "transitionDelay" -> s"${if (state.value == index.asInstanceOf[js.Any]) exit else 0}ms" ), @@ -92,6 +105,7 @@ object FloatingActionButtonZoom extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("FloatingActionButtonZoom") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/FloatingActionButtons.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/FloatingActionButtons.scala index 55a092ad..a4fc21af 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/FloatingActionButtons.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/FloatingActionButtons.scala @@ -13,26 +13,27 @@ object FloatingActionButtons extends ScalaCssReactImplicits { case class Props(style: CommonButtonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Floating Action Buttons")( div( - MuiFab(color = MuiFab.Color.primary)(css.marginButton, + MuiFab(color = MuiFab.Color.primary)( + css.marginButton, aria.label := "Add", MuiIcons(MuiIconsModule.Add)() ), - MuiFab(color = MuiFab.Color.secondary)(css.marginButton, - aria.label := "Edit", - MuiIcon()("edit_icon") - ), - MuiFab(variant = MuiFab.Variant.extended)(css.marginButton, + MuiFab(color = MuiFab.Color.secondary)(css.marginButton, aria.label := "Edit", MuiIcon()("edit_icon")), + MuiFab(variant = MuiFab.Variant.extended)( + css.marginButton, aria.label := "Delete", MuiIcons(MuiIconsModule.Navigation)()(css.extendedIcon), "Extended" ), - MuiFab()(css.marginButton, + MuiFab()( + css.marginButton, disabled := true, aria.label := "Delete", MuiIcons(MuiIconsModule.Delete)() @@ -41,6 +42,7 @@ object FloatingActionButtons extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("FloatingActionButtons") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/IconButtons.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/IconButtons.scala index fc065359..a3a8567e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/IconButtons.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/IconButtons.scala @@ -13,32 +13,38 @@ object IconButtons extends ScalaCssReactImplicits { case class Props(style: CommonButtonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Icon Buttons")( div( - MuiIconButton()(css.marginButton, + MuiIconButton()( + css.marginButton, aria.label := "Delete", MuiIcons(MuiIconsModule.Delete)() ), - MuiIconButton(color = MuiIconButton.Color.primary)(css.marginButton, + MuiIconButton(color = MuiIconButton.Color.primary)( + css.marginButton, disabled := true, aria.label := "Delete", MuiIcons(MuiIconsModule.Delete)() ), - MuiIconButton(color = MuiIconButton.Color.secondary)(css.marginButton, + MuiIconButton(color = MuiIconButton.Color.secondary)( + css.marginButton, aria.label := "Add an alarm", MuiIcon()("alarm") ), - MuiIconButton(color = MuiIconButton.Color.primary)(css.marginButton, + MuiIconButton(color = MuiIconButton.Color.primary)( + css.marginButton, aria.label := "Add to shopping cart", MuiIcons(MuiIconsModule.AddShoppingCart)() ), input.file(css.inputButton, accept := "image/*", id := "icon-button-file"), label(htmlFor := "icon-button-file")( - MuiIconButton(color = MuiIconButton.Color.primary, component = "span")(css.marginButton, + MuiIconButton(color = MuiIconButton.Color.primary, component = "span")( + css.marginButton, MuiIcons(MuiIconsModule.PhotoCamera)() ) ) @@ -46,6 +52,7 @@ object IconButtons extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("IconButtons") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/IconLabelButtons.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/IconLabelButtons.scala index d78c72c2..71818d0b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/IconLabelButtons.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/IconLabelButtons.scala @@ -13,30 +13,51 @@ object IconLabelButtons extends ScalaCssReactImplicits { case class Props(style: IconLabelButtonsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Buttons with icons and label")( div( - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.secondary)(css.common.marginButton, + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.secondary + )( + css.common.marginButton, "Delete", MuiIcons(MuiIconsModule.Delete)()(css.rightIcon) ), - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.primary)(css.common.marginButton, + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.primary + )( + css.common.marginButton, "Send", MuiIcon()(css.rightIcon, "send") ), - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.default)(css.common.marginButton, + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.default + )( + css.common.marginButton, "Upload", MuiIcons(MuiIconsModule.CloudUpload)()(css.rightIcon) ), - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.secondary)(css.common.marginButton, + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.secondary + )( + css.common.marginButton, disabled := true, MuiIcons(MuiIconsModule.KeyboardVoice)()(css.leftIcon), "Talk" ), - MuiButton(variant = MuiButton.Variant.contained, size = MuiButton.Size.small)(css.common.marginButton, + MuiButton( + variant = MuiButton.Variant.contained, + size = MuiButton.Size.small + )( + css.common.marginButton, MuiIcons(MuiIconsModule.Save)()(css.leftIcon, css.iconSmall), "Save" ) @@ -44,6 +65,7 @@ object IconLabelButtons extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("IconLabelButtons") @@ -52,4 +74,3 @@ object IconLabelButtons extends ScalaCssReactImplicits { def apply(style: IconLabelButtonsStyle = DefaultIconLabelButtonsStyle) = component(Props(style)) } - diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/OutlinedButtons.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/OutlinedButtons.scala index 943cff02..0ad9fc6a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/OutlinedButtons.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/OutlinedButtons.scala @@ -12,39 +12,38 @@ object OutlinedButtons extends ScalaCssReactImplicits { case class Props(style: CommonButtonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Outlined Buttons")( div( - MuiButton(variant = MuiButton.Variant.outlined)(css.marginButton, - "Default" - ), - MuiButton(variant = MuiButton.Variant.outlined, color = MuiButton.Color.primary)(css.marginButton, - "Primary" - ), - MuiButton(variant = MuiButton.Variant.outlined, color = MuiButton.Color.secondary)(css.marginButton, - "Secondary" + MuiButton(variant = MuiButton.Variant.outlined)(css.marginButton, "Default"), + MuiButton( + variant = MuiButton.Variant.outlined, + color = MuiButton.Color.primary + )(css.marginButton, "Primary"), + MuiButton( + variant = MuiButton.Variant.outlined, + color = MuiButton.Color.secondary + )(css.marginButton, "Secondary"), + MuiButton(variant = MuiButton.Variant.outlined)(css.marginButton, disabled := true, "Disabled"), + MuiButton(variant = MuiButton.Variant.outlined)(css.marginButton, href := "#outlined-buttons", "Link"), + input.file( + css.inputButton, + accept := "image/*", + id := "outlined-button-file", + multiple := true ), - MuiButton(variant = MuiButton.Variant.outlined)(css.marginButton, - disabled := true, - "Disabled" - ), - MuiButton(variant = MuiButton.Variant.outlined)(css.marginButton, - href := "#outlined-buttons", - "Link" - ), - input.file(css.inputButton, accept := "image/*", id := "outlined-button-file", multiple := true), label(htmlFor := "outlined-button-file")( - MuiButton(variant = MuiButton.Variant.contained, component = "span")(css.marginButton, - "Upload" - ) + MuiButton(variant = MuiButton.Variant.contained, component = "span")(css.marginButton, "Upload") ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("OutlinedButtons") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/TextButtons.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/TextButtons.scala index 01185435..5fa4154a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/TextButtons.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Buttons/TextButtons.scala @@ -12,6 +12,7 @@ object TextButtons extends ScalaCssReactImplicits { case class Props(style: CommonButtonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -23,16 +24,20 @@ object TextButtons extends ScalaCssReactImplicits { MuiButton(color = MuiButton.Color.secondary)(css.marginButton, "Secondary"), MuiButton()(css.marginButton, disabled := true, "Disabled"), MuiButton()(css.marginButton, href := "#text-buttons", "Link"), - input.file(css.inputButton, accept := "image/*", id := "text-button-file", multiple := true), + input.file( + css.inputButton, + accept := "image/*", + id := "text-button-file", + multiple := true + ), label(htmlFor := "text-button-file")( - MuiButton(component = "span")(css.marginButton, - "Upload" - ) + MuiButton(component = "span")(css.marginButton, "Upload") ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("TextButtons") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaCard.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaCard.scala index 92531cbf..80187057 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaCard.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaCard.scala @@ -12,23 +12,30 @@ object MediaCard extends ScalaCssReactImplicits { case class Props(style: MediaCardStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Media")( - MuiCard()(css.card, + MuiCard()( + css.card, MuiCardActionArea()( - MuiCardMedia(image = "/static/images/cards/contemplative-reptile.jpg")(css.media, + MuiCardMedia(image = "/static/images/cards/contemplative-reptile.jpg")( + css.media, title := "Contemplative Reptile" ), MuiCardContent()( - MuiTypography(component = "h2", variant = MuiTypography.Variant.h5, gutterBottom = true)( + MuiTypography( + component = "h2", + variant = MuiTypography.Variant.h5, + gutterBottom = true + )( "Lizard" ), MuiTypography(component = "p")( "Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging " + - "across all continents except Antarctica" + "across all continents except Antarctica" ) ) ), @@ -44,6 +51,7 @@ object MediaCard extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("MediaCard") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaCardFit.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaCardFit.scala index 2ce51921..ad59c437 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaCardFit.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaCardFit.scala @@ -12,20 +12,30 @@ object MediaCardFit extends ScalaCssReactImplicits { case class Props(style: MediaCardStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Media fit")( - MuiCard()(css.card, + MuiCard()( + css.card, MuiCardActionArea()( - MuiCardMedia(component = "img", image = "/static/images/cards/contemplative-reptile.jpg")(css.mediaFit, + MuiCardMedia( + component = "img", + image = "/static/images/cards/contemplative-reptile.jpg" + )( + css.mediaFit, alt := "Contemplative Reptile", height := "140", title := "Contemplative Reptile" ), MuiCardContent()( - MuiTypography(component = "h2", variant = MuiTypography.Variant.h5, gutterBottom = true)( + MuiTypography( + component = "h2", + variant = MuiTypography.Variant.h5, + gutterBottom = true + )( "Lizard" ), MuiTypography(component = "p")( @@ -46,6 +56,7 @@ object MediaCardFit extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("MediaCardFit") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaControlCard.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaControlCard.scala index b548cfe0..44aabc9b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaControlCard.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/MediaControlCard.scala @@ -14,29 +14,34 @@ object MediaControlCard extends ScalaCssReactImplicits { case class Props(style: MediaControlCardStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("UI Controls")( - MuiCard()(css.card, - div(css.details, - MuiCardContent()(css.content, + MuiCard()( + css.card, + div( + css.details, + MuiCardContent()( + css.content, MuiTypography(component = "h5", variant = MuiTypography.Variant.h5)( "Live From Space" ), - MuiTypography(variant = MuiTypography.Variant.subtitle1, color = MuiTypography.Color.textSecondary)( + MuiTypography( + variant = MuiTypography.Variant.subtitle1, + color = MuiTypography.Color.textSecondary + )( "Mac Miller" ) ), - div(css.controls, + div( + css.controls, MuiIconButton()( aria.label := "Previous", - if (css.theme.direction == Direction.rtl) { - MuiIcons(MuiIconsModule.SkipNext)() - } else { - MuiIcons(MuiIconsModule.SkipPrevious)() - } + if (css.theme.direction == Direction.rtl) MuiIcons(MuiIconsModule.SkipNext)() + else MuiIcons(MuiIconsModule.SkipPrevious)() ), MuiIconButton()( aria.label := "Play/pause", @@ -44,21 +49,20 @@ object MediaControlCard extends ScalaCssReactImplicits { ), MuiIconButton()( aria.label := "Next", - if (css.theme.direction == Direction.rtl) { - MuiIcons(MuiIconsModule.SkipPrevious)() - } else { - MuiIcons(MuiIconsModule.SkipNext)() - } + if (css.theme.direction == Direction.rtl) MuiIcons(MuiIconsModule.SkipPrevious)() + else MuiIcons(MuiIconsModule.SkipNext)() ) ) ), - MuiCardMedia(image = "/static/images/cards/live-from-space.jpg")(css.cover, + MuiCardMedia(image = "/static/images/cards/live-from-space.jpg")( + css.cover, title := "Live from space album cover" ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("MediaControlCard") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/RecipeReviewCard.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/RecipeReviewCard.scala index fbb69011..7182bb41 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/RecipeReviewCard.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/RecipeReviewCard.scala @@ -26,28 +26,25 @@ object RecipeReviewCard extends ScalaCssReactImplicits { div( ComponentContainer("Complex Interaction")( - MuiCard()(css.card, + MuiCard()( + css.card, MuiCardHeader( - avatar = VdomNode(MuiAvatar()(css.avatar, - aria.label := "Recipe", - "R" - ).rawNode), + avatar = VdomNode(MuiAvatar()(css.avatar, aria.label := "Recipe", "R").rawNode), action = MuiIconButton()( MuiIcons(MuiIconsModule.MoreVert)() ), title = VdomNode("Shrimp and Chorizo Paella"), subheader = VdomNode("September 14, 2016") ), - MuiCardMedia(image = "/static/images/cards/paella.jpg")(css.media, - title := "Paella dish" - ), + MuiCardMedia(image = "/static/images/cards/paella.jpg")(css.media, title := "Paella dish"), MuiCardContent()( MuiTypography(component = "p")( " This impressive paella is a perfect party dish and a fun meal to cook together with your " + - "guests. Add 1 cup of frozen peas along with the mussels, if you like." + "guests. Add 1 cup of frozen peas along with the mussels, if you like." ) ), - MuiCardActions(disableActionSpacing = true)(css.actions, + MuiCardActions(disableActionSpacing = true)( + css.actions, MuiIconButton()( aria.label := "Add to favorites", MuiIcons(MuiIconsModule.Favorite)() @@ -56,14 +53,20 @@ object RecipeReviewCard extends ScalaCssReactImplicits { aria.label := "Share", MuiIcons(MuiIconsModule.Share)() ), - MuiIconButton()(css.expand, expandOpen, + MuiIconButton()( + css.expand, + expandOpen, aria.label := "Show more", aria.expanded := state.expanded, onClick --> handleExpandClick, MuiIcons(MuiIconsModule.ExpandMore)() ) ), - MuiCollapse(in = state.expanded, timeout = MuiCollapse.Timeout.auto, unmountOnExit = true)( + MuiCollapse( + in = state.expanded, + timeout = MuiCollapse.Timeout.auto, + unmountOnExit = true + )( MuiCardContent()( MuiTypography(paragraph = true)("Method:"), MuiTypography(paragraph = true)( @@ -71,18 +74,18 @@ object RecipeReviewCard extends ScalaCssReactImplicits { ), MuiTypography(paragraph = true)( "Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high " + - "heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly " + - "browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving " + - "chicken and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, " + - "salt and pepper, and cook, stirring often until thickened and fragrant, about 10 " + - "minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil." + "heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly " + + "browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving " + + "chicken and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, " + + "salt and pepper, and cook, stirring often until thickened and fragrant, about 10 " + + "minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil." ), MuiTypography(paragraph = true)( "Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook " + - "without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat " + - "to medium-low, add reserved shrimp and mussels, tucking them down into the rice, and " + - "cook again without stirring, until mussels have opened and rice is just tender, 5 to 7 " + - "minutes more. (Discard any mussels that don’t open.)" + "without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat " + + "to medium-low, add reserved shrimp and mussels, tucking them down into the rice, and " + + "cook again without stirring, until mussels have opened and rice is just tender, 5 to 7 " + + "minutes more. (Discard any mussels that don’t open.)" ), MuiTypography()( "Set aside off of the heat to let rest for 10 minutes, and then serve." @@ -93,6 +96,7 @@ object RecipeReviewCard extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("RecipeReviewCard") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/SimpleCard.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/SimpleCard.scala index 6cbb3e63..cf39f212 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/SimpleCard.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Cards/SimpleCard.scala @@ -12,6 +12,7 @@ object SimpleCard extends ScalaCssReactImplicits { case class Props(style: SimpleCardStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -19,17 +20,20 @@ object SimpleCard extends ScalaCssReactImplicits { div( ComponentContainer("Simple Card")( - MuiCard()(css.card, + MuiCard()( + css.card, MuiCardContent()( - MuiTypography(color = MuiTypography.Color.textSecondary, gutterBottom = true)(css.title, - "Word of the Day" - ), + MuiTypography(color = MuiTypography.Color.textSecondary, gutterBottom = true)(css.title, "Word of the Day"), MuiTypography(variant = MuiTypography.Variant.h5, component = "h2")( - "be", bull, "nev", bull, "o", bull, "lent" - ), - MuiTypography(color = MuiTypography.Color.textSecondary)(css.pos, - "adjective" + "be", + bull, + "nev", + bull, + "o", + bull, + "lent" ), + MuiTypography(color = MuiTypography.Color.textSecondary)(css.pos, "adjective"), MuiTypography(component = "p")( "well meaning and kindly.", br, @@ -43,6 +47,7 @@ object SimpleCard extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleCard") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/Chips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/Chips.scala index 8881455e..17b63c0e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/Chips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/Chips.scala @@ -14,24 +14,25 @@ object Chips extends ScalaCssReactImplicits { case class Props(style: ChipsStyle) class Backend(t: BackendScope[Props, Unit]) { - def handleDelete: ReactEvent => Callback = e => { + + def handleDelete: ReactEvent => Callback = e => Callback.alert("You clicked the delete icon.") - } - def handleClick: ReactEvent => Callback = e => { + def handleClick: ReactEvent => Callback = e => Callback.alert("You clicked the Chip.") - } def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Chip")( - div(css.root, + div( + css.root, MuiChip(label = "Basic Chip".toVdom)(css.chip), - MuiChip(label = "Clickable Chip".toVdom, avatar = MuiAvatar()("MB").rawElement)(css.chip, - onClick ==> handleClick - ), + MuiChip( + label = "Clickable Chip".toVdom, + avatar = MuiAvatar()("MB").rawElement + )(css.chip, onClick ==> handleClick), MuiChip( label = "Deletable Chip".toVdom, avatar = MuiAvatar()( @@ -44,30 +45,22 @@ object Chips extends ScalaCssReactImplicits { label = "Clickable Deletable Chip".toVdom, avatar = MuiAvatar()(MuiIcons(MuiIconsModule.Face)()).rawElement, onDelete = handleDelete - )(css.chip, - onClick ==> handleClick - ), + )(css.chip, onClick ==> handleClick), MuiChip( label = "Clickable Deletable Chip".toVdom, icon = MuiIcons(MuiIconsModule.Face)()().rawElement, onDelete = handleDelete - )(css.chip, - onClick ==> handleClick - ), + )(css.chip, onClick ==> handleClick), MuiChip( label = "Custom delete icon Chip".toVdom, deleteIcon = MuiIcons(MuiIconsModule.Done)()().rawElement, onDelete = handleDelete - )(css.chip, - onClick ==> handleClick - ), + )(css.chip, onClick ==> handleClick), MuiChip( label = "Clickable Link Chip".toVdom, component = "a", clickable = true - )(css.chip, - href := "/#demos/chips/", - ), + )(css.chip, href := "/#demos/chips/"), MuiChip( label = "Primary Clickable Chip".toVdom, avatar = MuiAvatar()("MB").rawElement, @@ -105,6 +98,7 @@ object Chips extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("Chips") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/ChipsArray.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/ChipsArray.scala index ac395ce8..c9068905 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/ChipsArray.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/ChipsArray.scala @@ -21,16 +21,17 @@ object ChipsArray extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleDelete(chip: Chip): ReactEvent => Callback = e => { + + def handleDelete(chip: Chip): ReactEvent => Callback = e => Callback.alert("Why would you want to delete React?! :)").when(chip.isReact) >> t.modState(_.handleDelete(chip)) - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("Chip array")( - MuiPaper()(css.root, + MuiPaper()( + css.root, state.chips.toVdomArray { chip => val iconO = if (chip.isReact) Some(MuiIcons(MuiIconsModule.TagFaces)()().rawElement) else None @@ -38,14 +39,13 @@ object ChipsArray extends ScalaCssReactImplicits { label = VdomNode(chip.label), icon = iconO.orUndefined, onDelete = handleDelete(chip) - )(css.chip, - Attr("key") := chip.key - ) + )(css.chip, Attr("key") := chip.key) } ) ) ) } + } private val component = ScalaComponent.builder[Props]("ChipsArray") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/ChipsPlayground.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/ChipsPlayground.scala index 425cc183..d7d87d4d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/ChipsPlayground.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/ChipsPlayground.scala @@ -40,6 +40,7 @@ object ChipsPlayground extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeColor: ReactEventFromInput => Callback = e => { val value = e.target.value @@ -70,32 +71,32 @@ object ChipsPlayground extends ScalaCssReactImplicits { t.modState(_.handleChangeVariant(value)) } - def handleDeleteExample(state: State): ReactEvent => Callback = _ => { + def handleDeleteExample(state: State): ReactEvent => Callback = _ => Callback.alert("You clicked the delete icon.").when_(state.isOnDeleteNotNone) - } def render(props: Props, state: State): VdomElement = { val css = props.style - val iconToPlayground = if (state.isAvatarNotNone) { - None - } else { - state.icon match { + val iconToPlayground = + if (state.isAvatarNotNone) None + else state.icon match { case "none" => None - case _ => Some(MuiIcons(MuiIconsModule.Face)()().rawElement) + case _ => Some(MuiIcons(MuiIconsModule.Face)()().rawElement) } - } val avatarToPlayground = state.avatar match { case "none" => None - case "img" => Some(MuiAvatar()(src := "/static/images/avatar/1.jpg")().rawElement) + case "img" => Some( + MuiAvatar()(src := "/static/images/avatar/1.jpg")().rawElement + ) case "letter" => Some(MuiAvatar()("FH").rawElement) - case _ => Some(MuiAvatar()(MuiIcons(MuiIconsModule.Face)()).rawElement) + case _ => Some(MuiAvatar()(MuiIcons(MuiIconsModule.Face)()).rawElement) } div( ComponentContainer("Chip Playground")( - MuiGrid(item = true, container = true)(css.root, + MuiGrid(item = true, container = true)( + css.root, MuiGrid(item = true, xs = 12)( MuiGrid( container = true, @@ -103,15 +104,13 @@ object ChipsPlayground extends ScalaCssReactImplicits { alignItems = MuiGrid.AlignItems.center, spacing = MuiGrid.Spacing.`40` )( - MuiGrid(item = true)(css.chipWrapper, + MuiGrid(item = true)( + css.chipWrapper, MuiChip( label = "Awesome Chip Component".toVdom, color = state.color, - deleteIcon = (if (state.isOnDeleteCustom) { - Some(MuiIcons(MuiIconsModule.Done)()().rawElement) - } else { - None - }).orUndefined, + deleteIcon = (if (state.isOnDeleteCustom) Some(MuiIcons(MuiIconsModule.Done)()().rawElement) + else None).orUndefined, onDelete = handleDeleteExample(state), avatar = avatarToPlayground.orUndefined, icon = iconToPlayground.orUndefined, @@ -121,7 +120,8 @@ object ChipsPlayground extends ScalaCssReactImplicits { ) ), MuiGrid(item = true, xs = 12)( - MuiPaper()(css.control, + MuiPaper()( + css.control, MuiGrid(item = true, container = true, spacing = MuiGrid.Spacing.`24`)( MuiGrid(item = true, xs = 12)( MuiFormControl(component = "fieldset")( @@ -241,6 +241,7 @@ object ChipsPlayground extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ChipsPlayground") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/OutlinedChips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/OutlinedChips.scala index 84e058f4..755149b5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/OutlinedChips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Chips/OutlinedChips.scala @@ -14,28 +14,26 @@ object OutlinedChips extends ScalaCssReactImplicits { case class Props(style: ChipsStyle) class Backend(t: BackendScope[Props, Unit]) { - def handleDelete: ReactEvent => Callback = e => { + + def handleDelete: ReactEvent => Callback = e => Callback.alert("You clicked the delete icon.") - } - def handleClick: ReactEvent => Callback = e => { + def handleClick: ReactEvent => Callback = e => Callback.alert("You clicked the Chip.") - } def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Outlined Chips")( - div(css.root, + div( + css.root, MuiChip(label = "Basic Chip".toVdom, variant = MuiChip.Variant.outlined)(css.chip), MuiChip( label = "Clickable Chip".toVdom, avatar = MuiAvatar()("MB").rawElement, variant = MuiChip.Variant.outlined - )(css.chip, - onClick ==> handleClick - ), + )(css.chip, onClick ==> handleClick), MuiChip( label = "Deletable Chip".toVdom, avatar = MuiAvatar()( @@ -50,33 +48,25 @@ object OutlinedChips extends ScalaCssReactImplicits { avatar = MuiAvatar()(MuiIcons(MuiIconsModule.Face)()).rawElement, onDelete = handleDelete, variant = MuiChip.Variant.outlined - )(css.chip, - onClick ==> handleClick - ), + )(css.chip, onClick ==> handleClick), MuiChip( label = "Clickable Deletable Chip".toVdom, icon = MuiIcons(MuiIconsModule.Face)()().rawElement, onDelete = handleDelete, variant = MuiChip.Variant.outlined - )(css.chip, - onClick ==> handleClick - ), + )(css.chip, onClick ==> handleClick), MuiChip( label = "Custom delete icon Chip".toVdom, deleteIcon = MuiIcons(MuiIconsModule.Done)()().rawElement, onDelete = handleDelete, variant = MuiChip.Variant.outlined - )(css.chip, - onClick ==> handleClick - ), + )(css.chip, onClick ==> handleClick), MuiChip( label = "Clickable Link Chip".toVdom, component = "a", clickable = true, variant = MuiChip.Variant.outlined - )(css.chip, - href := "/#demos/chips/", - ), + )(css.chip, href := "/#demos/chips/"), MuiChip( label = "Primary Clickable Chip".toVdom, avatar = MuiAvatar()("MB").rawElement, @@ -119,6 +109,7 @@ object OutlinedChips extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("OutlinedChips") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/AlertDialog.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/AlertDialog.scala index d3532a27..a2fedcd1 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/AlertDialog.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/AlertDialog.scala @@ -4,9 +4,17 @@ import japgolly.scalajs.react.{BackendScope, Callback, ReactEvent, ScalaComponen import japgolly.scalajs.react.vdom.all._ import io.kinoplan.demo.components.ComponentContainer -import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiDialog, MuiDialogActions, MuiDialogContent, MuiDialogContentText, MuiDialogTitle} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiButton, + MuiDialog, + MuiDialogActions, + MuiDialogContent, + MuiDialogContentText, + MuiDialogTitle +} object AlertDialog { + case class State(open: Boolean = false) { def handleClickOpen = copy(open = true) @@ -18,45 +26,46 @@ object AlertDialog { def handleClickClose: Callback = t.modState(_.handleClickClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } - def render(state: State): VdomElement = { - div( - ComponentContainer("Alert Dialog")( - div( - MuiButton(variant = MuiButton.Variant.outlined, color = MuiButton.Color.primary)( - onClick --> handleClickOpen, - "Open simple dialog" - ), - MuiDialog(open = state.open, onClose = onClose)( - aria.labelledBy := "alert-dialog-title", - aria.describedBy := "alert-dialog-description", - MuiDialogTitle()(id := "alert-dialog-title", "Use Google's location service?"), - MuiDialogContent()( - MuiDialogContentText()( - id := "alert-dialog-description", - "Let Google help apps determine location. This means sending anonymous location data to " + + def render(state: State): VdomElement = div( + ComponentContainer("Alert Dialog")( + div( + MuiButton( + variant = MuiButton.Variant.outlined, + color = MuiButton.Color.primary + )( + onClick --> handleClickOpen, + "Open simple dialog" + ), + MuiDialog(open = state.open, onClose = onClose)( + aria.labelledBy := "alert-dialog-title", + aria.describedBy := "alert-dialog-description", + MuiDialogTitle()(id := "alert-dialog-title", "Use Google's location service?"), + MuiDialogContent()( + MuiDialogContentText()( + id := "alert-dialog-description", + "Let Google help apps determine location. This means sending anonymous location data to " + "Google, even when no apps are running." - ) + ) + ), + MuiDialogActions()( + MuiButton(color = MuiButton.Color.primary)( + onClick --> handleClickClose, + "Disagree" ), - MuiDialogActions()( - MuiButton(color = MuiButton.Color.primary)( - onClick --> handleClickClose, - "Disagree" - ), - MuiButton(color = MuiButton.Color.primary)( - onClick --> handleClickClose, - autoFocus := true, - "Agree" - ) + MuiButton(color = MuiButton.Color.primary)( + onClick --> handleClickClose, + autoFocus := true, + "Agree" ) - ).when(state.open) - ) + ) + ).when(state.open) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("AlertDialog") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ConfirmationDialog.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ConfirmationDialog.scala index 79ba7459..de9de08d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ConfirmationDialog.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ConfirmationDialog.scala @@ -21,9 +21,8 @@ object ConfirmationDialog extends ScalaCssReactImplicits { class Backend(t: BackendScope[Props, State]) { def handleClickListItem = t.modState(_.handleClickListItem) - def handleClose: String => Callback = value => { + def handleClose: String => Callback = value => t.modState(_.handleClose(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -34,7 +33,9 @@ object ConfirmationDialog extends ScalaCssReactImplicits { div( ComponentContainer("Confirmation dialogs")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList()( MuiListItem(button = true, divider = true)( disabled := true, @@ -46,11 +47,17 @@ object ConfirmationDialog extends ScalaCssReactImplicits { aria.label := "Phone ringtone", onClick --> handleClickListItem )( - MuiListItemText(primary = VdomNode("Interruptions"), secondary = VdomNode(state.value)) + MuiListItemText( + primary = VdomNode("Interruptions"), + secondary = VdomNode(state.value) + ) ), MuiListItem(button = true, divider = true)( disabled := true, - MuiListItemText(primary = VdomNode("Default notification ringtone"), secondary = VdomNode("Tethys")) + MuiListItemText( + primary = VdomNode("Default notification ringtone"), + secondary = VdomNode("Tethys") + ) ), ConfirmationDialogRaw( state.open, @@ -63,6 +70,7 @@ object ConfirmationDialog extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ConfirmationDialog") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ConfirmationDialogRaw.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ConfirmationDialogRaw.scala index f3485b15..d418ef2b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ConfirmationDialogRaw.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ConfirmationDialogRaw.scala @@ -6,24 +6,51 @@ import japgolly.scalajs.react.{BackendScope, Callback, ReactEventFromInput, Scal import japgolly.scalajs.react.vdom.Attr import japgolly.scalajs.react.vdom.all._ -import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiDialog, MuiDialogActions, MuiDialogContent, MuiDialogTitle, MuiFormControlLabel, MuiRadio, MuiRadioGroup} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiButton, + MuiDialog, + MuiDialogActions, + MuiDialogContent, + MuiDialogTitle, + MuiFormControlLabel, + MuiRadio, + MuiRadioGroup +} object ConfirmationDialogRaw { - case class Props(open: Boolean, onClose: js.Function1[String, Callback], value: String, dialogClassess: Map[String, String]) + + case class Props( + open: Boolean, + onClose: js.Function1[String, Callback], + value: String, + dialogClassess: Map[String, String] + ) case class State(value: String) { def setValue(value: String) = copy(value = value) } val options = List( - "None", "Atria", "Callisto", "Dione", "Ganymede", "Hangouts Call", "Luna", - "Oberon", "Phobos", "Pyxis", "Sedna", "Titania", "Triton", "Umbriel" + "None", + "Atria", + "Callisto", + "Dione", + "Ganymede", + "Hangouts Call", + "Luna", + "Oberon", + "Phobos", + "Pyxis", + "Sedna", + "Titania", + "Triton", + "Umbriel" ) class Backend(t: BackendScope[Props, State]) { - def componentDidUpdate(currentProps: Props, nextProps: Props): Callback = { + + def componentDidUpdate(currentProps: Props, nextProps: Props): Callback = t.modState(_.setValue(nextProps.value)).when_(nextProps.value != currentProps.value) - } def handleCancel: Callback = { val props = t.props.runNow() @@ -44,48 +71,47 @@ object ConfirmationDialogRaw { t.modState(_.setValue(value)) } - def render(props: Props, state: State): VdomElement = { - div( - MuiDialog( - open = props.open, - disableBackdropClick = true, - disableEscapeKeyDown = true, - maxWidth = MuiDialog.MaxWidth.xs, - classes = props.dialogClassess - )( - aria.labelledBy := "confirmation-dialog-title", - MuiDialogTitle()(id := "confirmation-dialog-title", "Phone Ringtone"), - MuiDialogContent()( - MuiRadioGroup()( - aria.label := "Ringtone", - name := "ringtone", - value := state.value, - onChange ==> handleChange - )( - options.toVdomArray(option => - MuiFormControlLabel( - control = MuiRadio()().rawElement, - label = VdomNode(option) - )( - Attr("key") := option, - value := option - ) + def render(props: Props, state: State): VdomElement = div( + MuiDialog( + open = props.open, + disableBackdropClick = true, + disableEscapeKeyDown = true, + maxWidth = MuiDialog.MaxWidth.xs, + classes = props.dialogClassess + )( + aria.labelledBy := "confirmation-dialog-title", + MuiDialogTitle()(id := "confirmation-dialog-title", "Phone Ringtone"), + MuiDialogContent()( + MuiRadioGroup()( + aria.label := "Ringtone", + name := "ringtone", + value := state.value, + onChange ==> handleChange + )( + options.toVdomArray(option => + MuiFormControlLabel( + control = MuiRadio()().rawElement, + label = VdomNode(option) + )( + Attr("key") := option, + value := option ) ) + ) + ), + MuiDialogActions()( + MuiButton(color = MuiButton.Color.primary)( + onClick --> handleCancel, + "Cancel" ), - MuiDialogActions()( - MuiButton(color = MuiButton.Color.primary)( - onClick --> handleCancel, - "Cancel" - ), - MuiButton(color = MuiButton.Color.primary)( - onClick --> handleOk, - "Ok" - ) + MuiButton(color = MuiButton.Color.primary)( + onClick --> handleOk, + "Ok" ) - ).when(props.open) - ) - } + ) + ).when(props.open) + ) + } private val component = ScalaComponent.builder[Props]("ConfirmationDialogRaw") @@ -100,5 +126,5 @@ object ConfirmationDialogRaw { value: String, dialogClassess: Map[String, String] ) = component(Props(open, onClose, value, dialogClassess)) -} +} diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/CustomizedDialog.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/CustomizedDialog.scala index 96e2a0c2..ac157ee3 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/CustomizedDialog.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/CustomizedDialog.scala @@ -22,9 +22,8 @@ object CustomizedDialog extends ScalaCssReactImplicits { def handleClickClose: Callback = t.modState(_.handleClickClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -32,22 +31,26 @@ object CustomizedDialog extends ScalaCssReactImplicits { div( ComponentContainer("Customized dialog")( div( - MuiButton(variant = MuiButton.Variant.outlined, color = MuiButton.Color.secondary)( + MuiButton( + variant = MuiButton.Variant.outlined, + color = MuiButton.Color.secondary + )( onClick --> handleClickOpen, "Open simple dialog" ), MuiDialog(open = state.open, onClose = onClose)( aria.labelledBy := "customized-dialog-title", CustomizedDialogTitleWrapped(handleClickClose), - MuiDialogContent()(css.customizedDialogContent, + MuiDialogContent()( + css.customizedDialogContent, MuiTypography(gutterBottom = true)( "Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac " + - "facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum " + - "at eros." + "facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum " + + "at eros." ), MuiTypography(gutterBottom = true)( "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis " + - "lacus vel augue laoreet rutrum faucibus dolor auctor." + "lacus vel augue laoreet rutrum faucibus dolor auctor." ), MuiTypography(gutterBottom = true)( "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis " + @@ -55,11 +58,12 @@ object CustomizedDialog extends ScalaCssReactImplicits { ), MuiTypography(gutterBottom = true)( "Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel " + - "scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus " + - "auctor fringilla." + "scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus " + + "auctor fringilla." ) ), - MuiDialogActions()(css.customizedDialogActions, + MuiDialogActions()( + css.customizedDialogActions, MuiButton(color = MuiButton.Color.primary)( onClick --> handleClickClose, "Save changes" @@ -70,6 +74,7 @@ object CustomizedDialog extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedDialog") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/CustomizedDialogTitleWrapped.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/CustomizedDialogTitleWrapped.scala index 2bca0fed..7ebc59d7 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/CustomizedDialogTitleWrapped.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/CustomizedDialogTitleWrapped.scala @@ -12,14 +12,17 @@ object CustomizedDialogTitleWrapped extends ScalaCssReactImplicits { case class Props(onClose: Callback, style: DialogsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( - MuiDialogTitle(disableTypography = true)(css.root, + MuiDialogTitle(disableTypography = true)( + css.root, id := "customized-dialog-title", MuiTypography(variant = MuiTypography.Variant.h6)("Modal title"), - MuiIconButton()(css.closeButton, + MuiIconButton()( + css.closeButton, aria.label := "Close", onClick --> props.onClose, MuiIcons(MuiIconsModule.Close)() @@ -27,6 +30,7 @@ object CustomizedDialogTitleWrapped extends ScalaCssReactImplicits { ) ) } + } val component = ScalaComponent.builder[Props]("CustomizedDialogTitleWrapped") @@ -37,4 +41,5 @@ object CustomizedDialogTitleWrapped extends ScalaCssReactImplicits { onClose: Callback, style: DialogsStyle = DefaultDialogsStyle ): VdomElement = component(Props(onClose, style)) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/FormDialog.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/FormDialog.scala index 942a377b..575d7644 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/FormDialog.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/FormDialog.scala @@ -5,9 +5,18 @@ import japgolly.scalajs.react.vdom.all._ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.utils.Helpers.StringExtended -import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiDialog, MuiDialogActions, MuiDialogContent, MuiDialogContentText, MuiDialogTitle, MuiTextField} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiButton, + MuiDialog, + MuiDialogActions, + MuiDialogContent, + MuiDialogContentText, + MuiDialogTitle, + MuiTextField +} object FormDialog { + case class State(open: Boolean = false) { def handleClickOpen = copy(open = true) @@ -19,51 +28,52 @@ object FormDialog { def handleClickClose: Callback = t.modState(_.handleClickClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } - def render(state: State): VdomElement = { - div( - ComponentContainer("Form dialogs")( - div( - MuiButton(variant = MuiButton.Variant.outlined, color = MuiButton.Color.primary)( - onClick --> handleClickOpen, - "Open form dialog" - ), - MuiDialog(open = state.open, onClose = onClose)( - aria.labelledBy := "form-dialog-title", - MuiDialogTitle()(id := "form-dialog-title", "Subscribe"), - MuiDialogContent()( - MuiDialogContentText()( - "To subscribe to this website, please enter your email address here. We will send " + + def render(state: State): VdomElement = div( + ComponentContainer("Form dialogs")( + div( + MuiButton( + variant = MuiButton.Variant.outlined, + color = MuiButton.Color.primary + )( + onClick --> handleClickOpen, + "Open form dialog" + ), + MuiDialog(open = state.open, onClose = onClose)( + aria.labelledBy := "form-dialog-title", + MuiDialogTitle()(id := "form-dialog-title", "Subscribe"), + MuiDialogContent()( + MuiDialogContentText()( + "To subscribe to this website, please enter your email address here. We will send " + "updates occasionally." - ), - MuiTextField( - margin = MuiTextField.Margin.dense, - label = "Email Address".toVdom, - fullWidth = true - )( - id := "name", - `type` := "email", - autoFocus := true - ) ), - MuiDialogActions()( - MuiButton(color = MuiButton.Color.primary)( - onClick --> handleClickClose, - "Cancel" - ), - MuiButton(color = MuiButton.Color.primary)( - onClick --> handleClickClose, - "Subscribe" - ) + MuiTextField( + margin = MuiTextField.Margin.dense, + label = "Email Address".toVdom, + fullWidth = true + )( + id := "name", + `type` := "email", + autoFocus := true ) - ).when(state.open) - ) + ), + MuiDialogActions()( + MuiButton(color = MuiButton.Color.primary)( + onClick --> handleClickClose, + "Cancel" + ), + MuiButton(color = MuiButton.Color.primary)( + onClick --> handleClickClose, + "Subscribe" + ) + ) + ).when(state.open) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("FormDialog") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/FullScreenDialog.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/FullScreenDialog.scala index 79b6e305..fb5bce54 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/FullScreenDialog.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/FullScreenDialog.scala @@ -23,9 +23,8 @@ object FullScreenDialog extends ScalaCssReactImplicits { def handleClickClose: Callback = t.modState(_.handleClickClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -33,21 +32,26 @@ object FullScreenDialog extends ScalaCssReactImplicits { div( ComponentContainer("Full-screen dialogs")( div( - MuiButton(variant = MuiButton.Variant.outlined, color = MuiButton.Color.primary)( + MuiButton( + variant = MuiButton.Variant.outlined, + color = MuiButton.Color.primary + )( onClick --> handleClickOpen, "Open full-screen dialog" ), MuiDialog(open = state.open, onClose = onClose, fullScreen = true)( - MuiAppBar()(css.appBar, + MuiAppBar()( + css.appBar, MuiToolbar()( MuiIconButton(color = MuiIconButton.Color.inherit)( aria.label := "Close", onClick --> handleClickClose, MuiIcons(MuiIconsModule.Close)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit)(css.flexStyle, - "Sound" - ), + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit + )(css.flexStyle, "Sound"), MuiButton(color = MuiButton.Color.inherit)( onClick --> handleClickClose, "save" @@ -56,11 +60,17 @@ object FullScreenDialog extends ScalaCssReactImplicits { ), MuiList()( MuiListItem(button = true)( - MuiListItemText(primary = VdomNode("Phone ringtone"), secondary = VdomNode("Titania")) + MuiListItemText( + primary = VdomNode("Phone ringtone"), + secondary = VdomNode("Titania") + ) ), MuiDivider(), MuiListItem(button = true)( - MuiListItemText(primary = VdomNode("Default notification ringtone"), secondary = VdomNode("Tethys")) + MuiListItemText( + primary = VdomNode("Default notification ringtone"), + secondary = VdomNode("Tethys") + ) ) ) ).when(state.open) @@ -68,6 +78,7 @@ object FullScreenDialog extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("FullScreenDialog") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/MaxWidthDialog.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/MaxWidthDialog.scala index 893a1e10..be889b96 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/MaxWidthDialog.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/MaxWidthDialog.scala @@ -28,9 +28,8 @@ object MaxWidthDialog extends ScalaCssReactImplicits { def handleClickClose: Callback = t.modState(_.handleClickClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } def handleFullWidthChange(e: ReactEventFromInput): Callback = { val value = e.target.checked @@ -55,7 +54,10 @@ object MaxWidthDialog extends ScalaCssReactImplicits { div( ComponentContainer("Optional sizes")( React.Fragment( - MuiButton(variant = MuiButton.Variant.outlined, color = MuiButton.Color.primary)( + MuiButton( + variant = MuiButton.Variant.outlined, + color = MuiButton.Color.primary + )( onClick --> handleClickOpen, "Open max-width dialog" ), @@ -75,8 +77,11 @@ object MaxWidthDialog extends ScalaCssReactImplicits { MuiDialogContentText()( "You can set my maximum width and whether to adapt or not." ), - form(css.form, noValidate := true, - MuiFormControl()(css.formControl, + form( + css.form, + noValidate := true, + MuiFormControl()( + css.formControl, MuiInputLabel()( htmlFor := "max-width", "maxWidth" @@ -113,6 +118,7 @@ object MaxWidthDialog extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("MaxWidthDialog") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ScrollDialog.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ScrollDialog.scala index 0c70e6db..9a7ae246 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ScrollDialog.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/ScrollDialog.scala @@ -4,9 +4,17 @@ import japgolly.scalajs.react.{BackendScope, Callback, ReactEvent, ScalaComponen import japgolly.scalajs.react.vdom.all._ import io.kinoplan.demo.components.ComponentContainer -import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiDialog, MuiDialogActions, MuiDialogContent, MuiDialogContentText, MuiDialogTitle} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiButton, + MuiDialog, + MuiDialogActions, + MuiDialogContent, + MuiDialogContentText, + MuiDialogTitle +} object ScrollDialog { + case class State(open: Boolean = false, scroll: String = "paper") { def handleClickOpen(scroll: String) = copy(open = true, scroll = scroll) @@ -18,28 +26,26 @@ object ScrollDialog { def handleClickClose: Callback = t.modState(_.handleClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } - def render(state: State): VdomElement = { - div( - ComponentContainer("Scrolling long content")( - div( - MuiButton()( - onClick --> handleClickOpen("paper"), - "scroll=paper" - ), - MuiButton()( - onClick --> handleClickOpen("body"), - "scroll=body" - ), - MuiDialog(open = state.open, onClose = onClose, scroll = state.scroll)( - aria.labelledBy := "scroll-dialog-title", - MuiDialogTitle()(id := "scroll-dialog-title", "Subscribe"), - MuiDialogContent()( - MuiDialogContentText()( - "Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac " + + def render(state: State): VdomElement = div( + ComponentContainer("Scrolling long content")( + div( + MuiButton()( + onClick --> handleClickOpen("paper"), + "scroll=paper" + ), + MuiButton()( + onClick --> handleClickOpen("body"), + "scroll=body" + ), + MuiDialog(open = state.open, onClose = onClose, scroll = state.scroll)( + aria.labelledBy := "scroll-dialog-title", + MuiDialogTitle()(id := "scroll-dialog-title", "Subscribe"), + MuiDialogContent()( + MuiDialogContentText()( + "Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac " + "facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum " + "at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus " + "sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum " + @@ -75,24 +81,24 @@ object ScrollDialog { " lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla " + "sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. " + "Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla." - ) + ) + ), + MuiDialogActions()( + MuiButton(color = MuiButton.Color.primary)( + onClick --> handleClickClose, + "Cancel" ), - MuiDialogActions()( - MuiButton(color = MuiButton.Color.primary)( - onClick --> handleClickClose, - "Cancel" - ), - MuiButton(color = MuiButton.Color.primary)( - onClick --> handleClickClose, - autoFocus := true, - "Subscribe" - ) + MuiButton(color = MuiButton.Color.primary)( + onClick --> handleClickClose, + autoFocus := true, + "Subscribe" ) - ).when(state.open) - ) + ) + ).when(state.open) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("ScrollDialog") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/SimpleDialog.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/SimpleDialog.scala index 82b1d43c..b617bb69 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/SimpleDialog.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/SimpleDialog.scala @@ -9,6 +9,7 @@ import io.kinoplan.demo.styles.demos.Chips.{ChipsArrayStyle, DefaultChipsArraySt import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiTypography} object SimpleDialog { + case class State(open: Boolean = false, selectedValue: String = Emails.default(1)) { def handleClickOpen = copy(open = true) @@ -16,35 +17,34 @@ object SimpleDialog { } class Backend(t: BackendScope[Unit, State]) { - def handleClickOpen = { - t.modState(_.handleClickOpen) - } + def handleClickOpen = t.modState(_.handleClickOpen) - def handleClose: String => Callback = value => { + def handleClose: String => Callback = value => t.modState(_.handleClose(value)) - } - - def render(state: State): VdomElement = { - div( - ComponentContainer("Simple Dialogs")( - div( - MuiTypography(variant = MuiTypography.Variant.subtitle1)( - s"Selected: ${state.selectedValue}" - ), - br, - MuiButton(variant = MuiButton.Variant.outlined, color = MuiButton.Color.primary)( - onClick --> handleClickOpen, - "Open simple dialog" - ), - SimpleDialogWrapped( - open = state.open, - onClose = handleClose, - selectedValue = state.selectedValue - ) + + def render(state: State): VdomElement = div( + ComponentContainer("Simple Dialogs")( + div( + MuiTypography(variant = MuiTypography.Variant.subtitle1)( + s"Selected: ${state.selectedValue}" + ), + br, + MuiButton( + variant = MuiButton.Variant.outlined, + color = MuiButton.Color.primary + )( + onClick --> handleClickOpen, + "Open simple dialog" + ), + SimpleDialogWrapped( + open = state.open, + onClose = handleClose, + selectedValue = state.selectedValue ) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("SimpleDialog") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/SimpleDialogWrapped.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/SimpleDialogWrapped.scala index c61af157..924f1c25 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/SimpleDialogWrapped.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dialogs/SimpleDialogWrapped.scala @@ -16,13 +16,11 @@ object SimpleDialogWrapped extends ScalaCssReactImplicits { case class Props(open: Boolean, onClose: js.Function1[String, Callback], selectedValue: String, style: DialogsStyle) class Backend(t: BackendScope[Props, Unit]) { - def handleClose(props: Props): (ReactEvent, String) => Callback = (_, _) => { + + def handleClose(props: Props): (ReactEvent, String) => Callback = (_, _) => props.onClose(props.selectedValue) - } - def handleListItemClick(props: Props, value: String) = { - props.onClose(value) - } + def handleListItemClick(props: Props, value: String) = props.onClose(value) def render(props: Props): VdomElement = { val css = props.style @@ -38,9 +36,7 @@ object SimpleDialogWrapped extends ScalaCssReactImplicits { onClick --> handleListItemClick(props, email), Attr("key") := email, MuiListItemAvatar()( - MuiAvatar()(css.avatar, - MuiIcons(MuiIconsModule.Person)() - ) + MuiAvatar()(css.avatar, MuiIcons(MuiIconsModule.Person)()) ), MuiListItemText(primary = VdomNode(email)) ) @@ -59,6 +55,7 @@ object SimpleDialogWrapped extends ScalaCssReactImplicits { ).when(props.open) ) } + } private val component = ScalaComponent.builder[Props]("SimpleDialogWrapped") @@ -71,4 +68,5 @@ object SimpleDialogWrapped extends ScalaCssReactImplicits { selectedValue: String, style: DialogsStyle = DefaultDialogsStyle ) = component(Props(open, onClose, selectedValue, style)) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/InsetDividers.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/InsetDividers.scala index b97017ee..1f771179 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/InsetDividers.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/InsetDividers.scala @@ -13,15 +13,21 @@ object InsetDividers extends ScalaCssReactImplicits { case class Props(style: DividersStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Inset Dividers")( - MuiList()(css.root, css.rootPaper(Layout.isPaletteLight), + MuiList()( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiListItem()( MuiAvatar()(MuiIcons(MuiIconsModule.Image)()), - MuiListItemText(primary = VdomNode("Photos"), secondary = VdomNode("Jan 9, 2014")) + MuiListItemText( + primary = VdomNode("Photos"), + secondary = VdomNode("Jan 9, 2014") + ) ), li( MuiDivider(variant = MuiDivider.Variant.inset) @@ -33,12 +39,16 @@ object InsetDividers extends ScalaCssReactImplicits { MuiDivider(variant = MuiDivider.Variant.inset, component = "li"), MuiListItem()( MuiAvatar()(MuiIcons(MuiIconsModule.BeachAccess)()), - MuiListItemText(primary = VdomNode("Vacation"), secondary = VdomNode("July 20, 2014")) + MuiListItemText( + primary = VdomNode("Vacation"), + secondary = VdomNode("July 20, 2014") + ) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("InsetDividers") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/ListDividers.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/ListDividers.scala index d772864f..a49c81d6 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/ListDividers.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/ListDividers.scala @@ -12,12 +12,15 @@ object ListDividers extends ScalaCssReactImplicits { case class Props(style: DividersStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("List Dividers")( - MuiList(component = "nav")(css.root, css.rootPaper(Layout.isPaletteLight), + MuiList(component = "nav")( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiListItem(button = true)( MuiListItemText(primary = VdomNode("Inbox")) ), @@ -36,6 +39,7 @@ object ListDividers extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ListDividers") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/MiddleDividers.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/MiddleDividers.scala index fc9347e3..3ec9130f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/MiddleDividers.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/MiddleDividers.scala @@ -12,13 +12,17 @@ object MiddleDividers extends ScalaCssReactImplicits { case class Props(style: DividersStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Middle Dividers")( - div(css.root, css.rootPaper(Layout.isPaletteLight), - div(css.section1, + div( + css.root, + css.rootPaper(Layout.isPaletteLight), + div( + css.section1, MuiGrid(container = true, alignItems = MuiGrid.AlignItems.center)( MuiGrid(item = true, xs = true)( MuiTypography(gutterBottom = true, variant = MuiTypography.Variant.h4)( @@ -33,11 +37,12 @@ object MiddleDividers extends ScalaCssReactImplicits { ), MuiTypography(color = MuiTypography.Color.textSecondary)( "Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the " + - "hall." + "hall." ) ), MuiDivider(variant = MuiDivider.Variant.middle), - div(css.section2, + div( + css.section2, MuiTypography(gutterBottom = true, variant = MuiTypography.Variant.body1)( "Select type" ), @@ -45,11 +50,16 @@ object MiddleDividers extends ScalaCssReactImplicits { MuiChip(label = VdomNode("Extra Soft"))(css.chip), MuiChip(label = VdomNode("Soft"))(css.chip), MuiChip(label = VdomNode("Medium"))(css.chip), - MuiChip(label = VdomNode("Hard"))(css.chip), + MuiChip(label = VdomNode("Hard"))(css.chip) ) ), - div(css.section3, - MuiButton(variant = MuiButton.Variant.contained, color = MuiButton.Color.primary, fullWidth = true)( + div( + css.section3, + MuiButton( + variant = MuiButton.Variant.contained, + color = MuiButton.Color.primary, + fullWidth = true + )( "Add to cart" ) ) @@ -57,6 +67,7 @@ object MiddleDividers extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("MiddleDividers") @@ -65,4 +76,3 @@ object MiddleDividers extends ScalaCssReactImplicits { def apply(style: DividersStyle = DefaultDividersStyle) = component(Props(style)) } - diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/SubheaderDividers.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/SubheaderDividers.scala index ba02ee08..a76a423e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/SubheaderDividers.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Dividers/SubheaderDividers.scala @@ -13,24 +13,28 @@ object SubheaderDividers extends ScalaCssReactImplicits { case class Props(style: DividersStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Subheader Dividers")( - MuiList()(css.root, css.rootPaper(Layout.isPaletteLight), + MuiList()( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiListItem()( MuiAvatar()(MuiIcons(MuiIconsModule.Image)()), - MuiListItemText(primary = VdomNode("Photos"), secondary = VdomNode("Jan 9, 2014")) + MuiListItemText( + primary = VdomNode("Photos"), + secondary = VdomNode("Jan 9, 2014") + ) ), MuiDivider(component = "li"), li( MuiTypography( color = MuiTypography.Color.textSecondary, variant = MuiTypography.Variant.caption - )(css.dividerFullWidth, - "Divider" - ) + )(css.dividerFullWidth, "Divider") ), MuiListItem()( MuiListItemText(primary = VdomNode("Work"), secondary = VdomNode("Jan 7, 2014")) @@ -40,18 +44,20 @@ object SubheaderDividers extends ScalaCssReactImplicits { MuiTypography( color = MuiTypography.Color.textSecondary, variant = MuiTypography.Variant.caption - )(css.dividerInset, - "Leisure" - ) + )(css.dividerInset, "Leisure") ), MuiListItem()( MuiAvatar()(MuiIcons(MuiIconsModule.BeachAccess)()), - MuiListItemText(primary = VdomNode("Vacation"), secondary = VdomNode("July 20, 2014")) + MuiListItemText( + primary = VdomNode("Vacation"), + secondary = VdomNode("July 20, 2014") + ) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("SubheaderDividers") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/MiniDrawer.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/MiniDrawer.scala index 950fdb04..6f706eeb 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/MiniDrawer.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/MiniDrawer.scala @@ -30,57 +30,72 @@ object MiniDrawer extends ScalaCssReactImplicits { val css = props.style val drawerClasses = Map( - MuiDrawer.ClassKey.paper -> stylesToClassName(Seq( - if (state.open) css.drawerOpen else css.common.emptyStyle, - if (!state.open) css.drawerClose else css.common.emptyStyle - )) + MuiDrawer.ClassKey.paper -> stylesToClassName( + Seq( + if (state.open) css.drawerOpen else css.common.emptyStyle, + if (!state.open) css.drawerClose else css.common.emptyStyle + ) + ) ) - val drawer = { + val drawer = div( div( - div(css.toolbar, - MuiIconButton()( - onClick --> handleDrawerClose, - if (css.theme.direction == Direction.ltr) { - MuiIcons(MuiIconsModule.ChevronLeft)() - } else { - MuiIcons(MuiIconsModule.ChevronRight)() - } - ) - ), - MuiDivider(), - MuiList()( - List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ), - MuiDivider(), - MuiList()( - List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } + css.toolbar, + MuiIconButton()( + onClick --> handleDrawerClose, + if (css.theme.direction == Direction.ltr) MuiIcons(MuiIconsModule.ChevronLeft)() + else MuiIcons(MuiIconsModule.ChevronRight)() ) + ), + MuiDivider(), + MuiList()( + List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } + ), + MuiDivider(), + MuiList()( + List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } ) - } + ) div( ComponentContainer("Mini variant drawer")( - div(css.root, + div( + css.root, MuiCssBaseline(), - MuiAppBar(position = MuiAppBar.Position.absolute)(css.appBar, if (state.open) css.appBarShift else css.common.emptyStyle, + MuiAppBar(position = MuiAppBar.Position.absolute)( + css.appBar, + if (state.open) css.appBarShift else css.common.emptyStyle, MuiToolbar(disableGutters = !state.open)( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.menuButton, if (state.open) css.hide else css.common.emptyStyle, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.menuButton, + if (state.open) css.hide else css.common.emptyStyle, aria.label := "Open drawer", onClick --> handleDrawerOpen, MuiIcons(MuiIconsModule.Menu)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit, noWrap = true)( + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit, + noWrap = true + )( "Mini variant drawer" ) ) @@ -89,12 +104,14 @@ object MiniDrawer extends ScalaCssReactImplicits { variant = MuiDrawer.Variant.permanent, open = state.open, classes = drawerClasses - )(css.drawer, + )( + css.drawer, if (state.open) css.drawerOpen else css.common.emptyStyle, if (!state.open) css.drawerClose else css.common.emptyStyle, drawer ), - main(css.content, + main( + css.content, div(css.toolbar), MuiTypography(paragraph = true)( "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " + @@ -125,6 +142,7 @@ object MiniDrawer extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("MiniDrawer") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/PersistentDrawer.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/PersistentDrawer.scala index 9e7ada44..6e6e9e22 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/PersistentDrawer.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/PersistentDrawer.scala @@ -33,53 +33,65 @@ object PersistentDrawer extends ScalaCssReactImplicits { MuiDrawer.ClassKey.paper -> styleAToClassName(css.drawerPaper) ) - val drawer = { + val drawer = div( div( - div(css.drawerHeader, - MuiIconButton()( - onClick --> handleDrawerClose, - if (css.theme.direction == Direction.ltr) { - MuiIcons(MuiIconsModule.ChevronLeft)() - } else { - MuiIcons(MuiIconsModule.ChevronRight)() - } - ) - ), - MuiDivider(), - MuiList()( - List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ), - MuiDivider(), - MuiList()( - List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } + css.drawerHeader, + MuiIconButton()( + onClick --> handleDrawerClose, + if (css.theme.direction == Direction.ltr) MuiIcons(MuiIconsModule.ChevronLeft)() + else MuiIcons(MuiIconsModule.ChevronRight)() ) + ), + MuiDivider(), + MuiList()( + List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } + ), + MuiDivider(), + MuiList()( + List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } ) - } + ) div( ComponentContainer("Persistent drawer")( - div(css.root, + div( + css.root, MuiCssBaseline(), - MuiAppBar()(css.appBar, + MuiAppBar()( + css.appBar, if (state.open) css.appBarShift else css.common.emptyStyle, if (state.open) css.appBarShiftLeft else css.common.emptyStyle, MuiToolbar(disableGutters = !state.open)( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.menuButton, if (state.open) css.hide else css.common.emptyStyle, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.menuButton, + if (state.open) css.hide else css.common.emptyStyle, aria.label := "Open drawer", onClick --> handleDrawerOpen, MuiIcons(MuiIconsModule.Menu)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit, noWrap = true)( + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit, + noWrap = true + )( "Persistent drawer" ) ) @@ -90,7 +102,9 @@ object PersistentDrawer extends ScalaCssReactImplicits { open = state.open, classes = drawerClasses )(drawer), - main(css.content, css.contentLeft, + main( + css.content, + css.contentLeft, if (state.open) css.contentShift else css.common.emptyStyle, if (state.open) css.contentShiftLeft else css.common.emptyStyle, div(css.drawerHeader), @@ -123,6 +137,7 @@ object PersistentDrawer extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("PersistentDrawer") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/ResponsiveDrawer.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/ResponsiveDrawer.scala index 096e30f1..3e0a9903 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/ResponsiveDrawer.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/ResponsiveDrawer.scala @@ -20,9 +20,9 @@ object ResponsiveDrawer extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleDrawerToggle: ReactEventFromHtml => Callback = _ => { + + def handleDrawerToggle: ReactEventFromHtml => Callback = _ => t.modState(_.handleDrawerToggle) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -31,42 +31,55 @@ object ResponsiveDrawer extends ScalaCssReactImplicits { MuiDrawer.ClassKey.paper -> styleAToClassName(css.drawerPaper) ) - val drawer = { - div( - div(css.toolbarCustom), - MuiDivider(), - MuiList()( - List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ), - MuiDivider(), - MuiList()( - List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ) + val drawer = div( + div(css.toolbarCustom), + MuiDivider(), + MuiList()( + List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } + ), + MuiDivider(), + MuiList()( + List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } ) - } + ) div( ComponentContainer("Responsive drawer")( - div(css.root, + div( + css.root, MuiCssBaseline(), - MuiAppBar()(css.appBar, + MuiAppBar()( + css.appBar, MuiToolbar()( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.menuButton, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.menuButton, aria.label := "Open drawer", onClick ==> handleDrawerToggle, MuiIcons(MuiIconsModule.Menu)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit, noWrap = true)( + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit, + noWrap = true + )( "Responsive drawer" ) ) @@ -89,37 +102,39 @@ object ResponsiveDrawer extends ScalaCssReactImplicits { )(drawer) ) ), - main(css.content, + main( + css.content, div(css.toolbarCustom), MuiTypography(paragraph = true)( "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " + - "incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent " + - "elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in " + - "hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum " + - "velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. " + - "Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis " + - "viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. " + - "Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus " + - "at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed " + - "ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac." + "incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent " + + "elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in " + + "hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum " + + "velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. " + + "Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis " + + "viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. " + + "Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus " + + "at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed " + + "ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac." ), MuiTypography(paragraph = true)( "Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla " + - "facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac " + - "tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat " + - "consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus " + - "sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. " + - "In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem " + - "et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique " + - "sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo " + - "viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam " + - "ultrices sagittis orci a." + "facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac " + + "tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat " + + "consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus " + + "sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. " + + "In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem " + + "et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique " + + "sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo " + + "viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam " + + "ultrices sagittis orci a." ) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("ResponsiveDrawer") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/SwipeableTemporaryDrawer.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/SwipeableTemporaryDrawer.scala index fc7bdb67..4cdd1d2c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/SwipeableTemporaryDrawer.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/SwipeableTemporaryDrawer.scala @@ -29,68 +29,79 @@ object SwipeableTemporaryDrawer extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def toggleDrawerTop(value: Boolean): ReactEventFromHtml => Callback = _ => { + + def toggleDrawerTop(value: Boolean): ReactEventFromHtml => Callback = _ => t.modState(_.toggleDrawerTop(value)) - } - def toggleDrawerLeft(value: Boolean): ReactEventFromHtml => Callback = _ => { + def toggleDrawerLeft(value: Boolean): ReactEventFromHtml => Callback = _ => t.modState(_.toggleDrawerLeft(value)) - } - def toggleDrawerBottom(value: Boolean): ReactEventFromHtml => Callback = _ => { + def toggleDrawerBottom(value: Boolean): ReactEventFromHtml => Callback = _ => t.modState(_.toggleDrawerBottom(value)) - } - def toggleDrawerRight(value: Boolean): ReactEventFromHtml => Callback = _ => { + def toggleDrawerRight(value: Boolean): ReactEventFromHtml => Callback = _ => t.modState(_.toggleDrawerRight(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style - val sideList = { - div()(css.list, - MuiList()( - List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ), - MuiDivider(), - MuiList()( - List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ) + val sideList = div()( + css.list, + MuiList()( + List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } + ), + MuiDivider(), + MuiList()( + List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } ) - } - - val fullList = { - div()(css.fullList, - MuiList()( - List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ), - MuiDivider(), - MuiList()( - List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ) + ) + + val fullList = div()( + css.fullList, + MuiList()( + List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } + ), + MuiDivider(), + MuiList()( + List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } ) - } + ) div( ComponentContainer("Temporary drawer")( @@ -99,7 +110,11 @@ object SwipeableTemporaryDrawer extends ScalaCssReactImplicits { MuiButton()(onClick ==> toggleDrawerRight(true), "Open Right"), MuiButton()(onClick ==> toggleDrawerTop(true), "Open Top"), MuiButton()(onClick ==> toggleDrawerBottom(true), "Open Bottom"), - MuiSwipeableDrawer(open = state.left, onClose = toggleDrawerLeft(false), onOpen = toggleDrawerLeft(true))( + MuiSwipeableDrawer( + open = state.left, + onClose = toggleDrawerLeft(false), + onOpen = toggleDrawerLeft(true) + )( div( tabIndex := 0, role := "button", @@ -154,6 +169,7 @@ object SwipeableTemporaryDrawer extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SwipeableTemporaryDrawer") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/TemporaryDrawer.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/TemporaryDrawer.scala index d8c401cb..ac5ed076 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/TemporaryDrawer.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Drawers/TemporaryDrawer.scala @@ -29,68 +29,79 @@ object TemporaryDrawer extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def toggleDrawerTop(value: Boolean): ReactEventFromHtml => Callback = _ => { + + def toggleDrawerTop(value: Boolean): ReactEventFromHtml => Callback = _ => t.modState(_.toggleDrawerTop(value)) - } - def toggleDrawerLeft(value: Boolean): ReactEventFromHtml => Callback = _ => { + def toggleDrawerLeft(value: Boolean): ReactEventFromHtml => Callback = _ => t.modState(_.toggleDrawerLeft(value)) - } - def toggleDrawerBottom(value: Boolean): ReactEventFromHtml => Callback = _ => { + def toggleDrawerBottom(value: Boolean): ReactEventFromHtml => Callback = _ => t.modState(_.toggleDrawerBottom(value)) - } - def toggleDrawerRight(value: Boolean): ReactEventFromHtml => Callback = _ => { + def toggleDrawerRight(value: Boolean): ReactEventFromHtml => Callback = _ => t.modState(_.toggleDrawerRight(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style - val sideList = { - div()(css.list, - MuiList()( - List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ), - MuiDivider(), - MuiList()( - List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ) + val sideList = div()( + css.list, + MuiList()( + List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } + ), + MuiDivider(), + MuiList()( + List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } ) - } - - val fullList = { - div()(css.fullList, - MuiList()( - List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ), - MuiDivider(), - MuiList()( - List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => - MuiListItem(button = true)(Attr("key") := text, - MuiListItemIcon()(if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() else MuiIcons(MuiIconsModule.Mail)()), - MuiListItemText(primary = VdomNode(text)) - ) - } - ) + ) + + val fullList = div()( + css.fullList, + MuiList()( + List("Inbox", "Starred", "Send email", "Drafts").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } + ), + MuiDivider(), + MuiList()( + List("All mail", "Trash", "Spam").zipWithIndex.toVdomArray { case (text, index) => + MuiListItem(button = true)( + Attr("key") := text, + MuiListItemIcon()( + if (index % 2 == 0) MuiIcons(MuiIconsModule.Inbox)() + else MuiIcons(MuiIconsModule.Mail)() + ), + MuiListItemText(primary = VdomNode(text)) + ) + } ) - } + ) div( ComponentContainer("Temporary drawer")( @@ -108,7 +119,11 @@ object TemporaryDrawer extends ScalaCssReactImplicits { sideList ) ), - MuiDrawer(anchor = MuiDrawer.Anchor.top, open = state.top, onClose = toggleDrawerTop(false))( + MuiDrawer( + anchor = MuiDrawer.Anchor.top, + open = state.top, + onClose = toggleDrawerTop(false) + )( div( tabIndex := 0, role := "button", @@ -117,7 +132,11 @@ object TemporaryDrawer extends ScalaCssReactImplicits { fullList ) ), - MuiDrawer(anchor = MuiDrawer.Anchor.bottom, open = state.bottom, onClose = toggleDrawerBottom(false))( + MuiDrawer( + anchor = MuiDrawer.Anchor.bottom, + open = state.bottom, + onClose = toggleDrawerBottom(false) + )( div( tabIndex := 0, role := "button", @@ -126,7 +145,11 @@ object TemporaryDrawer extends ScalaCssReactImplicits { fullList ) ), - MuiDrawer(anchor = MuiDrawer.Anchor.right, open = state.right, onClose = toggleDrawerRight(false))( + MuiDrawer( + anchor = MuiDrawer.Anchor.right, + open = state.right, + onClose = toggleDrawerRight(false) + )( div( tabIndex := 0, role := "button", @@ -139,6 +162,7 @@ object TemporaryDrawer extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("TemporaryDrawer") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/ControlledExpansionPanels.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/ControlledExpansionPanels.scala index ce2922c1..3e955aa0 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/ControlledExpansionPanels.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/ControlledExpansionPanels.scala @@ -5,8 +5,16 @@ import japgolly.scalajs.react.vdom.all._ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer -import io.kinoplan.demo.styles.demos.ExpansionPanels.{ControlledExpansionPanelsStyle, DefaultControlledExpansionPanelsStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiExpansionPanel, MuiExpansionPanelDetails, MuiExpansionPanelSummary, MuiTypography} +import io.kinoplan.demo.styles.demos.ExpansionPanels.{ + ControlledExpansionPanelsStyle, + DefaultControlledExpansionPanelsStyle +} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiExpansionPanel, + MuiExpansionPanelDetails, + MuiExpansionPanelSummary, + MuiTypography +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object ControlledExpansionPanels extends ScalaCssReactImplicits { @@ -32,8 +40,10 @@ object ControlledExpansionPanels extends ScalaCssReactImplicits { div( ComponentContainer("Controlled Accordion")( - div(css.root, - MuiExpansionPanel(expanded = state.isPanel1)(onChange --> handleChange("panel1"), + div( + css.root, + MuiExpansionPanel(expanded = state.isPanel1)( + onChange --> handleChange("panel1"), MuiExpansionPanelSummary(expandIcon = MuiIcons(MuiIconsModule.ExpandMore)()())( MuiTypography()(css.heading, "General settings"), MuiTypography()(css.secondaryHeading, "I am an expansion panel") @@ -41,11 +51,12 @@ object ControlledExpansionPanels extends ScalaCssReactImplicits { MuiExpansionPanelDetails()( MuiTypography()( "Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget " + - "maximus est, id dignissim quam." + "maximus est, id dignissim quam." ) ) ), - MuiExpansionPanel(expanded = state.isPanel2)(onChange --> handleChange("panel2"), + MuiExpansionPanel(expanded = state.isPanel2)( + onChange --> handleChange("panel2"), MuiExpansionPanelSummary(expandIcon = MuiIcons(MuiIconsModule.ExpandMore)()())( MuiTypography()(css.heading, "Users"), MuiTypography()(css.secondaryHeading, "You are currently not an owner") @@ -53,30 +64,35 @@ object ControlledExpansionPanels extends ScalaCssReactImplicits { MuiExpansionPanelDetails()( MuiTypography()( "Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar " + - "diam eros in elit. Pellentesque convallis laoreet laoreet." + "diam eros in elit. Pellentesque convallis laoreet laoreet." ) ) ), - MuiExpansionPanel(expanded = state.isPanel3)(onChange --> handleChange("panel3"), + MuiExpansionPanel(expanded = state.isPanel3)( + onChange --> handleChange("panel3"), MuiExpansionPanelSummary(expandIcon = MuiIcons(MuiIconsModule.ExpandMore)()())( MuiTypography()(css.heading, "Advanced settings"), - MuiTypography()(css.secondaryHeading, "Filtering has been entirely disabled for whole web server") + MuiTypography()( + css.secondaryHeading, + "Filtering has been entirely disabled for whole web server" + ) ), MuiExpansionPanelDetails()( MuiTypography()( "Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas " + - "eros, vitae egestas augue. Duis vel est augue." + "eros, vitae egestas augue. Duis vel est augue." ) ) ), - MuiExpansionPanel(expanded = state.isPanel4)(onChange --> handleChange("panel4"), + MuiExpansionPanel(expanded = state.isPanel4)( + onChange --> handleChange("panel4"), MuiExpansionPanelSummary(expandIcon = MuiIcons(MuiIconsModule.ExpandMore)()())( MuiTypography()(css.heading, "Personal data") ), MuiExpansionPanelDetails()( MuiTypography()( "Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas " + - "eros, vitae egestas augue. Duis vel est augue." + "eros, vitae egestas augue. Duis vel est augue." ) ) ) @@ -84,6 +100,7 @@ object ControlledExpansionPanels extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ControlledExpansionPanels") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/CustomizedExpansionPanel.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/CustomizedExpansionPanel.scala index 0c0a4b9e..417a791f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/CustomizedExpansionPanel.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/CustomizedExpansionPanel.scala @@ -5,8 +5,16 @@ import japgolly.scalajs.react.vdom.all._ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer -import io.kinoplan.demo.styles.demos.ExpansionPanels.{CustomizedExpansionPanelStyle, DefaultCustomizedExpansionPanelStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiExpansionPanel, MuiExpansionPanelDetails, MuiExpansionPanelSummary, MuiTypography} +import io.kinoplan.demo.styles.demos.ExpansionPanels.{ + CustomizedExpansionPanelStyle, + DefaultCustomizedExpansionPanelStyle +} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiExpansionPanel, + MuiExpansionPanelDetails, + MuiExpansionPanelSummary, + MuiTypography +} object CustomizedExpansionPanel extends ScalaCssReactImplicits { case class Props(style: CustomizedExpansionPanelStyle) @@ -30,38 +38,53 @@ object CustomizedExpansionPanel extends ScalaCssReactImplicits { div( ComponentContainer("Customized Expansion Panel")( div( - MuiExpansionPanel(square = true, expanded = state.isPanel1)(css.panelRoot, css.panelExpanded, + MuiExpansionPanel(square = true, expanded = state.isPanel1)( + css.panelRoot, + css.panelExpanded, onChange --> handleChange("panel1"), - MuiExpansionPanelSummary()(css.summaryRoot, css.summaryContent, + MuiExpansionPanelSummary()( + css.summaryRoot, + css.summaryContent, MuiTypography()("Collapsible Group Item #1") ), - MuiExpansionPanelDetails()(css.detailsRoot, + MuiExpansionPanelDetails()( + css.detailsRoot, MuiTypography()( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus " + - "ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur " + - "adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget." + "ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur " + + "adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget." ) ) ), - MuiExpansionPanel(square = true, expanded = state.isPanel2)(css.panelRoot, css.panelExpanded, + MuiExpansionPanel(square = true, expanded = state.isPanel2)( + css.panelRoot, + css.panelExpanded, onChange --> handleChange("panel2"), - MuiExpansionPanelSummary()(css.summaryRoot, css.summaryContent, + MuiExpansionPanelSummary()( + css.summaryRoot, + css.summaryContent, MuiTypography()("Collapsible Group Item #2") ), - MuiExpansionPanelDetails()(css.detailsRoot, + MuiExpansionPanelDetails()( + css.detailsRoot, MuiTypography()( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus " + - "ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur " + - "adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget." + "ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur " + + "adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget." ) ) ), - MuiExpansionPanel(square = true, expanded = state.isPanel3)(css.panelRoot, css.panelExpanded, + MuiExpansionPanel(square = true, expanded = state.isPanel3)( + css.panelRoot, + css.panelExpanded, onChange --> handleChange("panel3"), - MuiExpansionPanelSummary()(css.summaryRoot, css.summaryContent, + MuiExpansionPanelSummary()( + css.summaryRoot, + css.summaryContent, MuiTypography()("Collapsible Group Item #3") ), - MuiExpansionPanelDetails()(css.detailsRoot, + MuiExpansionPanelDetails()( + css.detailsRoot, MuiTypography()( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus " + "ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur " + @@ -73,6 +96,7 @@ object CustomizedExpansionPanel extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedExpansionPanel") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/DetailedExpansionPanel.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/DetailedExpansionPanel.scala index 5c5bedc4..d389fabe 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/DetailedExpansionPanel.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/DetailedExpansionPanel.scala @@ -13,37 +13,39 @@ object DetailedExpansionPanel extends ScalaCssReactImplicits { case class Props(style: DetailedExpansionPanelStyle) class Backend(t: BackendScope[Props, Unit]) { - def handleDelete: ReactEvent => Callback = e => { + + def handleDelete: ReactEvent => Callback = e => Callback.empty - } def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Secondary heading and Columns")( - div(css.root, + div( + css.root, MuiExpansionPanel(defaultExpanded = true)( MuiExpansionPanelSummary(expandIcon = MuiIcons(MuiIconsModule.ExpandMore)()())( - div(css.column, - MuiTypography()(css.heading, "Location") - ), - div(css.column, + div(css.column, MuiTypography()(css.heading, "Location")), + div( + css.column, MuiTypography()(css.secondaryHeading, "Select trip destination") ) ), - MuiExpansionPanelDetails()(css.details, + MuiExpansionPanelDetails()( + css.details, div(css.column), - div(css.column, + div( + css.column, MuiChip(label = VdomNode("Barbados"), onDelete = handleDelete) ), - div(css.column, css.helper, + div( + css.column, + css.helper, MuiTypography(variant = MuiTypography.Variant.caption)( "Select your destination of choice", br, - a(href := "#sub-labels-and-columns")(css.linkStyle, - "Learn more" - ) + a(href := "#sub-labels-and-columns")(css.linkStyle, "Learn more") ) ) ), @@ -57,6 +59,7 @@ object DetailedExpansionPanel extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("DetailedExpansionPanel") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/SimpleExpansionPanel.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/SimpleExpansionPanel.scala index 79bdd983..767ccc2d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/SimpleExpansionPanel.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/ExpansionPanels/SimpleExpansionPanel.scala @@ -6,57 +6,59 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.ExpansionPanels.{DefaultSimpleExpansionPanelStyle, SimpleExpansionPanelStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiExpansionPanel, MuiExpansionPanelDetails, MuiExpansionPanelSummary, MuiTypography} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiExpansionPanel, + MuiExpansionPanelDetails, + MuiExpansionPanelSummary, + MuiTypography +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object SimpleExpansionPanel extends ScalaCssReactImplicits { case class Props(style: SimpleExpansionPanelStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Simple Expansion Panel")( - div(css.root, + div( + css.root, MuiExpansionPanel()( MuiExpansionPanelSummary(expandIcon = MuiIcons(MuiIconsModule.ExpandMore)()())( - MuiTypography()(css.heading, - "Expansion Panel 1" - ) + MuiTypography()(css.heading, "Expansion Panel 1") ), MuiExpansionPanelDetails()( MuiTypography()( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, " + - "sit amet blandit leo lobortis eget." + "sit amet blandit leo lobortis eget." ) ) ), MuiExpansionPanel()( MuiExpansionPanelSummary(expandIcon = MuiIcons(MuiIconsModule.ExpandMore)()())( - MuiTypography()(css.heading, - "Expansion Panel 2" - ) + MuiTypography()(css.heading, "Expansion Panel 2") ), MuiExpansionPanelDetails()( MuiTypography()( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, " + - "sit amet blandit leo lobortis eget." + "sit amet blandit leo lobortis eget." ) ) ), MuiExpansionPanel()( disabled := true, MuiExpansionPanelSummary(expandIcon = MuiIcons(MuiIconsModule.ExpandMore)()())( - MuiTypography()(css.heading, - "Disabled Expansion Panel" - ) + MuiTypography()(css.heading, "Disabled Expansion Panel") ) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleExpansionPanel") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/AdvancedGridList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/AdvancedGridList.scala index d26a5849..22f32b51 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/AdvancedGridList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/AdvancedGridList.scala @@ -15,22 +15,29 @@ object AdvancedGridList extends ScalaCssReactImplicits { case class Props(style: AdvancedGridListStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Advanced Grid list")( - div(css.root, css.rootPaper(Layout.isPaletteLight), - MuiGridList(cellHeight = 200, spacing = 1)(css.gridList, + div( + css.root, + css.rootPaper(Layout.isPaletteLight), + MuiGridList(cellHeight = 200, spacing = 1)( + css.gridList, TileData.default.toVdomArray { tile => - MuiGridListTile()(Attr("key") := tile.image, + MuiGridListTile()( + Attr("key") := tile.image, cols := tile.featuredValue, rows := tile.featuredValue, img(src := tile.image, alt := tile.title), MuiGridListTileBar( title = VdomNode(tile.title), titlePosition = MuiGridListTileBar.TitlePosition.top, - actionIcon = VdomNode(MuiIconButton()(css.iconStyle, MuiIcons(MuiIconsModule.StarBorder)()).rawNode), + actionIcon = VdomNode( + MuiIconButton()(css.iconStyle, MuiIcons(MuiIconsModule.StarBorder)()).rawNode + ), actionPosition = MuiGridListTileBar.ActionPosition.left )(css.titleBar) ) @@ -40,6 +47,7 @@ object AdvancedGridList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("AdvancedGridList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/ImageGridList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/ImageGridList.scala index ac34597b..12582e2b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/ImageGridList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/ImageGridList.scala @@ -14,16 +14,21 @@ object ImageGridList extends ScalaCssReactImplicits { case class Props(style: ImageGridListStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Image-only Grid list")( - div(css.root, css.rootPaper(Layout.isPaletteLight), - MuiGridList(cellHeight = 160)(css.gridList, + div( + css.root, + css.rootPaper(Layout.isPaletteLight), + MuiGridList(cellHeight = 160)( + css.gridList, cols := 3, TileData.default.toVdomArray { tile => - MuiGridListTile()(Attr("key") := tile.image, + MuiGridListTile()( + Attr("key") := tile.image, cols := tile.defaultCols, img(src := tile.image, alt := tile.title) ) @@ -33,6 +38,7 @@ object ImageGridList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ImageGridList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/SingleLineGridList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/SingleLineGridList.scala index 1b80449f..e48efefe 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/SingleLineGridList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/SingleLineGridList.scala @@ -16,6 +16,7 @@ object SingleLineGridList extends ScalaCssReactImplicits { case class Props(style: SingleLineGridListStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -26,16 +27,22 @@ object SingleLineGridList extends ScalaCssReactImplicits { div( ComponentContainer("Single line Grid list")( - div(css.root, css.rootPaper(Layout.isPaletteLight), - MuiGridList()(css.gridList, + div( + css.root, + css.rootPaper(Layout.isPaletteLight), + MuiGridList()( + css.gridList, cols := 2.5, TileData.default.toVdomArray { tile => - MuiGridListTile()(Attr("key") := tile.image, + MuiGridListTile()( + Attr("key") := tile.image, img(src := tile.image, alt := tile.title), MuiGridListTileBar( title = VdomNode(tile.title), classes = barClasses, - actionIcon = VdomNode(MuiIconButton()(MuiIcons(MuiIconsModule.StarBorder)()(css.title)).rawNode) + actionIcon = VdomNode( + MuiIconButton()(MuiIcons(MuiIconsModule.StarBorder)()(css.title)).rawNode + ) ) ) } @@ -44,6 +51,7 @@ object SingleLineGridList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SingleLineGridList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/TitlebarGridList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/TitlebarGridList.scala index b482d75f..8812dc80 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/TitlebarGridList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/GridList/TitlebarGridList.scala @@ -10,31 +10,46 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.models.GridList.TileData import io.kinoplan.demo.styles.demos.GridList.{DefaultTitlebarGridListStyle, TitlebarGridListStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiGridList, MuiGridListTile, MuiGridListTileBar, MuiIconButton, MuiListSubheader} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiGridList, + MuiGridListTile, + MuiGridListTileBar, + MuiIconButton, + MuiListSubheader +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object TitlebarGridList extends ScalaCssReactImplicits { case class Props(style: TitlebarGridListStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Grid list with titlebars")( - div(css.root, css.rootPaper(Layout.isPaletteLight), - MuiGridList()(css.gridList, - MuiGridListTile()(Attr("key") := "Subheader", style := js.Dictionary("height" -> "auto"), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), + MuiGridList()( + css.gridList, + MuiGridListTile()( + Attr("key") := "Subheader", + style := js.Dictionary("height" -> "auto"), cols := 2, MuiListSubheader(component = "div")("December") ), TileData.default.toVdomArray { tile => - MuiGridListTile()(Attr("key") := tile.image, + MuiGridListTile()( + Attr("key") := tile.image, img(src := tile.image, alt := tile.title), MuiGridListTileBar( title = VdomNode(tile.title), subtitle = VdomNode(span(s"by: ${tile.author}").rawNode), - actionIcon = VdomNode(MuiIconButton()(css.iconStyle, MuiIcons(MuiIconsModule.Info)()).rawNode) + actionIcon = VdomNode( + MuiIconButton()(css.iconStyle, MuiIcons(MuiIconsModule.Info)()).rawNode + ) ) ) } @@ -43,6 +58,7 @@ object TitlebarGridList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("TitlebarGridList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/AlignItemsList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/AlignItemsList.scala index abc4f321..d956bb59 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/AlignItemsList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/AlignItemsList.scala @@ -6,18 +6,28 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.styles.demos.Lists.{DefaultListStyle, ListStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiAvatar, MuiList, MuiListItem, MuiListItemAvatar, MuiListItemText, MuiTypography} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiAvatar, + MuiList, + MuiListItem, + MuiListItemAvatar, + MuiListItemText, + MuiTypography +} object AlignItemsList extends ScalaCssReactImplicits { case class Props(style: ListStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Align list items")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList()( MuiListItem(alignItems = MuiListItem.AlignItems.flexStart)( MuiListItemAvatar()( @@ -26,9 +36,7 @@ object AlignItemsList extends ScalaCssReactImplicits { MuiListItemText( primary = VdomNode("Brunch this weekend?"), secondary = React.Fragment( - MuiTypography(component = "span", color = MuiTypography.Color.textPrimary)(css.inline, - "Ali Connors" - ), + MuiTypography(component = "span", color = MuiTypography.Color.textPrimary)(css.inline, "Ali Connors"), " — I'll be in your neighborhood doing errands this…" ) ) @@ -40,7 +48,8 @@ object AlignItemsList extends ScalaCssReactImplicits { MuiListItemText( primary = VdomNode("Summer BBQ"), secondary = React.Fragment( - MuiTypography(component = "span", color = MuiTypography.Color.textPrimary)(css.inline, + MuiTypography(component = "span", color = MuiTypography.Color.textPrimary)( + css.inline, "to Scott, Alex, Jennifer" ), " — Wish I could come, but I'm out of town this…" @@ -54,7 +63,8 @@ object AlignItemsList extends ScalaCssReactImplicits { MuiListItemText( primary = VdomNode("Oui Oui"), secondary = React.Fragment( - MuiTypography(component = "span", color = MuiTypography.Color.textPrimary)(css.inline, + MuiTypography(component = "span", color = MuiTypography.Color.textPrimary)( + css.inline, "Sandra Adams" ), " — Do you have Paris recommendations? Have you ever…" @@ -66,6 +76,7 @@ object AlignItemsList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("AlignItemsList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/CheckboxList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/CheckboxList.scala index d34caa68..988d1911 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/CheckboxList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/CheckboxList.scala @@ -7,7 +7,14 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.styles.demos.Lists.{DefaultListStyle, ListStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiCheckbox, MuiIconButton, MuiList, MuiListItem, MuiListItemSecondaryAction, MuiListItemText} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiCheckbox, + MuiIconButton, + MuiList, + MuiListItem, + MuiListItemSecondaryAction, + MuiListItemText +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object CheckboxList extends ScalaCssReactImplicits { @@ -16,13 +23,10 @@ object CheckboxList extends ScalaCssReactImplicits { case class State(checked: List[Int] = List(0)) { def isChecked(value: Int) = checked.contains(value) - def handleToggle(value: Int) = { - if (checked.contains(value)) { - copy(checked = checked.filterNot(_ == value)) - } else { - copy(checked = checked :+ value) - } - } + def handleToggle(value: Int) = + if (checked.contains(value)) copy(checked = checked.filterNot(_ == value)) + else copy(checked = checked :+ value) + } class Backend(t: BackendScope[Props, State]) { @@ -33,10 +37,13 @@ object CheckboxList extends ScalaCssReactImplicits { div( ComponentContainer("List Controls Checkbox")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList()( List(0, 1, 2, 3).toVdomArray { value => - MuiListItem(dense = true, button = true)(Attr("key") := value, + MuiListItem(dense = true, button = true)( + Attr("key") := value, onClick --> handleToggle(value), MuiCheckbox(disableRipple = true)( checked := state.isChecked(value), @@ -56,6 +63,7 @@ object CheckboxList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CheckboxList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/CheckboxListSecondary.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/CheckboxListSecondary.scala index 621eba8d..810df7a4 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/CheckboxListSecondary.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/CheckboxListSecondary.scala @@ -7,7 +7,15 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.styles.demos.Lists.{DefaultListStyle, ListStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiAvatar, MuiCheckbox, MuiList, MuiListItem, MuiListItemAvatar, MuiListItemSecondaryAction, MuiListItemText} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiAvatar, + MuiCheckbox, + MuiList, + MuiListItem, + MuiListItemAvatar, + MuiListItemSecondaryAction, + MuiListItemText +} object CheckboxListSecondary extends ScalaCssReactImplicits { case class Props(style: ListStyle) @@ -15,13 +23,10 @@ object CheckboxListSecondary extends ScalaCssReactImplicits { case class State(checked: List[Int] = List(0)) { def isChecked(value: Int) = checked.contains(value) - def handleToggle(value: Int) = { - if (checked.contains(value)) { - copy(checked = checked.filterNot(_ == value)) - } else { - copy(checked = checked :+ value) - } - } + def handleToggle(value: Int) = + if (checked.contains(value)) copy(checked = checked.filterNot(_ == value)) + else copy(checked = checked :+ value) + } class Backend(t: BackendScope[Props, State]) { @@ -32,12 +37,18 @@ object CheckboxListSecondary extends ScalaCssReactImplicits { div( ComponentContainer("List Controls Checkbox Secondary")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList(dense = true)( List(0, 1, 2, 3).toVdomArray { value => - MuiListItem(button = true)(Attr("key") := value, + MuiListItem(button = true)( + Attr("key") := value, MuiListItemAvatar()( - MuiAvatar()(alt := s"Avatar n°${value + 1}", src := s"/static/images/avatar/${value + 1}.jpg") + MuiAvatar()( + alt := s"Avatar n°${value + 1}", + src := s"/static/images/avatar/${value + 1}.jpg" + ) ), MuiListItemText(primary = VdomNode(s"Line item ${value + 1}")), MuiListItemSecondaryAction()( @@ -53,6 +64,7 @@ object CheckboxListSecondary extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CheckboxListSecondary") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/FolderList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/FolderList.scala index fecf5f60..b410e9ab 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/FolderList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/FolderList.scala @@ -13,18 +13,24 @@ object FolderList extends ScalaCssReactImplicits { case class Props(style: ListStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Folder List")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList()( MuiListItem()( MuiAvatar()( MuiIcons(MuiIconsModule.Image)() ), - MuiListItemText(primary = VdomNode("Photos"), secondary = VdomNode("Jan 9, 2014")) + MuiListItemText( + primary = VdomNode("Photos"), + secondary = VdomNode("Jan 9, 2014") + ) ), MuiListItem()( MuiAvatar()( @@ -36,13 +42,17 @@ object FolderList extends ScalaCssReactImplicits { MuiAvatar()( MuiIcons(MuiIconsModule.BeachAccess)() ), - MuiListItemText(primary = VdomNode("Vacation"), secondary = VdomNode("July 20, 2014")) + MuiListItemText( + primary = VdomNode("Vacation"), + secondary = VdomNode("July 20, 2014") + ) ) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("FolderList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/InsetList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/InsetList.scala index ca6cefb9..78bb6fcd 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/InsetList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/InsetList.scala @@ -13,12 +13,15 @@ object InsetList extends ScalaCssReactImplicits { case class Props(style: ListStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Inset List")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList(component = "nav")( MuiListItem(button = true)( MuiListItemIcon()( @@ -34,6 +37,7 @@ object InsetList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("InsetList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/InteractiveList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/InteractiveList.scala index 97ca5769..e2766a23 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/InteractiveList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/InteractiveList.scala @@ -7,7 +7,21 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.styles.demos.Lists.{DefaultInteractiveListStyle, InteractiveListStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiAvatar, MuiCheckbox, MuiFormControlLabel, MuiFormGroup, MuiGrid, MuiIconButton, MuiList, MuiListItem, MuiListItemAvatar, MuiListItemIcon, MuiListItemSecondaryAction, MuiListItemText, MuiTypography} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiAvatar, + MuiCheckbox, + MuiFormControlLabel, + MuiFormGroup, + MuiGrid, + MuiIconButton, + MuiList, + MuiListItem, + MuiListItemAvatar, + MuiListItemIcon, + MuiListItemSecondaryAction, + MuiListItemText, + MuiTypography +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object InteractiveList extends ScalaCssReactImplicits { @@ -20,6 +34,7 @@ object InteractiveList extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleDense(event: ReactEventFromInput) = { val value = event.target.checked @@ -39,7 +54,8 @@ object InteractiveList extends ScalaCssReactImplicits { div( ComponentContainer("Interactive List")( - div(css.root, + div( + css.root, MuiFormGroup(row = true)( MuiFormControlLabel( control = MuiCheckbox()( @@ -61,10 +77,12 @@ object InteractiveList extends ScalaCssReactImplicits { MuiGrid(container = true, spacing = MuiGrid.Spacing.`16`)( MuiGrid(item = true, xs = 12, md = 6)( MuiTypography(variant = MuiTypography.Variant.h6)(css.title, "Text only"), - div(demoStyle, + div( + demoStyle, MuiList(dense = state.dense)( List(1, 2, 3).toVdomArray { generateKey => - MuiListItem()(Attr("key") := generateKey, + MuiListItem()( + Attr("key") := generateKey, MuiListItemText( primary = VdomNode("Single-line item"), secondary = if (state.secondary) VdomNode("Secondary text") else EmptyVdom @@ -76,10 +94,12 @@ object InteractiveList extends ScalaCssReactImplicits { ), MuiGrid(item = true, xs = 12, md = 6)( MuiTypography(variant = MuiTypography.Variant.h6)(css.title, "Icon with text"), - div(demoStyle, + div( + demoStyle, MuiList(dense = state.dense)( List(1, 2, 3).toVdomArray { generateKey => - MuiListItem()(Attr("key") := generateKey, + MuiListItem()( + Attr("key") := generateKey, MuiListItemIcon()( MuiIcons(MuiIconsModule.Folder)() ), @@ -96,10 +116,12 @@ object InteractiveList extends ScalaCssReactImplicits { MuiGrid(container = true, spacing = MuiGrid.Spacing.`16`)( MuiGrid(item = true, xs = 12, md = 6)( MuiTypography(variant = MuiTypography.Variant.h6)(css.title, "Avatar with text"), - div(demoStyle, + div( + demoStyle, MuiList(dense = state.dense)( List(1, 2, 3).toVdomArray { generateKey => - MuiListItem()(Attr("key") := generateKey, + MuiListItem()( + Attr("key") := generateKey, MuiListItemAvatar()( MuiAvatar()( MuiIcons(MuiIconsModule.Folder)() @@ -116,10 +138,12 @@ object InteractiveList extends ScalaCssReactImplicits { ), MuiGrid(item = true, xs = 12, md = 6)( MuiTypography(variant = MuiTypography.Variant.h6)(css.title, "Avatar with text and icon"), - div(demoStyle, + div( + demoStyle, MuiList(dense = state.dense)( List(1, 2, 3).toVdomArray { generateKey => - MuiListItem()(Attr("key") := generateKey, + MuiListItem()( + Attr("key") := generateKey, MuiListItemAvatar()( MuiAvatar()( MuiIcons(MuiIconsModule.Folder)() @@ -145,6 +169,7 @@ object InteractiveList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("InteractiveList") @@ -154,4 +179,3 @@ object InteractiveList extends ScalaCssReactImplicits { def apply(style: InteractiveListStyle = DefaultInteractiveListStyle) = component(Props(style)) } - diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/NestedList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/NestedList.scala index de80b809..b6287289 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/NestedList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/NestedList.scala @@ -6,7 +6,14 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.styles.demos.Lists.{DefaultListStyle, ListStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiCollapse, MuiList, MuiListItem, MuiListItemIcon, MuiListItemText, MuiListSubheader} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiCollapse, + MuiList, + MuiListItem, + MuiListItemIcon, + MuiListItemText, + MuiListSubheader +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object NestedList extends ScalaCssReactImplicits { @@ -24,7 +31,9 @@ object NestedList extends ScalaCssReactImplicits { div( ComponentContainer("Nested List")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList( component = "nav", subheader = MuiListSubheader(component = "div")("Nested List Items") @@ -41,16 +50,23 @@ object NestedList extends ScalaCssReactImplicits { ), MuiListItemText(inset = true, primary = VdomNode("Drafts")) ), - MuiListItem(button = true)(onClick --> handleClick, + MuiListItem(button = true)( + onClick --> handleClick, MuiListItemIcon()( MuiIcons(MuiIconsModule.Inbox)() ), MuiListItemText(inset = true, primary = VdomNode("Inbox")), if (state.open) MuiIcons(MuiIconsModule.ExpandLess)() else MuiIcons(MuiIconsModule.ExpandMore)() ), - MuiCollapse(in = state.open, timeout = MuiCollapse.Timeout.auto, unmountOnExit = true)( - MuiList(component = "div", disablePadding = true)(onClick --> handleClick, - MuiListItem(button = true)(css.nested, + MuiCollapse( + in = state.open, + timeout = MuiCollapse.Timeout.auto, + unmountOnExit = true + )( + MuiList(component = "div", disablePadding = true)( + onClick --> handleClick, + MuiListItem(button = true)( + css.nested, MuiListItemIcon()( MuiIcons(MuiIconsModule.StarBorder)() ), @@ -63,6 +79,7 @@ object NestedList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("NestedList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/PinnedSubheaderList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/PinnedSubheaderList.scala index c351f43a..09af8300 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/PinnedSubheaderList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/PinnedSubheaderList.scala @@ -13,6 +13,7 @@ object PinnedSubheaderList extends ScalaCssReactImplicits { case class Props(style: PinnedSubheaderListStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -20,14 +21,22 @@ object PinnedSubheaderList extends ScalaCssReactImplicits { div( ComponentContainer("Pinned Subheader List")( - div(css.root, rootPaper, - MuiList(subheader = li())(css.root, rootPaper, + div( + css.root, + rootPaper, + MuiList(subheader = li())( + css.root, + rootPaper, List(0, 1, 2, 3, 4).toVdomArray { sectionId => - li(css.listSection, key := s"section-$sectionId", - ul(css.ul, + li( + css.listSection, + key := s"section-$sectionId", + ul( + css.ul, MuiListSubheader()(s"I'm sticky $sectionId"), List(0, 1, 2).toVdomArray { item => - MuiListItem()(Attr("key") := s"item-$sectionId-$item", + MuiListItem()( + Attr("key") := s"item-$sectionId-$item", MuiListItemText(primary = VdomNode(s"Item $item")) ) } @@ -39,6 +48,7 @@ object PinnedSubheaderList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("PinnedSubheaderList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SelectedListItem.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SelectedListItem.scala index cdc4ff4b..06810ee5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SelectedListItem.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SelectedListItem.scala @@ -26,7 +26,9 @@ object SelectedListItem extends ScalaCssReactImplicits { div( ComponentContainer("Selected ListItem")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList(component = "nav")( MuiListItem(button = true)( selected := state.isSelectedIndex(0), @@ -62,6 +64,7 @@ object SelectedListItem extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SelectedListItem") @@ -71,4 +74,3 @@ object SelectedListItem extends ScalaCssReactImplicits { def apply(style: ListStyle = DefaultListStyle) = component(Props(style)) } - diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SimpleList.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SimpleList.scala index 20a7bf5c..ef9374e0 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SimpleList.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SimpleList.scala @@ -13,12 +13,15 @@ object SimpleList extends ScalaCssReactImplicits { case class Props(style: ListStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Simple List")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList(component = "nav")( MuiListItem(button = true)( MuiListItemIcon()( @@ -37,7 +40,8 @@ object SimpleList extends ScalaCssReactImplicits { MuiListItem(button = true)( MuiListItemText(primary = VdomNode("Trash")) ), - MuiListItem(component = "a", button = true)(href := "#simple-list", + MuiListItem(component = "a", button = true)( + href := "#simple-list", MuiListItemText(primary = VdomNode("Spam")) ) ) @@ -46,6 +50,7 @@ object SimpleList extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleList") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SwitchListSecondary.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SwitchListSecondary.scala index f9f95506..0e34e365 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SwitchListSecondary.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Lists/SwitchListSecondary.scala @@ -6,7 +6,15 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.styles.demos.Lists.{DefaultListStyle, ListStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiList, MuiListItem, MuiListItemIcon, MuiListItemSecondaryAction, MuiListItemText, MuiListSubheader, MuiSwitch} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiList, + MuiListItem, + MuiListItemIcon, + MuiListItemSecondaryAction, + MuiListItemText, + MuiListSubheader, + MuiSwitch +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object SwitchListSecondary extends ScalaCssReactImplicits { @@ -15,13 +23,10 @@ object SwitchListSecondary extends ScalaCssReactImplicits { case class State(checked: List[String] = List("wifi")) { def isChecked(value: String) = checked.contains(value) - def handleToggle(value: String) = { - if (checked.contains(value)) { - copy(checked = checked.filterNot(_ == value)) - } else { - copy(checked = checked :+ value) - } - } + def handleToggle(value: String) = + if (checked.contains(value)) copy(checked = checked.filterNot(_ == value)) + else copy(checked = checked :+ value) + } class Backend(t: BackendScope[Props, State]) { @@ -32,7 +37,9 @@ object SwitchListSecondary extends ScalaCssReactImplicits { div( ComponentContainer("List Controls Switch Secondary")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList(subheader = MuiListSubheader()("Settings"))( MuiListItem()( MuiListItemIcon()( @@ -63,6 +70,7 @@ object SwitchListSecondary extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SwitchListSecondary") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/FadeMenu.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/FadeMenu.scala index d7aebd61..3676d4a5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/FadeMenu.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/FadeMenu.scala @@ -12,6 +12,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiFade, MuiMenu, MuiMenuItem} object FadeMenu extends ScalaCssReactImplicits { + @js.native trait JsObject extends js.Object @@ -23,6 +24,7 @@ object FadeMenu extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Unit, State]) { + def handleClick(e: ReactEventFromHtml): Callback = { val target = e.currentTarget @@ -31,9 +33,8 @@ object FadeMenu extends ScalaCssReactImplicits { def handleClickClose: Callback = t.modState(_.handleClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } def render(state: State): VdomElement = { val ariaOwns = if (state.isMenuOpen) "fade-menu" else "" @@ -62,6 +63,7 @@ object FadeMenu extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Unit]("FadeMenu") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/ListItemComposition.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/ListItemComposition.scala index 6b127005..39b90c7f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/ListItemComposition.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/ListItemComposition.scala @@ -17,6 +17,7 @@ object ListItemComposition extends ScalaCssReactImplicits { case class Props(style: ListItemCompositionStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -29,22 +30,23 @@ object ListItemComposition extends ScalaCssReactImplicits { div( MuiPaper()( MuiMenuList()( - MuiMenuItem()(css.menuItem, - MuiListItemIcon()(css.icon, - MuiIcons(MuiIconsModule.Send)() - ), - MuiListItemText(classes = textClasses, inset = true, primary = VdomNode("Sent mail")) + MuiMenuItem()( + css.menuItem, + MuiListItemIcon()(css.icon, MuiIcons(MuiIconsModule.Send)()), + MuiListItemText( + classes = textClasses, + inset = true, + primary = VdomNode("Sent mail") + ) ), - MuiMenuItem()(css.menuItem, - MuiListItemIcon()(css.icon, - MuiIcons(MuiIconsModule.Drafts)() - ), + MuiMenuItem()( + css.menuItem, + MuiListItemIcon()(css.icon, MuiIcons(MuiIconsModule.Drafts)()), MuiListItemText(classes = textClasses, inset = true, primary = VdomNode("Drafts")) ), - MuiMenuItem()(css.menuItem, - MuiListItemIcon()(css.icon, - MuiIcons(MuiIconsModule.Inbox)() - ), + MuiMenuItem()( + css.menuItem, + MuiListItemIcon()(css.icon, MuiIcons(MuiIconsModule.Inbox)()), MuiListItemText(classes = textClasses, inset = true, primary = VdomNode("Inbox")) ) ) @@ -53,6 +55,7 @@ object ListItemComposition extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ListItemComposition") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/LongMenu.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/LongMenu.scala index 3a7e2610..e6c5633a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/LongMenu.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/LongMenu.scala @@ -15,6 +15,7 @@ import io.kinoplan.scalajs.react.material.ui.core.{MuiIconButton, MuiMenu, MuiMe import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object LongMenu extends ScalaCssReactImplicits { + case class State(anchorEl: Option[HTMLElement] = None) { val isOpen = anchorEl.nonEmpty @@ -23,6 +24,7 @@ object LongMenu extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Unit, State]) { + def handleClick(e: ReactEventFromHtml): Callback = { val target = e.currentTarget @@ -31,9 +33,8 @@ object LongMenu extends ScalaCssReactImplicits { def handleClickClose: Callback = t.modState(_.handleClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } val ITEM_HEIGHT = 48 @@ -89,6 +90,7 @@ object LongMenu extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Unit]("LongMenu") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/SimpleListMenu.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/SimpleListMenu.scala index c6b7ba92..ff3ca018 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/SimpleListMenu.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/SimpleListMenu.scala @@ -26,19 +26,17 @@ object SimpleListMenu extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleClickListItem(e: ReactEventFromHtml): Callback = { val target = e.currentTarget t.modState(_.handleClickListItem(target)) } - def handleMenuItemClick(index: Int): Callback = { - t.modState(_.handleMenuItemClick(index)) - } + def handleMenuItemClick(index: Int): Callback = t.modState(_.handleMenuItemClick(index)) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => t.modState(_.handleClose) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -52,7 +50,9 @@ object SimpleListMenu extends ScalaCssReactImplicits { div( ComponentContainer("Selected menus")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiList(component = "nav")( MuiListItem(button = true)( aria.haspopup.`true`, @@ -65,7 +65,11 @@ object SimpleListMenu extends ScalaCssReactImplicits { ) ) ), - MuiMenu(anchorEl = state.anchorEl.orUndefined, open = state.isMenuOpen, onClose = onClose)( + MuiMenu( + anchorEl = state.anchorEl.orUndefined, + open = state.isMenuOpen, + onClose = onClose + )( id := "lock-menu", options.zipWithIndex.toVdomArray { case (option, index) => MuiMenuItem()( @@ -81,6 +85,7 @@ object SimpleListMenu extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleListMenu") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/SimpleMenu.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/SimpleMenu.scala index 71b2de49..e361d6cd 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/SimpleMenu.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/SimpleMenu.scala @@ -11,6 +11,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiMenu, MuiMenuItem} object SimpleMenu extends ScalaCssReactImplicits { + case class State(anchorEl: Option[HTMLElement] = None) { val isMenuOpen = anchorEl.nonEmpty @@ -19,6 +20,7 @@ object SimpleMenu extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Unit, State]) { + def handleClick(e: ReactEventFromHtml): Callback = { val target = e.currentTarget @@ -27,9 +29,8 @@ object SimpleMenu extends ScalaCssReactImplicits { def handleClickClose: Callback = t.modState(_.handleClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } def render(state: State): VdomElement = { val ariaOwns = if (state.isMenuOpen) "simple-menu" else "" @@ -43,16 +44,21 @@ object SimpleMenu extends ScalaCssReactImplicits { onClick ==> handleClick, "Open Menu" ), - MuiMenu(anchorEl = state.anchorEl.orUndefined, open = state.isMenuOpen, onClose = onClose)( + MuiMenu( + anchorEl = state.anchorEl.orUndefined, + open = state.isMenuOpen, + onClose = onClose + )( id := "simple-menu", MuiMenuItem()(onClick --> handleClickClose, "Profile"), - MuiMenuItem()(onClick --> handleClickClose, "My account"), + MuiMenuItem()(onClick --> handleClickClose, "My account"), MuiMenuItem()(onClick --> handleClickClose, "Logout") ).when(state.isMenuOpen) ) ) ) } + } private val component = ScalaComponent.builder[Unit]("SimpleMenu") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/TypographyMenu.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/TypographyMenu.scala index b9224264..055879b3 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/TypographyMenu.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Menus/TypographyMenu.scala @@ -13,13 +13,15 @@ object TypographyMenu extends ScalaCssReactImplicits { case class Props(style: TypographyMenuStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Limitations")( div( - MuiPaper()(css.root, + MuiPaper()( + css.root, MuiMenuList()( MuiMenuItem()( MuiListItemIcon()( @@ -47,6 +49,7 @@ object TypographyMenu extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("TypographyMenu") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Paper/PaperSheet.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Paper/PaperSheet.scala index 51da836d..bd3fec89 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Paper/PaperSheet.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Paper/PaperSheet.scala @@ -12,13 +12,15 @@ object PaperSheet extends ScalaCssReactImplicits { case class Props(style: PaperStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Paper Sheet")( div( - MuiPaper(elevation = 1)(css.root, + MuiPaper(elevation = 1)( + css.root, MuiTypography(variant = MuiTypography.Variant.h5, component = "h3")( "This is a sheet of paper." ), @@ -30,6 +32,7 @@ object PaperSheet extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("PaperSheet") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/DateAndTimePickers.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/DateAndTimePickers.scala index 9defb7a5..4cb43018 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/DateAndTimePickers.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/DateAndTimePickers.scala @@ -14,22 +14,29 @@ object DateAndTimePickers extends ScalaCssReactImplicits { case class Props(style: PickersStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Date & Time pickers")( - form(css.container, noValidate := true, - MuiTextField(label = "Next appointment".toVdom, InputLabelProps = MuiInputLabelProps(shrink = true))( + form( + css.container, + noValidate := true, + MuiTextField( + label = "Next appointment".toVdom, + InputLabelProps = MuiInputLabelProps(shrink = true) + )( css.textField, id := "datetime-local", `type` := "datetime-local", - defaultValue := "2017-05-24T10:30", + defaultValue := "2017-05-24T10:30" ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("DateAndTimePickers") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/DatePickers.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/DatePickers.scala index 5f39ddc4..a51b99ee 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/DatePickers.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/DatePickers.scala @@ -14,22 +14,29 @@ object DatePickers extends ScalaCssReactImplicits { case class Props(style: PickersStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Date pickers")( - form(css.container, noValidate := true, - MuiTextField(label = "Birthday".toVdom, InputLabelProps = MuiInputLabelProps(shrink = true))( + form( + css.container, + noValidate := true, + MuiTextField( + label = "Birthday".toVdom, + InputLabelProps = MuiInputLabelProps(shrink = true) + )( css.textField, id := "date", `type` := "date", - defaultValue := "2017-05-24", + defaultValue := "2017-05-24" ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("DatePickers") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/TimePickers.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/TimePickers.scala index 937fea91..675455a8 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/TimePickers.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Pickers/TimePickers.scala @@ -14,12 +14,15 @@ object TimePickers extends ScalaCssReactImplicits { case class Props(style: PickersStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Time pickers")( - form(css.container, noValidate := true, + form( + css.container, + noValidate := true, MuiTextField( label = "Alarm clock".toVdom, InputLabelProps = MuiInputLabelProps(shrink = true), @@ -34,6 +37,7 @@ object TimePickers extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("TimePickers") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularDeterminate.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularDeterminate.scala index 02c269bc..0d20d60f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularDeterminate.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularDeterminate.scala @@ -50,6 +50,7 @@ object CircularDeterminate extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CircularDeterminate") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularIndeterminate.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularIndeterminate.scala index 7a59fb86..8b54c166 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularIndeterminate.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularIndeterminate.scala @@ -12,6 +12,7 @@ object CircularIndeterminate extends ScalaCssReactImplicits { case class Props(style: CircularProgressStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -24,6 +25,7 @@ object CircularIndeterminate extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CircularIndeterminate") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularIntegration.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularIntegration.scala index e6faefa0..55afcdc4 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularIntegration.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularIntegration.scala @@ -32,9 +32,7 @@ object CircularIntegration extends ScalaCssReactImplicits { timer = js.timers.setTimeout(2000)(t.modState(_.setSuccess).runNow()) } - def handleButtonClick(loading: Boolean) = { - (t.modState(_.setLoading) >> setSuccess).when(!loading) >> Callback.empty - } + def handleButtonClick(loading: Boolean) = (t.modState(_.setLoading) >> setSuccess).when(!loading) >> Callback.empty def render(props: Props, state: State): VdomElement = { val css = props.style @@ -43,19 +41,24 @@ object CircularIntegration extends ScalaCssReactImplicits { div( ComponentContainer("Interactive Integration")( - div(css.root, - div(css.wrapper, - MuiFab(color = MuiFab.Color.primary)(buttonCss, + div( + css.root, + div( + css.wrapper, + MuiFab(color = MuiFab.Color.primary)( + buttonCss, onClick --> handleButtonClick(state.loading), if (state.success) MuiIcons(MuiIconsModule.Check)() else MuiIcons(MuiIconsModule.Save)() ), MuiCircularProgress(size = 68)(css.fabProgress).when(state.loading) ), - div(css.wrapper, + div( + css.wrapper, MuiButton( variant = MuiButton.Variant.contained, color = MuiButton.Color.primary - )(buttonCss, + )( + buttonCss, onClick --> handleButtonClick(state.loading), disabled := state.loading, "Accept terms" @@ -66,6 +69,7 @@ object CircularIntegration extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CircularIntegration") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularStatic.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularStatic.scala index 6d191cec..801f8395 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularStatic.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularStatic.scala @@ -42,11 +42,15 @@ object CircularStatic extends ScalaCssReactImplicits { MuiCircularProgress(variant = MuiCircularProgress.Variant.static, value = 50)(css.progress), MuiCircularProgress(variant = MuiCircularProgress.Variant.static, value = 75)(css.progress), MuiCircularProgress(variant = MuiCircularProgress.Variant.static, value = 100)(css.progress), - MuiCircularProgress(variant = MuiCircularProgress.Variant.static, value = state.completed)(css.progress) + MuiCircularProgress( + variant = MuiCircularProgress.Variant.static, + value = state.completed + )(css.progress) ) ) ) } + } private val component = ScalaComponent.builder[Props]("CircularStatic") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularUnderLoad.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularUnderLoad.scala index bacf0eb8..1277474c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularUnderLoad.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CircularUnderLoad.scala @@ -7,6 +7,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.MuiCircularProgress object CircularUnderLoad { + private val component = ScalaComponent.builder[Unit]("CircularUnderLoad") .renderStatic( div( diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CustomizedProgress.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CustomizedProgress.scala index 4fd47a61..1e5aee75 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CustomizedProgress.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/CustomizedProgress.scala @@ -13,6 +13,7 @@ object CustomizedProgress extends ScalaCssReactImplicits { case class Props(style: CustomizedProgressStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -23,10 +24,12 @@ object CustomizedProgress extends ScalaCssReactImplicits { div( ComponentContainer("Customized Progress")( - MuiPaper()(css.common.flexGrowOne, + MuiPaper()( + css.common.flexGrowOne, MuiCircularProgress(size = 30, thickness = 5.0)(css.progress), MuiLinearProgress(classes = linearClasses), - div(css.facebook, + div( + css.facebook, MuiCircularProgress( variant = MuiCircularProgress.Variant.determinate, value = 100, @@ -38,12 +41,13 @@ object CustomizedProgress extends ScalaCssReactImplicits { disableShrink = true, size = 24, thickness = 4.0 - )(css.facebook2), + )(css.facebook2) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedProgress") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/DelayingAppearance.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/DelayingAppearance.scala index bf7380ac..fbf2d8a8 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/DelayingAppearance.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/DelayingAppearance.scala @@ -55,9 +55,8 @@ object DelayingAppearance extends ScalaCssReactImplicits { timer = js.timers.setTimeout(2000)(t.modState(_.setSuccess).runNow()) } - def handleClickQuery(state: State) = { + def handleClickQuery(state: State) = unmount >> setIdle.when(state.nonIdle) >> (setProgress >> setSuccess).when(state.isIdle) >> Callback.empty - } def handleClickLoading = t.modState(_.handleClickLoading) @@ -66,28 +65,26 @@ object DelayingAppearance extends ScalaCssReactImplicits { div( ComponentContainer("Delaying appearance")( - div(css.root, - div(css.placeholder, + div( + css.root, + div( + css.placeholder, MuiFade(in = state.loading, unmountOnExit = true)( style := state.transitionDelayStyle, MuiCircularProgress() - ), - ), - MuiButton()(css.button, - onClick --> handleClickLoading, - state.loadingTitle + ) ), - div(css.placeholder, - if (state.isSuccess) { - MuiTypography()("Success!") - } else { - MuiFade(in = state.isProgress, unmountOnExit = true)( - style := state.transitionDelayStyle, - MuiCircularProgress() - ) - } + MuiButton()(css.button, onClick --> handleClickLoading, state.loadingTitle), + div( + css.placeholder, + if (state.isSuccess) MuiTypography()("Success!") + else MuiFade(in = state.isProgress, unmountOnExit = true)( + style := state.transitionDelayStyle, + MuiCircularProgress() + ) ), - MuiButton()(css.button, + MuiButton()( + css.button, onClick --> handleClickQuery(state), state.simulateALoadTitle ) @@ -95,6 +92,7 @@ object DelayingAppearance extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("DelayingAppearance") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearBuffer.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearBuffer.scala index c2399141..cab5ae64 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearBuffer.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearBuffer.scala @@ -15,16 +15,16 @@ object LinearBuffer extends ScalaCssReactImplicits { case class Props(style: CommonStyle) case class State(completed: Int = 0, buffer: Int = 10) { - def setProgress = { - if (completed > 100) { - copy(completed = 0, buffer = 10) - } else { + + def setProgress = + if (completed > 100) copy(completed = 0, buffer = 10) + else { val diff = (Math.random() * 10).toInt val diff2 = (Math.random() * 10).toInt copy(completed = completed + diff, buffer = completed + diff + diff2) } - } + } class Backend(t: BackendScope[Props, State]) { @@ -46,7 +46,8 @@ object LinearBuffer extends ScalaCssReactImplicits { div( ComponentContainer("Linear Buffer")( - div(css.flexGrowOne, + div( + css.flexGrowOne, MuiLinearProgress( variant = MuiLinearProgress.Variant.buffer, value = state.completed, @@ -63,6 +64,7 @@ object LinearBuffer extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("LinearBuffer") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearDeterminate.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearDeterminate.scala index fedbe40c..0c31ab9c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearDeterminate.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearDeterminate.scala @@ -15,15 +15,15 @@ object LinearDeterminate extends ScalaCssReactImplicits { case class Props(style: CommonStyle) case class State(completed: Int = 0) { - def setProgress = { - if (completed == 100) { - copy(completed = 0) - } else { + + def setProgress = + if (completed == 100) copy(completed = 0) + else { val diff = Math.random() * 10 copy(completed = Math.min(completed + diff, 100).toInt) } - } + } class Backend(t: BackendScope[Props, State]) { @@ -45,7 +45,8 @@ object LinearDeterminate extends ScalaCssReactImplicits { div( ComponentContainer("Linear Determinate")( - div(css.flexGrowOne, + div( + css.flexGrowOne, MuiLinearProgress( variant = MuiLinearProgress.Variant.determinate, value = state.completed @@ -60,6 +61,7 @@ object LinearDeterminate extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("LinearDeterminate") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearIndeterminate.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearIndeterminate.scala index f68d1691..b4859a3b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearIndeterminate.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearIndeterminate.scala @@ -12,12 +12,14 @@ object LinearIndeterminate extends ScalaCssReactImplicits { case class Props(style: CommonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Linear Indeterminate")( - div(css.flexGrowOne, + div( + css.flexGrowOne, MuiLinearProgress(), br, MuiLinearProgress(color = MuiLinearProgress.Color.secondary) @@ -25,6 +27,7 @@ object LinearIndeterminate extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("LinearIndeterminate") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearQuery.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearQuery.scala index 232e666a..fd2f9ed1 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearQuery.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Progress/LinearQuery.scala @@ -12,19 +12,25 @@ object LinearQuery extends ScalaCssReactImplicits { case class Props(style: CommonStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Linear Query")( - div(css.flexGrowOne, + div( + css.flexGrowOne, MuiLinearProgress(variant = MuiLinearProgress.Variant.query), br, - MuiLinearProgress(variant = MuiLinearProgress.Variant.query, color = MuiLinearProgress.Color.secondary) + MuiLinearProgress( + variant = MuiLinearProgress.Variant.query, + color = MuiLinearProgress.Color.secondary + ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("LinearQuery") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CheckboxLabels.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CheckboxLabels.scala index a2c6bc9d..165dcda4 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CheckboxLabels.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CheckboxLabels.scala @@ -32,6 +32,7 @@ object CheckboxLabels extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeCheckedA(e: ReactEventFromInput) = { val value = e.target.checked @@ -129,6 +130,7 @@ object CheckboxLabels extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CheckboxLabels") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/Checkboxes.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/Checkboxes.scala index cb373128..532471f5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/Checkboxes.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/Checkboxes.scala @@ -7,6 +7,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.MuiCheckbox object Checkboxes { + case class State( checkedA: Boolean = true, checkedB: Boolean = true, @@ -20,6 +21,7 @@ object Checkboxes { } class Backend(t: BackendScope[Unit, State]) { + def handleChangeCheckedA(e: ReactEventFromInput) = { val value = e.target.checked @@ -38,33 +40,32 @@ object Checkboxes { t.modState(_.handleChangeCheckedF(value)) } - def render(state: State): VdomElement = { - div( - ComponentContainer("Checkboxes")( - div( - MuiCheckbox()( - checked := state.checkedA, - value := "checkedA", - onChange ==> handleChangeCheckedA - ), - MuiCheckbox(color = MuiCheckbox.Color.primary)( - checked := state.checkedB, - value := "checkedB", - onChange ==> handleChangeCheckedB - ), - MuiCheckbox()(value := "checkedC"), - MuiCheckbox()(disabled := true, value := "checkedD"), - MuiCheckbox()(disabled := true, checked := true, value := "checkedE"), - MuiCheckbox(indeterminate = true)( - checked := state.checkedF, - value := "checkedF", - onChange ==> handleChangeCheckedF - ), - MuiCheckbox(defaultChecked = true, color = MuiCheckbox.Color.default)(value := "checkedG") - ) + def render(state: State): VdomElement = div( + ComponentContainer("Checkboxes")( + div( + MuiCheckbox()( + checked := state.checkedA, + value := "checkedA", + onChange ==> handleChangeCheckedA + ), + MuiCheckbox(color = MuiCheckbox.Color.primary)( + checked := state.checkedB, + value := "checkedB", + onChange ==> handleChangeCheckedB + ), + MuiCheckbox()(value := "checkedC"), + MuiCheckbox()(disabled := true, value := "checkedD"), + MuiCheckbox()(disabled := true, checked := true, value := "checkedE"), + MuiCheckbox(indeterminate = true)( + checked := state.checkedF, + value := "checkedF", + onChange ==> handleChangeCheckedF + ), + MuiCheckbox(defaultChecked = true, color = MuiCheckbox.Color.default)(value := "checkedG") ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("Checkboxes") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CheckboxesGroup.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CheckboxesGroup.scala index bd05ba59..e75009be 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CheckboxesGroup.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CheckboxesGroup.scala @@ -7,7 +7,14 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.SelectionControls.{ControlButtonsGroupStyle, DefaultControlButtonsGroupStyle} import io.kinoplan.demo.utils.Helpers.StringExtended -import io.kinoplan.scalajs.react.material.ui.core.{MuiCheckbox, MuiFormControl, MuiFormControlLabel, MuiFormGroup, MuiFormHelperText, MuiFormLabel} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiCheckbox, + MuiFormControl, + MuiFormControlLabel, + MuiFormGroup, + MuiFormHelperText, + MuiFormLabel +} object CheckboxesGroup extends ScalaCssReactImplicits { case class Props(style: ControlButtonsGroupStyle) @@ -27,6 +34,7 @@ object CheckboxesGroup extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeGilad(e: ReactEventFromInput) = { val value = e.target.checked @@ -50,8 +58,10 @@ object CheckboxesGroup extends ScalaCssReactImplicits { div( ComponentContainer("Checkboxes with FormGroup")( - div(css.root, - MuiFormControl(component = "fieldset")(css.formControl, + div( + css.root, + MuiFormControl(component = "fieldset")( + css.formControl, MuiFormLabel(component = "legend")("Assign responsibility"), MuiFormGroup()( MuiFormControlLabel( @@ -81,7 +91,8 @@ object CheckboxesGroup extends ScalaCssReactImplicits { ), MuiFormHelperText()("Be careful") ), - MuiFormControl(error = state.error, component = "fieldset")(css.formControl, + MuiFormControl(error = state.error, component = "fieldset")( + css.formControl, required := true, MuiFormLabel(component = "legend")("Pick two"), MuiFormGroup()( @@ -116,6 +127,7 @@ object CheckboxesGroup extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CheckboxesGroup") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CustomizedSwitches.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CustomizedSwitches.scala index 698c468f..5b9d652c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CustomizedSwitches.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/CustomizedSwitches.scala @@ -19,6 +19,7 @@ object CustomizedSwitches extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeCheckedA(e: ReactEventFromInput) = { val value = e.target.checked @@ -71,6 +72,7 @@ object CustomizedSwitches extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedSwitches") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/FormControlLabelPosition.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/FormControlLabelPosition.scala index 6a886a51..32f63e56 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/FormControlLabelPosition.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/FormControlLabelPosition.scala @@ -5,55 +5,62 @@ import japgolly.scalajs.react.vdom.all._ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer -import io.kinoplan.scalajs.react.material.ui.core.{MuiFormControl, MuiFormControlLabel, MuiFormLabel, MuiRadio, MuiRadioGroup} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFormControl, + MuiFormControlLabel, + MuiFormLabel, + MuiRadio, + MuiRadioGroup +} object FormControlLabelPosition extends ScalaCssReactImplicits { + case class State(value: String = "female") { def handleChange(value: String) = copy(value = value) } class Backend(t: BackendScope[Unit, State]) { + def handleChange(e: ReactEventFromInput) = { val value = e.target.value t.modState(_.handleChange(value)) } - def render(state: State): VdomElement = { - div( - ComponentContainer("Label placement")( - MuiFormControl(component = "fieldset")( - MuiFormLabel(component = "legend")("labelPlacement"), - MuiRadioGroup(row = true)( - aria.label := "position", - name := "position", - value := state.value, - onChange ==> handleChange, - MuiFormControlLabel( - control = MuiRadio(color = MuiRadio.Color.primary).rawElement, - label = VdomNode("Top"), - labelPlacement = MuiFormControlLabel.LabelPlacement.top - )(value := "top"), - MuiFormControlLabel( - control = MuiRadio(color = MuiRadio.Color.primary).rawElement, - label = VdomNode("Start"), - labelPlacement = MuiFormControlLabel.LabelPlacement.start - )(value := "start"), - MuiFormControlLabel( - control = MuiRadio(color = MuiRadio.Color.primary).rawElement, - label = VdomNode("Bottom"), - labelPlacement = MuiFormControlLabel.LabelPlacement.bottom - )(value := "bottom"), - MuiFormControlLabel( - control = MuiRadio(color = MuiRadio.Color.primary).rawElement, - label = VdomNode("End"), - labelPlacement = MuiFormControlLabel.LabelPlacement.end - )(value := "end") - ) + def render(state: State): VdomElement = div( + ComponentContainer("Label placement")( + MuiFormControl(component = "fieldset")( + MuiFormLabel(component = "legend")("labelPlacement"), + MuiRadioGroup(row = true)( + aria.label := "position", + name := "position", + value := state.value, + onChange ==> handleChange, + MuiFormControlLabel( + control = MuiRadio(color = MuiRadio.Color.primary).rawElement, + label = VdomNode("Top"), + labelPlacement = MuiFormControlLabel.LabelPlacement.top + )(value := "top"), + MuiFormControlLabel( + control = MuiRadio(color = MuiRadio.Color.primary).rawElement, + label = VdomNode("Start"), + labelPlacement = MuiFormControlLabel.LabelPlacement.start + )(value := "start"), + MuiFormControlLabel( + control = MuiRadio(color = MuiRadio.Color.primary).rawElement, + label = VdomNode("Bottom"), + labelPlacement = MuiFormControlLabel.LabelPlacement.bottom + )(value := "bottom"), + MuiFormControlLabel( + control = MuiRadio(color = MuiRadio.Color.primary).rawElement, + label = VdomNode("End"), + labelPlacement = MuiFormControlLabel.LabelPlacement.end + )(value := "end") ) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("FormControlLabelPosition") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/RadioButtons.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/RadioButtons.scala index 740bb1c8..2d73b3fb 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/RadioButtons.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/RadioButtons.scala @@ -24,6 +24,7 @@ object RadioButtons extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChange(e: ReactEventFromInput) = { val value = e.target.value @@ -57,13 +58,13 @@ object RadioButtons extends ScalaCssReactImplicits { onChange ==> handleChange, value := "c", name := "radio-button-demo", - aria.label := "C", + aria.label := "C" ), MuiRadio(checked = state.isD, color = MuiRadio.Color.default)( onChange ==> handleChange, value := "d", name := "radio-button-demo", - aria.label := "D", + aria.label := "D" ), MuiRadio( checked = state.isE, @@ -74,12 +75,13 @@ object RadioButtons extends ScalaCssReactImplicits { onChange ==> handleChange, value := "e", name := "radio-button-demo", - aria.label := "E", + aria.label := "E" ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("RadioButtons") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/RadioButtonsGroup.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/RadioButtonsGroup.scala index c07c3789..a13804d3 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/RadioButtonsGroup.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/RadioButtonsGroup.scala @@ -7,7 +7,14 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.SelectionControls.{ControlButtonsGroupStyle, DefaultControlButtonsGroupStyle} import io.kinoplan.demo.utils.Helpers.StringExtended -import io.kinoplan.scalajs.react.material.ui.core.{MuiFormControl, MuiFormControlLabel, MuiFormHelperText, MuiFormLabel, MuiRadio, MuiRadioGroup} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFormControl, + MuiFormControlLabel, + MuiFormHelperText, + MuiFormLabel, + MuiRadio, + MuiRadioGroup +} object RadioButtonsGroup extends ScalaCssReactImplicits { case class Props(style: ControlButtonsGroupStyle) @@ -17,6 +24,7 @@ object RadioButtonsGroup extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChange(e: ReactEventFromInput) = { val value = e.target.value @@ -28,10 +36,13 @@ object RadioButtonsGroup extends ScalaCssReactImplicits { div( ComponentContainer("Radio Buttons")( - div(css.root, - MuiFormControl(component = "fieldset")(css.formControl, + div( + css.root, + MuiFormControl(component = "fieldset")( + css.formControl, MuiFormLabel(component = "legend")("Gender"), - MuiRadioGroup()(css.group, + MuiRadioGroup()( + css.group, aria.label := "Gender", name := "gender1", value := state.value, @@ -39,15 +50,20 @@ object RadioButtonsGroup extends ScalaCssReactImplicits { MuiFormControlLabel(control = MuiRadio()().rawElement, label = "Female".toVdom)(value := "female"), MuiFormControlLabel(control = MuiRadio()().rawElement, label = "Male".toVdom)(value := "male"), MuiFormControlLabel(control = MuiRadio()().rawElement, label = "Other".toVdom)(value := "other"), - MuiFormControlLabel(control = MuiRadio()().rawElement, label = "(Disabled option)".toVdom)( + MuiFormControlLabel( + control = MuiRadio()().rawElement, + label = "(Disabled option)".toVdom + )( disabled := true, value := "disabled" ) ) ), - MuiFormControl(component = "fieldset")(css.formControl, + MuiFormControl(component = "fieldset")( + css.formControl, MuiFormLabel(component = "legend")("Gender"), - MuiRadioGroup()(css.group, + MuiRadioGroup()( + css.group, aria.label := "gender", name := "gender2", value := state.value, @@ -82,6 +98,7 @@ object RadioButtonsGroup extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("RadioButtonsGroup") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/SwitchLabels.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/SwitchLabels.scala index 37594414..f6eb3a09 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/SwitchLabels.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/SwitchLabels.scala @@ -9,6 +9,7 @@ import io.kinoplan.demo.utils.Helpers.StringExtended import io.kinoplan.scalajs.react.material.ui.core.{MuiFormControlLabel, MuiFormGroup, MuiSwitch} object SwitchLabels extends ScalaCssReactImplicits { + case class State( checkedA: Boolean = true, checkedB: Boolean = true @@ -19,6 +20,7 @@ object SwitchLabels extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Unit, State]) { + def handleChangeCheckedA(e: ReactEventFromInput) = { val value = e.target.checked @@ -31,42 +33,41 @@ object SwitchLabels extends ScalaCssReactImplicits { t.modState(_.handleChangeCheckedB(value)) } - def render(state: State): VdomElement = { - div( - ComponentContainer("Switches with FormControlLabel")( - MuiFormGroup(row = true)( - MuiFormControlLabel( - control = MuiSwitch()( - checked := state.checkedA, - value := "checkedA", - onChange ==> handleChangeCheckedA - ).rawElement, - label = "Secondary".toVdom - ), - MuiFormControlLabel( - control = MuiSwitch(color = MuiSwitch.Color.primary)( - checked := state.checkedB, - value := "checkedB", - onChange ==> handleChangeCheckedB - ).rawElement, - label = "Primary".toVdom - ), - MuiFormControlLabel( - control = MuiSwitch()(value := "checkedC").rawElement, - label = "Uncontrolled".toVdom - ), - MuiFormControlLabel( - control = MuiSwitch()(value := "checkedD").rawElement, - label = "Disabled".toVdom - )(disabled := true), - MuiFormControlLabel( - control = MuiSwitch()(checked := true, value := "checkedE").rawElement, - label = "Disabled".toVdom - )(disabled := true) - ) + def render(state: State): VdomElement = div( + ComponentContainer("Switches with FormControlLabel")( + MuiFormGroup(row = true)( + MuiFormControlLabel( + control = MuiSwitch()( + checked := state.checkedA, + value := "checkedA", + onChange ==> handleChangeCheckedA + ).rawElement, + label = "Secondary".toVdom + ), + MuiFormControlLabel( + control = MuiSwitch(color = MuiSwitch.Color.primary)( + checked := state.checkedB, + value := "checkedB", + onChange ==> handleChangeCheckedB + ).rawElement, + label = "Primary".toVdom + ), + MuiFormControlLabel( + control = MuiSwitch()(value := "checkedC").rawElement, + label = "Uncontrolled".toVdom + ), + MuiFormControlLabel( + control = MuiSwitch()(value := "checkedD").rawElement, + label = "Disabled".toVdom + )(disabled := true), + MuiFormControlLabel( + control = MuiSwitch()(checked := true, value := "checkedE").rawElement, + label = "Disabled".toVdom + )(disabled := true) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("SwitchLabels") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/Switches.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/Switches.scala index c20c1237..8f8d026e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/Switches.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/Switches.scala @@ -8,6 +8,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.MuiSwitch object Switches extends ScalaCssReactImplicits { + case class State( checkedA: Boolean = true, checkedB: Boolean = true @@ -18,6 +19,7 @@ object Switches extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Unit, State]) { + def handleChangeCheckedA(e: ReactEventFromInput) = { val value = e.target.checked @@ -30,26 +32,25 @@ object Switches extends ScalaCssReactImplicits { t.modState(_.handleChangeCheckedB(value)) } - def render(state: State): VdomElement = { - div( - ComponentContainer("Switches")( - MuiSwitch()( - checked := state.checkedA, - onChange ==> handleChangeCheckedA, - value := "checkedA" - ), - MuiSwitch(color = MuiSwitch.Color.primary)( - checked := state.checkedB, - onChange ==> handleChangeCheckedB, - value := "checkedB" - ), - MuiSwitch()(value := "checkedC"), - MuiSwitch()(disabled := true, value := "checkedD"), - MuiSwitch()(disabled := true, checked := true, value := "checkedE"), - MuiSwitch(defaultChecked = true, color = MuiSwitch.Color.default)(value := "checkedF") - ) + def render(state: State): VdomElement = div( + ComponentContainer("Switches")( + MuiSwitch()( + checked := state.checkedA, + onChange ==> handleChangeCheckedA, + value := "checkedA" + ), + MuiSwitch(color = MuiSwitch.Color.primary)( + checked := state.checkedB, + onChange ==> handleChangeCheckedB, + value := "checkedB" + ), + MuiSwitch()(value := "checkedC"), + MuiSwitch()(disabled := true, value := "checkedD"), + MuiSwitch()(disabled := true, checked := true, value := "checkedE"), + MuiSwitch(defaultChecked = true, color = MuiSwitch.Color.default)(value := "checkedF") ) - } + ) + } private val component = ScalaComponent.builder[Unit]("Switches") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/SwitchesGroup.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/SwitchesGroup.scala index 64f054ba..3be1112a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/SwitchesGroup.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/SelectionControls/SwitchesGroup.scala @@ -6,9 +6,17 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.utils.Helpers.StringExtended -import io.kinoplan.scalajs.react.material.ui.core.{MuiFormControl, MuiFormControlLabel, MuiFormGroup, MuiFormHelperText, MuiFormLabel, MuiSwitch} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFormControl, + MuiFormControlLabel, + MuiFormGroup, + MuiFormHelperText, + MuiFormLabel, + MuiSwitch +} object SwitchesGroup extends ScalaCssReactImplicits { + case class State( gilad: Boolean = true, jason: Boolean = false, @@ -22,6 +30,7 @@ object SwitchesGroup extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Unit, State]) { + def handleChangeGilad(e: ReactEventFromInput) = { val value = e.target.checked @@ -40,42 +49,41 @@ object SwitchesGroup extends ScalaCssReactImplicits { t.modState(_.handleChangeAntoine(value)) } - def render(state: State): VdomElement = { - div( - ComponentContainer("Switches with FormGroup")( - MuiFormControl(component = "fieldset")( - MuiFormLabel(component = "legend")("Assign responsibility"), - MuiFormGroup()( - MuiFormControlLabel( - control = MuiSwitch()( - checked := state.gilad, - onChange ==> handleChangeGilad, - value := "gilad" - ).rawElement, - label = "Gilad Gray".toVdom - ), - MuiFormControlLabel( - control = MuiSwitch()( - checked := state.jason, - onChange ==> handleChangeJason, - value := "jason" - ).rawElement, - label = "Jason Killian".toVdom - ), - MuiFormControlLabel( - control = MuiSwitch()( - checked := state.antoine, - onChange ==> handleChangeAntoine, - value := "antoine" - ).rawElement, - label = "Antoine Llorca".toVdom - ) + def render(state: State): VdomElement = div( + ComponentContainer("Switches with FormGroup")( + MuiFormControl(component = "fieldset")( + MuiFormLabel(component = "legend")("Assign responsibility"), + MuiFormGroup()( + MuiFormControlLabel( + control = MuiSwitch()( + checked := state.gilad, + onChange ==> handleChangeGilad, + value := "gilad" + ).rawElement, + label = "Gilad Gray".toVdom ), - MuiFormHelperText()("Be careful") - ) + MuiFormControlLabel( + control = MuiSwitch()( + checked := state.jason, + onChange ==> handleChangeJason, + value := "jason" + ).rawElement, + label = "Jason Killian".toVdom + ), + MuiFormControlLabel( + control = MuiSwitch()( + checked := state.antoine, + onChange ==> handleChangeAntoine, + value := "antoine" + ).rawElement, + label = "Antoine Llorca".toVdom + ) + ), + MuiFormHelperText()("Be careful") ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("SwitchesGroup") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/ControlledOpenSelect.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/ControlledOpenSelect.scala index f6dfa7b0..6f49b55e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/ControlledOpenSelect.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/ControlledOpenSelect.scala @@ -21,6 +21,7 @@ object ControlledOpenSelect extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeAge(e: ReactEventFromInput) = { val value = e.target.value @@ -36,9 +37,11 @@ object ControlledOpenSelect extends ScalaCssReactImplicits { div( ComponentContainer("Controlled open Select")( - form(autoComplete := "off", + form( + autoComplete := "off", MuiButton()(css.button, onClick ==> handleOpen, "Open the select"), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "demo-controlled-open-select", "Age"), MuiSelect( open = state.open, @@ -61,6 +64,7 @@ object ControlledOpenSelect extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ControlledOpenSelect") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/CustomizedSelects.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/CustomizedSelects.scala index 41380cba..f552f30b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/CustomizedSelects.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/CustomizedSelects.scala @@ -7,7 +7,14 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.styles.demos.Selects.{CustomizedSelectsStyle, DefaultCustomizedSelectsStyle} import io.kinoplan.demo.utils.Helpers._ -import io.kinoplan.scalajs.react.material.ui.core.{MuiFormControl, MuiInputBase, MuiInputLabel, MuiMenuItem, MuiNativeSelect, MuiSelect} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFormControl, + MuiInputBase, + MuiInputLabel, + MuiMenuItem, + MuiNativeSelect, + MuiSelect +} object CustomizedSelects extends ScalaCssReactImplicits { case class Props(style: CustomizedSelectsStyle) @@ -17,6 +24,7 @@ object CustomizedSelects extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeAge(e: ReactEventFromInput) = { val value = e.target.value @@ -29,19 +37,34 @@ object CustomizedSelects extends ScalaCssReactImplicits { val inputBaseClasses = Map( MuiInputBase.ClassKey.root -> styleAToClassName(css.bootstrapRoot), MuiInputBase.ClassKey.input -> stylesToClassName( - Seq(css.bootstrapInput, css.bootstrapInputPaper(Layout.isPaletteLight)) + Seq( + css.bootstrapInput, + css.bootstrapInputPaper(Layout.isPaletteLight) + ) ) ) div( ComponentContainer("Customized selects")( - form(css.root, autoComplete := "off", - MuiFormControl()(css.marginStyle, - MuiInputLabel()(css.bootstrapFormLabel, htmlFor := "age-customized-select", "Age"), + form( + css.root, + autoComplete := "off", + MuiFormControl()( + css.marginStyle, + MuiInputLabel()( + css.bootstrapFormLabel, + htmlFor := "age-customized-select", + "Age" + ), MuiInputBase(classes = inputBaseClasses) ), - MuiFormControl()(css.marginStyle, - MuiInputLabel()(css.bootstrapFormLabel, htmlFor := "age-customized-select", "Age"), + MuiFormControl()( + css.marginStyle, + MuiInputLabel()( + css.bootstrapFormLabel, + htmlFor := "age-customized-select", + "Age" + ), MuiSelect( input = MuiInputBase(classes = inputBaseClasses)( name := "age", @@ -56,8 +79,13 @@ object CustomizedSelects extends ScalaCssReactImplicits { MuiMenuItem()(value := "30", "Thirty") ) ), - MuiFormControl()(css.marginStyle, - MuiInputLabel()(css.bootstrapFormLabel, htmlFor := "age-customized-native-simple", "Age"), + MuiFormControl()( + css.marginStyle, + MuiInputLabel()( + css.bootstrapFormLabel, + htmlFor := "age-customized-native-simple", + "Age" + ), MuiNativeSelect( input = MuiInputBase(classes = inputBaseClasses)( name := "age", @@ -76,6 +104,7 @@ object CustomizedSelects extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedSelects") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/DialogSelect.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/DialogSelect.scala index 5ef03730..97a7d369 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/DialogSelect.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/DialogSelect.scala @@ -6,7 +6,18 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.Selects.{DefaultSelectStyle, SelectStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiDialog, MuiDialogActions, MuiDialogContent, MuiDialogTitle, MuiFormControl, MuiInput, MuiInputLabel, MuiMenuItem, MuiSelect} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiButton, + MuiDialog, + MuiDialogActions, + MuiDialogContent, + MuiDialogTitle, + MuiFormControl, + MuiInput, + MuiInputLabel, + MuiMenuItem, + MuiSelect +} object DialogSelect extends ScalaCssReactImplicits { case class Props(style: SelectStyle) @@ -20,19 +31,19 @@ object DialogSelect extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeAge(e: ReactEventFromInput) = { val value = e.target.value t.modState(_.handleChangeAge(value)) } - def handleClickOpen: ReactEventFromInput => Callback = _ => t.modState(_.handleClickOpen) + def handleClickOpen: ReactEventFromInput => Callback = _ => t.modState(_.handleClickOpen) def handleClickClose: Callback = t.modState(_.handleClose) - def onClose: (ReactEvent, String) => Callback = (_, _) => { + def onClose: (ReactEvent, String) => Callback = (_, _) => handleClickClose - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -49,8 +60,10 @@ object DialogSelect extends ScalaCssReactImplicits { )( MuiDialogTitle()("Fill the form"), MuiDialogContent()( - form(css.root, - MuiFormControl()(css.formControl, + form( + css.root, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "age-native-simple", "Age"), MuiSelect( native = true, @@ -64,7 +77,8 @@ object DialogSelect extends ScalaCssReactImplicits { option(value := "30", "Thirty") ) ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "age-simple", "Age"), MuiSelect(input = MuiInput()(id := "age-simple").rawElement)( value := state.age, @@ -74,7 +88,7 @@ object DialogSelect extends ScalaCssReactImplicits { MuiMenuItem()(value := "20", "Twenty"), MuiMenuItem()(value := "30", "Thirty") ) - ), + ) ) ), MuiDialogActions()( @@ -86,6 +100,7 @@ object DialogSelect extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("DialogSelect") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/MultipleSelect.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/MultipleSelect.scala index 6886410d..13b80cce 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/MultipleSelect.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/MultipleSelect.scala @@ -13,7 +13,16 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.Selects.{DefaultMultipleSelectStyle, MultipleSelectStyle} import io.kinoplan.demo.utils.props.{MuiMenuProps, MuiNativeInputProps, MuiPaperProps} -import io.kinoplan.scalajs.react.material.ui.core.{MuiCheckbox, MuiChip, MuiFormControl, MuiInput, MuiInputLabel, MuiListItemText, MuiMenuItem, MuiSelect} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiCheckbox, + MuiChip, + MuiFormControl, + MuiInput, + MuiInputLabel, + MuiListItemText, + MuiMenuItem, + MuiSelect +} import io.kinoplan.scalajs.react.material.ui.html.ReactEventFromMultipleSelect object MultipleSelect extends ScalaCssReactImplicits { @@ -28,9 +37,14 @@ object MultipleSelect extends ScalaCssReactImplicits { val ITEM_PADDING_TOP = 8 - val MenuProps = MuiMenuProps(PaperProps = MuiPaperProps( - style = js.Dictionary("maxHeight" -> s"${ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP}px", "width" -> "250px") - )) + val MenuProps = MuiMenuProps( + PaperProps = MuiPaperProps( + style = js.Dictionary( + "maxHeight" -> s"${ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP}px", + "width" -> "250px" + ) + ) + ) val names = List( "Oliver Hansen", @@ -59,14 +73,14 @@ object MultipleSelect extends ScalaCssReactImplicits { t.modState(_.handleChange(values)) } - def checkboxRenderValue: js.Any => React.Node = values => { + def checkboxRenderValue: js.Any => React.Node = values => VdomNode(values.asInstanceOf[js.Array[String]].mkString(", ")).rawNode - } def chipRenderValue: js.Any => React.Node = values => { val css = t.props.runNow().style - div(css.chips, + div( + css.chips, values.asInstanceOf[js.Array[String]].toVdomArray { value => MuiChip(label = VdomNode(value))(css.chip, Attr("key") := value) } @@ -83,21 +97,25 @@ object MultipleSelect extends ScalaCssReactImplicits { val css = props.style def getStyles(name: String) = { - val fontWeight = if (state.names.contains(name)) { - css.theme.typography.fontWeightMedium - } else { - css.theme.typography.fontWeightRegular - } + val fontWeight = + if (state.names.contains(name)) css.theme.typography.fontWeightMedium + else css.theme.typography.fontWeightRegular js.Dictionary("fontWeight" -> fontWeight) } div( ComponentContainer("Multiple Select")( - div(css.root, - MuiFormControl()(css.formControl, + div( + css.root, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "select-multiple", "Name"), - MuiSelect(multiple = true, input = MuiInput()(id := "select-multiple").rawElement, MenuProps = MenuProps)( + MuiSelect( + multiple = true, + input = MuiInput()(id := "select-multiple").rawElement, + MenuProps = MenuProps + )( value := state.names, onChange ==> handleChange, names.toVdomArray(name => @@ -105,7 +123,8 @@ object MultipleSelect extends ScalaCssReactImplicits { ) ) ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "select-multiple-checkbox", "Tag"), MuiSelect( multiple = true, @@ -125,7 +144,8 @@ object MultipleSelect extends ScalaCssReactImplicits { ) ) ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "select-multiple-chip", "Chip"), MuiSelect( multiple = true, @@ -140,7 +160,9 @@ object MultipleSelect extends ScalaCssReactImplicits { ) ) ), - MuiFormControl()(css.formControl, css.noLabel, + MuiFormControl()( + css.formControl, + css.noLabel, MuiSelect( multiple = true, displayEmpty = true, @@ -156,7 +178,8 @@ object MultipleSelect extends ScalaCssReactImplicits { ) ) ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel(shrink = true)(htmlFor := "select-multiple-native", "Native"), MuiSelect( multiple = true, @@ -174,6 +197,7 @@ object MultipleSelect extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("MultipleSelect") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/NativeSelects.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/NativeSelects.scala index 9303c4ab..323b869e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/NativeSelects.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/NativeSelects.scala @@ -9,7 +9,16 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.Selects.{DefaultSelectStyle, SelectStyle} import io.kinoplan.demo.utils.props.MuiNativeInputProps -import io.kinoplan.scalajs.react.material.ui.core.{MuiFilledInput, MuiFormControl, MuiFormHelperText, MuiInput, MuiInputLabel, MuiNativeSelect, MuiOutlinedInput, MuiSelect} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFilledInput, + MuiFormControl, + MuiFormHelperText, + MuiInput, + MuiInputLabel, + MuiNativeSelect, + MuiOutlinedInput, + MuiSelect +} object NativeSelects extends ScalaCssReactImplicits { case class Props(style: SelectStyle) @@ -30,6 +39,7 @@ object NativeSelects extends ScalaCssReactImplicits { copy(labelWidth = offsetWidth) ).getOrElse(this) } + } class Backend(t: BackendScope[Props, State]) { @@ -37,9 +47,7 @@ object NativeSelects extends ScalaCssReactImplicits { def inputRef = document.getElementById(inputRefId) - def mount = { - t.modState(_.setLabelWidth(inputRef)) - } + def mount = t.modState(_.setLabelWidth(inputRef)) def handleChangeAge(e: ReactEventFromInput) = { val value = e.target.value @@ -58,13 +66,19 @@ object NativeSelects extends ScalaCssReactImplicits { div( ComponentContainer("Native Select")( - form(css.root, autoComplete := "off", - MuiFormControl()(css.formControl, + form( + css.root, + autoComplete := "off", + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "age-native-simple", "Age"), - MuiSelect(native = true, inputProps = MuiNativeInputProps( - name = Some("age"), - id = Some("age-native-simple") - ))( + MuiSelect( + native = true, + inputProps = MuiNativeInputProps( + name = Some("age"), + id = Some("age-native-simple") + ) + )( value := state.age, onChange ==> handleChangeAge, option(value := ""), @@ -73,9 +87,12 @@ object NativeSelects extends ScalaCssReactImplicits { option(value := "30", "Thirty") ) ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "age-native-helper", "Age"), - MuiNativeSelect(input = MuiInput()(name := "age", id := "age-native-helper").rawElement)( + MuiNativeSelect( + input = MuiInput()(name := "age", id := "age-native-helper").rawElement + )( value := state.age, onChange ==> handleChangeAge, option(value := ""), @@ -85,8 +102,10 @@ object NativeSelects extends ScalaCssReactImplicits { ), MuiFormHelperText()("Some important helper text") ), - MuiFormControl()(css.formControl, - MuiNativeSelect()(css.selectEmpty, + MuiFormControl()( + css.formControl, + MuiNativeSelect()( + css.selectEmpty, value := state.age, onChange ==> handleChangeAge, name := "age", @@ -97,13 +116,16 @@ object NativeSelects extends ScalaCssReactImplicits { ), MuiFormHelperText()("Without label") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel(shrink = true)(htmlFor := "age-native-label-placeholder", "Age"), - MuiNativeSelect(input = MuiInput()( + MuiNativeSelect( + input = MuiInput()( name := "age", id := "age-native-label-placeholder" ).rawElement - )(css.selectEmpty, + )( + css.selectEmpty, value := state.age, onChange ==> handleChangeAge, name := "age", @@ -114,43 +136,48 @@ object NativeSelects extends ScalaCssReactImplicits { ), MuiFormHelperText()("Label + placeholder") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, disabled := true, MuiInputLabel()(htmlFor := "name-disabled", "Name"), - MuiNativeSelect(input = MuiInput()(name := "name", id := "name-native-disabled").rawElement)( + MuiNativeSelect( + input = MuiInput()(name := "name", id := "name-native-disabled").rawElement + )( value := state.name, onChange ==> handleChangeName, option(value := ""), - optgroup(Attr("label") := "Author", - option(value := "hai", "Hai"), - ), - optgroup(Attr("label") := "Contributors", + optgroup(Attr("label") := "Author", option(value := "hai", "Hai")), + optgroup( + Attr("label") := "Contributors", option(value := "olivier", "Olivier"), option(value := "kevin", "Kevin") ) ), MuiFormHelperText()("Disabled") ), - MuiFormControl(error = true)(css.formControl, + MuiFormControl(error = true)( + css.formControl, MuiInputLabel()(htmlFor := "name-native-error", "Name"), MuiNativeSelect(input = MuiInput()(id := "name-native-error").rawElement)( value := state.name, onChange ==> handleChangeName, name := "name", option(value := ""), - optgroup(Attr("label") := "Author", - option(value := "hai", "Hai"), - ), - optgroup(Attr("label") := "Contributors", + optgroup(Attr("label") := "Author", option(value := "hai", "Hai")), + optgroup( + Attr("label") := "Contributors", option(value := "olivier", "Olivier"), option(value := "kevin", "Kevin") ) ), MuiFormHelperText()("Error") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "uncontrolled-native", "Name"), - MuiNativeSelect(input = MuiInput()(id := "uncontrolled-native", name := "name").rawElement)( + MuiNativeSelect( + input = MuiInput()(id := "uncontrolled-native", name := "name").rawElement + )( defaultValue := "30", option(value := ""), option(value := "10", "Ten"), @@ -159,8 +186,10 @@ object NativeSelects extends ScalaCssReactImplicits { ), MuiFormHelperText()("Uncontrolled") ), - MuiFormControl()(css.formControl, - MuiNativeSelect()(css.selectEmpty, + MuiFormControl()( + css.formControl, + MuiNativeSelect()( + css.selectEmpty, value := state.age, onChange ==> handleChangeAge, name := "age", @@ -171,13 +200,15 @@ object NativeSelects extends ScalaCssReactImplicits { ), MuiFormHelperText()("Placeholder") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, required := true, MuiInputLabel()(htmlFor := "age-native-required", "Age"), MuiSelect( native = true, inputProps = MuiNativeInputProps(id = Some("age-native-required")) - )(css.selectEmpty, + )( + css.selectEmpty, value := state.age, onChange ==> handleChangeAge, name := "age", @@ -188,7 +219,8 @@ object NativeSelects extends ScalaCssReactImplicits { ), MuiFormHelperText()("Required") ), - MuiFormControl(variant = MuiFormControl.Variant.outlined)(css.formControl, + MuiFormControl(variant = MuiFormControl.Variant.outlined)( + css.formControl, MuiInputLabel()(id := inputRefId, htmlFor := "outlined-age-native-simple", "Age"), MuiSelect( native = true, @@ -205,7 +237,8 @@ object NativeSelects extends ScalaCssReactImplicits { option(value := "30", "Thirty") ) ), - MuiFormControl(variant = MuiFormControl.Variant.filled)(css.formControl, + MuiFormControl(variant = MuiFormControl.Variant.filled)( + css.formControl, MuiInputLabel()(htmlFor := "filled-age-native-simple", "Age"), MuiSelect( native = true, @@ -223,6 +256,7 @@ object NativeSelects extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("NativeSelects") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/SimpleSelect.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/SimpleSelect.scala index 29dc716a..3751507a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/SimpleSelect.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Selects/SimpleSelect.scala @@ -11,7 +11,16 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.Selects.{DefaultSelectStyle, SelectStyle} import io.kinoplan.demo.utils.props.MuiNativeInputProps -import io.kinoplan.scalajs.react.material.ui.core.{MuiFilledInput, MuiFormControl, MuiFormHelperText, MuiInput, MuiInputLabel, MuiMenuItem, MuiOutlinedInput, MuiSelect} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFilledInput, + MuiFormControl, + MuiFormHelperText, + MuiInput, + MuiInputLabel, + MuiMenuItem, + MuiOutlinedInput, + MuiSelect +} object SimpleSelect extends ScalaCssReactImplicits { case class Props(style: SelectStyle) @@ -30,6 +39,7 @@ object SimpleSelect extends ScalaCssReactImplicits { copy(labelWidth = offsetWidth) } + } class Backend(t: BackendScope[Props, State]) { @@ -51,22 +61,26 @@ object SimpleSelect extends ScalaCssReactImplicits { t.modState(_.handleChangeName(value)) } - def selectRenderValue: js.Any => React.Node = value => { + def selectRenderValue: js.Any => React.Node = value => VdomNode(s"⚠️ - $value").rawNode - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("Simple Select")( - form(css.root, autoComplete := "off", - MuiFormControl()(css.formControl, + form( + css.root, + autoComplete := "off", + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "age-simple", "Age"), - MuiSelect(inputProps = MuiNativeInputProps( - name = Some("age"), - id = Some("age-simple") - ))( + MuiSelect( + inputProps = MuiNativeInputProps( + name = Some("age"), + id = Some("age-simple") + ) + )( value := state.age, onChange ==> handleChangeAge, MuiMenuItem()(value := "", em("None")), @@ -75,7 +89,8 @@ object SimpleSelect extends ScalaCssReactImplicits { MuiMenuItem()(value := "30", "Thirty") ) ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "age-helper", "Age"), MuiSelect(input = MuiInput()(name := "age", id := "age-helper").rawElement)( value := state.age, @@ -87,8 +102,10 @@ object SimpleSelect extends ScalaCssReactImplicits { ), MuiFormHelperText()("Some important helper text") ), - MuiFormControl()(css.formControl, - MuiSelect(displayEmpty = true)(css.selectEmpty, + MuiFormControl()( + css.formControl, + MuiSelect(displayEmpty = true)( + css.selectEmpty, value := state.age, onChange ==> handleChangeAge, name := "age", @@ -99,12 +116,14 @@ object SimpleSelect extends ScalaCssReactImplicits { ), MuiFormHelperText()("Without label") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel(shrink = true)(htmlFor := "age-label-placeholder", "Age"), MuiSelect( displayEmpty = true, input = MuiInput()(name := "age", id := "age-label-placeholder").rawElement - )(css.selectEmpty, + )( + css.selectEmpty, value := state.age, onChange ==> handleChangeAge, name := "age", @@ -115,10 +134,13 @@ object SimpleSelect extends ScalaCssReactImplicits { ), MuiFormHelperText()("Label + placeholder") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, disabled := true, MuiInputLabel()(htmlFor := "name-disabled", "Name"), - MuiSelect(input = MuiInput()(name := "name", id := "name-disabled").rawElement)( + MuiSelect( + input = MuiInput()(name := "name", id := "name-disabled").rawElement + )( value := state.name, onChange ==> handleChangeName, MuiMenuItem()(value := "", em("None")), @@ -128,7 +150,8 @@ object SimpleSelect extends ScalaCssReactImplicits { ), MuiFormHelperText()("Disabled") ), - MuiFormControl(error = true)(css.formControl, + MuiFormControl(error = true)( + css.formControl, MuiInputLabel()(htmlFor := "name-error", "Name"), MuiSelect( input = MuiInput()(id := "name-error").rawElement, @@ -144,9 +167,12 @@ object SimpleSelect extends ScalaCssReactImplicits { ), MuiFormHelperText()("Error") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "name-readonly", "Name"), - MuiSelect(input = MuiInput()(id := "name-readonly", name := "name", readOnly := true).rawElement)( + MuiSelect( + input = MuiInput()(id := "name-readonly", name := "name", readOnly := true).rawElement + )( value := state.name, onChange ==> handleChangeName, MuiMenuItem()(value := "", em("None")), @@ -156,7 +182,8 @@ object SimpleSelect extends ScalaCssReactImplicits { ), MuiFormHelperText()("Read only") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "age-auto-width", "Age"), MuiSelect( input = MuiInput()(id := "age-auto-width", name := "age").rawElement, @@ -171,8 +198,10 @@ object SimpleSelect extends ScalaCssReactImplicits { ), MuiFormHelperText()("Auto width") ), - MuiFormControl()(css.formControl, - MuiSelect(displayEmpty = true)(css.selectEmpty, + MuiFormControl()( + css.formControl, + MuiSelect(displayEmpty = true)( + css.selectEmpty, value := state.age, onChange ==> handleChangeAge, name := "age", @@ -183,10 +212,12 @@ object SimpleSelect extends ScalaCssReactImplicits { ), MuiFormHelperText()("Placeholder") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, required := true, MuiInputLabel()(htmlFor := "age-required", "Age"), - MuiSelect(inputProps = MuiNativeInputProps(id = Some("age-required")))(css.selectEmpty, + MuiSelect(inputProps = MuiNativeInputProps(id = Some("age-required")))( + css.selectEmpty, value := state.age, onChange ==> handleChangeAge, name := "age", @@ -197,7 +228,8 @@ object SimpleSelect extends ScalaCssReactImplicits { ), MuiFormHelperText()("Required") ), - MuiFormControl(variant = MuiFormControl.Variant.outlined)(css.formControl, + MuiFormControl(variant = MuiFormControl.Variant.outlined)( + css.formControl, MuiInputLabel()(id := inputRefId, htmlFor := "outlined-age-simple", "Age"), MuiSelect( input = MuiOutlinedInput(labelWidth = state.labelWidth)( @@ -213,9 +245,12 @@ object SimpleSelect extends ScalaCssReactImplicits { MuiMenuItem()(value := "30", "Thirty") ) ), - MuiFormControl(variant = MuiFormControl.Variant.filled)(css.formControl, + MuiFormControl(variant = MuiFormControl.Variant.filled)( + css.formControl, MuiInputLabel()(htmlFor := "filled-age-simple", "Age"), - MuiSelect(input = MuiFilledInput()(name := "age", id := "filled-age-simple").rawElement)( + MuiSelect( + input = MuiFilledInput()(name := "age", id := "filled-age-simple").rawElement + )( value := state.age, onChange ==> handleChangeAge, MuiMenuItem()(value := "", em("None")), @@ -228,6 +263,7 @@ object SimpleSelect extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleSelect") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/ConsecutiveSnackbars.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/ConsecutiveSnackbars.scala index a0dfa176..8f49778e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/ConsecutiveSnackbars.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/ConsecutiveSnackbars.scala @@ -23,7 +23,7 @@ object ConsecutiveSnackbars extends ScalaCssReactImplicits { case class Props(style: SimpleSnackbarStyle) case class State(open: Boolean = false, messageInfo: Option[MessageInfo] = None) { - val key = messageInfo.map(_.key).getOrElse(0d) + val key = messageInfo.map(_.key).getOrElse(0D) val message = messageInfo.map(_.message).getOrElse("") @@ -35,6 +35,7 @@ object ConsecutiveSnackbars extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def setQueue(message: String) = Callback { queues.enqueue(MessageInfo(message = message, key = new js.Date().getTime())) } @@ -49,9 +50,8 @@ object ConsecutiveSnackbars extends ScalaCssReactImplicits { def handleCloseClick: Callback = t.modState(_.handleClose) - def handleClose: (ReactEvent, String) => Callback = (_, reason) => { + def handleClose: (ReactEvent, String) => Callback = (_, reason) => handleCloseClick.when_(reason != "clickaway") - } def handleExited: html.Element => Callback = _ => processQueue @@ -77,7 +77,8 @@ object ConsecutiveSnackbars extends ScalaCssReactImplicits { onClick --> handleCloseClick, "UNDO" ), - MuiIconButton(color = MuiIconButton.Color.inherit)(css.close, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.close, Attr("key") := "close", aria.label := "Close", onClick --> handleCloseClick, @@ -89,6 +90,7 @@ object ConsecutiveSnackbars extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ConsecutiveSnackbars") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/CustomizedSnackbars.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/CustomizedSnackbars.scala index e3067963..0a4b1fed 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/CustomizedSnackbars.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/CustomizedSnackbars.scala @@ -24,9 +24,8 @@ object CustomizedSnackbars extends ScalaCssReactImplicits { def handleCloseClick: Callback = t.modState(_.handleClose) - def handleClose: (ReactEvent, String) => Callback = (_, reason) => { + def handleClose: (ReactEvent, String) => Callback = (_, reason) => handleCloseClick.when_(reason != "clickaway") - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -71,6 +70,7 @@ object CustomizedSnackbars extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedSnackbars") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/FabIntegrationSnackbar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/FabIntegrationSnackbar.scala index c1750fc6..11952d20 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/FabIntegrationSnackbar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/FabIntegrationSnackbar.scala @@ -7,7 +7,15 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.styles.demos.Snackbars.{DefaultFabIntegrationSnackbarStyle, FabIntegrationSnackbarStyle} import io.kinoplan.demo.utils.props.MuiContentProps -import io.kinoplan.scalajs.react.material.ui.core.{MuiAppBar, MuiButton, MuiFab, MuiIconButton, MuiSnackbar, MuiToolbar, MuiTypography} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiAppBar, + MuiButton, + MuiFab, + MuiIconButton, + MuiSnackbar, + MuiToolbar, + MuiTypography +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object FabIntegrationSnackbar extends ScalaCssReactImplicits { @@ -24,30 +32,41 @@ object FabIntegrationSnackbar extends ScalaCssReactImplicits { def handleCloseClick: Callback = t.modState(_.handleClose) - def handleClose: (ReactEvent, String) => Callback = (_, _) => { + def handleClose: (ReactEvent, String) => Callback = (_, _) => handleCloseClick - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("Don't block the floating action button")( - div(css.root, + div( + css.root, MuiButton()(css.button, onClick --> handleClick, "Open snackbar"), - div(css.appFrame, css.appFramePaper(Layout.isPaletteLight), - MuiAppBar(position = MuiAppBar.Position.static, color = MuiAppBar.Color.primary)( + div( + css.appFrame, + css.appFramePaper(Layout.isPaletteLight), + MuiAppBar( + position = MuiAppBar.Position.static, + color = MuiAppBar.Color.primary + )( MuiToolbar()( - MuiIconButton(color = MuiIconButton.Color.inherit)(css.menuButton, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.menuButton, aria.label := "Menu", MuiIcons(MuiIconsModule.Menu)() ), - MuiTypography(variant = MuiTypography.Variant.h6, color = MuiTypography.Color.inherit)( + MuiTypography( + variant = MuiTypography.Variant.h6, + color = MuiTypography.Color.inherit + )( "Out of my way!" ) ) ), - MuiFab(color = MuiFab.Color.secondary)(css.fab, if (state.open) css.fabMoveUp else css.fabMoveDown, + MuiFab(color = MuiFab.Color.secondary)( + css.fab, + if (state.open) css.fabMoveUp else css.fabMoveDown, MuiIcons(MuiIconsModule.Add)() ), MuiSnackbar( @@ -59,16 +78,19 @@ object FabIntegrationSnackbar extends ScalaCssReactImplicits { className = css.snackbarContent.htmlClass ), message = span(id := "snackbar-fab-message-id", "Archived"), - action = VdomNode(MuiButton(color = MuiButton.Color.inherit, size = MuiButton.Size.small)( - onClick --> handleCloseClick, - "Undo" - ).rawNode) + action = VdomNode( + MuiButton(color = MuiButton.Color.inherit, size = MuiButton.Size.small)( + onClick --> handleCloseClick, + "Undo" + ).rawNode + ) )(css.snackbar) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("FabIntegrationSnackbar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/FadeSnackbar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/FadeSnackbar.scala index e73c32da..1f3f4634 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/FadeSnackbar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/FadeSnackbar.scala @@ -9,6 +9,7 @@ import io.kinoplan.demo.utils.props.MuiContentProps import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiFade, MuiSnackbar} object FadeSnackbar extends ScalaCssReactImplicits { + case class State(open: Boolean = false) { def handleClick = copy(open = true) @@ -18,26 +19,24 @@ object FadeSnackbar extends ScalaCssReactImplicits { class Backend(t: BackendScope[Unit, State]) { def handleClick = t.modState(_.handleClick) - def handleClose: (ReactEvent, String) => Callback = (_, _) => { + def handleClose: (ReactEvent, String) => Callback = (_, _) => t.modState(_.handleClose) - } - - def render(state: State): VdomElement = { - div( - ComponentContainer("Change Transition")( - div( - MuiButton()(onClick --> handleClick, "Open with Fade Transition"), - MuiSnackbar( - open = state.open, - onClose = handleClose, - TransitionComponent = MuiFade.RawComponent, - ContentProps = MuiContentProps(ariaDescribedby = "message-id"), - message = span(id := "message-id", "I love snacks") - ) + + def render(state: State): VdomElement = div( + ComponentContainer("Change Transition")( + div( + MuiButton()(onClick --> handleClick, "Open with Fade Transition"), + MuiSnackbar( + open = state.open, + onClose = handleClose, + TransitionComponent = MuiFade.RawComponent, + ContentProps = MuiContentProps(ariaDescribedby = "message-id"), + message = span(id := "message-id", "I love snacks") ) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("FadeSnackbar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/LongTextSnackbar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/LongTextSnackbar.scala index 97b523ba..4c48b5dc 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/LongTextSnackbar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/LongTextSnackbar.scala @@ -12,6 +12,7 @@ object LongTextSnackbar extends ScalaCssReactImplicits { case class Props(style: CustomizedSnackbarsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -25,7 +26,9 @@ object LongTextSnackbar extends ScalaCssReactImplicits { message = VdomNode("This is an error message!") )(css.snackbar), MuiSnackbarContent( - message = VdomNode("I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate.") + message = VdomNode( + "I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate." + ) )(css.snackbar), MuiSnackbarContent( action = action, @@ -33,12 +36,15 @@ object LongTextSnackbar extends ScalaCssReactImplicits { )(css.snackbar), MuiSnackbarContent( action = action, - message = VdomNode("I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate.") + message = VdomNode( + "I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate." + ) )(css.snackbar) ) ) ) } + } private val component = ScalaComponent.builder[Props]("LongTextSnackbar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/PositionedSnackbar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/PositionedSnackbar.scala index 6df2b77b..5635355c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/PositionedSnackbar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/PositionedSnackbar.scala @@ -9,11 +9,13 @@ import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiSnackbar} import io.kinoplan.scalajs.react.material.ui.core.internal.Origin object PositionedSnackbar { + case class State( open: Boolean = false, vertical: String = "top", horizontal: String = "center" ) { + def handleClick(vertical: String, horizontal: String) = copy( open = true, vertical = vertical, @@ -26,31 +28,29 @@ object PositionedSnackbar { class Backend(t: BackendScope[Unit, State]) { def handleClick(vertical: String, horizontal: String) = t.modState(_.handleClick(vertical, horizontal)) - def handleClose: (ReactEvent, String) => Callback = (_, _) => { + def handleClose: (ReactEvent, String) => Callback = (_, _) => t.modState(_.handleClose) - } - - def render(state: State): VdomElement = { - div( - ComponentContainer("Positioned")( - div( - MuiButton()(onClick --> handleClick("top", "center"), "Top-Center"), - MuiButton()(onClick --> handleClick("top", "right"), "Top-Right"), - MuiButton()(onClick --> handleClick("bottom", "right"), "Bottom-Right"), - MuiButton()(onClick --> handleClick("bottom", "center"), "Bottom-Center"), - MuiButton()(onClick --> handleClick("bottom", "left"), "Bottom-Left"), - MuiButton()(onClick --> handleClick("top", "left"), "Top-Left"), - MuiSnackbar( - open = state.open, - onClose = handleClose, - anchorOrigin = Origin(vertical = state.vertical, horizontal = state.horizontal), - ContentProps = MuiContentProps(ariaDescribedby = "message-id"), - message = span(id := "message-id", "I love snacks") - ) + + def render(state: State): VdomElement = div( + ComponentContainer("Positioned")( + div( + MuiButton()(onClick --> handleClick("top", "center"), "Top-Center"), + MuiButton()(onClick --> handleClick("top", "right"), "Top-Right"), + MuiButton()(onClick --> handleClick("bottom", "right"), "Bottom-Right"), + MuiButton()(onClick --> handleClick("bottom", "center"), "Bottom-Center"), + MuiButton()(onClick --> handleClick("bottom", "left"), "Bottom-Left"), + MuiButton()(onClick --> handleClick("top", "left"), "Top-Left"), + MuiSnackbar( + open = state.open, + onClose = handleClose, + anchorOrigin = Origin(vertical = state.vertical, horizontal = state.horizontal), + ContentProps = MuiContentProps(ariaDescribedby = "message-id"), + message = span(id := "message-id", "I love snacks") ) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("PositionedSnackbar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/SimpleSnackbar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/SimpleSnackbar.scala index 4c1ce596..61545f7b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/SimpleSnackbar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/SimpleSnackbar.scala @@ -26,9 +26,8 @@ object SimpleSnackbar extends ScalaCssReactImplicits { def handleCloseClick: Callback = t.modState(_.handleClose) - def handleClose: (ReactEvent, String) => Callback = (_, reason) => { + def handleClose: (ReactEvent, String) => Callback = (_, reason) => handleCloseClick.when_(reason != "clickaway") - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -50,7 +49,8 @@ object SimpleSnackbar extends ScalaCssReactImplicits { onClick --> handleCloseClick, "UNDO" ), - MuiIconButton(color = MuiIconButton.Color.inherit)(css.close, + MuiIconButton(color = MuiIconButton.Color.inherit)( + css.close, Attr("key") := "close", aria.label := "Close", onClick --> handleCloseClick, @@ -62,6 +62,7 @@ object SimpleSnackbar extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleSnackbar") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/wrappers/MySnackbarContentWrapper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/wrappers/MySnackbarContentWrapper.scala index 0f816236..1c59e962 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/wrappers/MySnackbarContentWrapper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Snackbars/wrappers/MySnackbarContentWrapper.scala @@ -13,6 +13,7 @@ import io.kinoplan.scalajs.react.material.ui.core.{MuiIconButton, MuiSnackbarCon import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object MySnackbarContentWrapper extends ScalaCssReactImplicits { + case class Props( className: js.UndefOr[StyleA], message: String, @@ -22,14 +23,13 @@ object MySnackbarContentWrapper extends ScalaCssReactImplicits { ) class Backend(t: BackendScope[Props, Unit]) { - def variantIcon(variant: String) = { - variant match { - case "success" => MuiIcons(MuiIconsModule.CheckCircle)() - case "warning" => MuiIcons(MuiIconsModule.Warning)() - case "error" => MuiIcons(MuiIconsModule.Error)() - case "info" => MuiIcons(MuiIconsModule.Info)() - case _ => MuiIcons(MuiIconsModule.Info)() - } + + def variantIcon(variant: String) = variant match { + case "success" => MuiIcons(MuiIconsModule.CheckCircle)() + case "warning" => MuiIcons(MuiIconsModule.Warning)() + case "error" => MuiIcons(MuiIconsModule.Error)() + case "info" => MuiIcons(MuiIconsModule.Info)() + case _ => MuiIcons(MuiIconsModule.Info)() } def render(props: Props): VdomElement = { @@ -37,7 +37,9 @@ object MySnackbarContentWrapper extends ScalaCssReactImplicits { val Icon = variantIcon(props.variant) - val message = span(css.message, id := "client-snackbar", + val message = span( + css.message, + id := "client-snackbar", Icon(css.icon, css.iconVariant), props.message ) @@ -56,10 +58,13 @@ object MySnackbarContentWrapper extends ScalaCssReactImplicits { MuiSnackbarContent( message = message, action = action - )(css.get(props.variant), cssClassName, + )( + css.get(props.variant), + cssClassName, aria.describedBy := "client-snackbar" ) } + } private val component = ScalaComponent.builder[Props]("MySnackbarContentWrapper") @@ -73,4 +78,5 @@ object MySnackbarContentWrapper extends ScalaCssReactImplicits { variant: String, style: MySnackbarContentWrapperStyle = DefaultMySnackbarContentWrapperStyle ) = component(Props(className, message, onCloseClick, variant, style)) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/CustomizedStepper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/CustomizedStepper.scala index d0455229..0532ab78 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/CustomizedStepper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/CustomizedStepper.scala @@ -8,10 +8,22 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.Steppers.{CustomizedStepperStyle, DefaultCustomizedStepperStyle} import io.kinoplan.demo.utils.Helpers.styleAToClassName -import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiStep, MuiStepConnector, MuiStepLabel, MuiStepper, MuiTypography} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiButton, + MuiStep, + MuiStepConnector, + MuiStepLabel, + MuiStepper, + MuiTypography +} object CustomizedStepper extends ScalaCssReactImplicits { - val steps = List("Select campaign settings", "Create an ad group", "Create an ad") + + val steps = List( + "Select campaign settings", + "Create an ad group", + "Create an ad" + ) def getStepContent(step: Int) = step match { case 0 => "Select campaign settings..." @@ -61,20 +73,17 @@ object CustomizedStepper extends ScalaCssReactImplicits { div( ComponentContainer("Customized Stepper")( - div(css.root, + div( + css.root, MuiStepper(activeStep = state.activeStep, connector = connector)( - steps.toVdomArray { label => - MuiStep()(Attr("key") := label, - MuiStepLabel()(label) - ) - } + steps.toVdomArray(label => MuiStep()(Attr("key") := label, MuiStepLabel()(label))) ), - MuiStepper(alternativeLabel = true, activeStep = state.activeStep, connector = connector)( - steps.toVdomArray { label => - MuiStep()(Attr("key") := label, - MuiStepLabel()(label) - ) - } + MuiStepper( + alternativeLabel = true, + activeStep = state.activeStep, + connector = connector + )( + steps.toVdomArray(label => MuiStep()(Attr("key") := label, MuiStepLabel()(label))) ), div( div( @@ -84,10 +93,15 @@ object CustomizedStepper extends ScalaCssReactImplicits { div( MuiTypography()(css.instructions, getStepContent(state.activeStep)), div( - MuiButton()(css.button, onClick --> handleBack, disabled := state.isBackDisabled, "Back"), + MuiButton()( + css.button, + onClick --> handleBack, + disabled := state.isBackDisabled, + "Back" + ), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, + color = MuiButton.Color.primary )(onClick --> handleNext, state.nextTitle) ) ).when(state.notTotalStep) @@ -96,6 +110,7 @@ object CustomizedStepper extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedStepper") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/DotsMobileStepper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/DotsMobileStepper.scala index 220a3d40..0a3af156 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/DotsMobileStepper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/DotsMobileStepper.scala @@ -36,11 +36,8 @@ object DotsMobileStepper extends ScalaCssReactImplicits { onClick --> handleNext, disabled := state.isNextDisabled, "Next", - if (css.theme.direction == Direction.rtl) { - MuiIcons(MuiIconsModule.KeyboardArrowLeft)() - } else { - MuiIcons(MuiIconsModule.KeyboardArrowRight)() - } + if (css.theme.direction == Direction.rtl) MuiIcons(MuiIconsModule.KeyboardArrowLeft)() + else MuiIcons(MuiIconsModule.KeyboardArrowRight)() ).rawNode ) @@ -48,11 +45,8 @@ object DotsMobileStepper extends ScalaCssReactImplicits { MuiButton(size = MuiButton.Size.small)( onClick --> handleBack, disabled := state.isBackDisabled, - if (css.theme.direction == Direction.rtl) { - MuiIcons(MuiIconsModule.KeyboardArrowRight)() - } else { - MuiIcons(MuiIconsModule.KeyboardArrowLeft)() - }, + if (css.theme.direction == Direction.rtl) MuiIcons(MuiIconsModule.KeyboardArrowRight)() + else MuiIcons(MuiIconsModule.KeyboardArrowLeft)(), "Back" ).rawNode ) @@ -70,6 +64,7 @@ object DotsMobileStepper extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("DotsMobileStepper") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalLabelPositionBelowStepper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalLabelPositionBelowStepper.scala index d18f47cd..a333ee0e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalLabelPositionBelowStepper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalLabelPositionBelowStepper.scala @@ -10,7 +10,12 @@ import io.kinoplan.demo.styles.demos.Steppers.{DefaultStepperStyle, StepperStyle import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiStep, MuiStepLabel, MuiStepper, MuiTypography} object HorizontalLabelPositionBelowStepper extends ScalaCssReactImplicits { - val steps = List("Select master blaster campaign settings", "Create an ad group", "Create an ad") + + val steps = List( + "Select master blaster campaign settings", + "Create an ad group", + "Create an ad" + ) def getStepContent(step: Int) = step match { case 0 => "Select campaign settings..." @@ -51,13 +56,10 @@ object HorizontalLabelPositionBelowStepper extends ScalaCssReactImplicits { div( ComponentContainer("Horizontal Linear - Alternative Label")( - div(css.root, + div( + css.root, MuiStepper(activeStep = state.activeStep, alternativeLabel = true)( - steps.toVdomArray { label => - MuiStep()(Attr("key") := label, - MuiStepLabel()(label) - ) - } + steps.toVdomArray(label => MuiStep()(Attr("key") := label, MuiStepLabel()(label))) ), div( div( @@ -67,10 +69,15 @@ object HorizontalLabelPositionBelowStepper extends ScalaCssReactImplicits { div( MuiTypography()(css.instructions, getStepContent(state.activeStep)), div( - MuiButton()(css.button, onClick --> handleBack, disabled := state.isBackDisabled, "Back"), + MuiButton()( + css.button, + onClick --> handleBack, + disabled := state.isBackDisabled, + "Back" + ), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, + color = MuiButton.Color.primary )(onClick --> handleNext, state.nextTitle) ) ).when(state.notFinish) @@ -79,6 +86,7 @@ object HorizontalLabelPositionBelowStepper extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("HorizontalLabelPositionBelowStepper") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalLinearStepper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalLinearStepper.scala index c0b571f3..51dab44d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalLinearStepper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalLinearStepper.scala @@ -12,7 +12,12 @@ import io.kinoplan.demo.styles.demos.Steppers.{DefaultStepperStyle, StepperStyle import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiStep, MuiStepLabel, MuiStepper, MuiTypography} object HorizontalLinearStepper extends ScalaCssReactImplicits { - val steps = List("Select campaign settings", "Create an ad group", "Create an ad") + + val steps = List( + "Select campaign settings", + "Create an ad group", + "Create an ad" + ) def getStepContent(step: Int) = step match { case 0 => "Select campaign settings..." @@ -40,18 +45,14 @@ object HorizontalLinearStepper extends ScalaCssReactImplicits { def isStepActive(step: Int) = step == activeStep - def handleNext = { - if (isStepSkipped()) { - copy( - skipped = skipped.filterNot(_ == activeStep), - activeStep = activeStep + 1 - ) - } else { - copy( - activeStep = activeStep + 1 - ) - } - } + def handleNext = + if (isStepSkipped()) copy( + skipped = skipped.filterNot(_ == activeStep), + activeStep = activeStep + 1 + ) + else copy( + activeStep = activeStep + 1 + ) def handleBack = copy(activeStep = activeStep - 1) @@ -77,18 +78,17 @@ object HorizontalLinearStepper extends ScalaCssReactImplicits { div( ComponentContainer("Horizontal Linear")( - div(css.root, + div( + css.root, MuiStepper(activeStep = state.activeStep)( steps.zipWithIndex.toVdomArray { case (label, index) => - val optional = if (state.isStepOptional(index)) { - MuiTypography(variant = MuiTypography.Variant.caption)("Optional") - } else EmptyVdom + val optional = + if (state.isStepOptional(index)) MuiTypography(variant = MuiTypography.Variant.caption)("Optional") + else EmptyVdom val completed = if (state.isStepSkipped(index)) Some(false) else None - MuiStep(completed = completed.orUndefined)(Attr("key") := label, - MuiStepLabel(optional = optional)(label) - ) + MuiStep(completed = completed.orUndefined)(Attr("key") := label, MuiStepLabel(optional = optional)(label)) } ), div( @@ -99,18 +99,24 @@ object HorizontalLinearStepper extends ScalaCssReactImplicits { div( MuiTypography()(css.instructions, getStepContent(state.activeStep)), div( - MuiButton()(css.button, onClick --> handleBack, disabled := state.isBackDisabled, "Back"), + MuiButton()( + css.button, + onClick --> handleBack, + disabled := state.isBackDisabled, + "Back" + ), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, - )(css.button, + color = MuiButton.Color.primary + )( + css.button, onClick --> handleSkip, disabled := state.isBackDisabled, "Skip" ).when(state.isStepOptional()), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, + color = MuiButton.Color.primary )(css.button, onClick --> handleNext, state.nextTitle) ) ).when(state.notFinish) @@ -119,6 +125,7 @@ object HorizontalLinearStepper extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("HorizontalLinearStepper") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearAlternativeLabelStepper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearAlternativeLabelStepper.scala index b6b71262..ca2069de 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearAlternativeLabelStepper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearAlternativeLabelStepper.scala @@ -12,7 +12,12 @@ import io.kinoplan.demo.styles.demos.Steppers.{DefaultStepperStyle, StepperStyle import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiStep, MuiStepButton, MuiStepper, MuiTypography} object HorizontalNonLinearAlternativeLabelStepper extends ScalaCssReactImplicits { - val steps = List("Select campaign settings", "Create an ad group", "Create an ad") + + val steps = List( + "Select campaign settings", + "Create an ad group", + "Create an ad" + ) def getStepContent(step: Int) = step match { case 0 => "Step 1: Select campaign settings..." @@ -57,11 +62,9 @@ object HorizontalNonLinearAlternativeLabelStepper extends ScalaCssReactImplicits val isSkipEnabled = isStepOptional(activeStep) && !isStepComplete(activeStep) def handleNext = { - val newActiveStep = (if (isLastStep && notAllStepsCompleted) { - steps.indices.diff(completed.toList).sorted.headOption - } else { - Some(activeStep + 1) - }).getOrElse(0) + val newActiveStep = (if (isLastStep && notAllStepsCompleted) + steps.indices.diff(completed.toList).sorted.headOption + else Some(activeStep + 1)).getOrElse(0) copy(activeStep = newActiveStep) } @@ -77,17 +80,16 @@ object HorizontalNonLinearAlternativeLabelStepper extends ScalaCssReactImplicits activeStep = step ) - def handleComplete = { - copy( - completed = completed + activeStep - ) - } + def handleComplete = copy( + completed = completed + activeStep + ) def handleReset = copy( activeStep = 0, completed = Set.empty, skipped = Set.empty ) + } class Backend(t: BackendScope[Props, State]) { @@ -112,16 +114,22 @@ object HorizontalNonLinearAlternativeLabelStepper extends ScalaCssReactImplicits div( ComponentContainer("Horizontal Non Linear - Alternative Label")( - div(css.root, - MuiStepper(activeStep = state.activeStep, alternativeLabel = true, nonLinear = true)( + div( + css.root, + MuiStepper( + activeStep = state.activeStep, + alternativeLabel = true, + nonLinear = true + )( steps.zipWithIndex.toVdomArray { case (label, index) => - val optional = if (state.isStepOptional(index)) { - MuiTypography(variant = MuiTypography.Variant.caption)("Optional") - } else EmptyVdom + val optional = + if (state.isStepOptional(index)) MuiTypography(variant = MuiTypography.Variant.caption)("Optional") + else EmptyVdom val completed = if (state.isStepSkipped(index)) Some(false) else None - MuiStep(completed = completed.orUndefined)(Attr("key") := label, + MuiStep(completed = completed.orUndefined)( + Attr("key") := label, MuiStepButton( optional = optional, completed = state.isStepComplete(index) @@ -137,32 +145,31 @@ object HorizontalNonLinearAlternativeLabelStepper extends ScalaCssReactImplicits div( MuiTypography()(css.instructions, getStepContent(state.activeStep)), div( - MuiButton()(css.button, onClick --> handleBack, disabled := state.isBackDisabled, "Back"), + MuiButton()( + css.button, + onClick --> handleBack, + disabled := state.isBackDisabled, + "Back" + ), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, - )(css.button, - onClick --> handleNext, - "Next" - ), + color = MuiButton.Color.primary + )(css.button, onClick --> handleNext, "Next"), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, - )(css.button, - onClick --> handleSkip, - "Skip" - ).when(state.isSkipEnabled), + color = MuiButton.Color.primary + )(css.button, onClick --> handleSkip, "Skip").when(state.isSkipEnabled), TagMod( - MuiTypography(variant = MuiTypography.Variant.caption)(css.completed, + MuiTypography(variant = MuiTypography.Variant.caption)( + css.completed, s" Step ${state.activeStep + 1} already completed" ).when(state.isStepComplete(state.activeStep)), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, - )(css.button, - onClick --> handleComplete, - state.finishTitle - ).when(state.notStepComplete(state.activeStep)) + color = MuiButton.Color.primary + )(css.button, onClick --> handleComplete, state.finishTitle).when(state.notStepComplete( + state.activeStep + )) ).when(state.notTotalStep) ) ).when(state.notAllStepsCompleted) @@ -171,6 +178,7 @@ object HorizontalNonLinearAlternativeLabelStepper extends ScalaCssReactImplicits ) ) } + } private val component = ScalaComponent.builder[Props]("HorizontalNonLinearAlternativeLabelStepper") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearStepper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearStepper.scala index fa6f9d38..5551e375 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearStepper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearStepper.scala @@ -12,7 +12,12 @@ import io.kinoplan.demo.styles.demos.Steppers.{DefaultStepperStyle, StepperStyle import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiStep, MuiStepButton, MuiStepper, MuiTypography} object HorizontalNonLinearStepper extends ScalaCssReactImplicits { - val steps = List("Select campaign settings", "Create an ad group", "Create an ad") + + val steps = List( + "Select campaign settings", + "Create an ad group", + "Create an ad" + ) def getStepContent(step: Int) = step match { case 0 => "Step 1: Select campaign settings..." @@ -47,11 +52,9 @@ object HorizontalNonLinearStepper extends ScalaCssReactImplicits { def isStepActive(step: Int) = step == activeStep def handleNext = { - val newActiveStep = (if (isLastStep && notAllStepsCompleted) { - steps.indices.diff(completed.toList).sorted.headOption - } else { - Some(activeStep + 1) - }).getOrElse(0) + val newActiveStep = (if (isLastStep && notAllStepsCompleted) + steps.indices.diff(completed.toList).sorted.headOption + else Some(activeStep + 1)).getOrElse(0) copy(activeStep = newActiveStep) } @@ -62,16 +65,15 @@ object HorizontalNonLinearStepper extends ScalaCssReactImplicits { activeStep = step ) - def handleComplete = { - copy( - completed = completed ++ SortedSet(activeStep) - ) - } + def handleComplete = copy( + completed = completed ++ SortedSet(activeStep) + ) def handleReset = copy( activeStep = 0, completed = SortedSet.empty ) + } class Backend(t: BackendScope[Props, State]) { @@ -90,10 +92,12 @@ object HorizontalNonLinearStepper extends ScalaCssReactImplicits { div( ComponentContainer("Horizontal Non-linear")( - div(css.root, + div( + css.root, MuiStepper(nonLinear = true, activeStep = state.activeStep)( steps.zipWithIndex.toVdomArray { case (label, index) => - MuiStep()(Attr("key") := label, + MuiStep()( + Attr("key") := label, MuiStepButton(completed = state.isCompleted(index))(onClick --> handleStep(index), label) ) } @@ -106,25 +110,27 @@ object HorizontalNonLinearStepper extends ScalaCssReactImplicits { div( MuiTypography()(css.instructions, getStepContent(state.activeStep)), div( - MuiButton()(css.button, onClick --> handleBack, disabled := state.isBackDisabled, "Back"), + MuiButton()( + css.button, + onClick --> handleBack, + disabled := state.isBackDisabled, + "Back" + ), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, - )(css.button, - onClick --> handleNext, - "Next" - ), + color = MuiButton.Color.primary + )(css.button, onClick --> handleNext, "Next"), TagMod( - MuiTypography(variant = MuiTypography.Variant.caption)(css.completed, + MuiTypography(variant = MuiTypography.Variant.caption)( + css.completed, s" Step ${state.activeStep + 1} already completed" ).when(state.isCompleted(state.activeStep)), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, - )(css.button, - onClick --> handleComplete, - state.finishTitle - ).when(state.notCompleted(state.activeStep)) + color = MuiButton.Color.primary + )(css.button, onClick --> handleComplete, state.finishTitle).when(state.notCompleted( + state.activeStep + )) ).when(state.notAllStepsCompleted) ) ).when(state.notAllStepsCompleted) @@ -133,6 +139,7 @@ object HorizontalNonLinearStepper extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("HorizontalNonLinearStepper") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearStepperWithError.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearStepperWithError.scala index 57a5bd3d..566027c5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearStepperWithError.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/HorizontalNonLinearStepperWithError.scala @@ -12,7 +12,12 @@ import io.kinoplan.demo.styles.demos.Steppers.{DefaultStepperStyle, StepperStyle import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiStep, MuiStepLabel, MuiStepper, MuiTypography} object HorizontalNonLinearStepperWithError extends ScalaCssReactImplicits { - val steps = List("Select campaign settings", "Create an ad group", "Create an ad") + + val steps = List( + "Select campaign settings", + "Create an ad group", + "Create an ad" + ) def getStepContent(step: Int) = step match { case 0 => "Select campaign settings...." @@ -42,18 +47,14 @@ object HorizontalNonLinearStepperWithError extends ScalaCssReactImplicits { def isStepFailed(step: Int) = step == 1 - def handleNext = { - if (isStepSkipped(activeStep)) { - copy( - skipped = skipped.filterNot(_ == activeStep), - activeStep = activeStep + 1 - ) - } else { - copy( - activeStep = activeStep + 1 - ) - } - } + def handleNext = + if (isStepSkipped(activeStep)) copy( + skipped = skipped.filterNot(_ == activeStep), + activeStep = activeStep + 1 + ) + else copy( + activeStep = activeStep + 1 + ) def handleBack = copy(activeStep = activeStep - 1) @@ -65,6 +66,7 @@ object HorizontalNonLinearStepperWithError extends ScalaCssReactImplicits { def handleReset = copy( activeStep = 0 ) + } class Backend(t: BackendScope[Props, State]) { @@ -81,21 +83,23 @@ object HorizontalNonLinearStepperWithError extends ScalaCssReactImplicits { div( ComponentContainer("Horizontal Non Linear - Error Step")( - div(css.root, + div( + css.root, MuiStepper(activeStep = state.activeStep)( steps.zipWithIndex.toVdomArray { case (label, index) => - val optional = if (state.isStepOptional(index)) { - MuiTypography( + val optional = + if (state.isStepOptional(index)) MuiTypography( variant = MuiTypography.Variant.caption, color = MuiTypography.Color.error )("Alert message") - } else EmptyVdom + else EmptyVdom val error = if (state.isStepFailed(index)) Some(true) else None val completed = if (state.isStepSkipped(index)) Some(false) else None - MuiStep(completed = completed.orUndefined)(Attr("key") := label, + MuiStep(completed = completed.orUndefined)( + Attr("key") := label, MuiStepLabel( optional = optional, error = error.orUndefined @@ -111,21 +115,20 @@ object HorizontalNonLinearStepperWithError extends ScalaCssReactImplicits { div( MuiTypography()(css.instructions, getStepContent(state.activeStep)), div( - MuiButton()(css.button, onClick --> handleBack, disabled := state.isBackDisabled, "Back"), + MuiButton()( + css.button, + onClick --> handleBack, + disabled := state.isBackDisabled, + "Back" + ), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, - )(css.button, - onClick --> handleSkip, - "Skip" - ).when(state.isStepOptional(state.activeStep)), + color = MuiButton.Color.primary + )(css.button, onClick --> handleSkip, "Skip").when(state.isStepOptional(state.activeStep)), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, - )(css.button, - onClick --> handleNext, - state.finishTitle - ) + color = MuiButton.Color.primary + )(css.button, onClick --> handleNext, state.finishTitle) ) ).when(state.notTotalStep) ) @@ -133,6 +136,7 @@ object HorizontalNonLinearStepperWithError extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("HorizontalNonLinearStepperWithError") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/ProgressMobileStepper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/ProgressMobileStepper.scala index 611e5ff0..c24b3265 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/ProgressMobileStepper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/ProgressMobileStepper.scala @@ -36,11 +36,8 @@ object ProgressMobileStepper extends ScalaCssReactImplicits { onClick --> handleNext, disabled := state.isNextDisabled, "Next", - if (css.theme.direction == Direction.rtl) { - MuiIcons(MuiIconsModule.KeyboardArrowLeft)() - } else { - MuiIcons(MuiIconsModule.KeyboardArrowRight)() - } + if (css.theme.direction == Direction.rtl) MuiIcons(MuiIconsModule.KeyboardArrowLeft)() + else MuiIcons(MuiIconsModule.KeyboardArrowRight)() ).rawNode ) @@ -48,11 +45,8 @@ object ProgressMobileStepper extends ScalaCssReactImplicits { MuiButton(size = MuiButton.Size.small)( onClick --> handleBack, disabled := state.isBackDisabled, - if (css.theme.direction == Direction.rtl) { - MuiIcons(MuiIconsModule.KeyboardArrowRight)() - } else { - MuiIcons(MuiIconsModule.KeyboardArrowLeft)() - }, + if (css.theme.direction == Direction.rtl) MuiIcons(MuiIconsModule.KeyboardArrowRight)() + else MuiIcons(MuiIconsModule.KeyboardArrowLeft)(), "Back" ).rawNode ) @@ -70,6 +64,7 @@ object ProgressMobileStepper extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ProgressMobileStepper") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/TextMobileStepper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/TextMobileStepper.scala index 76e08a27..e27c8f1e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/TextMobileStepper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/TextMobileStepper.scala @@ -41,11 +41,8 @@ object TextMobileStepper extends ScalaCssReactImplicits { onClick --> handleNext, disabled := state.isNextDisabled, "Next", - if (css.theme.direction == Direction.rtl) { - MuiIcons(MuiIconsModule.KeyboardArrowLeft)() - } else { - MuiIcons(MuiIconsModule.KeyboardArrowRight)() - } + if (css.theme.direction == Direction.rtl) MuiIcons(MuiIconsModule.KeyboardArrowLeft)() + else MuiIcons(MuiIconsModule.KeyboardArrowRight)() ).rawNode ) @@ -53,19 +50,19 @@ object TextMobileStepper extends ScalaCssReactImplicits { MuiButton(size = MuiButton.Size.small)( onClick --> handleBack, disabled := state.isBackDisabled, - if (css.theme.direction == Direction.rtl) { - MuiIcons(MuiIconsModule.KeyboardArrowRight)() - } else { - MuiIcons(MuiIconsModule.KeyboardArrowLeft)() - }, + if (css.theme.direction == Direction.rtl) MuiIcons(MuiIconsModule.KeyboardArrowRight)() + else MuiIcons(MuiIconsModule.KeyboardArrowLeft)(), "Back" ).rawNode ) div( ComponentContainer("Mobile Stepper - Text")( - div(css.root, - MuiPaper(square = true, elevation = 0)(css.header, css.headerPaper(Layout.isPaletteLight), + div( + css.root, + MuiPaper(square = true, elevation = 0)( + css.header, + css.headerPaper(Layout.isPaletteLight), MuiTypography()(tutorialStep.label) ), img(css.img, src := tutorialStep.imgPath, alt := tutorialStep.label), @@ -80,6 +77,7 @@ object TextMobileStepper extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("TextMobileStepper") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/VerticalLinearStepper.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/VerticalLinearStepper.scala index 28d0cc0f..882f8a1c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/VerticalLinearStepper.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Steppers/VerticalLinearStepper.scala @@ -7,24 +7,33 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.Steppers.{DefaultVerticalLinearStepperStyle, VerticalLinearStepperStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiPaper, MuiStep, MuiStepContent, MuiStepLabel, MuiStepper, MuiTypography} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiButton, + MuiPaper, + MuiStep, + MuiStepContent, + MuiStepLabel, + MuiStepper, + MuiTypography +} object VerticalLinearStepper extends ScalaCssReactImplicits { - val steps = List("Select campaign settings", "Create an ad group", "Create an ad") + + val steps = List( + "Select campaign settings", + "Create an ad group", + "Create an ad" + ) def getStepContent(step: Int) = step match { - case 0 => { - "For each ad campaign that you create, you can control how much " + - "you're willing to spend on clicks and conversions, which networks " + - "and geographical locations you want your ads to show on, and more." - } + case 0 => "For each ad campaign that you create, you can control how much " + + "you're willing to spend on clicks and conversions, which networks " + + "and geographical locations you want your ads to show on, and more." case 1 => "An ad group contains one or more ads which target a shared set of keywords." - case 2 => { - "Try out different ad text to see what brings in the most customers, " + - "and learn how to enhance your ads using features like ad extensions. " + - "If you run into any problems with your ads, find out how to tell if " + - "they're running and how to resolve approval issues." - } + case 2 => "Try out different ad text to see what brings in the most customers, " + + "and learn how to enhance your ads using features like ad extensions. " + + "If you run into any problems with your ads, find out how to tell if " + + "they're running and how to resolve approval issues." case _ => "Unknown step" } @@ -60,19 +69,30 @@ object VerticalLinearStepper extends ScalaCssReactImplicits { div( ComponentContainer("Vertical Stepper")( - div(css.root, - MuiStepper(activeStep = state.activeStep, orientation = MuiStepper.Orientation.vertical)( + div( + css.root, + MuiStepper( + activeStep = state.activeStep, + orientation = MuiStepper.Orientation.vertical + )( steps.toVdomArray { label => - MuiStep()(Attr("key") := label, + MuiStep()( + Attr("key") := label, MuiStepLabel()(label), MuiStepContent()( MuiTypography()(getStepContent(state.activeStep)), - div(css.actionsContainer, + div( + css.actionsContainer, div( - MuiButton()(css.button, onClick --> handleBack, disabled := state.isBackDisabled, "Back"), + MuiButton()( + css.button, + onClick --> handleBack, + disabled := state.isBackDisabled, + "Back" + ), MuiButton( variant = MuiButton.Variant.contained, - color = MuiButton.Color.primary, + color = MuiButton.Color.primary )(css.button, onClick --> handleNext, state.nextTitle) ) ) @@ -80,7 +100,8 @@ object VerticalLinearStepper extends ScalaCssReactImplicits { ) } ), - MuiPaper(square = true, elevation = 0)(css.resetContainer, + MuiPaper(square = true, elevation = 0)( + css.resetContainer, MuiTypography()("All steps completed - you're finished"), MuiButton()(css.button, onClick --> handleReset, "Reset") ).when(state.isTotalStep) @@ -88,6 +109,7 @@ object VerticalLinearStepper extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("VerticalLinearStepper") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/CustomizedTable.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/CustomizedTable.scala index f4fec93a..6919f735 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/CustomizedTable.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/CustomizedTable.scala @@ -15,6 +15,7 @@ object CustomizedTable extends ScalaCssReactImplicits { case class Props(style: CustomizedTableStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style val tableItems = TableItem.simples @@ -26,8 +27,10 @@ object CustomizedTable extends ScalaCssReactImplicits { div( ComponentContainer("Customized Tables")( - MuiPaper()(css.root, - MuiTable()(css.table, + MuiPaper()( + css.root, + MuiTable()( + css.table, MuiTableHead()( MuiTableRow()( MuiTableCell(classes = cellClasses)("Dessert (100g serving)"), @@ -38,14 +41,15 @@ object CustomizedTable extends ScalaCssReactImplicits { ) ), MuiTableBody()( - tableItems.zipWithIndex.toVdomArray { case (tableItem, index) => - MuiTableRow()(Attr("key") := index, - MuiTableCell(classes = cellClasses, component = "th", scope = "row")(tableItem.name), - MuiTableCell(classes = cellClasses, align = MuiTableCell.Alignment.right)(tableItem.calories), - MuiTableCell(classes = cellClasses, align = MuiTableCell.Alignment.right)(tableItem.fat), - MuiTableCell(classes = cellClasses, align = MuiTableCell.Alignment.right)(tableItem.carbs), - MuiTableCell(classes = cellClasses, align = MuiTableCell.Alignment.right)(tableItem.protein) - ) + tableItems.zipWithIndex.toVdomArray { + case (tableItem, index) => MuiTableRow()( + Attr("key") := index, + MuiTableCell(classes = cellClasses, component = "th", scope = "row")(tableItem.name), + MuiTableCell(classes = cellClasses, align = MuiTableCell.Alignment.right)(tableItem.calories), + MuiTableCell(classes = cellClasses, align = MuiTableCell.Alignment.right)(tableItem.fat), + MuiTableCell(classes = cellClasses, align = MuiTableCell.Alignment.right)(tableItem.carbs), + MuiTableCell(classes = cellClasses, align = MuiTableCell.Alignment.right)(tableItem.protein) + ) } ) ) @@ -53,6 +57,7 @@ object CustomizedTable extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedTable") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/EnhancedTable.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/EnhancedTable.scala index cf1100c2..c5168e69 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/EnhancedTable.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/EnhancedTable.scala @@ -44,18 +44,18 @@ object EnhancedTable extends ScalaCssReactImplicits { val sortedData = { orderBy match { case "name" => if (order == "asc") data.sortBy(_.name) else data.sortBy(_.name)(Ordering[String].reverse) - case "calories" => if (order == "asc") data.sortBy(_.calories) else data.sortBy(_.calories)(Ordering[Int].reverse) - case "fat" => if (order == "asc") data.sortBy(_.fat) else data.sortBy(_.fat)(Ordering[Double].reverse) + case "calories" => + if (order == "asc") data.sortBy(_.calories) else data.sortBy(_.calories)(Ordering[Int].reverse) + case "fat" => if (order == "asc") data.sortBy(_.fat) else data.sortBy(_.fat)(Ordering[Double].reverse) case "carbs" => if (order == "asc") data.sortBy(_.carbs) else data.sortBy(_.carbs)(Ordering[Int].reverse) - case "protein" => if (order == "asc") data.sortBy(_.protein) else data.sortBy(_.protein)(Ordering[Double].reverse) + case "protein" => + if (order == "asc") data.sortBy(_.protein) else data.sortBy(_.protein)(Ordering[Double].reverse) } } def isSelected(index: Int) = selected.contains(index) - def handleSelectAllClick(checked: Boolean) = { - if (checked) copy(selected = ids) else copy(selected = Set.empty[Int]) - } + def handleSelectAllClick(checked: Boolean) = if (checked) copy(selected = ids) else copy(selected = Set.empty[Int]) def handleRequestSort(property: String) = { val updatedOrder = if (orderBy == property && order == "desc") "asc" else "desc" @@ -63,9 +63,7 @@ object EnhancedTable extends ScalaCssReactImplicits { copy(order = updatedOrder, orderBy = property) } - def handleClick(id: Int) = { - if (isSelected(id)) copy(selected = selected - id) else copy(selected = selected + id) - } + def handleClick(id: Int) = if (isSelected(id)) copy(selected = selected - id) else copy(selected = selected + id) def handleChangePage(page: Int) = copy(page = page) @@ -73,6 +71,7 @@ object EnhancedTable extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleSelectAllClick(e: ReactEventFromInput): Callback = { val checked = e.target.checked @@ -83,9 +82,8 @@ object EnhancedTable extends ScalaCssReactImplicits { def handleClick(id: Int) = t.modState(_.handleClick(id)) - def handleChangePage: (ReactEvent, Int) => Callback = (_, page) => { + def handleChangePage: (ReactEvent, Int) => Callback = (_, page) => t.modState(_.handleChangePage(page)) - } def handleChangeRowsPerPage: ReactEventFromNumberInput => Callback = e => { val value = e.target.value @@ -98,10 +96,13 @@ object EnhancedTable extends ScalaCssReactImplicits { div( ComponentContainer("Sorting & Selecting")( - MuiPaper()(css.root, + MuiPaper()( + css.root, EnhancedTableToolbar(selectedCount = state.selectedCount), - div(css.tableWrapper, - MuiTable()(css.table, + div( + css.tableWrapper, + MuiTable()( + css.table, aria.labelledBy := "tableTitle", EnhancedTableHead( selectedCount = state.selectedCount, @@ -125,7 +126,11 @@ object EnhancedTable extends ScalaCssReactImplicits { MuiTableCell(padding = MuiTableCell.Padding.checkbox)( MuiCheckbox()(checked := isSelected) ), - MuiTableCell(component = "th", scope = "row", padding = MuiTableCell.Padding.none)(tableItem.name), + MuiTableCell( + component = "th", + scope = "row", + padding = MuiTableCell.Padding.none + )(tableItem.name), MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.calories), MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.fat), MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.carbs), @@ -154,6 +159,7 @@ object EnhancedTable extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("EnhancedTable") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/SimpleTable.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/SimpleTable.scala index 7757535e..598a5f76 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/SimpleTable.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/SimpleTable.scala @@ -14,14 +14,17 @@ object SimpleTable extends ScalaCssReactImplicits { case class Props(style: SimpleTableStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style val tableItems = TableItem.simples div( ComponentContainer("Simple Table")( - MuiPaper()(css.root, - MuiTable()(css.table, + MuiPaper()( + css.root, + MuiTable()( + css.table, MuiTableHead()( MuiTableRow()( MuiTableCell()("Dessert (100g serving)"), @@ -32,14 +35,15 @@ object SimpleTable extends ScalaCssReactImplicits { ) ), MuiTableBody()( - tableItems.zipWithIndex.toVdomArray { case (tableItem, index) => - MuiTableRow()(Attr("key") := index, - MuiTableCell(component = "th", scope = "row")(tableItem.name), - MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.calories), - MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.fat), - MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.carbs), - MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.protein) - ) + tableItems.zipWithIndex.toVdomArray { + case (tableItem, index) => MuiTableRow()( + Attr("key") := index, + MuiTableCell(component = "th", scope = "row")(tableItem.name), + MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.calories), + MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.fat), + MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.carbs), + MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.protein) + ) } ) ) @@ -47,6 +51,7 @@ object SimpleTable extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleTable") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/SpanningTable.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/SpanningTable.scala index d9f69061..4f88681a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/SpanningTable.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/SpanningTable.scala @@ -19,6 +19,7 @@ object SpanningTable extends ScalaCssReactImplicits { case class Props(style: SimpleTableStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style val tableItems = SpanningItem.rows @@ -29,8 +30,10 @@ object SpanningTable extends ScalaCssReactImplicits { div( ComponentContainer("Spanning Table")( - MuiPaper()(css.root, - MuiTable()(css.table, + MuiPaper()( + css.root, + MuiTable()( + css.table, MuiTableHead()( MuiTableRow()( MuiTableCell()("Desc"), @@ -41,7 +44,8 @@ object SpanningTable extends ScalaCssReactImplicits { ), MuiTableBody()( tableItems.zipWithIndex.toVdomArray { case (tableItem, index) => - MuiTableRow()(Attr("key") := index, + MuiTableRow()( + Attr("key") := index, MuiTableCell()(tableItem.desc), MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.qty), MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.unit), @@ -68,6 +72,7 @@ object SpanningTable extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SpanningTable") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/wrappers/EnhancedTableHead.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/wrappers/EnhancedTableHead.scala index 5fe464b3..2e909326 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/wrappers/EnhancedTableHead.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/wrappers/EnhancedTableHead.scala @@ -9,6 +9,7 @@ import io.kinoplan.demo.models.Tables.Row import io.kinoplan.scalajs.react.material.ui.core._ object EnhancedTableHead extends ScalaCssReactImplicits { + case class Props( selectedCount: Int, order: String, @@ -23,6 +24,7 @@ object EnhancedTableHead extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, Unit]) { + def createSortHandler(property: String): Callback = { val props = t.props.runNow() @@ -45,7 +47,8 @@ object EnhancedTableHead extends ScalaCssReactImplicits { align = row.align, padding = row.padding, sortDirection = row.sortDirection(props.orderBy, props.order) - )(Attr("key") := row.id, + )( + Attr("key") := row.id, MuiTooltip(title = "Sort", placement = row.placement, enterDelay = 300)( MuiTableSortLabel(active = row.isActive(props.orderBy), direction = props.order)( onClick --> createSortHandler(row.id), @@ -57,6 +60,7 @@ object EnhancedTableHead extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("EnhancedTableHead") @@ -70,5 +74,15 @@ object EnhancedTableHead extends ScalaCssReactImplicits { onSelectAllClick: ReactEventFromInput => Callback, onRequestSort: String => Callback, rowCount: Int - ) = component(Props(selectedCount, order, orderBy, onSelectAllClick, onRequestSort, rowCount)) + ) = component( + Props( + selectedCount, + order, + orderBy, + onSelectAllClick, + onRequestSort, + rowCount + ) + ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/wrappers/EnhancedTableToolbar.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/wrappers/EnhancedTableToolbar.scala index 5c1e8fe7..00149884 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/wrappers/EnhancedTableToolbar.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tables/wrappers/EnhancedTableToolbar.scala @@ -11,6 +11,7 @@ import io.kinoplan.scalajs.react.material.ui.core._ import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object EnhancedTableToolbar extends ScalaCssReactImplicits { + case class Props(selectedCount: Int, style: EnhancedTableToolbarStyle) { val selectedNonEmpty = selectedCount > 0 @@ -20,13 +21,17 @@ object EnhancedTableToolbar extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): React.Node = { val css = props.style val cssHighlight = if (props.selectedNonEmpty) css.highlight(Layout.isPaletteLight) else css.common.emptyStyle - MuiToolbar()(css.root, cssHighlight, - div(css.title, + MuiToolbar()( + css.root, + cssHighlight, + div( + css.title, MuiTypography( color = MuiTypography.Color.inherit, variant = MuiTypography.Variant.subtitle1 @@ -37,16 +42,21 @@ object EnhancedTableToolbar extends ScalaCssReactImplicits { ).when(props.selectedIsEmpty) ), div(css.spacer), - div(css.actions, + div( + css.actions, MuiTooltip(title = "Delete")( MuiIconButton()(aria.label := "Delete", MuiIcons(MuiIconsModule.Delete)()) ).when(props.selectedNonEmpty), MuiTooltip(title = "Filter list")( - MuiIconButton()(aria.label := "Filter list", MuiIcons(MuiIconsModule.FilterList)()) + MuiIconButton()( + aria.label := "Filter list", + MuiIcons(MuiIconsModule.FilterList)() + ) ).when(props.selectedIsEmpty) ) ).rawNode } + } private val component = ScalaComponent.builder[Props]("EnhancedTableToolbar") @@ -57,4 +67,5 @@ object EnhancedTableToolbar extends ScalaCssReactImplicits { selectedCount: Int, style: EnhancedTableToolbarStyle = DefaultEnhancedTableToolbarStyle ) = component(Props(selectedCount, style)) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/CenteredTabs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/CenteredTabs.scala index 07958d9c..0af2444d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/CenteredTabs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/CenteredTabs.scala @@ -19,16 +19,17 @@ object CenteredTabs extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("Fixed Tabs - Centered")( - MuiPaper()(css.flexGrowOne, + MuiPaper()( + css.flexGrowOne, MuiTabs( onChange = handleChange, indicatorColor = MuiTabs.IndicatorColor.primary, @@ -44,6 +45,7 @@ object CenteredTabs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CenteredTabs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/CustomizedTabs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/CustomizedTabs.scala index 64c136e3..64fe26f6 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/CustomizedTabs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/CustomizedTabs.scala @@ -19,9 +19,9 @@ object CustomizedTabs extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -38,7 +38,9 @@ object CustomizedTabs extends ScalaCssReactImplicits { div( ComponentContainer("Customized Tabs")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiTabs(onChange = handleChange, classes = tabsClasses)( value := state.value, MuiTab(disableRipple = true, classes = tabClasses, label = "Tab 1".toVdom), @@ -50,6 +52,7 @@ object CustomizedTabs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedTabs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/DisabledTabs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/DisabledTabs.scala index 7bd7054d..3b66aa1e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/DisabledTabs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/DisabledTabs.scala @@ -10,33 +10,33 @@ import io.kinoplan.demo.utils.Helpers.StringExtended import io.kinoplan.scalajs.react.material.ui.core.{MuiPaper, MuiTab, MuiTabs} object DisabledTabs { + case class State(value: js.Any = 2) { def handleChange(value: js.Any) = copy(value = value) } class Backend(t: BackendScope[Unit, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } - - def render(state: State): VdomElement = { - div( - ComponentContainer("Disabled Tab")( - MuiPaper(square = true)( - MuiTabs( - indicatorColor = MuiTabs.IndicatorColor.primary, - textColor = MuiTabs.TextColor.primary, - onChange = handleChange - )( - value := state.value, - MuiTab(label = "Active".toVdom), - MuiTab(label = "Disabled".toVdom)(disabled := true), - MuiTab(label = "Active".toVdom) - ) + + def render(state: State): VdomElement = div( + ComponentContainer("Disabled Tab")( + MuiPaper(square = true)( + MuiTabs( + indicatorColor = MuiTabs.IndicatorColor.primary, + textColor = MuiTabs.TextColor.primary, + onChange = handleChange + )( + value := state.value, + MuiTab(label = "Active".toVdom), + MuiTab(label = "Disabled".toVdom)(disabled := true), + MuiTab(label = "Active".toVdom) ) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("DisabledTabs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/FullWidthTabs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/FullWidthTabs.scala index f6930d88..1f4c694f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/FullWidthTabs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/FullWidthTabs.scala @@ -22,27 +22,29 @@ object FullWidthTabs extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } - def handleChangeIndex: (Double, Double) => Callback = (index, _) => { + def handleChangeIndex: (Double, Double) => Callback = (index, _) => t.modState(_.handleChange(index)) - } def render(props: Props, state: State): VdomElement = { val css = props.style - val swipeableViewsAxis = if (css.theme.direction == Direction.rtl) { - AxisType.`x-reverse` - } else { - AxisType.x - } + val swipeableViewsAxis = + if (css.theme.direction == Direction.rtl) AxisType.`x-reverse` + else AxisType.x div( ComponentContainer("Fixed Tabs - Full width")( - div(css.root, css.rootPaper(Layout.isPaletteLight), - MuiAppBar(position = MuiAppBar.Position.static, color = MuiAppBar.Color.default)( + div( + css.root, + css.rootPaper(Layout.isPaletteLight), + MuiAppBar( + position = MuiAppBar.Position.static, + color = MuiAppBar.Color.default + )( MuiTabs( onChange = handleChange, indicatorColor = MuiTabs.IndicatorColor.primary, @@ -69,6 +71,7 @@ object FullWidthTabs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("FullWidthTabs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/IconLabelTabs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/IconLabelTabs.scala index e5045b9a..85eee314 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/IconLabelTabs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/IconLabelTabs.scala @@ -20,31 +20,42 @@ object IconLabelTabs extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("IconTabs - Label")( - MuiPaper(square = true)(css.root, + MuiPaper(square = true)( + css.root, MuiTabs( onChange = handleChange, variant = MuiTabs.Variant.fullWidth, indicatorColor = MuiTabs.IndicatorColor.secondary, - textColor = MuiTabs.TextColor.secondary, + textColor = MuiTabs.TextColor.secondary )( value := state.value, - MuiTab(icon = MuiIcons(MuiIconsModule.Phone)()(), label = "RECENTS".toVdom), - MuiTab(icon = MuiIcons(MuiIconsModule.Favorite)()(), label = "FAVORITES".toVdom), - MuiTab(icon = MuiIcons(MuiIconsModule.PersonPin)()(), label = "NEARBY".toVdom) + MuiTab( + icon = MuiIcons(MuiIconsModule.Phone)()(), + label = "RECENTS".toVdom + ), + MuiTab( + icon = MuiIcons(MuiIconsModule.Favorite)()(), + label = "FAVORITES".toVdom + ), + MuiTab( + icon = MuiIcons(MuiIconsModule.PersonPin)()(), + label = "NEARBY".toVdom + ) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("IconLabelTabs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/IconTabs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/IconTabs.scala index 2c14f40a..7bb66e3c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/IconTabs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/IconTabs.scala @@ -19,21 +19,22 @@ object IconTabs extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("IconTabs")( - MuiPaper(square = true)(css.root, + MuiPaper(square = true)( + css.root, MuiTabs( onChange = handleChange, variant = MuiTabs.Variant.fullWidth, indicatorColor = MuiTabs.IndicatorColor.primary, - textColor = MuiTabs.TextColor.primary, + textColor = MuiTabs.TextColor.primary )( value := state.value, MuiTab(icon = MuiIcons(MuiIconsModule.Phone)()()), @@ -44,6 +45,7 @@ object IconTabs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("IconTabs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/NavTabs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/NavTabs.scala index f04aab44..d75d56ce 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/NavTabs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/NavTabs.scala @@ -24,16 +24,14 @@ object NavTabs extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } - def LinkTab(labelValue: String, hrefValue: String) = { - MuiTab(component = "a", label = labelValue.toVdom)( - onClick ==> (event => Callback {event.preventDefault()}), - href := hrefValue - ) - } + def LinkTab(labelValue: String, hrefValue: String) = MuiTab(component = "a", label = labelValue.toVdom)( + onClick ==> (event => Callback(event.preventDefault())), + href := hrefValue + ) def render(props: Props, state: State): VdomElement = { val css = props.style @@ -41,7 +39,9 @@ object NavTabs extends ScalaCssReactImplicits { div( ComponentContainer("Nav Tabs")( MuiNoSsr()( - div(css.flexGrowOne, css.paper(Layout.isPaletteLight), + div( + css.flexGrowOne, + css.paper(Layout.isPaletteLight), MuiAppBar(position = MuiAppBar.Position.static)( MuiTabs(variant = MuiTabs.Variant.fullWidth, onChange = handleChange)( value := state.value, @@ -58,6 +58,7 @@ object NavTabs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("NavTabs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonAuto.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonAuto.scala index d24eda73..6296a861 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonAuto.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonAuto.scala @@ -28,17 +28,22 @@ object ScrollableTabsButtonAuto extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("Scrollable Tabs - Automatic Scroll Buttons")( - div(css.root, css.rootPaper(Layout.isPaletteLight), - MuiAppBar(position = MuiAppBar.Position.static, color = MuiAppBar.Color.default)( + div( + css.root, + css.rootPaper(Layout.isPaletteLight), + MuiAppBar( + position = MuiAppBar.Position.static, + color = MuiAppBar.Color.default + )( MuiTabs( onChange = handleChange, indicatorColor = MuiTabs.IndicatorColor.primary, @@ -67,6 +72,7 @@ object ScrollableTabsButtonAuto extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ScrollableTabsButtonAuto") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonForce.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonForce.scala index 052722b8..caeed464 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonForce.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonForce.scala @@ -29,17 +29,22 @@ object ScrollableTabsButtonForce extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("Scrollable Tabs - Forced Scroll Buttons")( - div(css.root, css.rootPaper(Layout.isPaletteLight), - MuiAppBar(position = MuiAppBar.Position.static, color = MuiAppBar.Color.default)( + div( + css.root, + css.rootPaper(Layout.isPaletteLight), + MuiAppBar( + position = MuiAppBar.Position.static, + color = MuiAppBar.Color.default + )( MuiTabs( onChange = handleChange, indicatorColor = MuiTabs.IndicatorColor.primary, @@ -48,13 +53,34 @@ object ScrollableTabsButtonForce extends ScalaCssReactImplicits { scrollButtons = MuiTabs.ScrollButtons.on )( value := state.value, - MuiTab(label = "Item One".toVdom, icon = MuiIcons(MuiIconsModule.Phone)()()), - MuiTab(label = "Item Two".toVdom, icon = MuiIcons(MuiIconsModule.Favorite)()()), - MuiTab(label = "Item Three".toVdom, icon = MuiIcons(MuiIconsModule.PersonPin)()()), - MuiTab(label = "Item Four".toVdom, icon = MuiIcons(MuiIconsModule.Help)()()), - MuiTab(label = "Item Five".toVdom, icon = MuiIcons(MuiIconsModule.ShoppingBasket)()()), - MuiTab(label = "Item Six".toVdom, icon = MuiIcons(MuiIconsModule.ThumbDown)()()), - MuiTab(label = "Item Seven".toVdom, icon = MuiIcons(MuiIconsModule.ThumbUp)()()) + MuiTab( + label = "Item One".toVdom, + icon = MuiIcons(MuiIconsModule.Phone)()() + ), + MuiTab( + label = "Item Two".toVdom, + icon = MuiIcons(MuiIconsModule.Favorite)()() + ), + MuiTab( + label = "Item Three".toVdom, + icon = MuiIcons(MuiIconsModule.PersonPin)()() + ), + MuiTab( + label = "Item Four".toVdom, + icon = MuiIcons(MuiIconsModule.Help)()() + ), + MuiTab( + label = "Item Five".toVdom, + icon = MuiIcons(MuiIconsModule.ShoppingBasket)()() + ), + MuiTab( + label = "Item Six".toVdom, + icon = MuiIcons(MuiIconsModule.ThumbDown)()() + ), + MuiTab( + label = "Item Seven".toVdom, + icon = MuiIcons(MuiIconsModule.ThumbUp)()() + ) ) ), TabContainer()("Item One").when(state.isOne), @@ -68,6 +94,7 @@ object ScrollableTabsButtonForce extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ScrollableTabsButtonForce") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonPrevent.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonPrevent.scala index 03395781..d1aa0f15 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonPrevent.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/ScrollableTabsButtonPrevent.scala @@ -28,16 +28,18 @@ object ScrollableTabsButtonPrevent extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("Scrollable Tabs - Prevent Scroll Buttons")( - div(css.root, css.rootPaper(Layout.isPaletteLight), + div( + css.root, + css.rootPaper(Layout.isPaletteLight), MuiAppBar(position = MuiAppBar.Position.static)( MuiTabs( onChange = handleChange, @@ -65,6 +67,7 @@ object ScrollableTabsButtonPrevent extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ScrollableTabsButtonPrevent") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/SimpleTabs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/SimpleTabs.scala index 40e52e02..e99915ca 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/SimpleTabs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/SimpleTabs.scala @@ -24,16 +24,18 @@ object SimpleTabs extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("Simple Tabs")( - div(css.flexGrowOne, css.paper(Layout.isPaletteLight), + div( + css.flexGrowOne, + css.paper(Layout.isPaletteLight), MuiAppBar(position = MuiAppBar.Position.static)( MuiTabs(onChange = handleChange)( value := state.value, @@ -49,6 +51,7 @@ object SimpleTabs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleTabs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/TabsWrappedLabel.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/TabsWrappedLabel.scala index 87ea2084..ec9351a7 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/TabsWrappedLabel.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tabs/TabsWrappedLabel.scala @@ -24,20 +24,24 @@ object TabsWrappedLabel extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => { + + def handleChange: (ReactEvent, js.Any) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style div( ComponentContainer("Wrapped Labels")( - div(css.flexGrowOne, css.paper(Layout.isPaletteLight), + div( + css.flexGrowOne, + css.paper(Layout.isPaletteLight), MuiAppBar(position = MuiAppBar.Position.static)( MuiTabs(onChange = handleChange)( value := state.value, - MuiTab(label = "New Arrivals in the Longest Text of Nonfiction".toVdom)(value := "one"), + MuiTab( + label = "New Arrivals in the Longest Text of Nonfiction".toVdom + )(value := "one"), MuiTab(label = "Item Two".toVdom)(value := "two"), MuiTab(label = "Item Three".toVdom)(value := "three") ) @@ -49,6 +53,7 @@ object TabsWrappedLabel extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("TabsWrappedLabel") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/ComposedTextField.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/ComposedTextField.scala index 3c152060..94c4e964 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/ComposedTextField.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/ComposedTextField.scala @@ -7,7 +7,14 @@ import scalacss.ScalaCssReactImplicits import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.TextFields.{ComponentTextFieldStyle, DefaultComponentTextFieldStyle} -import io.kinoplan.scalajs.react.material.ui.core.{MuiFilledInput, MuiFormControl, MuiFormHelperText, MuiInput, MuiInputLabel, MuiOutlinedInput} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFilledInput, + MuiFormControl, + MuiFormHelperText, + MuiInput, + MuiInputLabel, + MuiOutlinedInput +} object ComposedTextField extends ScalaCssReactImplicits { case class Props(style: ComponentTextFieldStyle) @@ -23,6 +30,7 @@ object ComposedTextField extends ScalaCssReactImplicits { copy(labelWidth = offsetWidth) } + } class Backend(t: BackendScope[Props, State]) { @@ -43,8 +51,10 @@ object ComposedTextField extends ScalaCssReactImplicits { div( ComponentContainer("Components")( - div(css.container, - MuiFormControl()(css.formControl, + div( + css.container, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "component-simple", "Name"), MuiInput()( id := "component-simple", @@ -52,7 +62,8 @@ object ComposedTextField extends ScalaCssReactImplicits { onChange ==> handleChange ) ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, MuiInputLabel()(htmlFor := "component-helper", "Name"), MuiInput()( id := "component-helper", @@ -62,7 +73,8 @@ object ComposedTextField extends ScalaCssReactImplicits { ), MuiFormHelperText()(id := "component-helper-text", "Some important helper text") ), - MuiFormControl()(css.formControl, + MuiFormControl()( + css.formControl, disabled := true, MuiInputLabel()(htmlFor := "component-disabled", "Name"), MuiInput()( @@ -72,7 +84,8 @@ object ComposedTextField extends ScalaCssReactImplicits { ), MuiFormHelperText()("Disabled") ), - MuiFormControl(error = true)(css.formControl, + MuiFormControl(error = true)( + css.formControl, MuiInputLabel()(htmlFor := "component-error", "Name"), MuiInput()( id := "component-error", @@ -82,15 +95,17 @@ object ComposedTextField extends ScalaCssReactImplicits { ), MuiFormHelperText()(id := "component-error-text", "Error") ), - MuiFormControl(variant = MuiFormControl.Variant.outlined)(css.formControl, + MuiFormControl(variant = MuiFormControl.Variant.outlined)( + css.formControl, MuiInputLabel()(id := inputRefId, htmlFor := "component-outlined", "Name"), MuiOutlinedInput(labelWidth = state.labelWidth)( id := "component-outlined", value := state.name, - onChange ==> handleChange, + onChange ==> handleChange ) ), - MuiFormControl(variant = MuiFormControl.Variant.filled)(css.formControl, + MuiFormControl(variant = MuiFormControl.Variant.filled)( + css.formControl, MuiInputLabel()(htmlFor := "component-filled", "Name"), MuiFilledInput()( id := "component-filled", @@ -102,6 +117,7 @@ object ComposedTextField extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ComposedTextField") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/CustomizedInputBase.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/CustomizedInputBase.scala index f4c24883..2bcd4f89 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/CustomizedInputBase.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/CustomizedInputBase.scala @@ -13,23 +13,28 @@ object CustomizedInputBase extends ScalaCssReactImplicits { case class Props(style: CustomizedInputBaseStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Customized Input Base")( - MuiPaper(elevation = 1)(css.root, - MuiIconButton()(css.iconButton, + MuiPaper(elevation = 1)( + css.root, + MuiIconButton()( + css.iconButton, aria.label := "Menu", MuiIcons(MuiIconsModule.Menu)() ), MuiInputBase()(css.input, placeholder := "Search Google Maps"), - MuiIconButton()(css.iconButton, + MuiIconButton()( + css.iconButton, aria.label := "Search", MuiIcons(MuiIconsModule.Search)() ), MuiDivider()(css.divider), - MuiIconButton(color = MuiIconButton.Color.primary)(css.iconButton, + MuiIconButton(color = MuiIconButton.Color.primary)( + css.iconButton, aria.label := "Directions", MuiIcons(MuiIconsModule.Directions)() ) @@ -37,6 +42,7 @@ object CustomizedInputBase extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedInputBase") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/CustomizedInputs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/CustomizedInputs.scala index ee9701a7..bf410b42 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/CustomizedInputs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/CustomizedInputs.scala @@ -10,56 +10,75 @@ import io.kinoplan.demo.components.{ComponentContainer, Layout} import io.kinoplan.demo.styles.demos.TextFields.{CustomizedInputsStyle, DefaultCustomizedInputsStyle} import io.kinoplan.demo.utils.Helpers._ import io.kinoplan.demo.utils.props.{MuiInputLabelProps, MuiInputProps} -import io.kinoplan.scalajs.react.material.ui.core.{MuiFormControl, MuiInput, MuiInputBase, MuiInputLabel, MuiTextField, colors} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFormControl, + MuiInput, + MuiInputBase, + MuiInputLabel, + MuiTextField, + colors +} import io.kinoplan.scalajs.react.material.ui.core.styles._ object CustomizedInputs extends ScalaCssReactImplicits { case class Props(style: CustomizedInputsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style val standardLabelClasses = Map( MuiInputLabel.ClassKey.root -> styleAToClassName(css.cssLabel), - MuiInputLabel.ClassKey.focused -> styleAToClassName(css.cssFocused), + MuiInputLabel.ClassKey.focused -> styleAToClassName(css.cssFocused) ) val standardInputClasses = Map( MuiInput.ClassKey.underline -> styleAToClassName(css.cssUnderline) ) - val inputLabelProps = MuiInputLabelProps(classes = js.Dynamic.literal( - root = styleAToClassName(css.cssLabel), - focused = styleAToClassName(css.cssFocused) - )) - - val inputProps = MuiInputProps(classes = js.Dynamic.literal( - root = styleAToClassName(css.cssOutlinedInput), - focused = styleAToClassName(css.cssFocused), - notchedOutline = styleAToClassName(css.notchedOutline) - )) - - val theme = createMuiTheme(ThemeOptions( - palette = PaletteOptions( - primary = colors.green - ), - typography = TypographyOptions( - useNextVariants = true + val inputLabelProps = MuiInputLabelProps( + classes = js.Dynamic.literal( + root = styleAToClassName(css.cssLabel), + focused = styleAToClassName(css.cssFocused) + ) + ) + + val inputProps = MuiInputProps( + classes = js.Dynamic.literal( + root = styleAToClassName(css.cssOutlinedInput), + focused = styleAToClassName(css.cssFocused), + notchedOutline = styleAToClassName(css.notchedOutline) + ) + ) + + val theme = createMuiTheme( + ThemeOptions( + palette = PaletteOptions( + primary = colors.green + ), + typography = TypographyOptions( + useNextVariants = true + ) ) - )) + ) val inputBaseClasses = Map( MuiInputBase.ClassKey.root -> styleAToClassName(css.bootstrapRoot), MuiInputBase.ClassKey.input -> stylesToClassName( - Seq(css.bootstrapInput, css.bootstrapInputPaper(Layout.isPaletteLight)) + Seq( + css.bootstrapInput, + css.bootstrapInputPaper(Layout.isPaletteLight) + ) ) ) div( ComponentContainer("Customized inputs")( - div(css.root, - MuiFormControl()(css.cssMargin, + div( + css.root, + MuiFormControl()( + css.cssMargin, MuiInputLabel(classes = standardLabelClasses)(htmlFor := "custom-css-standard-input", "Custom CSS"), MuiInput(classes = standardInputClasses)(id := "custom-css-standard-input") ), @@ -68,19 +87,21 @@ object CustomizedInputs extends ScalaCssReactImplicits { InputProps = inputProps, label = "Custom CSS".toVdom, variant = MuiTextField.Variant.outlined - )(css.cssMargin, - id := "custom-css-outlined-input" - ), + )(css.cssMargin, id := "custom-css-outlined-input"), MuiThemeProvider(theme = theme)( - MuiTextField(label = "MuiThemeProvider".toVdom)(css.cssMargin, - id := "mui-theme-provider-standard-input" - ), - MuiTextField(label = "MuiThemeProvider".toVdom, variant = MuiTextField.Variant.outlined)(css.cssMargin, - id := "mui-theme-provider-outlined-input" - ) + MuiTextField(label = "MuiThemeProvider".toVdom)(css.cssMargin, id := "mui-theme-provider-standard-input"), + MuiTextField( + label = "MuiThemeProvider".toVdom, + variant = MuiTextField.Variant.outlined + )(css.cssMargin, id := "mui-theme-provider-outlined-input") ), - MuiFormControl()(css.cssMargin, - MuiInputLabel(shrink = true)(css.bootstrapFormLabel, htmlFor := "bootstrap-input", "Bootstrap"), + MuiFormControl()( + css.cssMargin, + MuiInputLabel(shrink = true)( + css.bootstrapFormLabel, + htmlFor := "bootstrap-input", + "Bootstrap" + ), MuiInputBase(classes = inputBaseClasses)( id := "bootstrap-input", defaultValue := "react-bootstrap" @@ -91,6 +112,7 @@ object CustomizedInputs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedInputs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/FilledInputAdornments.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/FilledInputAdornments.scala index ac832789..10e411da 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/FilledInputAdornments.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/FilledInputAdornments.scala @@ -40,6 +40,7 @@ object FilledInputAdornments extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeAmount(e: ReactEventFromTextArea) = { val value = e.target.value @@ -69,23 +70,19 @@ object FilledInputAdornments extends ScalaCssReactImplicits { def render(props: Props, state: State): VdomElement = { val css = props.style - val passwordEndAdormnent = { - MuiInputAdornment(position = MuiInputAdornment.Position.end)( - MuiIconButton()( - aria.label := "Toggle password visibility", - onClick --> handleClickShowPassword, - if (state.showPassword) { - MuiIcons(MuiIconsModule.Visibility)() - } else { - MuiIcons(MuiIconsModule.VisibilityOff)() - } - ) + val passwordEndAdormnent = MuiInputAdornment(position = MuiInputAdornment.Position.end)( + MuiIconButton()( + aria.label := "Toggle password visibility", + onClick --> handleClickShowPassword, + if (state.showPassword) MuiIcons(MuiIconsModule.Visibility)() + else MuiIcons(MuiIconsModule.VisibilityOff)() ) - } + ) div( ComponentContainer("Input Adornments - Filled Input Adornments")( - div(css.root, + div( + css.root, MuiTextField( label = "With filled TextField".toVdom, variant = MuiTextField.Variant.filled, @@ -94,7 +91,9 @@ object FilledInputAdornments extends ScalaCssReactImplicits { position = MuiInputAdornment.Position.start )(css.top, "Kg").rawNode.some.orUndefined ) - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, id := "filled-simple-start-adornment" ), MuiTextField( @@ -106,7 +105,9 @@ object FilledInputAdornments extends ScalaCssReactImplicits { position = MuiInputAdornment.Position.start )(css.top, "Kg").rawNode.some.orUndefined ) - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, value := state.weightRange, onChange ==> handleChangeWeightRange, FieldRange.commons.toVdomArray { range => @@ -121,7 +122,9 @@ object FilledInputAdornments extends ScalaCssReactImplicits { position = MuiInputAdornment.Position.start )(css.top, "$").rawNode.some.orUndefined ) - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, id := "filled-adornment-amount", value := state.amount, onChange ==> handleChangeAmount @@ -135,7 +138,9 @@ object FilledInputAdornments extends ScalaCssReactImplicits { )(css.top, "$").rawNode.some.orUndefined ), helperText = "Weight".toVdom - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, id := "filled-adornment-weight", value := state.weight, onChange ==> handleChangeWeight @@ -144,7 +149,9 @@ object FilledInputAdornments extends ScalaCssReactImplicits { label = "Password".toVdom, variant = MuiTextField.Variant.filled, InputProps = MuiInputProps(endAdornment = passwordEndAdormnent.rawNode.some.orUndefined) - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, id := "filled-adornment-password", `type` := state.showPasswordType, value := state.password, @@ -154,6 +161,7 @@ object FilledInputAdornments extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("FilledInputAdornments") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/FilledTextFields.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/FilledTextFields.scala index 33b5da5f..1f7c3958 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/FilledTextFields.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/FilledTextFields.scala @@ -33,6 +33,7 @@ object FilledTextFields extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeName(e: ReactEventFromTextArea) = { val value = e.target.value @@ -62,12 +63,16 @@ object FilledTextFields extends ScalaCssReactImplicits { div( ComponentContainer("Filled")( - form(css.container, noValidate := true, autoComplete := "off", + form( + css.container, + noValidate := true, + autoComplete := "off", MuiTextField( label = "Name".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-name", value := state.name, onChange ==> handleChangeName @@ -76,15 +81,13 @@ object FilledTextFields extends ScalaCssReactImplicits { label = "Uncontrolled".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, - id := "filled-uncontrolled", - defaultValue := "foo" - ), + )(css.textField, id := "filled-uncontrolled", defaultValue := "foo"), MuiTextField( label = "Required".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, required := true, id := "filled-required", defaultValue := "Hello World" @@ -94,7 +97,8 @@ object FilledTextFields extends ScalaCssReactImplicits { label = "Error".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-error", defaultValue := "Hello World" ), @@ -102,7 +106,8 @@ object FilledTextFields extends ScalaCssReactImplicits { label = "Disabled".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, disabled := true, id := "filled-disabled", defaultValue := "Hello World" @@ -111,7 +116,8 @@ object FilledTextFields extends ScalaCssReactImplicits { label = "Email".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, autoComplete := "email", id := "filled-email-input", `type` := "email", @@ -121,7 +127,8 @@ object FilledTextFields extends ScalaCssReactImplicits { label = "Password".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, autoComplete := "current-password", id := "filled-password-input", `type` := "password" @@ -131,7 +138,8 @@ object FilledTextFields extends ScalaCssReactImplicits { margin = MuiTextField.Margin.normal, InputProps = MuiInputProps(readOnly = true), variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-read-only-input", defaultValue := "Hello World" ), @@ -139,9 +147,7 @@ object FilledTextFields extends ScalaCssReactImplicits { label = "Dense".toVdom, margin = MuiTextField.Margin.dense, variant = MuiTextField.Variant.filled - )(css.textField, css.dense, - id := "filled-dense" - ), + )(css.textField, css.dense, id := "filled-dense"), MuiTextField( label = "Multiline".toVdom, multiline = true, @@ -149,7 +155,8 @@ object FilledTextFields extends ScalaCssReactImplicits { margin = MuiTextField.Margin.normal, helperText = "hello".toVdom, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-multiline-flexible", value := state.multiline, onChange ==> handleChangeMultiline @@ -160,7 +167,8 @@ object FilledTextFields extends ScalaCssReactImplicits { rows = 4, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-multiline-static", defaultValue := "Default Value" ), @@ -169,7 +177,8 @@ object FilledTextFields extends ScalaCssReactImplicits { helperText = "Some important text".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-helperText", defaultValue := "Default Value" ), @@ -177,7 +186,8 @@ object FilledTextFields extends ScalaCssReactImplicits { label = "With placeholder".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-with-placeholder", placeholder := "Placeholder" ), @@ -186,7 +196,8 @@ object FilledTextFields extends ScalaCssReactImplicits { multiline = true, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-textarea", placeholder := "Placeholder" ), @@ -195,7 +206,8 @@ object FilledTextFields extends ScalaCssReactImplicits { InputLabelProps = MuiInputLabelProps(shrink = true), margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-number", value := state.age, `type` := "number", @@ -205,10 +217,7 @@ object FilledTextFields extends ScalaCssReactImplicits { label = "Search field".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, - id := "filled-search", - `type` := "search" - ), + )(css.textField, id := "filled-search", `type` := "search"), MuiTextField( select = true, label = "Select".toVdom, @@ -217,7 +226,8 @@ object FilledTextFields extends ScalaCssReactImplicits { helperText = "Please select your currency".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-select-currency", value := state.currency, onChange ==> handleChangeCurrency, @@ -228,11 +238,15 @@ object FilledTextFields extends ScalaCssReactImplicits { MuiTextField( select = true, label = "Native select".toVdom, - SelectProps = MuiSelectProps(native = true, MenuProps = MuiMenuProps(className = css.menu.htmlClass)), + SelectProps = MuiSelectProps( + native = true, + MenuProps = MuiMenuProps(className = css.menu.htmlClass) + ), helperText = "Please select your currency".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, + )( + css.textField, id := "filled-select-currency-native", value := state.currency, onChange ==> handleChangeCurrency, @@ -255,14 +269,12 @@ object FilledTextFields extends ScalaCssReactImplicits { MuiTextField( margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.filled - )(css.textField, - id := "filled-bare", - defaultValue := "Bare" - ) + )(css.textField, id := "filled-bare", defaultValue := "Bare") ) ) ) } + } private val component = ScalaComponent.builder[Props]("FilledTextFields") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/InputAdornments.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/InputAdornments.scala index 5a494621..e44a77bb 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/InputAdornments.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/InputAdornments.scala @@ -13,7 +13,16 @@ import io.kinoplan.demo.models.TextFields.FieldRange import io.kinoplan.demo.styles.demos.TextFields.{DefaultInputAdornmentsStyle, InputAdornmentsStyle} import io.kinoplan.demo.utils.Helpers.StringExtended import io.kinoplan.demo.utils.props.MuiInputProps -import io.kinoplan.scalajs.react.material.ui.core.{MuiFormControl, MuiFormHelperText, MuiIconButton, MuiInput, MuiInputAdornment, MuiInputLabel, MuiMenuItem, MuiTextField} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFormControl, + MuiFormHelperText, + MuiIconButton, + MuiInput, + MuiInputAdornment, + MuiInputLabel, + MuiMenuItem, + MuiTextField +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object InputAdornments extends ScalaCssReactImplicits { @@ -40,6 +49,7 @@ object InputAdornments extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeAmount(e: ReactEventFromTextArea) = { val value = e.target.value @@ -69,19 +79,19 @@ object InputAdornments extends ScalaCssReactImplicits { def render(props: Props, state: State): VdomElement = { val css = props.style - val passwordEndAdormnent = { - MuiInputAdornment(position = MuiInputAdornment.Position.end)( - MuiIconButton()( - aria.label := "Toggle password visibility", - onClick --> handleClickShowPassword, - if (state.showPassword) MuiIcons(MuiIconsModule.Visibility)() else MuiIcons(MuiIconsModule.VisibilityOff)() - ) + val passwordEndAdormnent = MuiInputAdornment(position = MuiInputAdornment.Position.end)( + MuiIconButton()( + aria.label := "Toggle password visibility", + onClick --> handleClickShowPassword, + if (state.showPassword) MuiIcons(MuiIconsModule.Visibility)() + else MuiIcons(MuiIconsModule.VisibilityOff)() ) - } + ) div( ComponentContainer("Input Adornments")( - div(css.root, + div( + css.root, MuiTextField( label = "With normal TextField".toVdom, InputProps = MuiInputProps( @@ -89,9 +99,7 @@ object InputAdornments extends ScalaCssReactImplicits { position = MuiInputAdornment.Position.start )("Kg").rawNode.some.orUndefined ) - )(css.cssMargin, css.textField, - id := "simple-start-adornment" - ), + )(css.cssMargin, css.textField, id := "simple-start-adornment"), MuiTextField( select = true, label = "With Select".toVdom, @@ -100,22 +108,30 @@ object InputAdornments extends ScalaCssReactImplicits { position = MuiInputAdornment.Position.start )("Kg").rawNode.some.orUndefined ) - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, value := state.weightRange, onChange ==> handleChangeWeightRange, FieldRange.commons.toVdomArray { range => MuiMenuItem()(Attr("key") := range.value, value := range.value, range.label) } ), - MuiFormControl(fullWidth = true)(css.cssMargin, + MuiFormControl(fullWidth = true)( + css.cssMargin, MuiInputLabel()(htmlFor := "adornment-amount", "Amount"), - MuiInput(startAdornment = MuiInputAdornment(position = MuiInputAdornment.Position.start)("$"))( + MuiInput( + startAdornment = MuiInputAdornment(position = MuiInputAdornment.Position.start)("$") + )( id := "adornment-amount", value := state.amount, onChange ==> handleChangeAmount ) ), - MuiFormControl()(css.cssMargin, css.withoutLabel, css.textField, + MuiFormControl()( + css.cssMargin, + css.withoutLabel, + css.textField, MuiInput( endAdornment = MuiInputAdornment(position = MuiInputAdornment.Position.end)("Kg"), inputProps = MuiInputProps(ariaLabel = "Weight") @@ -127,7 +143,9 @@ object InputAdornments extends ScalaCssReactImplicits { ), MuiFormHelperText()(id := "weight-helper-text", "Weight") ), - MuiFormControl()(css.cssMargin, css.textField, + MuiFormControl()( + css.cssMargin, + css.textField, MuiInputLabel()(htmlFor := "adornment-password", "Password"), MuiInput(endAdornment = passwordEndAdormnent)( id := "adornment-password", @@ -141,6 +159,7 @@ object InputAdornments extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("InputAdornments") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/InputWithIcon.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/InputWithIcon.scala index e079fec1..51ce5664 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/InputWithIcon.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/InputWithIcon.scala @@ -11,24 +11,39 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.demo.styles.demos.TextFields.{DefaultInputAdornmentsStyle, InputAdornmentsStyle} import io.kinoplan.demo.utils.Helpers.StringExtended import io.kinoplan.demo.utils.props.MuiInputProps -import io.kinoplan.scalajs.react.material.ui.core.{MuiFormControl, MuiGrid, MuiInput, MuiInputAdornment, MuiInputLabel, MuiTextField} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiFormControl, + MuiGrid, + MuiInput, + MuiInputAdornment, + MuiInputLabel, + MuiTextField +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object InputWithIcon extends ScalaCssReactImplicits { case class Props(style: InputAdornmentsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Input Adornments - With icon")( - div(css.root, - MuiFormControl()(css.cssMargin, - MuiInputLabel()(htmlFor := "input-with-icon-adornment", "With a start adornment"), - MuiInput(startAdornment = MuiInputAdornment(position = MuiInputAdornment.Position.start)( - MuiIcons(MuiIconsModule.AccountCircle)() - ))( + div( + css.root, + MuiFormControl()( + css.cssMargin, + MuiInputLabel()( + htmlFor := "input-with-icon-adornment", + "With a start adornment" + ), + MuiInput( + startAdornment = MuiInputAdornment(position = MuiInputAdornment.Position.start)( + MuiIcons(MuiIconsModule.AccountCircle)() + ) + )( id := "adornment-amount" ) ), @@ -39,11 +54,14 @@ object InputWithIcon extends ScalaCssReactImplicits { MuiIcons(MuiIconsModule.AccountCircle)() ).rawNode.some.orUndefined ) - )(css.cssMargin, - id := "input-with-icon-textfield" - ), - div(css.cssMargin, - MuiGrid(container = true, spacing = 8, alignItems = MuiGrid.AlignItems.flexEnd)( + )(css.cssMargin, id := "input-with-icon-textfield"), + div( + css.cssMargin, + MuiGrid( + container = true, + spacing = 8, + alignItems = MuiGrid.AlignItems.flexEnd + )( MuiGrid(item = true)( MuiIcons(MuiIconsModule.AccountCircle)() ), @@ -56,6 +74,7 @@ object InputWithIcon extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("InputWithIcon") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/Inputs.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/Inputs.scala index ee12e313..9e9ee445 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/Inputs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/Inputs.scala @@ -13,29 +13,36 @@ object Inputs extends ScalaCssReactImplicits { case class Props(style: ComponentTextFieldStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Inputs")( - div(css.container, - MuiInput(inputProps = MuiInputProps(ariaLabel = "Description"))(css.formControl, + div( + css.container, + MuiInput(inputProps = MuiInputProps(ariaLabel = "Description"))( + css.formControl, defaultValue := "Hello world" ), - MuiInput(inputProps = MuiInputProps(ariaLabel = "Description"))(css.formControl, + MuiInput(inputProps = MuiInputProps(ariaLabel = "Description"))( + css.formControl, placeholder := "Placeholder" ), - MuiInput(inputProps = MuiInputProps(ariaLabel = "Description"))(css.formControl, + MuiInput(inputProps = MuiInputProps(ariaLabel = "Description"))( + css.formControl, disabled := true, value := "Disabled" ), - MuiInput(error = true, inputProps = MuiInputProps(ariaLabel = "Description"))(css.formControl, - defaultValue := "Error" - ) + MuiInput( + error = true, + inputProps = MuiInputProps(ariaLabel = "Description") + )(css.formControl, defaultValue := "Error") ) ) ) } + } private val component = ScalaComponent.builder[Props]("Inputs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/OutlinedInputAdornments.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/OutlinedInputAdornments.scala index 330db5bb..3d26e043 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/OutlinedInputAdornments.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/OutlinedInputAdornments.scala @@ -40,6 +40,7 @@ object OutlinedInputAdornments extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeAmount(e: ReactEventFromTextArea) = { val value = e.target.value @@ -69,19 +70,19 @@ object OutlinedInputAdornments extends ScalaCssReactImplicits { def render(props: Props, state: State): VdomElement = { val css = props.style - val passwordEndAdormnent = { - MuiInputAdornment(position = MuiInputAdornment.Position.end)( - MuiIconButton()( - aria.label := "Toggle password visibility", - onClick --> handleClickShowPassword, - if (state.showPassword) MuiIcons(MuiIconsModule.Visibility)() else MuiIcons(MuiIconsModule.VisibilityOff)() - ) + val passwordEndAdormnent = MuiInputAdornment(position = MuiInputAdornment.Position.end)( + MuiIconButton()( + aria.label := "Toggle password visibility", + onClick --> handleClickShowPassword, + if (state.showPassword) MuiIcons(MuiIconsModule.Visibility)() + else MuiIcons(MuiIconsModule.VisibilityOff)() ) - } + ) div( ComponentContainer("Input Adornments - Outlined Input Adornments")( - div(css.root, + div( + css.root, MuiTextField( label = "With outlined TextField".toVdom, variant = MuiTextField.Variant.outlined, @@ -90,7 +91,9 @@ object OutlinedInputAdornments extends ScalaCssReactImplicits { position = MuiInputAdornment.Position.start )("Kg").rawNode.some.orUndefined ) - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, id := "outlined-simple-start-adornment" ), MuiTextField( @@ -102,7 +105,9 @@ object OutlinedInputAdornments extends ScalaCssReactImplicits { position = MuiInputAdornment.Position.start )("Kg").rawNode.some.orUndefined ) - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, value := state.weightRange, onChange ==> handleChangeWeightRange, FieldRange.commons.toVdomArray { range => @@ -117,7 +122,9 @@ object OutlinedInputAdornments extends ScalaCssReactImplicits { position = MuiInputAdornment.Position.start )("$").rawNode.some.orUndefined ) - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, id := "outlined-adornment-amount", value := state.amount, onChange ==> handleChangeAmount @@ -131,7 +138,9 @@ object OutlinedInputAdornments extends ScalaCssReactImplicits { )("$").rawNode.some.orUndefined ), helperText = "Weight".toVdom - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, id := "outlined-adornment-weight", value := state.weight, onChange ==> handleChangeWeight @@ -140,7 +149,9 @@ object OutlinedInputAdornments extends ScalaCssReactImplicits { label = "Password".toVdom, variant = MuiTextField.Variant.outlined, InputProps = MuiInputProps(endAdornment = passwordEndAdormnent.rawNode.some.orUndefined) - )(css.cssMargin, css.textField, + )( + css.cssMargin, + css.textField, id := "outlined-adornment-password", `type` := state.showPasswordType, value := state.password, @@ -150,6 +161,7 @@ object OutlinedInputAdornments extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("OutlinedInputAdornments") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/OutlinedTextFields.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/OutlinedTextFields.scala index fecc1898..995780eb 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/OutlinedTextFields.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/OutlinedTextFields.scala @@ -33,6 +33,7 @@ object OutlinedTextFields extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeName(e: ReactEventFromTextArea) = { val value = e.target.value @@ -62,12 +63,16 @@ object OutlinedTextFields extends ScalaCssReactImplicits { div( ComponentContainer("Outlined")( - form(css.container, noValidate := true, autoComplete := "off", + form( + css.container, + noValidate := true, + autoComplete := "off", MuiTextField( label = "Name".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-name", value := state.name, onChange ==> handleChangeName @@ -76,7 +81,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { label = "Uncontrolled".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-uncontrolled", defaultValue := "foo" ), @@ -84,7 +90,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { label = "Required".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, required := true, id := "outlined-required", defaultValue := "Hello World" @@ -94,7 +101,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { label = "Error".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-error", defaultValue := "Hello World" ), @@ -102,7 +110,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { label = "Disabled".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, disabled := true, id := "outlined-disabled", defaultValue := "Hello World" @@ -111,7 +120,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { label = "Email".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, autoComplete := "email", id := "outlined-email-input", `type` := "email", @@ -121,7 +131,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { label = "Password".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, autoComplete := "current-password", id := "outlined-password-input", `type` := "password" @@ -131,7 +142,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { margin = MuiTextField.Margin.normal, InputProps = MuiInputProps(readOnly = true), variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-read-only-input", defaultValue := "Hello World" ), @@ -139,9 +151,7 @@ object OutlinedTextFields extends ScalaCssReactImplicits { label = "Dense".toVdom, margin = MuiTextField.Margin.dense, variant = MuiTextField.Variant.outlined - )(css.textField, css.dense, - id := "outlined-dense" - ), + )(css.textField, css.dense, id := "outlined-dense"), MuiTextField( label = "Multiline".toVdom, multiline = true, @@ -149,7 +159,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { margin = MuiTextField.Margin.normal, helperText = "hello".toVdom, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-multiline-flexible", value := state.multiline, onChange ==> handleChangeMultiline @@ -160,7 +171,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { rows = 4, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-multiline-static", defaultValue := "Default Value" ), @@ -169,7 +181,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { helperText = "Some important text".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-helperText", defaultValue := "Default Value" ), @@ -177,7 +190,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { label = "With placeholder".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-with-placeholder", placeholder := "Placeholder" ), @@ -186,7 +200,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { multiline = true, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-textarea", placeholder := "Placeholder" ), @@ -195,7 +210,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { InputLabelProps = MuiInputLabelProps(shrink = true), margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-number", value := state.age, `type` := "number", @@ -205,10 +221,7 @@ object OutlinedTextFields extends ScalaCssReactImplicits { label = "Search field".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, - id := "outlined-search", - `type` := "search" - ), + )(css.textField, id := "outlined-search", `type` := "search"), MuiTextField( select = true, label = "Select".toVdom, @@ -217,7 +230,8 @@ object OutlinedTextFields extends ScalaCssReactImplicits { helperText = "Please select your currency".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-select-currency", value := state.currency, onChange ==> handleChangeCurrency, @@ -228,11 +242,15 @@ object OutlinedTextFields extends ScalaCssReactImplicits { MuiTextField( select = true, label = "Native select".toVdom, - SelectProps = MuiSelectProps(native = true, MenuProps = MuiMenuProps(className = css.menu.htmlClass)), + SelectProps = MuiSelectProps( + native = true, + MenuProps = MuiMenuProps(className = css.menu.htmlClass) + ), helperText = "Please select your currency".toVdom, margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, + )( + css.textField, id := "outlined-select-currency-native", value := state.currency, onChange ==> handleChangeCurrency, @@ -255,14 +273,12 @@ object OutlinedTextFields extends ScalaCssReactImplicits { MuiTextField( margin = MuiTextField.Margin.normal, variant = MuiTextField.Variant.outlined - )(css.textField, - id := "outlined-bare", - defaultValue := "Bare" - ) + )(css.textField, id := "outlined-bare", defaultValue := "Bare") ) ) ) } + } private val component = ScalaComponent.builder[Props]("OutlinedTextFields") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/TextFieldMargins.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/TextFieldMargins.scala index f3087200..ae4a464a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/TextFieldMargins.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/TextFieldMargins.scala @@ -13,13 +13,16 @@ object TextFieldMargins extends ScalaCssReactImplicits { case class Props(style: TextFieldsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Layout")( - div(css.container, - MuiTextField(label = "None".toVdom, helperText = "Some important text".toVdom)(css.textField, + div( + css.container, + MuiTextField(label = "None".toVdom, helperText = "Some important text".toVdom)( + css.textField, id := "margin-none", defaultValue := "Default Value" ), @@ -27,7 +30,8 @@ object TextFieldMargins extends ScalaCssReactImplicits { label = "Dense".toVdom, helperText = "Some important text".toVdom, margin = MuiTextField.Margin.dense - )(css.textField, + )( + css.textField, id := "margin-dense", defaultValue := "Default Value" ), @@ -35,7 +39,8 @@ object TextFieldMargins extends ScalaCssReactImplicits { label = "Normal".toVdom, helperText = "Some important text".toVdom, margin = MuiTextField.Margin.normal - )(css.textField, + )( + css.textField, id := "margin-normal", defaultValue := "Default Value" ) @@ -43,6 +48,7 @@ object TextFieldMargins extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("TextFieldMargins") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/TextFields.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/TextFields.scala index 54cc5345..3f9c05ae 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/TextFields.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/TextFields/TextFields.scala @@ -33,6 +33,7 @@ object TextFields extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { + def handleChangeName(e: ReactEventFromTextArea) = { val value = e.target.value @@ -62,31 +63,47 @@ object TextFields extends ScalaCssReactImplicits { div( ComponentContainer("TextField")( - form(css.container, noValidate := true, autoComplete := "off", - MuiTextField(label = "Name".toVdom, margin = MuiTextField.Margin.normal)(css.textField, + form( + css.container, + noValidate := true, + autoComplete := "off", + MuiTextField(label = "Name".toVdom, margin = MuiTextField.Margin.normal)( + css.textField, id := "standard-name", value := state.name, onChange ==> handleChangeName ), - MuiTextField(label = "Uncontrolled".toVdom, margin = MuiTextField.Margin.normal)(css.textField, + MuiTextField( + label = "Uncontrolled".toVdom, + margin = MuiTextField.Margin.normal + )( + css.textField, id := "standard-uncontrolled", defaultValue := "foo" ), - MuiTextField(label = "Required".toVdom, margin = MuiTextField.Margin.normal)(css.textField, + MuiTextField(label = "Required".toVdom, margin = MuiTextField.Margin.normal)( + css.textField, required := true, id := "standard-required", defaultValue := "Hello World" ), - MuiTextField(error = true, label = "Error".toVdom, margin = MuiTextField.Margin.normal)(css.textField, + MuiTextField( + error = true, + label = "Error".toVdom, + margin = MuiTextField.Margin.normal + )( + css.textField, id := "standard-error", defaultValue := "Hello World" ), - MuiTextField(label = "Disabled".toVdom, margin = MuiTextField.Margin.normal)(css.textField, + MuiTextField(label = "Disabled".toVdom, margin = MuiTextField.Margin.normal)( + css.textField, disabled := true, id := "standard-disabled", defaultValue := "Hello World" ), - MuiTextField(label = "Password".toVdom, margin = MuiTextField.Margin.normal)(css.textField, + MuiTextField(label = "Password".toVdom, margin = MuiTextField.Margin.normal)( + css.textField, autoComplete := "current-password", id := "standard-password-input", `type` := "password" @@ -95,11 +112,14 @@ object TextFields extends ScalaCssReactImplicits { label = "Read Only".toVdom, margin = MuiTextField.Margin.normal, InputProps = MuiInputProps(readOnly = true) - )(css.textField, + )( + css.textField, id := "standard-read-only-input", defaultValue := "Hello World" ), - MuiTextField(label = "Dense".toVdom, margin = MuiTextField.Margin.dense)(css.textField, css.dense, + MuiTextField(label = "Dense".toVdom, margin = MuiTextField.Margin.dense)( + css.textField, + css.dense, id := "standard-dense" ), MuiTextField( @@ -107,7 +127,8 @@ object TextFields extends ScalaCssReactImplicits { multiline = true, rowsMax = 4, margin = MuiTextField.Margin.normal - )(css.textField, + )( + css.textField, id := "standard-multiline-flexible", value := state.multiline, onChange ==> handleChangeMultiline @@ -117,7 +138,8 @@ object TextFields extends ScalaCssReactImplicits { multiline = true, rows = 4, margin = MuiTextField.Margin.normal - )(css.textField, + )( + css.textField, id := "standard-multiline-static", defaultValue := "Default Value" ), @@ -125,11 +147,16 @@ object TextFields extends ScalaCssReactImplicits { label = "Helper text".toVdom, helperText = "Some important text".toVdom, margin = MuiTextField.Margin.normal - )(css.textField, + )( + css.textField, id := "standard-helperText", defaultValue := "Default Value" ), - MuiTextField(label = "With placeholder".toVdom, margin = MuiTextField.Margin.normal)(css.textField, + MuiTextField( + label = "With placeholder".toVdom, + margin = MuiTextField.Margin.normal + )( + css.textField, id := "standard-with-placeholder", placeholder := "Placeholder" ), @@ -137,7 +164,8 @@ object TextFields extends ScalaCssReactImplicits { label = "With placeholder multiline".toVdom, multiline = true, margin = MuiTextField.Margin.normal - )(css.textField, + )( + css.textField, id := "standard-textarea", placeholder := "Placeholder" ), @@ -145,16 +173,17 @@ object TextFields extends ScalaCssReactImplicits { label = "Number".toVdom, InputLabelProps = MuiInputLabelProps(shrink = true), margin = MuiTextField.Margin.normal - )(css.textField, + )( + css.textField, id := "standard-number", value := state.age, `type` := "number", onChange ==> handleChangeAge ), - MuiTextField(label = "Search field".toVdom, margin = MuiTextField.Margin.normal)(css.textField, - id := "standard-search", - `type` := "search" - ), + MuiTextField( + label = "Search field".toVdom, + margin = MuiTextField.Margin.normal + )(css.textField, id := "standard-search", `type` := "search"), MuiTextField( select = true, label = "Select".toVdom, @@ -162,7 +191,8 @@ object TextFields extends ScalaCssReactImplicits { SelectProps = MuiSelectProps(MenuProps = MuiMenuProps(className = css.menu.htmlClass)), helperText = "Please select your currency".toVdom, margin = MuiTextField.Margin.normal - )(css.textField, + )( + css.textField, id := "standard-select-currency", value := state.currency, onChange ==> handleChangeCurrency, @@ -173,10 +203,14 @@ object TextFields extends ScalaCssReactImplicits { MuiTextField( select = true, label = "Native select".toVdom, - SelectProps = MuiSelectProps(native = true, MenuProps = MuiMenuProps(className = css.menu.htmlClass)), + SelectProps = MuiSelectProps( + native = true, + MenuProps = MuiMenuProps(className = css.menu.htmlClass) + ), helperText = "Please select your currency".toVdom, margin = MuiTextField.Margin.normal - )(css.textField, + )( + css.textField, id := "standard-select-currency-native", value := state.currency, onChange ==> handleChangeCurrency, @@ -195,7 +229,8 @@ object TextFields extends ScalaCssReactImplicits { style := js.Dictionary("margin" -> "8px"), placeholder := "Placeholder" ), - MuiTextField(margin = MuiTextField.Margin.normal)(css.textField, + MuiTextField(margin = MuiTextField.Margin.normal)( + css.textField, id := "standard-bare", defaultValue := "Bare" ) @@ -203,6 +238,7 @@ object TextFields extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("TextFields") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/ControlledTooltips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/ControlledTooltips.scala index 802b57d3..00bcfd0f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/ControlledTooltips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/ControlledTooltips.scala @@ -8,6 +8,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiTooltip} object ControlledTooltips extends ScalaCssReactImplicits { + case class State(open: Boolean = false) { def handleTooltipClose = copy(open = false) @@ -19,20 +20,19 @@ object ControlledTooltips extends ScalaCssReactImplicits { def handleTooltipOpen: ReactEventFromHtml => Callback = _ => t.modState(_.handleTooltipOpen) - def render(state: State): VdomElement = { - div( - ComponentContainer("Controlled Tooltips")( - MuiTooltip( - onClose = handleTooltipClose, - onOpen = handleTooltipOpen, - open = state.open, - title = "Add" - )( - MuiButton()("Controlled") - ) + def render(state: State): VdomElement = div( + ComponentContainer("Controlled Tooltips")( + MuiTooltip( + onClose = handleTooltipClose, + onOpen = handleTooltipOpen, + open = state.open, + title = "Add" + )( + MuiButton()("Controlled") ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("ControlledTooltips") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/DelayTooltips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/DelayTooltips.scala index 38db848a..b1189f9d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/DelayTooltips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/DelayTooltips.scala @@ -7,6 +7,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiTooltip} object DelayTooltips { + private val component = ScalaComponent.builder[Unit]("DelayTooltips") .renderStatic( div( diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/DisabledTooltips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/DisabledTooltips.scala index 225c2478..5a0f690e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/DisabledTooltips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/DisabledTooltips.scala @@ -7,6 +7,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiTooltip} object DisabledTooltips { + private val component = ScalaComponent.builder[Unit]("DisabledTooltips") .renderStatic( div( diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/InteractiveTooltips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/InteractiveTooltips.scala index 0d6ab532..bb5c1971 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/InteractiveTooltips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/InteractiveTooltips.scala @@ -12,6 +12,7 @@ object InteractiveTooltips extends ScalaCssReactImplicits { case class Props(style: InteractiveTooltipsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -28,6 +29,7 @@ object InteractiveTooltips extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("InteractiveTooltips") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/PositionedTooltips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/PositionedTooltips.scala index b637f8f7..65c16f6e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/PositionedTooltips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/PositionedTooltips.scala @@ -12,12 +12,14 @@ object PositionedTooltips extends ScalaCssReactImplicits { case class Props(style: PositionedTooltipsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style div( ComponentContainer("Positioned Tooltips")( - div(css.root, + div( + css.root, MuiGrid(container = true, justify = MuiGrid.Justify.center)( MuiGrid(item = true)( MuiTooltip(title = "Add", placement = MuiTooltip.Placement.topStart)( @@ -87,6 +89,7 @@ object PositionedTooltips extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("PositionedTooltips") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/SimpleTooltips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/SimpleTooltips.scala index 2bb7661d..43452525 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/SimpleTooltips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/SimpleTooltips.scala @@ -13,6 +13,7 @@ object SimpleTooltips extends ScalaCssReactImplicits { case class Props(style: SimpleTooltipsStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -27,20 +28,17 @@ object SimpleTooltips extends ScalaCssReactImplicits { ), MuiTooltip(title = "Add")( aria.label := "Add", - MuiFab(color = MuiFab.Color.primary)(css.fab, - MuiIcons(MuiIconsModule.Add)() - ) + MuiFab(color = MuiFab.Color.primary)(css.fab, MuiIcons(MuiIconsModule.Add)()) ), MuiTooltip(title = "Add")( aria.label := "Add", - MuiFab(color = MuiFab.Color.secondary)(css.fab, - MuiIcons(MuiIconsModule.Add)() - ) + MuiFab(color = MuiFab.Color.secondary)(css.fab, MuiIcons(MuiIconsModule.Add)()) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleTooltips") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/TransitionsTooltips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/TransitionsTooltips.scala index 8d00d8bb..f2a42e7d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/TransitionsTooltips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/TransitionsTooltips.scala @@ -9,6 +9,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiFade, MuiTooltip, MuiZoom} object TransitionsTooltips { + private val component = ScalaComponent.builder[Unit]("TransitionsTooltips") .renderStatic( div( diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/TriggersTooltips.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/TriggersTooltips.scala index 19cceb58..ad110c2b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/TriggersTooltips.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/TriggersTooltips.scala @@ -10,6 +10,7 @@ import io.kinoplan.demo.components.ComponentContainer import io.kinoplan.scalajs.react.material.ui.core.{MuiButton, MuiClickAwayListener, MuiGrid, MuiTooltip} object TriggersTooltips extends ScalaCssReactImplicits { + case class State(open: Boolean = false) { def handleTooltipClose = copy(open = false) @@ -21,40 +22,42 @@ object TriggersTooltips extends ScalaCssReactImplicits { def handleTooltipOpen = t.modState(_.handleTooltipOpen) - def render(state: State): VdomElement = { - div( - ComponentContainer("Triggers")( - div( - MuiGrid(container = true, justify = MuiGrid.Justify.center)( - MuiGrid(item = true)( - MuiTooltip(disableFocusListener = true, title = "Add")( - MuiButton()("Hover or touch") - ) - ), - MuiGrid(item = true)( - MuiTooltip(disableHoverListener = true, title = "Add")( - MuiButton()("Focus or touch") - ) - ), - MuiGrid(item = true)( - MuiTooltip(disableFocusListener = true, disableTouchListener = true, title = "Add")( - MuiButton()("Hover") - ) - ), - MuiGrid(item = true)( - MuiClickAwayListener(onClickAway = handleTooltipClose)( - div( - MuiTooltip( - PopperProps = js.Dynamic.literal(disablePortal = true), - onClose = handleTooltipClose, - open = state.open, - disableFocusListener = true, - disableHoverListener = true, - disableTouchListener = true, - title = "Add" - )( - MuiButton()(onClick --> handleTooltipOpen, "Click") - ) + def render(state: State): VdomElement = div( + ComponentContainer("Triggers")( + div( + MuiGrid(container = true, justify = MuiGrid.Justify.center)( + MuiGrid(item = true)( + MuiTooltip(disableFocusListener = true, title = "Add")( + MuiButton()("Hover or touch") + ) + ), + MuiGrid(item = true)( + MuiTooltip(disableHoverListener = true, title = "Add")( + MuiButton()("Focus or touch") + ) + ), + MuiGrid(item = true)( + MuiTooltip( + disableFocusListener = true, + disableTouchListener = true, + title = "Add" + )( + MuiButton()("Hover") + ) + ), + MuiGrid(item = true)( + MuiClickAwayListener(onClickAway = handleTooltipClose)( + div( + MuiTooltip( + PopperProps = js.Dynamic.literal(disablePortal = true), + onClose = handleTooltipClose, + open = state.open, + disableFocusListener = true, + disableHoverListener = true, + disableTouchListener = true, + title = "Add" + )( + MuiButton()(onClick --> handleTooltipOpen, "Click") ) ) ) @@ -62,7 +65,8 @@ object TriggersTooltips extends ScalaCssReactImplicits { ) ) ) - } + ) + } private val component = ScalaComponent.builder[Unit]("TriggersTooltips") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/VariableWidth.scala b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/VariableWidth.scala index 2e8c1df3..30fcbff2 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/VariableWidth.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/demos/Tooltips/VariableWidth.scala @@ -17,6 +17,7 @@ object VariableWidth extends ScalaCssReactImplicits { "Nullam eget est sed sem iaculis gravida eget vitae justo." class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -43,6 +44,7 @@ object VariableWidth extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("VariableWidth") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CollapsedBreadcrumbs.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CollapsedBreadcrumbs.scala index fb5ff757..c723e107 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CollapsedBreadcrumbs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CollapsedBreadcrumbs.scala @@ -20,9 +20,12 @@ object CollapsedBreadcrumbs extends ScalaCssReactImplicits { div( ComponentContainer("Collapsed breadcrumbs")( - div(css.root, - MuiPaper()(css.paper, - MuiBreadcrumbs(maxItems = 2)(aria.label := "Breadcrumb", + div( + css.root, + MuiPaper()( + css.paper, + MuiBreadcrumbs(maxItems = 2)( + aria.label := "Breadcrumb", MuiLink(color = MuiLink.Color.inherit)(href := "#", onClick --> handleClick, "Home"), MuiLink(color = MuiLink.Color.inherit)(href := "#", onClick --> handleClick, "Catalog"), MuiLink(color = MuiLink.Color.inherit)(href := "#", onClick --> handleClick, "Accessories"), @@ -34,6 +37,7 @@ object CollapsedBreadcrumbs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CollapsedBreadcrumbs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomSeparator.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomSeparator.scala index ec5d4222..0b8a13a2 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomSeparator.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomSeparator.scala @@ -21,27 +21,34 @@ object CustomSeparator extends ScalaCssReactImplicits { div( ComponentContainer("Custom separator")( - div(css.root, - MuiPaper()(css.paper, - MuiBreadcrumbs(separator = VdomNode(">"))(aria.label := "Breadcrumb", + div( + css.root, + MuiPaper()( + css.paper, + MuiBreadcrumbs(separator = VdomNode(">"))( + aria.label := "Breadcrumb", MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"), MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"), MuiTypography(color = MuiTypography.Color.textPrimary)("Breadcrumb") ) ), br(), - MuiPaper()(css.paper, - MuiBreadcrumbs(separator = VdomNode("-"))(aria.label := "Breadcrumb", + MuiPaper()( + css.paper, + MuiBreadcrumbs(separator = VdomNode("-"))( + aria.label := "Breadcrumb", MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"), MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"), MuiTypography(color = MuiTypography.Color.textPrimary)("Breadcrumb") ) ), br(), - MuiPaper()(css.paper, + MuiPaper()( + css.paper, MuiBreadcrumbs( separator = MuiIcons(MuiIconsModule.Navigation)(fontSize = MuiIcons.FontSize.small)() - )(aria.label := "Breadcrumb", + )( + aria.label := "Breadcrumb", MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"), MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"), MuiTypography(color = MuiTypography.Color.textPrimary)("Breadcrumb") @@ -51,6 +58,7 @@ object CustomSeparator extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomSeparator") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomizedBreadcrumbs.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomizedBreadcrumbs.scala index 5fb6c586..ff1ccad3 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomizedBreadcrumbs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/CustomizedBreadcrumbs.scala @@ -23,14 +23,14 @@ object CustomizedBreadcrumbs extends ScalaCssReactImplicits { div( ComponentContainer("Customized breadcrumbs")( - MuiPaper()(css.root, - MuiBreadcrumbs()(aria.label := "Breadcrumb", + MuiPaper()( + css.root, + MuiBreadcrumbs()( + aria.label := "Breadcrumb", MuiChip( component = "a", label = VdomNode("Home"), - avatar = MuiAvatar()(css.avatar, - MuiIcons(MuiIconsModule.Home)() - )().rawElement + avatar = MuiAvatar()(css.avatar, MuiIcons(MuiIconsModule.Home)())().rawElement )(css.chip, href := "#", onClick --> handleClick), MuiChip(component = "a", label = VdomNode("Catalog"))(css.chip, href := "#", onClick --> handleClick), MuiChip( @@ -43,6 +43,7 @@ object CustomizedBreadcrumbs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomizedBreadcrumbs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/IconBreadcrumbs.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/IconBreadcrumbs.scala index 9210588a..32da0f9d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/IconBreadcrumbs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/IconBreadcrumbs.scala @@ -21,22 +21,28 @@ object IconBreadcrumbs extends ScalaCssReactImplicits { div( ComponentContainer("Breadcrumbs with icons")( - div(css.root, - MuiPaper()(css.paper, - MuiBreadcrumbs()(aria.label := "Breadcrumb", - MuiLink(color = MuiLink.Color.inherit)(css.link, + div( + css.root, + MuiPaper()( + css.paper, + MuiBreadcrumbs()( + aria.label := "Breadcrumb", + MuiLink(color = MuiLink.Color.inherit)( + css.link, href := "/", onClick --> handleClick, MuiIcons(MuiIconsModule.Home)()(css.icon), "Material-UI" ), - MuiLink(color = MuiLink.Color.inherit)(css.link, + MuiLink(color = MuiLink.Color.inherit)( + css.link, href := "/#demos/app-bar/", onClick --> handleClick, MuiIcons(MuiIconsModule.Whatshot)()(css.icon), "Lab" ), - MuiTypography(color = MuiTypography.Color.textPrimary)(css.link, + MuiTypography(color = MuiTypography.Color.textPrimary)( + css.link, MuiIcons(MuiIconsModule.Grain)()(css.icon), "Breadcrumb" ) @@ -46,6 +52,7 @@ object IconBreadcrumbs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("IconBreadcrumbs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/SimpleBreadcrumbs.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/SimpleBreadcrumbs.scala index 3ba881fe..0b60cdb3 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/SimpleBreadcrumbs.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Breadcrumbs/SimpleBreadcrumbs.scala @@ -20,17 +20,22 @@ object SimpleBreadcrumbs extends ScalaCssReactImplicits { div( ComponentContainer("Simple breadcrumbs")( - div(css.root, - MuiPaper()(css.paper, - MuiBreadcrumbs()(aria.label := "Breadcrumb", + div( + css.root, + MuiPaper()( + css.paper, + MuiBreadcrumbs()( + aria.label := "Breadcrumb", MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"), MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"), MuiTypography(color = MuiTypography.Color.textPrimary)("Breadcrumb") ) ), br(), - MuiPaper()(css.paper, - MuiBreadcrumbs()(aria.label := "Breadcrumb", + MuiPaper()( + css.paper, + MuiBreadcrumbs()( + aria.label := "Breadcrumb", MuiLink(color = MuiLink.Color.inherit)(href := "/", onClick --> handleClick, "Material-UI"), MuiLink(color = MuiLink.Color.inherit)(href := "/#demos/app-bar/", onClick --> handleClick, "Lab"), MuiLink(color = MuiLink.Color.textPrimary)( @@ -45,6 +50,7 @@ object SimpleBreadcrumbs extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleBreadcrumbs") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/CustomIconSlider.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/CustomIconSlider.scala index 1fcefb7d..fb8664c1 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/CustomIconSlider.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/CustomIconSlider.scala @@ -23,9 +23,9 @@ object CustomIconSlider extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, Double) => Callback = (_, value) => { + + def handleChange: (ReactEvent, Double) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -41,12 +41,14 @@ object CustomIconSlider extends ScalaCssReactImplicits { div( ComponentContainer("Custom thumb")( - div(css.root, + div( + css.root, MuiTypography()(id := "slider-image", "Image thumb"), MuiSlider( classes = imageSliderClasses, onChange = handleChange, - thumb = img(css.thumbIcon, + thumb = img( + css.thumbIcon, alt := "slider thumb icon", src := "/static/images/misc/circle.png" ).rawElement @@ -67,6 +69,7 @@ object CustomIconSlider extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("CustomIconSlider") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/DisabledSlider.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/DisabledSlider.scala index 7a54379b..a8780e63 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/DisabledSlider.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/DisabledSlider.scala @@ -13,6 +13,7 @@ object DisabledSlider extends ScalaCssReactImplicits { case class Props(style: DisabledSliderStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style @@ -22,7 +23,8 @@ object DisabledSlider extends ScalaCssReactImplicits { div( ComponentContainer("Disabled slider")( - div(css.root, + div( + css.root, MuiSlider(classes = sliderClasses)(value := 0, disabled := true), MuiSlider(classes = sliderClasses)(value := 50, disabled := true), MuiSlider(classes = sliderClasses)(value := 100, disabled := true) @@ -30,6 +32,7 @@ object DisabledSlider extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("DisabledSlider") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/SimpleSlider.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/SimpleSlider.scala index 44a6af04..50fcf7d5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/SimpleSlider.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/SimpleSlider.scala @@ -18,9 +18,9 @@ object SimpleSlider extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, Double) => Callback = (_, value) => { + + def handleChange: (ReactEvent, Double) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -31,7 +31,8 @@ object SimpleSlider extends ScalaCssReactImplicits { div( ComponentContainer("Simple slider")( - div(css.root, + div( + css.root, MuiTypography()(id := "label", "Slider label"), MuiSlider(classes = sliderClasses, onChange = handleChange)( aria.labelledBy := "label", @@ -41,6 +42,7 @@ object SimpleSlider extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleSlider") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/StepSlider.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/StepSlider.scala index 41702f6d..88c1cefb 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/StepSlider.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/StepSlider.scala @@ -18,9 +18,9 @@ object StepSlider extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, Double) => Callback = (_, value) => { + + def handleChange: (ReactEvent, Double) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -31,7 +31,8 @@ object StepSlider extends ScalaCssReactImplicits { div( ComponentContainer("Slider with steps")( - div(css.root, + div( + css.root, MuiTypography()(id := "label", "Slider label"), MuiSlider( classes = sliderClasses, @@ -47,6 +48,7 @@ object StepSlider extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("StepSlider") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/VerticalSlider.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/VerticalSlider.scala index 81379ca2..35b3b306 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/VerticalSlider.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/Slider/VerticalSlider.scala @@ -17,9 +17,9 @@ object VerticalSlider extends ScalaCssReactImplicits { } class Backend(t: BackendScope[Props, State]) { - def handleChange: (ReactEvent, Double) => Callback = (_, value) => { + + def handleChange: (ReactEvent, Double) => Callback = (_, value) => t.modState(_.handleChange(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -30,7 +30,8 @@ object VerticalSlider extends ScalaCssReactImplicits { div( ComponentContainer("Vertical slider")( - div(css.root, + div( + css.root, MuiSlider(classes = sliderClasses, onChange = handleChange, vertical = true)( value := state.value ) @@ -38,6 +39,7 @@ object VerticalSlider extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("VerticalSlider") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/SpeedDial/OpenIconSpeedDial.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/SpeedDial/OpenIconSpeedDial.scala index 8cfb1f1b..39466759 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/SpeedDial/OpenIconSpeedDial.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/SpeedDial/OpenIconSpeedDial.scala @@ -43,14 +43,16 @@ object OpenIconSpeedDial extends ScalaCssReactImplicits { div( ComponentContainer("Custom close icon")( - div(css.root, + div( + css.root, MuiButton()(onClick --> handleVisibility, "Toggle Speed Dial"), MuiSpeedDial( ariaLabel = "SpeedDial openIcon example", icon = MuiSpeedDialIcon(openIcon = MuiIcons(MuiIconsModule.Edit)()())().rawElement, open = state.open, onClose = onClose - )(css.speedDial, + )( + css.speedDial, hidden := state.hidden, onBlur --> handleClose, onClick --> handleClick, @@ -61,15 +63,14 @@ object OpenIconSpeedDial extends ScalaCssReactImplicits { MuiSpeedDialAction( icon = action.icon, tooltipTitle = action.name - )(Attr("key") := action.name, - onClick --> handleClick - ) + )(Attr("key") := action.name, onClick --> handleClick) } ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("OpenIconSpeedDial") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/SpeedDial/SpeedDialTooltipOpen.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/SpeedDial/SpeedDialTooltipOpen.scala index 59b5d0df..01fa1bbd 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/SpeedDial/SpeedDialTooltipOpen.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/SpeedDial/SpeedDialTooltipOpen.scala @@ -43,14 +43,16 @@ object SpeedDialTooltipOpen extends ScalaCssReactImplicits { div( ComponentContainer("Custom close icon")( - div(css.root, + div( + css.root, MuiButton()(onClick --> handleVisibility, "Persistent action tooltips"), MuiSpeedDial( ariaLabel = "SpeedDial tooltip example", icon = MuiSpeedDialIcon(openIcon = MuiIcons(MuiIconsModule.Edit)()())().rawElement, open = state.open, onClose = onClose - )(css.speedDial, + )( + css.speedDial, hidden := state.hidden, onBlur --> handleClose, onClick --> handleClick, @@ -62,15 +64,14 @@ object SpeedDialTooltipOpen extends ScalaCssReactImplicits { icon = action.icon, tooltipTitle = action.name, tooltipOpen = true - )(Attr("key") := action.name, - onClick --> handleClick - ) + )(Attr("key") := action.name, onClick --> handleClick) } ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("SpeedDialTooltipOpen") diff --git a/demo/src/main/scala/io/kinoplan/demo/components/labs/ToggleButton/ToggleButtons.scala b/demo/src/main/scala/io/kinoplan/demo/components/labs/ToggleButton/ToggleButtons.scala index cc2b00fc..5cc95462 100644 --- a/demo/src/main/scala/io/kinoplan/demo/components/labs/ToggleButton/ToggleButtons.scala +++ b/demo/src/main/scala/io/kinoplan/demo/components/labs/ToggleButton/ToggleButtons.scala @@ -19,19 +19,19 @@ object ToggleButtons extends ScalaCssReactImplicits { case class State(alignment: String = "left", formats: Array[String] = Array("bold", "italic")) { def handleAlignment(value: String) = if (value == alignment) copy(alignment = "") else copy(alignment = value) - def handleFormat(value: String) = if (formats.contains(value)) { - copy(formats = formats.filterNot(_ == value)) - } else copy(formats = formats :+ value) + def handleFormat(value: String) = + if (formats.contains(value)) copy(formats = formats.filterNot(_ == value)) + else copy(formats = formats :+ value) + } class Backend(t: BackendScope[Props, State]) { - def handleAlignment: (js.Object, String) => Callback = (_, value) => { + + def handleAlignment: (js.Object, String) => Callback = (_, value) => t.modState(_.handleAlignment(value.toString)) - } - def handleFormat: (js.Object, String) => Callback = (_, value) => { + def handleFormat: (js.Object, String) => Callback = (_, value) => t.modState(_.handleFormat(value)) - } def render(props: Props, state: State): VdomElement = { val css = props.style @@ -40,30 +40,44 @@ object ToggleButtons extends ScalaCssReactImplicits { ComponentContainer("Toggle Buttons")( MuiGrid(container = true, spacing = 16)( MuiGrid(item = true, xs = 12, sm = 6)( - div(css.toggleContainer, + div( + css.toggleContainer, MuiToggleButtonGroup(exclusive = true, onChange = handleAlignment)( value := state.alignment, MuiToggleButton()(value := "left", MuiIcons(MuiIconsModule.FormatAlignLeft)()), - MuiToggleButton()(value := "center", MuiIcons(MuiIconsModule.FormatAlignCenter)()), + MuiToggleButton()( + value := "center", + MuiIcons(MuiIconsModule.FormatAlignCenter)() + ), MuiToggleButton()(value := "right", MuiIcons(MuiIconsModule.FormatAlignRight)()), - MuiToggleButton()(value := "justify", disabled := true, MuiIcons(MuiIconsModule.FormatAlignJustify)()) + MuiToggleButton()( + value := "justify", + disabled := true, + MuiIcons(MuiIconsModule.FormatAlignJustify)() + ) ) ), MuiTypography(variant = MuiTypography.Variant.caption, gutterBottom = true)("Exclusive Selection"), MuiTypography(variant = MuiTypography.Variant.caption)( "Text justification toggle buttons present options for left, right, center, full, and\n " + - "justified text with only one item available for selection at a time. Selecting one\n " + - "option deselects any other." + "justified text with only one item available for selection at a time. Selecting one\n " + + "option deselects any other." ) ), MuiGrid(item = true, xs = 12, sm = 6)( - div(css.toggleContainer, + div( + css.toggleContainer, MuiToggleButtonGroup(exclusive = true, onChange = handleFormat)( value := state.formats.toJSArray, MuiToggleButton()(value := "bold", MuiIcons(MuiIconsModule.FormatBold)()), MuiToggleButton()(value := "italic", MuiIcons(MuiIconsModule.FormatItalic)()), - MuiToggleButton()(value := "underlined", MuiIcons(MuiIconsModule.FormatUnderlined)()), - MuiToggleButton()(value := "color", disabled := true, + MuiToggleButton()( + value := "underlined", + MuiIcons(MuiIconsModule.FormatUnderlined)() + ), + MuiToggleButton()( + value := "color", + disabled := true, MuiIcons(MuiIconsModule.FormatColorFill)(), MuiIcons(MuiIconsModule.ArrowDropDown)() ) @@ -72,13 +86,14 @@ object ToggleButtons extends ScalaCssReactImplicits { MuiTypography(variant = MuiTypography.Variant.caption, gutterBottom = true)("Multiple Selection"), MuiTypography(variant = MuiTypography.Variant.caption)( "Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to\n " + - "be selected." + "be selected." ) ) ) ) ) } + } private val component = ScalaComponent.builder[Props]("ToggleButtons") diff --git a/demo/src/main/scala/io/kinoplan/demo/models/Buttons/Image.scala b/demo/src/main/scala/io/kinoplan/demo/models/Buttons/Image.scala index 1b4c06d7..6ff9a63e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/Buttons/Image.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/Buttons/Image.scala @@ -7,6 +7,7 @@ case class Image( ) object Image { + val default = List( Image( url = "/static/images/grid-list/breakfast.jpg", @@ -24,4 +25,5 @@ object Image { width = "30%" ) ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/models/ChildMenuItem.scala b/demo/src/main/scala/io/kinoplan/demo/models/ChildMenuItem.scala index ac6ab69a..16ac645a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/ChildMenuItem.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/ChildMenuItem.scala @@ -8,6 +8,7 @@ case class ChildMenuItem( ) object ChildMenuItem { + val demos = List( ChildMenuItem("App Bar", DemoAppBarRoute), ChildMenuItem("Avatars", DemoAvatarsRoute), @@ -40,6 +41,7 @@ object ChildMenuItem { ChildMenuItem("Breadcrumbs", LabBreadcrumbsRoute), ChildMenuItem("Slider", LabSliderRoute), ChildMenuItem("Speed Dial", LabSpeedDialRoute), - ChildMenuItem("Toggle Button", LabToggleButtonRoute), + ChildMenuItem("Toggle Button", LabToggleButtonRoute) ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/models/Chips/Chip.scala b/demo/src/main/scala/io/kinoplan/demo/models/Chips/Chip.scala index 53509581..6b3e32c2 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/Chips/Chip.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/Chips/Chip.scala @@ -8,6 +8,7 @@ case class Chip( } object Chip { + val default = List( Chip(0, "Angular"), Chip(1, "jQuery"), @@ -15,4 +16,5 @@ object Chip { Chip(3, "React"), Chip(4, "Vue.js") ) -} \ No newline at end of file + +} diff --git a/demo/src/main/scala/io/kinoplan/demo/models/GridList/TileData.scala b/demo/src/main/scala/io/kinoplan/demo/models/GridList/TileData.scala index faf2af46..3eb88eb6 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/GridList/TileData.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/GridList/TileData.scala @@ -13,6 +13,7 @@ case class TileData( } object TileData { + val default = List( TileData( image = "/static/images/grid-list/breakfast.jpg", @@ -80,4 +81,5 @@ object TileData { author = "danfador" ) ) -} \ No newline at end of file + +} diff --git a/demo/src/main/scala/io/kinoplan/demo/models/MenuItem.scala b/demo/src/main/scala/io/kinoplan/demo/models/MenuItem.scala index 2994cdd8..e547a345 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/MenuItem.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/MenuItem.scala @@ -11,12 +11,33 @@ case class MenuItem( ) object MenuItem { + val menuItemsFirst = List( - MenuItem("Dashboard", MuiIcons(MuiIconsModule.Dashboard)(), DashboardRoute), - MenuItem("Orders", MuiIcons(MuiIconsModule.ShoppingCart)(), DashboardRoute), - MenuItem("Customers", MuiIcons(MuiIconsModule.People)(), DashboardRoute), - MenuItem("Reports", MuiIcons(MuiIconsModule.BarChart)(), DashboardRoute), - MenuItem("Integrations", MuiIcons(MuiIconsModule.Layers)(), DashboardRoute) + MenuItem( + "Dashboard", + MuiIcons(MuiIconsModule.Dashboard)(), + DashboardRoute + ), + MenuItem( + "Orders", + MuiIcons(MuiIconsModule.ShoppingCart)(), + DashboardRoute + ), + MenuItem( + "Customers", + MuiIcons(MuiIconsModule.People)(), + DashboardRoute + ), + MenuItem( + "Reports", + MuiIcons(MuiIconsModule.BarChart)(), + DashboardRoute + ), + MenuItem( + "Integrations", + MuiIcons(MuiIconsModule.Layers)(), + DashboardRoute + ) ) private val muiAssignment = MuiIcons(MuiIconsModule.Assignment)( @@ -29,4 +50,5 @@ object MenuItem { MenuItem("Last quarter", muiAssignment, DashboardRoute), MenuItem("Year-end sale", muiAssignment, DashboardRoute) ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/models/Message.scala b/demo/src/main/scala/io/kinoplan/demo/models/Message.scala index 4a1b692d..89db2732 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/Message.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/Message.scala @@ -8,6 +8,7 @@ case class Message( ) object Message { + val default = List( Message( id = 1, @@ -56,4 +57,5 @@ object Message { person = "/static/images/avatar/1.jpg" ) ) -} \ No newline at end of file + +} diff --git a/demo/src/main/scala/io/kinoplan/demo/models/SpeedDial/Action.scala b/demo/src/main/scala/io/kinoplan/demo/models/SpeedDial/Action.scala index e85ac220..0db7669f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/SpeedDial/Action.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/SpeedDial/Action.scala @@ -10,6 +10,7 @@ case class Action( ) object Action { + val commons = List( Action(MuiIcons(MuiIconsModule.FileCopy)(), "Copy"), Action(MuiIcons(MuiIconsModule.Save)(), "Save"), @@ -17,4 +18,5 @@ object Action { Action(MuiIcons(MuiIconsModule.Share)(), "Share"), Action(MuiIcons(MuiIconsModule.Delete)(), "Delete") ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/models/Steppers/TutorialStep.scala b/demo/src/main/scala/io/kinoplan/demo/models/Steppers/TutorialStep.scala index 7389af0b..94950ec5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/Steppers/TutorialStep.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/Steppers/TutorialStep.scala @@ -6,6 +6,7 @@ case class TutorialStep( ) object TutorialStep { + val default = List( TutorialStep( label = "San Francisco – Oakland Bay Bridge, United States", @@ -28,4 +29,5 @@ object TutorialStep { imgPath = "https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60" ) ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/models/Tables/Row.scala b/demo/src/main/scala/io/kinoplan/demo/models/Tables/Row.scala index 380c7170..370bcd0f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/Tables/Row.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/Tables/Row.scala @@ -13,9 +13,10 @@ case class Row( ref: React.RefHandle[html.Element] = React.createRef[html.Element](), open: Boolean = false ) { + lazy val isOpen = ref.current match { case element: html.Element => element.scrollWidth > element.clientWidth - case _ => false + case _ => false } def setOpen = if (isOpen) copy(open = true) else this @@ -32,6 +33,7 @@ case class Row( } object Row { + val commons = List( Row("name", false, true, "Dessert (100g serving)"), Row("calories", true, false, "Calories"), @@ -39,4 +41,5 @@ object Row { Row("carbs", true, false, "Carbs (g)"), Row("protein", true, false, "Protein (g)") ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/models/Tables/SpanningItem.scala b/demo/src/main/scala/io/kinoplan/demo/models/Tables/SpanningItem.scala index e9a08d41..e7d7d1db 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/Tables/SpanningItem.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/Tables/SpanningItem.scala @@ -10,9 +10,11 @@ case class SpanningItem( } object SpanningItem { + val rows = List( SpanningItem(0, "Paperclips (Box)", 100, 1.15), SpanningItem(1, "Paper (Case)", 10, 45.99), SpanningItem(2, "Waste Basket", 2, 17.99) ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/models/Tables/TableItem.scala b/demo/src/main/scala/io/kinoplan/demo/models/Tables/TableItem.scala index 623ba094..f4039c80 100755 --- a/demo/src/main/scala/io/kinoplan/demo/models/Tables/TableItem.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/Tables/TableItem.scala @@ -10,6 +10,7 @@ case class TableItem( ) object TableItem { + val simples = List( TableItem(0, "Frozen yoghurt", 159, 6.0, 24, 4.0), TableItem(1, "Ice cream sandwich", 237, 9.0, 37, 4.3), @@ -33,4 +34,5 @@ object TableItem { TableItem(11, "Nougat", 360, 19.0, 9, 37.0), TableItem(12, "Oreo", 437, 18.0, 63, 4.0) ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/models/TextFields/Currency.scala b/demo/src/main/scala/io/kinoplan/demo/models/TextFields/Currency.scala index 55944b80..363e3f43 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/TextFields/Currency.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/TextFields/Currency.scala @@ -6,10 +6,12 @@ case class Currency( ) object Currency { + val commons = List( Currency(value = "USD", label = "$"), Currency(value = "EUR", label = "€"), Currency(value = "BTC", label = "฿"), Currency(value = "JPY", label = "¥") ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/models/TextFields/FieldRange.scala b/demo/src/main/scala/io/kinoplan/demo/models/TextFields/FieldRange.scala index c7ea4f5d..340c4f7d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/models/TextFields/FieldRange.scala +++ b/demo/src/main/scala/io/kinoplan/demo/models/TextFields/FieldRange.scala @@ -6,6 +6,7 @@ case class FieldRange( ) object FieldRange { + val commons = List( FieldRange( value = "0-20", @@ -20,4 +21,5 @@ object FieldRange { label = "51 to 100" ) ) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/modules/ChildMenu.scala b/demo/src/main/scala/io/kinoplan/demo/modules/ChildMenu.scala index 7dad97f9..f7cc3fe3 100644 --- a/demo/src/main/scala/io/kinoplan/demo/modules/ChildMenu.scala +++ b/demo/src/main/scala/io/kinoplan/demo/modules/ChildMenu.scala @@ -12,6 +12,7 @@ import io.kinoplan.demo.styles.{ChildMenuStyle, DefaultChildMenuStyle} import io.kinoplan.scalajs.react.material.ui.core.{MuiList, MuiListItem, MuiListItemText} object ChildMenu extends ScalaCssReactImplicits { + case class Props( router: RouterCtl[Page], r: Resolution[Page], @@ -20,13 +21,16 @@ object ChildMenu extends ScalaCssReactImplicits { ) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomArray = { val css = props.style VdomArray( - MuiList(component = "div", disablePadding = true)(Attr("key") := 2, + MuiList(component = "div", disablePadding = true)( + Attr("key") := 2, props.items.zipWithIndex.toVdomArray { case (item, index) => - MuiListItem(button = true)(css.nested, + MuiListItem(button = true)( + css.nested, Attr("key") := index, href := props.router.urlFor(item.location).value, props.router.setOnLinkClick(item.location) @@ -37,6 +41,7 @@ object ChildMenu extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("ChildMenu") @@ -49,4 +54,5 @@ object ChildMenu extends ScalaCssReactImplicits { items: List[ChildMenuItem], style: ChildMenuStyle = DefaultChildMenuStyle ) = component(Props(router, r, items, style)) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/modules/MainMenu.scala b/demo/src/main/scala/io/kinoplan/demo/modules/MainMenu.scala index c6b44937..9bec665b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/modules/MainMenu.scala +++ b/demo/src/main/scala/io/kinoplan/demo/modules/MainMenu.scala @@ -8,7 +8,16 @@ import japgolly.scalajs.react.vdom.all._ import io.kinoplan.demo.components.Layout import io.kinoplan.demo.models.{ChildMenuItem, MenuItem} import io.kinoplan.demo.router.AppRouter.Page -import io.kinoplan.scalajs.react.material.ui.core.{MuiCollapse, MuiDivider, MuiList, MuiListItem, MuiListItemIcon, MuiListItemText, MuiListSubheader, colors} +import io.kinoplan.scalajs.react.material.ui.core.{ + MuiCollapse, + MuiDivider, + MuiList, + MuiListItem, + MuiListItemIcon, + MuiListItemText, + MuiListSubheader, + colors +} import io.kinoplan.scalajs.react.material.ui.icons.{MuiIcons, MuiIconsModule} object MainMenu { @@ -28,21 +37,18 @@ object MainMenu { def render(props: Props, state: State): VdomArray = { val iconColor = if (Layout.isPaletteLight) "rgba(0, 0, 0, 0.54)" else colors.common.white - val demoExpandIcon = if (state.demoOpen) { - MuiIcons(MuiIconsModule.ExpandLess)()(color := iconColor) - } else { - MuiIcons(MuiIconsModule.ExpandMore)()(color := iconColor) - } + val demoExpandIcon = + if (state.demoOpen) MuiIcons(MuiIconsModule.ExpandLess)()(color := iconColor) + else MuiIcons(MuiIconsModule.ExpandMore)()(color := iconColor) - val labExpandIcon = if (state.labOpen) { - MuiIcons(MuiIconsModule.ExpandLess)()(color := iconColor) - } else { - MuiIcons(MuiIconsModule.ExpandMore)()(color := iconColor) - } + val labExpandIcon = + if (state.labOpen) MuiIcons(MuiIconsModule.ExpandLess)()(color := iconColor) + else MuiIcons(MuiIconsModule.ExpandMore)()(color := iconColor) VdomArray( MuiDivider()(Attr("key") := 1), - MuiList()(Attr("key") := 2, + MuiList()( + Attr("key") := 2, div( MenuItem.menuItemsFirst.zipWithIndex.toVdomArray { case (item, index) => MuiListItem(button = true)( @@ -56,30 +62,37 @@ object MainMenu { MuiListItemText(primary = VdomNode(item.label))() ) }, - MuiListItem(button = true)(onClick --> handleDemoListClick, Attr("key") := 5, + MuiListItem(button = true)( + onClick --> handleDemoListClick, + Attr("key") := 5, MuiListItemIcon()( MuiIcons(MuiIconsModule.Inbox)() ), MuiListItemText(inset = true, primary = VdomNode("Component Demos"))(), demoExpandIcon ), - MuiCollapse(in = state.demoOpen, timeout = MuiCollapse.Timeout.auto)(Attr("key") := 6, + MuiCollapse(in = state.demoOpen, timeout = MuiCollapse.Timeout.auto)( + Attr("key") := 6, ChildMenu(props.router, props.r, ChildMenuItem.demos) ), - MuiListItem(button = true)(onClick --> handleLabListClick, Attr("key") := 7, + MuiListItem(button = true)( + onClick --> handleLabListClick, + Attr("key") := 7, MuiListItemIcon()( MuiIcons(MuiIconsModule.LocalBar)() ), MuiListItemText(inset = true, primary = VdomNode("Lab"))(), labExpandIcon ), - MuiCollapse(in = state.labOpen, timeout = MuiCollapse.Timeout.auto)(Attr("key") := 8, + MuiCollapse(in = state.labOpen, timeout = MuiCollapse.Timeout.auto)( + Attr("key") := 8, ChildMenu(props.router, props.r, ChildMenuItem.labs) ) ) ), MuiDivider()(Attr("key") := 3), - MuiList()(Attr("key") := 4, + MuiList()( + Attr("key") := 4, div( MuiListSubheader(inset = true)("Saved reports"), MenuItem.menuItemsSecond.zipWithIndex.toVdomArray { case (item, index) => @@ -98,6 +111,7 @@ object MainMenu { ) ) } + } private val component = ScalaComponent.builder[Props]("MainMenu") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/SimpleTablePage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/SimpleTablePage.scala index cc37282b..fa503564 100755 --- a/demo/src/main/scala/io/kinoplan/demo/pages/SimpleTablePage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/SimpleTablePage.scala @@ -15,18 +15,26 @@ object SimpleTablePage extends ScalaCssReactImplicits { case class Props(router: RouterCtl[Page], style: SimpleTableStyle) class Backend(t: BackendScope[Props, Unit]) { + def render(props: Props): VdomElement = { val css = props.style val tableItems = TableItem.simples div( div( - MuiTypography(variant = MuiTypography.Variant.h4, gutterBottom = true, component = "h2")( + MuiTypography( + variant = MuiTypography.Variant.h4, + gutterBottom = true, + component = "h2" + )( "Products" ), - div(css.tableContainer, - MuiPaper()(css.root, - MuiTable()(css.table, + div( + css.tableContainer, + MuiPaper()( + css.root, + MuiTable()( + css.table, MuiTableHead()( MuiTableRow()( MuiTableCell()("Dessert (100g serving)"), @@ -37,14 +45,15 @@ object SimpleTablePage extends ScalaCssReactImplicits { ) ), MuiTableBody()( - tableItems.zipWithIndex.toVdomArray { case (tableItem, index) => - MuiTableRow()(Attr("key") := index, - MuiTableCell(component = "th", scope = "row")(tableItem.name), - MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.calories), - MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.fat), - MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.carbs), - MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.protein) - ) + tableItems.zipWithIndex.toVdomArray { + case (tableItem, index) => MuiTableRow()( + Attr("key") := index, + MuiTableCell(component = "th", scope = "row")(tableItem.name), + MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.calories), + MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.fat), + MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.carbs), + MuiTableCell(align = MuiTableCell.Alignment.right)(tableItem.protein) + ) } ) ) @@ -53,6 +62,7 @@ object SimpleTablePage extends ScalaCssReactImplicits { ) ) } + } private val component = ScalaComponent.builder[Props]("SimpleTablePage") @@ -63,4 +73,5 @@ object SimpleTablePage extends ScalaCssReactImplicits { router: RouterCtl[Page], style: SimpleTableStyle = DefaultSimpleTableStyle ) = component(Props(router, style)) + } diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/AppBarPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/AppBarPage.scala index f9d71189..d084078e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/AppBarPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/AppBarPage.scala @@ -11,18 +11,17 @@ object AppBarPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - - div( - ButtonAppBar(), - SimpleAppBar(), - PrimarySearchAppBar(), - MenuAppBar(), - SearchAppBar(), - DenseAppBar(), - BottomAppBar() - ) - } + + def render(props: Props): VdomElement = div( + ButtonAppBar(), + SimpleAppBar(), + PrimarySearchAppBar(), + MenuAppBar(), + SearchAppBar(), + DenseAppBar(), + BottomAppBar() + ) + } private val component = ScalaComponent.builder[Props]("AppBarPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/AvatarsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/AvatarsPage.scala index 64ecd45e..0a81d74c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/AvatarsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/AvatarsPage.scala @@ -11,13 +11,13 @@ object AvatarsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - ImageAvatars(), - LetterAvatars(), - IconAvatars() - ) - } + + def render(props: Props): VdomElement = div( + ImageAvatars(), + LetterAvatars(), + IconAvatars() + ) + } private val component = ScalaComponent.builder[Props]("AvatarsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/BadgesPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/BadgesPage.scala index ef233ceb..114c719b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/BadgesPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/BadgesPage.scala @@ -11,15 +11,15 @@ object BadgesPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleBadge(), - BadgeMax(), - DotBadge(), - BadgeVisibility(), - CustomizedBadge() - ) - } + + def render(props: Props): VdomElement = div( + SimpleBadge(), + BadgeMax(), + DotBadge(), + BadgeVisibility(), + CustomizedBadge() + ) + } private val component = ScalaComponent.builder[Props]("BadgesPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/BottomNavigationPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/BottomNavigationPage.scala index 3de326d6..3b12ad3f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/BottomNavigationPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/BottomNavigationPage.scala @@ -11,12 +11,12 @@ object BottomNavigationPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleBottomNavigation(), - LabelBottomNavigation() - ) - } + + def render(props: Props): VdomElement = div( + SimpleBottomNavigation(), + LabelBottomNavigation() + ) + } private val component = ScalaComponent.builder[Props]("BottomNavigationPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ButtonsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ButtonsPage.scala index 01f925a9..da9312cf 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ButtonsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ButtonsPage.scala @@ -11,20 +11,20 @@ object ButtonsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - ContainedButtons(), - TextButtons(), - OutlinedButtons(), - FloatingActionButtons(), - FloatingActionButtonZoom(), - ButtonSizes(), - IconLabelButtons(), - IconButtons(), - CustomizedButtons(), - ButtonBases() - ) - } + + def render(props: Props): VdomElement = div( + ContainedButtons(), + TextButtons(), + OutlinedButtons(), + FloatingActionButtons(), + FloatingActionButtonZoom(), + ButtonSizes(), + IconLabelButtons(), + IconButtons(), + CustomizedButtons(), + ButtonBases() + ) + } private val component = ScalaComponent.builder[Props]("ButtonsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/CardsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/CardsPage.scala index d1442740..c43d1643 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/CardsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/CardsPage.scala @@ -11,15 +11,15 @@ object CardsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleCard(), - RecipeReviewCard(), - MediaCard(), - MediaCardFit(), - MediaControlCard() - ) - } + + def render(props: Props): VdomElement = div( + SimpleCard(), + RecipeReviewCard(), + MediaCard(), + MediaCardFit(), + MediaControlCard() + ) + } private val component = ScalaComponent.builder[Props]("CardsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ChipsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ChipsPage.scala index 808eff9d..e39c9083 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ChipsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ChipsPage.scala @@ -11,14 +11,14 @@ object ChipsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - Chips(), - OutlinedChips(), - ChipsArray(), - ChipsPlayground() - ) - } + + def render(props: Props): VdomElement = div( + Chips(), + OutlinedChips(), + ChipsArray(), + ChipsPlayground() + ) + } private val component = ScalaComponent.builder[Props]("ChipsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/DialogsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/DialogsPage.scala index 02b16df3..7770e24f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/DialogsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/DialogsPage.scala @@ -4,25 +4,34 @@ import japgolly.scalajs.react._ import japgolly.scalajs.react.extra.router.RouterCtl import japgolly.scalajs.react.vdom.all._ -import io.kinoplan.demo.components.demos.Dialogs.{AlertDialog, ConfirmationDialog, CustomizedDialog, FormDialog, FullScreenDialog, MaxWidthDialog, ScrollDialog, SimpleDialog} +import io.kinoplan.demo.components.demos.Dialogs.{ + AlertDialog, + ConfirmationDialog, + CustomizedDialog, + FormDialog, + FullScreenDialog, + MaxWidthDialog, + ScrollDialog, + SimpleDialog +} import io.kinoplan.demo.router.AppRouter.Page object DialogsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleDialog(), - AlertDialog(), - FormDialog(), - CustomizedDialog(), - FullScreenDialog(), - MaxWidthDialog(), - ConfirmationDialog(), - ScrollDialog() - ) - } + + def render(props: Props): VdomElement = div( + SimpleDialog(), + AlertDialog(), + FormDialog(), + CustomizedDialog(), + FullScreenDialog(), + MaxWidthDialog(), + ConfirmationDialog(), + ScrollDialog() + ) + } private val component = ScalaComponent.builder[Props]("DialogsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/DividersPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/DividersPage.scala index adc98b4d..aba49ab3 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/DividersPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/DividersPage.scala @@ -11,14 +11,14 @@ object DividersPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - ListDividers(), - InsetDividers(), - SubheaderDividers(), - MiddleDividers() - ) - } + + def render(props: Props): VdomElement = div( + ListDividers(), + InsetDividers(), + SubheaderDividers(), + MiddleDividers() + ) + } private val component = ScalaComponent.builder[Props]("DividersPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/DrawersPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/DrawersPage.scala index 519be8a5..1ff166e5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/DrawersPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/DrawersPage.scala @@ -11,15 +11,15 @@ object DrawersPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - TemporaryDrawer(), - SwipeableTemporaryDrawer(), - ResponsiveDrawer(), - PersistentDrawer(), - MiniDrawer() - ) - } + + def render(props: Props): VdomElement = div( + TemporaryDrawer(), + SwipeableTemporaryDrawer(), + ResponsiveDrawer(), + PersistentDrawer(), + MiniDrawer() + ) + } private val component = ScalaComponent.builder[Props]("DrawersPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ExpansionPanelsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ExpansionPanelsPage.scala index fa1e0c66..db8763db 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ExpansionPanelsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ExpansionPanelsPage.scala @@ -11,14 +11,14 @@ object ExpansionPanelsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleExpansionPanel(), - ControlledExpansionPanels(), - DetailedExpansionPanel(), - CustomizedExpansionPanel() - ) - } + + def render(props: Props): VdomElement = div( + SimpleExpansionPanel(), + ControlledExpansionPanels(), + DetailedExpansionPanel(), + CustomizedExpansionPanel() + ) + } private val component = ScalaComponent.builder[Props]("ExpansionPanelsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/GridListPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/GridListPage.scala index 6846b3e7..fb6f27dd 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/GridListPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/GridListPage.scala @@ -11,14 +11,14 @@ object GridListPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - ImageGridList(), - TitlebarGridList(), - SingleLineGridList(), - AdvancedGridList() - ) - } + + def render(props: Props): VdomElement = div( + ImageGridList(), + TitlebarGridList(), + SingleLineGridList(), + AdvancedGridList() + ) + } private val component = ScalaComponent.builder[Props]("GridListPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ListsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ListsPage.scala index 08b80768..9851f916 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ListsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ListsPage.scala @@ -11,21 +11,21 @@ object ListsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleList(), - NestedList(), - FolderList(), - InteractiveList(), - SelectedListItem(), - AlignItemsList(), - CheckboxList(), - CheckboxListSecondary(), - SwitchListSecondary(), - PinnedSubheaderList(), - InsetList() - ) - } + + def render(props: Props): VdomElement = div( + SimpleList(), + NestedList(), + FolderList(), + InteractiveList(), + SelectedListItem(), + AlignItemsList(), + CheckboxList(), + CheckboxListSecondary(), + SwitchListSecondary(), + PinnedSubheaderList(), + InsetList() + ) + } private val component = ScalaComponent.builder[Props]("ListsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/MenusPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/MenusPage.scala index 980f8d75..b52e17ee 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/MenusPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/MenusPage.scala @@ -11,16 +11,16 @@ object MenusPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleMenu(), - SimpleListMenu(), - ListItemComposition(), - LongMenu(), - TypographyMenu(), - FadeMenu() - ) - } + + def render(props: Props): VdomElement = div( + SimpleMenu(), + SimpleListMenu(), + ListItemComposition(), + LongMenu(), + TypographyMenu(), + FadeMenu() + ) + } private val component = ScalaComponent.builder[Props]("MenusPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/PaperPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/PaperPage.scala index 132c3640..83626a65 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/PaperPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/PaperPage.scala @@ -11,11 +11,11 @@ object PaperPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - PaperSheet() - ) - } + + def render(props: Props): VdomElement = div( + PaperSheet() + ) + } private val component = ScalaComponent.builder[Props]("PaperPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/PickersPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/PickersPage.scala index d2ab04ff..60881a10 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/PickersPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/PickersPage.scala @@ -11,13 +11,13 @@ object PickersPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - DatePickers(), - DateAndTimePickers(), - TimePickers() - ) - } + + def render(props: Props): VdomElement = div( + DatePickers(), + DateAndTimePickers(), + TimePickers() + ) + } private val component = ScalaComponent.builder[Props]("PickersPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ProgressPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ProgressPage.scala index 21045ac7..9427fffa 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/ProgressPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/ProgressPage.scala @@ -11,21 +11,21 @@ object ProgressPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - CircularIndeterminate(), - CircularIntegration(), - CircularDeterminate(), - CircularStatic(), - LinearIndeterminate(), - LinearDeterminate(), - LinearBuffer(), - LinearQuery(), - CustomizedProgress(), - DelayingAppearance(), - CircularUnderLoad() - ) - } + + def render(props: Props): VdomElement = div( + CircularIndeterminate(), + CircularIntegration(), + CircularDeterminate(), + CircularStatic(), + LinearIndeterminate(), + LinearDeterminate(), + LinearBuffer(), + LinearQuery(), + CustomizedProgress(), + DelayingAppearance(), + CircularUnderLoad() + ) + } private val component = ScalaComponent.builder[Props]("ProgressPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/SelectionControlsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/SelectionControlsPage.scala index fa15917a..1c0210c0 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/SelectionControlsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/SelectionControlsPage.scala @@ -11,20 +11,20 @@ object SelectionControlsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - RadioButtonsGroup(), - RadioButtons(), - Checkboxes(), - CheckboxLabels(), - CheckboxesGroup(), - Switches(), - SwitchLabels(), - SwitchesGroup(), - CustomizedSwitches(), - FormControlLabelPosition() - ) - } + + def render(props: Props): VdomElement = div( + RadioButtonsGroup(), + RadioButtons(), + Checkboxes(), + CheckboxLabels(), + CheckboxesGroup(), + Switches(), + SwitchLabels(), + SwitchesGroup(), + CustomizedSwitches(), + FormControlLabelPosition() + ) + } private val component = ScalaComponent.builder[Props]("SelectionControlsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/SelectsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/SelectsPage.scala index bb2f2ecd..6d502a46 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/SelectsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/SelectsPage.scala @@ -11,16 +11,16 @@ object SelectsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleSelect(), - NativeSelects(), - CustomizedSelects(), - MultipleSelect(), - ControlledOpenSelect(), - DialogSelect() - ) - } + + def render(props: Props): VdomElement = div( + SimpleSelect(), + NativeSelects(), + CustomizedSelects(), + MultipleSelect(), + ControlledOpenSelect(), + DialogSelect() + ) + } private val component = ScalaComponent.builder[Props]("SelectsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/SnackbarsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/SnackbarsPage.scala index 9bffbce7..d458ea81 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/SnackbarsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/SnackbarsPage.scala @@ -11,17 +11,17 @@ object SnackbarsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleSnackbar(), - CustomizedSnackbars(), - PositionedSnackbar(), - LongTextSnackbar(), - ConsecutiveSnackbars(), - FabIntegrationSnackbar(), - FadeSnackbar() - ) - } + + def render(props: Props): VdomElement = div( + SimpleSnackbar(), + CustomizedSnackbars(), + PositionedSnackbar(), + LongTextSnackbar(), + ConsecutiveSnackbars(), + FabIntegrationSnackbar(), + FadeSnackbar() + ) + } private val component = ScalaComponent.builder[Props]("SnackbarsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/SteppersPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/SteppersPage.scala index b8b3522b..964e18a3 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/SteppersPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/SteppersPage.scala @@ -11,20 +11,20 @@ object SteppersPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - HorizontalLinearStepper(), - HorizontalNonLinearStepper(), - HorizontalLabelPositionBelowStepper(), - HorizontalNonLinearAlternativeLabelStepper(), - HorizontalNonLinearStepperWithError(), - VerticalLinearStepper(), - CustomizedStepper(), - TextMobileStepper(), - DotsMobileStepper(), - ProgressMobileStepper() - ) - } + + def render(props: Props): VdomElement = div( + HorizontalLinearStepper(), + HorizontalNonLinearStepper(), + HorizontalLabelPositionBelowStepper(), + HorizontalNonLinearAlternativeLabelStepper(), + HorizontalNonLinearStepperWithError(), + VerticalLinearStepper(), + CustomizedStepper(), + TextMobileStepper(), + DotsMobileStepper(), + ProgressMobileStepper() + ) + } private val component = ScalaComponent.builder[Props]("SteppersPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/TablesPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/TablesPage.scala index 426e3b9f..a5573b81 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/TablesPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/TablesPage.scala @@ -11,14 +11,14 @@ object TablesPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleTable(), - EnhancedTable(), - CustomizedTable(), - SpanningTable() - ) - } + + def render(props: Props): VdomElement = div( + SimpleTable(), + EnhancedTable(), + CustomizedTable(), + SpanningTable() + ) + } private val component = ScalaComponent.builder[Props]("TablesPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/TabsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/TabsPage.scala index fa71bd00..63415917 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/TabsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/TabsPage.scala @@ -11,22 +11,22 @@ object TabsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleTabs(), - TabsWrappedLabel(), - DisabledTabs(), - FullWidthTabs(), - CenteredTabs(), - ScrollableTabsButtonAuto(), - ScrollableTabsButtonForce(), - ScrollableTabsButtonPrevent(), - CustomizedTabs(), - NavTabs(), - IconTabs(), - IconLabelTabs() - ) - } + + def render(props: Props): VdomElement = div( + SimpleTabs(), + TabsWrappedLabel(), + DisabledTabs(), + FullWidthTabs(), + CenteredTabs(), + ScrollableTabsButtonAuto(), + ScrollableTabsButtonForce(), + ScrollableTabsButtonPrevent(), + CustomizedTabs(), + NavTabs(), + IconTabs(), + IconLabelTabs() + ) + } private val component = ScalaComponent.builder[Props]("TabsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/TextFieldsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/TextFieldsPage.scala index f35a13cf..df938c61 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/TextFieldsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/TextFieldsPage.scala @@ -11,22 +11,22 @@ object TextFieldsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - TextFields(), - OutlinedTextFields(), - FilledTextFields(), - ComposedTextField(), - Inputs(), - CustomizedInputs(), - CustomizedInputBase(), - InputAdornments(), - InputWithIcon(), - FilledInputAdornments(), - OutlinedInputAdornments(), - TextFieldMargins() - ) - } + + def render(props: Props): VdomElement = div( + TextFields(), + OutlinedTextFields(), + FilledTextFields(), + ComposedTextField(), + Inputs(), + CustomizedInputs(), + CustomizedInputBase(), + InputAdornments(), + InputWithIcon(), + FilledInputAdornments(), + OutlinedInputAdornments(), + TextFieldMargins() + ) + } private val component = ScalaComponent.builder[Props]("TextFieldsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/demos/TooltipsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/demos/TooltipsPage.scala index aea2a641..efcc8fd2 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/demos/TooltipsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/demos/TooltipsPage.scala @@ -11,19 +11,19 @@ object TooltipsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - SimpleTooltips(), - PositionedTooltips(), - TriggersTooltips(), - ControlledTooltips(), - VariableWidth(), - InteractiveTooltips(), - DisabledTooltips(), - TransitionsTooltips(), - DelayTooltips() - ) - } + + def render(props: Props): VdomElement = div( + SimpleTooltips(), + PositionedTooltips(), + TriggersTooltips(), + ControlledTooltips(), + VariableWidth(), + InteractiveTooltips(), + DisabledTooltips(), + TransitionsTooltips(), + DelayTooltips() + ) + } private val component = ScalaComponent.builder[Props]("TooltipsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/labs/BreadcrumbsPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/labs/BreadcrumbsPage.scala index bdc44c59..9d5597ea 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/labs/BreadcrumbsPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/labs/BreadcrumbsPage.scala @@ -11,16 +11,15 @@ object BreadcrumbsPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - - div( - SimpleBreadcrumbs(), - CustomSeparator(), - IconBreadcrumbs(), - CollapsedBreadcrumbs(), - CustomizedBreadcrumbs() - ) - } + + def render(props: Props): VdomElement = div( + SimpleBreadcrumbs(), + CustomSeparator(), + IconBreadcrumbs(), + CollapsedBreadcrumbs(), + CustomizedBreadcrumbs() + ) + } private val component = ScalaComponent.builder[Props]("BreadcrumbsPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/labs/SliderPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/labs/SliderPage.scala index f2e33a93..bd75f299 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/labs/SliderPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/labs/SliderPage.scala @@ -11,16 +11,15 @@ object SliderPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - - div( - SimpleSlider(), - StepSlider(), - DisabledSlider(), - VerticalSlider(), - CustomIconSlider() - ) - } + + def render(props: Props): VdomElement = div( + SimpleSlider(), + StepSlider(), + DisabledSlider(), + VerticalSlider(), + CustomIconSlider() + ) + } private val component = ScalaComponent.builder[Props]("SliderPage") @@ -28,4 +27,4 @@ object SliderPage { .build def apply(router: RouterCtl[Page]) = component(Props(router)) -} \ No newline at end of file +} diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/labs/SpeedDialPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/labs/SpeedDialPage.scala index f87c7f56..91af4357 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/labs/SpeedDialPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/labs/SpeedDialPage.scala @@ -11,13 +11,12 @@ object SpeedDialPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - OpenIconSpeedDial(), - SpeedDialTooltipOpen() - ) - } + def render(props: Props): VdomElement = div( + OpenIconSpeedDial(), + SpeedDialTooltipOpen() + ) + } private val component = ScalaComponent.builder[Props]("SpeedDialPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/pages/labs/ToggleButtonPage.scala b/demo/src/main/scala/io/kinoplan/demo/pages/labs/ToggleButtonPage.scala index f16f0d2c..08356f9a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/pages/labs/ToggleButtonPage.scala +++ b/demo/src/main/scala/io/kinoplan/demo/pages/labs/ToggleButtonPage.scala @@ -11,12 +11,11 @@ object ToggleButtonPage { case class Props(router: RouterCtl[Page]) class Backend(t: BackendScope[Props, Unit]) { - def render(props: Props): VdomElement = { - div( - ToggleButtons() - ) - } + def render(props: Props): VdomElement = div( + ToggleButtons() + ) + } private val component = ScalaComponent.builder[Props]("ToggleButtonPage") diff --git a/demo/src/main/scala/io/kinoplan/demo/router/AppRouter.scala b/demo/src/main/scala/io/kinoplan/demo/router/AppRouter.scala index f1d1b527..a1f17d1a 100755 --- a/demo/src/main/scala/io/kinoplan/demo/router/AppRouter.scala +++ b/demo/src/main/scala/io/kinoplan/demo/router/AppRouter.scala @@ -47,39 +47,38 @@ object AppRouter { ( staticRoute("/", DashboardRoute) ~> renderR(SimpleTablePage(_)) - | staticRoute("/#demos/app-bar/", DemoAppBarRoute) ~> renderR(AppBarPage(_)) - | staticRoute("/#demos/avatars/", DemoAvatarsRoute) ~> renderR(AvatarsPage(_)) - | staticRoute("/#demos/badges/", DemoBadgesRoute) ~> renderR(BadgesPage(_)) - | staticRoute("/#demos/bottom-navigation/", DemoBottomNavigationRoute) ~> renderR(BottomNavigationPage(_)) - | staticRoute("/#demos/buttons/", DemoButtonsRoute) ~> renderR(ButtonsPage(_)) - | staticRoute("/#demos/cards/", DemoCardsRoute) ~> renderR(CardsPage(_)) - | staticRoute("/#demos/chips/", DemoChipsRoute) ~> renderR(ChipsPage(_)) - | staticRoute("/#demos/dialogs/", DemoDialogsRoute) ~> renderR(DialogsPage(_)) - | staticRoute("/#demos/dividers/", DemoDividersRoute) ~> renderR(DividersPage(_)) - | staticRoute("/#demos/drawers/", DemoDrawersRoute) ~> renderR(DrawersPage(_)) - | staticRoute("/#demos/expansion-panels/", DemoExpansionPanelsRoute) ~> renderR(ExpansionPanelsPage(_)) - | staticRoute("/#demos/grid-list/", DemoGridListRoute) ~> renderR(GridListPage(_)) - | staticRoute("/#demos/lists/", DemoListsRoute) ~> renderR(ListsPage(_)) - | staticRoute("/#demos/menus/", DemoMenusRoute) ~> renderR(MenusPage(_)) - | staticRoute("/#demos/paper/", DemoPaperRoute) ~> renderR(PaperPage(_)) - | staticRoute("/#demos/pickers/", DemoPickersRoute) ~> renderR(PickersPage(_)) - | staticRoute("/#demos/progress/", DemoProgressRoute) ~> renderR(ProgressPage(_)) - | staticRoute("/#demos/selection-controls/", DemoSelectionControlsRoute) ~> renderR(SelectionControlsPage(_)) - | staticRoute("/#demos/selects/", DemoSelectsRoute) ~> renderR(SelectsPage(_)) - | staticRoute("/#demos/snackbars/", DemoSnackbarsRoute) ~> renderR(SnackbarsPage(_)) - | staticRoute("/#demos/steppers/", DemoSteppersRoute) ~> renderR(SteppersPage(_)) - | staticRoute("/#demos/tables/", DemoTablesRoute) ~> renderR(TablesPage(_)) - | staticRoute("/#demos/tabs/", DemoTabsRoute) ~> renderR(TabsPage(_)) - | staticRoute("/#demos/text-fields/", DemoTextFieldsRoute) ~> renderR(TextFieldsPage(_)) - | staticRoute("/#demos/tooltips/", DemoTooltipsRoute) ~> renderR(TooltipsPage(_)) - | staticRoute("/#lab/breadcrumbs/", LabBreadcrumbsRoute) ~> renderR(BreadcrumbsPage(_)) - | staticRoute("/#lab/slider/", LabSliderRoute) ~> renderR(SliderPage(_)) - | staticRoute("/#lab/speed-dial/", LabSpeedDialRoute) ~> renderR(SpeedDialPage(_)) - | staticRoute("/#lab/toggle-button/", LabToggleButtonRoute) ~> renderR(ToggleButtonPage(_)) + | staticRoute("/#demos/app-bar/", DemoAppBarRoute) ~> renderR(AppBarPage(_)) + | staticRoute("/#demos/avatars/", DemoAvatarsRoute) ~> renderR(AvatarsPage(_)) + | staticRoute("/#demos/badges/", DemoBadgesRoute) ~> renderR(BadgesPage(_)) + | staticRoute("/#demos/bottom-navigation/", DemoBottomNavigationRoute) ~> renderR(BottomNavigationPage(_)) + | staticRoute("/#demos/buttons/", DemoButtonsRoute) ~> renderR(ButtonsPage(_)) + | staticRoute("/#demos/cards/", DemoCardsRoute) ~> renderR(CardsPage(_)) + | staticRoute("/#demos/chips/", DemoChipsRoute) ~> renderR(ChipsPage(_)) + | staticRoute("/#demos/dialogs/", DemoDialogsRoute) ~> renderR(DialogsPage(_)) + | staticRoute("/#demos/dividers/", DemoDividersRoute) ~> renderR(DividersPage(_)) + | staticRoute("/#demos/drawers/", DemoDrawersRoute) ~> renderR(DrawersPage(_)) + | staticRoute("/#demos/expansion-panels/", DemoExpansionPanelsRoute) ~> renderR(ExpansionPanelsPage(_)) + | staticRoute("/#demos/grid-list/", DemoGridListRoute) ~> renderR(GridListPage(_)) + | staticRoute("/#demos/lists/", DemoListsRoute) ~> renderR(ListsPage(_)) + | staticRoute("/#demos/menus/", DemoMenusRoute) ~> renderR(MenusPage(_)) + | staticRoute("/#demos/paper/", DemoPaperRoute) ~> renderR(PaperPage(_)) + | staticRoute("/#demos/pickers/", DemoPickersRoute) ~> renderR(PickersPage(_)) + | staticRoute("/#demos/progress/", DemoProgressRoute) ~> renderR(ProgressPage(_)) + | staticRoute("/#demos/selection-controls/", DemoSelectionControlsRoute) ~> renderR(SelectionControlsPage(_)) + | staticRoute("/#demos/selects/", DemoSelectsRoute) ~> renderR(SelectsPage(_)) + | staticRoute("/#demos/snackbars/", DemoSnackbarsRoute) ~> renderR(SnackbarsPage(_)) + | staticRoute("/#demos/steppers/", DemoSteppersRoute) ~> renderR(SteppersPage(_)) + | staticRoute("/#demos/tables/", DemoTablesRoute) ~> renderR(TablesPage(_)) + | staticRoute("/#demos/tabs/", DemoTabsRoute) ~> renderR(TabsPage(_)) + | staticRoute("/#demos/text-fields/", DemoTextFieldsRoute) ~> renderR(TextFieldsPage(_)) + | staticRoute("/#demos/tooltips/", DemoTooltipsRoute) ~> renderR(TooltipsPage(_)) + | staticRoute("/#lab/breadcrumbs/", LabBreadcrumbsRoute) ~> renderR(BreadcrumbsPage(_)) + | staticRoute("/#lab/slider/", LabSliderRoute) ~> renderR(SliderPage(_)) + | staticRoute("/#lab/speed-dial/", LabSpeedDialRoute) ~> renderR(SpeedDialPage(_)) + | staticRoute("/#lab/toggle-button/", LabToggleButtonRoute) ~> renderR(ToggleButtonPage(_)) ).notFound(redirectToPage(DashboardRoute)(SetRouteVia.HistoryReplace)) }.renderWith(layout) - def layout(c: RouterCtl[Page], r: Resolution[Page]) = Layout(c, r) val baseUrl = BaseUrl.fromWindowOrigin diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/ChildMenuStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/ChildMenuStyle.scala index ea3e5d6c..7bf7455b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/ChildMenuStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/ChildMenuStyle.scala @@ -3,12 +3,14 @@ package io.kinoplan.demo.styles import io.kinoplan.demo.CssSettings._ case class ChildMenuStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import dsl._ import common.theme val nested = style( paddingLeft((theme.spacing.unit * 4).px) ) + } object DefaultChildMenuStyle extends ChildMenuStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/CommonStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/CommonStyle.scala index 689a9567..d0b4599c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/CommonStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/CommonStyle.scala @@ -3,17 +3,24 @@ package io.kinoplan.demo.styles import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.components.Layout import io.kinoplan.scalajs.react.material.ui.core.colors -import io.kinoplan.scalajs.react.material.ui.core.styles.{PaletteOptions, ThemeOptions, TypographyOptions, createMuiTheme} +import io.kinoplan.scalajs.react.material.ui.core.styles.{ + PaletteOptions, + ThemeOptions, + TypographyOptions, + createMuiTheme +} class CommonStyle extends StyleSheet.Inline { import dsl._ - def theme = Layout.defaultTheme.getOrElse(createMuiTheme( - options = ThemeOptions( - typography = TypographyOptions(useNextVariants = true), - palette = PaletteOptions(primary = colors.blue) + def theme = Layout.defaultTheme.getOrElse( + createMuiTheme( + options = ThemeOptions( + typography = TypographyOptions(useNextVariants = true), + palette = PaletteOptions(primary = colors.blue) + ) ) - )) + ) val gutters = style( paddingLeft((theme.spacing.unit * 2).px), @@ -67,24 +74,18 @@ class CommonStyle extends StyleSheet.Inline { paddingLeft((theme.spacing.unit * 3).px), paddingRight((theme.spacing.unit * 3).px), paddingTop((theme.spacing.unit * 6).px), - paddingBottom((theme.spacing.unit * 3).px), + paddingBottom((theme.spacing.unit * 3).px) ) ) val demoPaper = styleF.bool(isLight => - if (isLight) { - styleS(backgroundColor :=! theme.palette.grey.`200`) - } else { - styleS(backgroundColor :=! theme.palette.grey.`900`) - } + if (isLight) styleS(backgroundColor :=! theme.palette.grey.`200`) + else styleS(backgroundColor :=! theme.palette.grey.`900`) ) val paper = styleF.bool(isLight => - if (isLight) { - styleS(backgroundColor :=! colors.common.white) - } else { - styleS(backgroundColor :=! theme.palette.grey.`800`) - } + if (isLight) styleS(backgroundColor :=! colors.common.white) + else styleS(backgroundColor :=! theme.palette.grey.`800`) ) val demoHiddenHeader = style( @@ -97,6 +98,7 @@ class CommonStyle extends StyleSheet.Inline { val avatar = style( margin(10.px) ) + } object DefaultCommonStyle extends CommonStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/LayoutStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/LayoutStyle.scala index fba69b3b..3ca05b0e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/LayoutStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/LayoutStyle.scala @@ -22,7 +22,7 @@ case class LayoutStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSh ) ) - val appBarShiftTransition: String = theme.transitions.create( + val appBarShiftTransition: String = theme.transitions.create( propAppBar, CreateTransitionsOptions( easing = theme.transitions.easing.sharp, @@ -125,6 +125,7 @@ case class LayoutStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSh backgroundColor :=! "#5b7d38" ) ) + } object DefaultLayoutStyle extends LayoutStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/TabContainerStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/TabContainerStyle.scala index 20731aed..c15c3853 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/TabContainerStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/TabContainerStyle.scala @@ -3,12 +3,14 @@ package io.kinoplan.demo.styles import io.kinoplan.demo.CssSettings._ case class TabContainerStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import dsl._ import common.theme val root = style( padding((theme.spacing.unit * 3).px) ) + } object DefaultTabContainerStyle extends TabContainerStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/BottomAppBarStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/BottomAppBarStyle.scala index 26807d37..a90042cb 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/BottomAppBarStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/BottomAppBarStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class BottomAppBarStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -44,11 +45,12 @@ case class BottomAppBarStyle(common: CommonStyle = DefaultCommonStyle) extends S val fabButton = style( position.absolute, zIndex :=! 1.toString, - top :=! (-30).toString, + top :=! -30.toString, left :=! 0.toString, right :=! 0.toString, margin :=! "0 auto" ) + } object DefaultBottomAppBarStyle extends BottomAppBarStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/PrimarySearchAppBarStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/PrimarySearchAppBarStyle.scala index 2768fd92..ffaeaa2b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/PrimarySearchAppBarStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/PrimarySearchAppBarStyle.scala @@ -6,7 +6,8 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.styles.colorManipulator.fade -case class PrimarySearchAppBarStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { +case class PrimarySearchAppBarStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -82,6 +83,7 @@ case class PrimarySearchAppBarStyle(common: CommonStyle = DefaultCommonStyle) ex display.none ) ) + } object DefaultPrimarySearchAppBarStyle extends PrimarySearchAppBarStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/SearchAppBarStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/SearchAppBarStyle.scala index 8acecca4..087b661a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/SearchAppBarStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/AppBar/SearchAppBarStyle.scala @@ -7,6 +7,7 @@ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.styles.colorManipulator.fade case class SearchAppBarStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -70,6 +71,7 @@ case class SearchAppBarStyle(common: CommonStyle = DefaultCommonStyle) extends S ) ) ) + } -object DefaultSearchAppBarStyle extends SearchAppBarStyle \ No newline at end of file +object DefaultSearchAppBarStyle extends SearchAppBarStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Avatars/AvatarsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Avatars/AvatarsStyle.scala index d466be9a..2c8e61ab 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Avatars/AvatarsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Avatars/AvatarsStyle.scala @@ -9,7 +9,7 @@ class AvatarsStyle extends StyleSheet.Inline { private val commonAvatar = style( margin(10.px), - color :=! "#fff", + color :=! "#fff" ) val avatar = style( @@ -41,6 +41,7 @@ class AvatarsStyle extends StyleSheet.Inline { commonAvatar, backgroundColor :=! colors.green.`500` ) + } object DefaultAvatarsStyle extends AvatarsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/BadgeMaxStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/BadgeMaxStyle.scala index 3d9cc473..7b98b080 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/BadgeMaxStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/BadgeMaxStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class BadgeMaxStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -13,6 +14,7 @@ case class BadgeMaxStyle(common: CommonStyle = DefaultCommonStyle) extends Style marginLeft((theme.spacing.unit * 2).px), marginRight((theme.spacing.unit * 3).px) ) + } object DefaultBadgeMaxStyle extends BadgeMaxStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/BadgeVisibilityStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/BadgeVisibilityStyle.scala index 2e39d1b7..d661f94f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/BadgeVisibilityStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/BadgeVisibilityStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class BadgeVisibilityStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -25,7 +26,7 @@ case class BadgeVisibilityStyle(common: CommonStyle = DefaultCommonStyle) extend val row = style( marginTop((theme.spacing.unit * 2).px) ) + } object DefaultBadgeVisibilityStyle extends BadgeVisibilityStyle - diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/CustomizedBadgeStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/CustomizedBadgeStyle.scala index 213628e7..8101d868 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/CustomizedBadgeStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/CustomizedBadgeStyle.scala @@ -5,17 +5,17 @@ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.styles.PaletteType case class CustomizedBadgeStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ val badge = style( top(50.%%), - right :=! (-3).toString, - border :=! s"2px solid ${ - if (theme.palette.`type` == PaletteType.light.toString) theme.palette.grey.`200` else theme.palette.grey.`900` - }" + right :=! -3.toString, + border :=! s"2px solid ${if (theme.palette.`type` == PaletteType.light.toString) theme.palette.grey.`200` + else theme.palette.grey.`900`}" ) + } object DefaultCustomizedBadgeStyle extends CustomizedBadgeStyle - diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/DotBadgeStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/DotBadgeStyle.scala index e8e12e2d..fa370ca0 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/DotBadgeStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/DotBadgeStyle.scala @@ -4,12 +4,14 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class DotBadgeStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ val badgeMargin = style( margin((theme.spacing.unit * 2).px) ) + } object DefaultDotBadgeStyle extends DotBadgeStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/SimpleBadgeStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/SimpleBadgeStyle.scala index c3b0c5d1..cac7b3ae 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/SimpleBadgeStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Badges/SimpleBadgeStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class SimpleBadgeStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -14,6 +15,7 @@ case class SimpleBadgeStyle(common: CommonStyle = DefaultCommonStyle) extends St val badgePadding = style( padding :=! s"0 ${theme.spacing.unit * 2}px" ) + } object DefaultSimpleBadgeStyle extends SimpleBadgeStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/BottomNavigation/BottomNavigationStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/BottomNavigation/BottomNavigationStyle.scala index ce794d18..04e53161 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/BottomNavigation/BottomNavigationStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/BottomNavigation/BottomNavigationStyle.scala @@ -8,6 +8,7 @@ class BottomNavigationStyle extends StyleSheet.Inline { val root = style( width(500.px) ) + } object DefaultBottomNavigationStyle extends BottomNavigationStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/ButtonBasesStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/ButtonBasesStyle.scala index 2d02a262..ad36e753 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/ButtonBasesStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/ButtonBasesStyle.scala @@ -5,6 +5,7 @@ import scala.scalajs.js import io.kinoplan.demo.CssSettings._ case class ButtonBasesStyle(common: CommonButtonStyle = DefaultCommonButtonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -54,7 +55,11 @@ case class ButtonBasesStyle(common: CommonButtonStyle = DefaultCommonButtonStyle val imageTitle = style( position.relative, - padding((theme.spacing.unit * 2).px, (theme.spacing.unit * 4).px, (theme.spacing.unit + 6).px) + padding( + (theme.spacing.unit * 2).px, + (theme.spacing.unit * 4).px, + (theme.spacing.unit + 6).px + ) ) val imageMarked = style( @@ -62,7 +67,7 @@ case class ButtonBasesStyle(common: CommonButtonStyle = DefaultCommonButtonStyle width(18.px), backgroundColor :=! theme.palette.common.white, position.absolute, - bottom((-2).px), + bottom(-2.px), left :=! "calc(50% - 9px)", transition := opacityTransition ) @@ -77,36 +82,47 @@ case class ButtonBasesStyle(common: CommonButtonStyle = DefaultCommonButtonStyle ) private val focusVisibleImagePreliminary = style( - unsafeRoot(s".${imagePreliminary.htmlClass}:hover, .${imagePreliminary.htmlClass}.${focusVisible.htmlClass}")( + unsafeRoot( + s".${imagePreliminary.htmlClass}:hover, .${imagePreliminary.htmlClass}.${focusVisible.htmlClass}" + )( zIndex :=! 1.toString ) ) private val backdropImagePreliminary = style( - unsafeRoot(s".${imagePreliminary.htmlClass}:hover .${imageBackdrop.htmlClass}, .${imagePreliminary.htmlClass}.${focusVisible.htmlClass} .${imageBackdrop.htmlClass}")( + unsafeRoot( + s".${imagePreliminary.htmlClass}:hover .${imageBackdrop.htmlClass}, .${imagePreliminary.htmlClass}.${focusVisible.htmlClass} .${imageBackdrop.htmlClass}" + )( opacity(0.15) ) ) private val markedImagePreliminary = style( - unsafeRoot(s".${imagePreliminary.htmlClass}:hover .${imageMarked.htmlClass}, .${imagePreliminary.htmlClass}.${focusVisible.htmlClass} .${imageMarked.htmlClass}")( + unsafeRoot( + s".${imagePreliminary.htmlClass}:hover .${imageMarked.htmlClass}, .${imagePreliminary.htmlClass}.${focusVisible.htmlClass} .${imageMarked.htmlClass}" + )( opacity(0) ) ) private val titleImagePreliminary = style( - unsafeRoot(s".${imagePreliminary.htmlClass}:hover .${imageTitle.htmlClass}, .${imagePreliminary.htmlClass}.${focusVisible.htmlClass} .${imageTitle.htmlClass}")( + unsafeRoot( + s".${imagePreliminary.htmlClass}:hover .${imageTitle.htmlClass}, .${imagePreliminary.htmlClass}.${focusVisible.htmlClass} .${imageTitle.htmlClass}" + )( border :=! "4px solid currentColor" ) ) - val image = style(addClassNames( - imagePreliminary.htmlClass, - focusVisibleImagePreliminary.htmlClass, - backdropImagePreliminary.htmlClass, - markedImagePreliminary.htmlClass, - titleImagePreliminary.htmlClass - )) + val image = style( + addClassNames( + imagePreliminary.htmlClass, + focusVisibleImagePreliminary.htmlClass, + backdropImagePreliminary.htmlClass, + markedImagePreliminary.htmlClass, + titleImagePreliminary.htmlClass + ) + ) + } object DefaultButtonBasesStyle extends ButtonBasesStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/CommonButtonStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/CommonButtonStyle.scala index a50b5fd8..62115249 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/CommonButtonStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/CommonButtonStyle.scala @@ -19,6 +19,7 @@ case class CommonButtonStyle(common: CommonStyle = DefaultCommonStyle) extends S val extendedIcon = style( marginRight(theme.spacing.unit.px) ) + } object DefaultCommonButtonStyle extends CommonButtonStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/CustomizedButtonsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/CustomizedButtonsStyle.scala index 0d42c614..d62bf6be 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/CustomizedButtonsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/CustomizedButtonsStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.scalajs.react.material.ui.core.colors case class CustomizedButtonsStyle(common: CommonButtonStyle = DefaultCommonButtonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -50,6 +51,7 @@ case class CustomizedButtonsStyle(common: CommonButtonStyle = DefaultCommonButto boxShadow := "0 0 0 0.2rem rgba(0,123,255,.5)" ) ) + } object DefaultCustomizedButtonsStyle extends CustomizedButtonsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/FloatingActionButtonsZoomStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/FloatingActionButtonsZoomStyle.scala index f699f6dd..e64220a1 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/FloatingActionButtonsZoomStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/FloatingActionButtonsZoomStyle.scala @@ -3,7 +3,9 @@ package io.kinoplan.demo.styles.demos.Buttons import io.kinoplan.demo.CssSettings._ import io.kinoplan.scalajs.react.material.ui.core.colors -case class FloatingActionButtonsZoomStyle(common: CommonButtonStyle = DefaultCommonButtonStyle) extends StyleSheet.Inline { +case class FloatingActionButtonsZoomStyle(common: CommonButtonStyle = DefaultCommonButtonStyle) + extends StyleSheet.Inline { + import dsl._ val theme = common.theme diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/IconLabelButtonsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/IconLabelButtonsStyle.scala index 084420ec..e513cc68 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/IconLabelButtonsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Buttons/IconLabelButtonsStyle.scala @@ -3,6 +3,7 @@ package io.kinoplan.demo.styles.demos.Buttons import io.kinoplan.demo.CssSettings._ case class IconLabelButtonsStyle(common: CommonButtonStyle = DefaultCommonButtonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -17,6 +18,7 @@ case class IconLabelButtonsStyle(common: CommonButtonStyle = DefaultCommonButton val iconSmall = style( fontSize(20.px) ) + } object DefaultIconLabelButtonsStyle extends IconLabelButtonsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/MediaCardStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/MediaCardStyle.scala index bb564a0e..2c715df9 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/MediaCardStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/MediaCardStyle.scala @@ -16,6 +16,7 @@ class MediaCardStyle extends StyleSheet.Inline { val mediaFit = style( objectFit.cover ) + } object DefaultMediaCardStyle extends MediaCardStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/MediaControlCardStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/MediaControlCardStyle.scala index 9fc3758a..b849be84 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/MediaControlCardStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/MediaControlCardStyle.scala @@ -36,6 +36,7 @@ case class MediaControlCardStyle(common: CommonStyle = DefaultCommonStyle) exten height(38.px), width(38.px) ) + } object DefaultMediaControlCardStyle extends MediaControlCardStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/RecipeReviewCardStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/RecipeReviewCardStyle.scala index a868affe..ad387f67 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/RecipeReviewCardStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/RecipeReviewCardStyle.scala @@ -8,6 +8,7 @@ import io.kinoplan.scalajs.react.material.ui.core.colors import io.kinoplan.scalajs.react.material.ui.core.styles.CreateTransitionsOptions case class RecipeReviewCardStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import dsl._ import common.theme @@ -44,6 +45,7 @@ case class RecipeReviewCardStyle(common: CommonStyle = DefaultCommonStyle) exten val avatar = style( backgroundColor :=! colors.red.`500` ) + } object DefaultRecipeReviewCardStyle extends RecipeReviewCardStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/SimpleCardStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/SimpleCardStyle.scala index dc35ea98..9f8e9efe 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/SimpleCardStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Cards/SimpleCardStyle.scala @@ -22,7 +22,7 @@ class SimpleCardStyle extends StyleSheet.Inline { val pos = style( marginBottom(12.px) ) + } object DefaultSimpleCardStyle extends SimpleCardStyle - diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsArrayStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsArrayStyle.scala index 499df0e2..1f81b917 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsArrayStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsArrayStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ChipsArrayStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import dsl._ import common.theme @@ -17,6 +18,7 @@ case class ChipsArrayStyle(common: CommonStyle = DefaultCommonStyle) extends Sty val chip = style( margin((theme.spacing.unit / 2).px) ) + } object DefaultChipsArrayStyle extends ChipsArrayStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsPlaygroundStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsPlaygroundStyle.scala index f9d968dc..2efabe8c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsPlaygroundStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsPlaygroundStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ChipsPlaygroundStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import dsl._ import common.theme @@ -18,7 +19,7 @@ case class ChipsPlaygroundStyle(common: CommonStyle = DefaultCommonStyle) extend val chipWrapper = style( marginBottom((theme.spacing.unit * 5).px) ) + } object DefaultChipsPlaygroundStyle extends ChipsPlaygroundStyle - diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsStyle.scala index d2348e6a..a68c2665 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Chips/ChipsStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ChipsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import dsl._ import common.theme @@ -16,6 +17,7 @@ case class ChipsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleShe val chip = style( margin(theme.spacing.unit.px) ) + } object DefaultChipsStyle extends ChipsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dialogs/ConfirmationDialogStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dialogs/ConfirmationDialogStyle.scala index de14985d..720bd587 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dialogs/ConfirmationDialogStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dialogs/ConfirmationDialogStyle.scala @@ -17,6 +17,7 @@ case class ConfirmationDialogStyle(common: CommonStyle = DefaultCommonStyle) ext width(80.%%), maxWidth(435.px) ) + } object DefaultConfirmationDialogStyle extends ConfirmationDialogStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dialogs/DialogsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dialogs/DialogsStyle.scala index 8ba7bf02..5621c860 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dialogs/DialogsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dialogs/DialogsStyle.scala @@ -5,6 +5,7 @@ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.colors case class DialogsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import dsl._ import common.theme @@ -60,6 +61,7 @@ case class DialogsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleS margin(0.px), padding(theme.spacing.unit.px) ) + } object DefaultDialogsStyle extends DialogsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dividers/DividersStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dividers/DividersStyle.scala index 966989fc..dc62591a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dividers/DividersStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Dividers/DividersStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class DividersStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -37,6 +38,7 @@ case class DividersStyle(common: CommonStyle = DefaultCommonStyle) extends Style val section3 = style( margin :=! s"${theme.spacing.unit * 6}px ${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px" ) + } object DefaultDividersStyle extends DividersStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/DrawersStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/DrawersStyle.scala index 8240394a..fd36f889 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/DrawersStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/DrawersStyle.scala @@ -12,6 +12,7 @@ class DrawersStyle extends StyleSheet.Inline { val fullList = style( width.auto ) + } object DefaultDrawersStyle extends DrawersStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/MiniDrawerStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/MiniDrawerStyle.scala index 742f040d..96fb1238 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/MiniDrawerStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/MiniDrawerStyle.scala @@ -131,6 +131,7 @@ case class MiniDrawerStyle(common: CommonStyle = DefaultCommonStyle) extends Sty backgroundColor :=! theme.palette.background.default, padding((theme.spacing.unit * 3).px) ) + } object DefaultMiniDrawerStyle extends MiniDrawerStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/PersistentDrawerStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/PersistentDrawerStyle.scala index 718e0a97..c428da0a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/PersistentDrawerStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/PersistentDrawerStyle.scala @@ -146,6 +146,7 @@ case class PersistentDrawerStyle(common: CommonStyle = DefaultCommonStyle) exten val contentShiftRight = style( marginRight(0.px) ) + } object DefaultPersistentDrawerStyle extends PersistentDrawerStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/ResponsiveDrawerStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/ResponsiveDrawerStyle.scala index 125892e2..f2008237 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/ResponsiveDrawerStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Drawers/ResponsiveDrawerStyle.scala @@ -65,6 +65,7 @@ case class ResponsiveDrawerStyle(common: CommonStyle = DefaultCommonStyle) exten backgroundColor :=! theme.palette.background.default, padding((theme.spacing.unit * 3).px) ) + } object DefaultResponsiveDrawerStyle extends ResponsiveDrawerStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/ControlledExpansionPanelsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/ControlledExpansionPanelsStyle.scala index 50ab4944..21f90b9a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/ControlledExpansionPanelsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/ControlledExpansionPanelsStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ControlledExpansionPanelsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -21,6 +22,7 @@ case class ControlledExpansionPanelsStyle(common: CommonStyle = DefaultCommonSty fontSize :=! theme.typography.pxToRem(15), color :=! theme.palette.text.secondary ) + } object DefaultControlledExpansionPanelsStyle extends ControlledExpansionPanelsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/CustomizedExpansionPanelStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/CustomizedExpansionPanelStyle.scala index dfe4a31b..3d1b4afd 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/CustomizedExpansionPanelStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/CustomizedExpansionPanelStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class CustomizedExpansionPanelStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -43,6 +44,7 @@ case class CustomizedExpansionPanelStyle(common: CommonStyle = DefaultCommonStyl val detailsRoot = style( padding((theme.spacing.unit * 2).px) ) + } object DefaultCustomizedExpansionPanelStyle extends CustomizedExpansionPanelStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/DetailedExpansionPanelStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/DetailedExpansionPanelStyle.scala index 1d1749ad..23c3ad2a 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/DetailedExpansionPanelStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/DetailedExpansionPanelStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class DetailedExpansionPanelStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -46,6 +47,7 @@ case class DetailedExpansionPanelStyle(common: CommonStyle = DefaultCommonStyle) textDecoration := "underline" ) ) + } object DefaultDetailedExpansionPanelStyle extends DetailedExpansionPanelStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/SimpleExpansionPanelStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/SimpleExpansionPanelStyle.scala index bc150a5c..067e3ab6 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/SimpleExpansionPanelStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/ExpansionPanels/SimpleExpansionPanelStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class SimpleExpansionPanelStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -15,6 +16,7 @@ case class SimpleExpansionPanelStyle(common: CommonStyle = DefaultCommonStyle) e fontSize :=! theme.typography.pxToRem(15), fontWeight :=! theme.typography.fontWeightRegular.px ) + } object DefaultSimpleExpansionPanelStyle extends SimpleExpansionPanelStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/AdvancedGridListStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/AdvancedGridListStyle.scala index 3d356436..aa0c585c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/AdvancedGridListStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/AdvancedGridListStyle.scala @@ -28,6 +28,7 @@ case class AdvancedGridListStyle(common: CommonStyle = DefaultCommonStyle) exten val iconStyle = style( color.white ) + } object DefaultAdvancedGridListStyle extends AdvancedGridListStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/ImageGridListStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/ImageGridListStyle.scala index 9b1e892a..0714ef54 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/ImageGridListStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/ImageGridListStyle.scala @@ -19,6 +19,7 @@ case class ImageGridListStyle(common: CommonStyle = DefaultCommonStyle) extends width(500.px), height(450.px) ) + } object DefaultImageGridListStyle extends ImageGridListStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/SingleLineGridListStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/SingleLineGridListStyle.scala index 227bdb6e..55cf2e83 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/SingleLineGridListStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/SingleLineGridListStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class SingleLineGridListStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -28,6 +29,7 @@ case class SingleLineGridListStyle(common: CommonStyle = DefaultCommonStyle) ext val titleBar = style( background := "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)" ) + } object DefaultSingleLineGridListStyle extends SingleLineGridListStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/TitlebarGridListStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/TitlebarGridListStyle.scala index 44668743..3e5f94fe 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/TitlebarGridListStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/GridList/TitlebarGridListStyle.scala @@ -23,6 +23,7 @@ case class TitlebarGridListStyle(common: CommonStyle = DefaultCommonStyle) exten val iconStyle = style( color :=! "rgba(255, 255, 255, 0.54)" ) + } object DefaultTitlebarGridListStyle extends TitlebarGridListStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/InteractiveListStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/InteractiveListStyle.scala index b2b98612..2bf0d495 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/InteractiveListStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/InteractiveListStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class InteractiveListStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -17,6 +18,7 @@ case class InteractiveListStyle(common: CommonStyle = DefaultCommonStyle) extend val title = style( margin :=! s"${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px" ) + } object DefaultInteractiveListStyle extends InteractiveListStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/ListStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/ListStyle.scala index dfca85bb..ea4d27ba 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/ListStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/ListStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ListStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -21,6 +22,7 @@ case class ListStyle(common: CommonStyle = DefaultCommonStyle) extends StyleShee val inline = style( display.inline ) + } object DefaultListStyle extends ListStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/PinnedSubheaderListStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/PinnedSubheaderListStyle.scala index bed62b5a..fa8ae166 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/PinnedSubheaderListStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Lists/PinnedSubheaderListStyle.scala @@ -24,6 +24,7 @@ case class PinnedSubheaderListStyle(common: CommonStyle = DefaultCommonStyle) ex backgroundColor.inherit, padding(0.px) ) + } object DefaultPinnedSubheaderListStyle extends PinnedSubheaderListStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Menus/ListItemCompositionStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Menus/ListItemCompositionStyle.scala index 25dac6d5..51186461 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Menus/ListItemCompositionStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Menus/ListItemCompositionStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ListItemCompositionStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -18,7 +19,9 @@ case class ListItemCompositionStyle(common: CommonStyle = DefaultCommonStyle) ex val icon = style() private val preliminaryFocus = style( - unsafeRoot(s".${item.htmlClass}:focus .${primary.htmlClass}, .${item.htmlClass}:focus .${icon.htmlClass}")( + unsafeRoot( + s".${item.htmlClass}:focus .${primary.htmlClass}, .${item.htmlClass}:focus .${icon.htmlClass}" + )( color :=! theme.palette.common.white ) ) @@ -27,6 +30,7 @@ case class ListItemCompositionStyle(common: CommonStyle = DefaultCommonStyle) ex item.htmlClass, preliminaryFocus.htmlClass )) + } object DefaultListItemCompositionStyle extends ListItemCompositionStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Menus/TypographyMenuStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Menus/TypographyMenuStyle.scala index b7ea84ef..9bd7a7cd 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Menus/TypographyMenuStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Menus/TypographyMenuStyle.scala @@ -8,6 +8,7 @@ class TypographyMenuStyle extends StyleSheet.Inline { val root = style( width(230.px) ) + } object DefaultTypographyMenuStyle extends TypographyMenuStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Paper/PaperStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Paper/PaperStyle.scala index cb0b3937..2b8318c5 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Paper/PaperStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Paper/PaperStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class PaperStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -12,6 +13,7 @@ case class PaperStyle(common: CommonStyle = DefaultCommonStyle) extends StyleShe paddingTop((theme.spacing.unit * 2).px), paddingBottom((theme.spacing.unit * 2).px) ) + } object DefaultPaperStyle extends PaperStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Pickers/PickersStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Pickers/PickersStyle.scala index 2d08ae47..f7914861 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Pickers/PickersStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Pickers/PickersStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class PickersStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -21,6 +22,7 @@ case class PickersStyle(common: CommonStyle = DefaultCommonStyle) extends StyleS val grid = style( width(60.%%) ) + } object DefaultPickersStyle extends PickersStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CircularIntegrationStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CircularIntegrationStyle.scala index 3cb02391..f25ce94d 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CircularIntegrationStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CircularIntegrationStyle.scala @@ -5,6 +5,7 @@ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.colors case class CircularIntegrationStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -41,6 +42,7 @@ case class CircularIntegrationStyle(common: CommonStyle = DefaultCommonStyle) ex marginTop(-12.px), marginLeft(-12.px) ) + } object DefaultCircularIntegrationStyle extends CircularIntegrationStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CircularProgressStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CircularProgressStyle.scala index 4de9eb10..f3ecc701 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CircularProgressStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CircularProgressStyle.scala @@ -4,12 +4,14 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class CircularProgressStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ val progress = style( margin((theme.spacing.unit * 2).px) ) + } object DefaultCircularProgressStyle extends CircularProgressStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CustomizedProgressStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CustomizedProgressStyle.scala index 7d641228..6fe8bc59 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CustomizedProgressStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/CustomizedProgressStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class CustomizedProgressStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -35,6 +36,7 @@ case class CustomizedProgressStyle(common: CommonStyle = DefaultCommonStyle) ext position.absolute, left(0.px) ) + } object DefaultCustomizedProgressStyle extends CustomizedProgressStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/DelayingAppearanceStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/DelayingAppearanceStyle.scala index 66e9adc1..246ea877 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/DelayingAppearanceStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Progress/DelayingAppearanceStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class DelayingAppearanceStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -20,6 +21,7 @@ case class DelayingAppearanceStyle(common: CommonStyle = DefaultCommonStyle) ext val placeholder = style( height(40.px) ) + } object DefaultDelayingAppearanceStyle extends DelayingAppearanceStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/ControlButtonsGroupStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/ControlButtonsGroupStyle.scala index 1ec380af..f670284f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/ControlButtonsGroupStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/ControlButtonsGroupStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ControlButtonsGroupStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -18,6 +19,7 @@ case class ControlButtonsGroupStyle(common: CommonStyle = DefaultCommonStyle) ex val group = style( margin :=! s"${theme.spacing.unit}px 0" ) + } object DefaultControlButtonsGroupStyle extends ControlButtonsGroupStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/CustomControlStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/CustomControlStyle.scala index d270e5f4..447418de 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/CustomControlStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/CustomControlStyle.scala @@ -19,10 +19,13 @@ case class CustomControlStyle(common: CommonStyle = DefaultCommonStyle) extends ) ) - val root = style(addClassNames( - preliminaryRoot.htmlClass, - preliminaryChecked.htmlClass - )) + val root = style( + addClassNames( + preliminaryRoot.htmlClass, + preliminaryChecked.htmlClass + ) + ) + } object DefaultCustomControlStyle extends CustomControlStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/CustomizedSwitchesStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/CustomizedSwitchesStyle.scala index 051d9232..f8dc3665 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/CustomizedSwitchesStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/SelectionControls/CustomizedSwitchesStyle.scala @@ -8,6 +8,7 @@ import io.kinoplan.scalajs.react.material.ui.core.colors import io.kinoplan.scalajs.react.material.ui.core.styles.CreateTransitionsOptions case class CustomizedSwitchesStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -62,54 +63,69 @@ case class CustomizedSwitchesStyle(common: CommonStyle = DefaultCommonStyle) ext ) ) - val iOSChecked = style(addClassNames( - iOSCheckedTransform.htmlClass, - iOSCheckedCond.htmlClass - )) + val iOSChecked = style( + addClassNames( + iOSCheckedTransform.htmlClass, + iOSCheckedCond.htmlClass + ) + ) private val iOSSwitchTransition = style( transition := iOSSwitchBaseTransition ) private val iOSSwitchBaseBar = style( - unsafeRoot(s".${iOSSwitchTransition.htmlClass}.${iOSCheckedTransform.htmlClass} + .${iOSBar.htmlClass}")( + unsafeRoot( + s".${iOSSwitchTransition.htmlClass}.${iOSCheckedTransform.htmlClass} + .${iOSBar.htmlClass}" + )( backgroundColor :=! "#52d869" ) ) private val iOSSwitchBaseChecked = style( - unsafeRoot(s".${iOSSwitchTransition.htmlClass}.${iOSCheckedTransform.htmlClass}")( + unsafeRoot( + s".${iOSSwitchTransition.htmlClass}.${iOSCheckedTransform.htmlClass}" + )( color :=! theme.palette.common.white ) ) - val iOSSwitchBase = style(addClassNames( - iOSSwitchTransition.htmlClass, - iOSSwitchBaseChecked.htmlClass, - iOSSwitchBaseBar.htmlClass - )) + val iOSSwitchBase = style( + addClassNames( + iOSSwitchTransition.htmlClass, + iOSSwitchBaseChecked.htmlClass, + iOSSwitchBaseBar.htmlClass + ) + ) private val colorSwitchBaseColor = style( color :=! colors.purple.`300` ) private val colorSwitchBaseBar = style( - unsafeRoot(s".${colorSwitchBaseColor.htmlClass}.${colorChecked.htmlClass} + .${colorBar.htmlClass}")( + unsafeRoot( + s".${colorSwitchBaseColor.htmlClass}.${colorChecked.htmlClass} + .${colorBar.htmlClass}" + )( backgroundColor :=! colors.purple.`500` ) ) private val colorSwitchBaseChecked = style( - unsafeRoot(s".${colorSwitchBaseColor.htmlClass}.${colorChecked.htmlClass}")( + unsafeRoot( + s".${colorSwitchBaseColor.htmlClass}.${colorChecked.htmlClass}" + )( color :=! colors.purple.`500` ) ) - val colorSwitchBase = style(addClassNames( - colorSwitchBaseColor.htmlClass, - colorSwitchBaseChecked.htmlClass, - colorSwitchBaseBar.htmlClass - )) + val colorSwitchBase = style( + addClassNames( + colorSwitchBaseColor.htmlClass, + colorSwitchBaseChecked.htmlClass, + colorSwitchBaseBar.htmlClass + ) + ) + } object DefaultCustomizedSwitchesStyle extends CustomizedSwitchesStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/ControlledOpenSelectStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/ControlledOpenSelectStyle.scala index 0d80e90f..4c77e86c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/ControlledOpenSelectStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/ControlledOpenSelectStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ControlledOpenSelectStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -16,6 +17,7 @@ case class ControlledOpenSelectStyle(common: CommonStyle = DefaultCommonStyle) e margin(theme.spacing.unit.px), minWidth(120.px) ) + } object DefaultControlledOpenSelectStyle extends ControlledOpenSelectStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/CustomizedSelectsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/CustomizedSelectsStyle.scala index 42f0dc38..b67a49ec 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/CustomizedSelectsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/CustomizedSelectsStyle.scala @@ -6,6 +6,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class CustomizedSelectsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/MultipleSelectStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/MultipleSelectStyle.scala index 6e1290de..579aeb90 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/MultipleSelectStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/MultipleSelectStyle.scala @@ -31,6 +31,7 @@ case class MultipleSelectStyle(common: CommonStyle = DefaultCommonStyle) extends val noLabel = style( marginTop((theme.spacing.unit * 3).px) ) + } object DefaultMultipleSelectStyle extends MultipleSelectStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/SelectStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/SelectStyle.scala index d2ed36aa..71047a9b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/SelectStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Selects/SelectStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class SelectStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -20,6 +21,7 @@ case class SelectStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSh val selectEmpty = style( marginTop((theme.spacing.unit * 2).px) ) + } object DefaultSelectStyle extends SelectStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/CustomizedSnackbarsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/CustomizedSnackbarsStyle.scala index 63e0c18a..72955cbf 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/CustomizedSnackbarsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/CustomizedSnackbarsStyle.scala @@ -4,12 +4,14 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class CustomizedSnackbarsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ val snackbar = style( margin(theme.spacing.unit.px) ) + } object DefaultCustomizedSnackbarsStyle extends CustomizedSnackbarsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/FabIntegrationSnackbarStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/FabIntegrationSnackbarStyle.scala index 30a060cd..e53576db 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/FabIntegrationSnackbarStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/FabIntegrationSnackbarStyle.scala @@ -7,6 +7,7 @@ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.styles.CreateTransitionsOptions case class FabIntegrationSnackbarStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -73,6 +74,7 @@ case class FabIntegrationSnackbarStyle(common: CommonStyle = DefaultCommonStyle) val snackbarContent = style( width(360.px) ) + } object DefaultFabIntegrationSnackbarStyle extends FabIntegrationSnackbarStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/MySnackbarContentWrapperStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/MySnackbarContentWrapperStyle.scala index 3784a14c..bb2fbed7 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/MySnackbarContentWrapperStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/MySnackbarContentWrapperStyle.scala @@ -5,6 +5,7 @@ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.colors case class MySnackbarContentWrapperStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -26,10 +27,10 @@ case class MySnackbarContentWrapperStyle(common: CommonStyle = DefaultCommonStyl def get(variant: String) = variant match { case "success" => success - case "error" => error - case "info" => info + case "error" => error + case "info" => info case "warning" => warning - case _ => style() + case _ => style() } val icon = style( @@ -45,6 +46,7 @@ case class MySnackbarContentWrapperStyle(common: CommonStyle = DefaultCommonStyl display.flex, alignItems.center ) + } object DefaultMySnackbarContentWrapperStyle extends MySnackbarContentWrapperStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/SimpleSnackbarStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/SimpleSnackbarStyle.scala index 2d904d68..116235cd 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/SimpleSnackbarStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Snackbars/SimpleSnackbarStyle.scala @@ -4,12 +4,14 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class SimpleSnackbarStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ val close = style( padding((theme.spacing.unit / 2).px) ) + } object DefaultSimpleSnackbarStyle extends SimpleSnackbarStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/CustomizedStepperStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/CustomizedStepperStyle.scala index 1ba514f7..0a9d0582 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/CustomizedStepperStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/CustomizedStepperStyle.scala @@ -6,6 +6,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class CustomizedStepperStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -31,7 +32,9 @@ case class CustomizedStepperStyle(common: CommonStyle = DefaultCommonStyle) exte val connectorActive = style() val connectorActiveRoot = style( - unsafeRoot(s".${connectorActive.htmlClass} .${connectorLine.htmlClass}")( + unsafeRoot( + s".${connectorActive.htmlClass} .${connectorLine.htmlClass}" + )( borderColor :=! theme.palette.secondary.main ) ) @@ -39,7 +42,9 @@ case class CustomizedStepperStyle(common: CommonStyle = DefaultCommonStyle) exte val connectorCompleted = style() val connectorCompletedRoot = style( - unsafeRoot(s".${connectorCompleted.htmlClass} .${connectorLine.htmlClass}")( + unsafeRoot( + s".${connectorCompleted.htmlClass} .${connectorLine.htmlClass}" + )( borderColor :=! theme.palette.primary.main ) ) @@ -47,10 +52,13 @@ case class CustomizedStepperStyle(common: CommonStyle = DefaultCommonStyle) exte val connectorDisabled = style() val connectorDisabledRoot = style( - unsafeRoot(s".${connectorDisabled.htmlClass} .${connectorLine.htmlClass}")( + unsafeRoot( + s".${connectorDisabled.htmlClass} .${connectorLine.htmlClass}" + )( borderColor :=! theme.palette.grey.`100` ) ) + } object DefaultCustomizedStepperStyle extends CustomizedStepperStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/MobileStepperStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/MobileStepperStyle.scala index 1d8eb049..f6d41de8 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/MobileStepperStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/MobileStepperStyle.scala @@ -12,6 +12,7 @@ case class MobileStepperStyle(common: CommonStyle = DefaultCommonStyle) extends maxWidth(400.px), flexGrow(1) ) + } object DefaultMobileStepperStyle extends MobileStepperStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/StepperStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/StepperStyle.scala index 6fd362da..b1e014f2 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/StepperStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/StepperStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class StepperStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -23,6 +24,7 @@ case class StepperStyle(common: CommonStyle = DefaultCommonStyle) extends StyleS marginTop(theme.spacing.unit.px), marginBottom(theme.spacing.unit.px) ) + } object DefaultStepperStyle extends StepperStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/TextMobileStepperStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/TextMobileStepperStyle.scala index aecb8d10..8f048a68 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/TextMobileStepperStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/TextMobileStepperStyle.scala @@ -22,11 +22,8 @@ case class TextMobileStepperStyle(common: CommonStyle = DefaultCommonStyle) exte ) val headerPaper = styleF.bool(isLight => - if (isLight) { - styleS(backgroundColor :=! colors.grey.`50`) - } else { - styleS(backgroundColor :=! "#303030") - } + if (isLight) styleS(backgroundColor :=! colors.grey.`50`) + else styleS(backgroundColor :=! "#303030") ) val img = style( @@ -36,6 +33,7 @@ case class TextMobileStepperStyle(common: CommonStyle = DefaultCommonStyle) exte display.block, width(100.%%) ) + } object DefaultTextMobileStepperStyle extends TextMobileStepperStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/VerticalLinearStepperStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/VerticalLinearStepperStyle.scala index 1b4bfb5f..9d992aa9 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/VerticalLinearStepperStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Steppers/VerticalLinearStepperStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class VerticalLinearStepperStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -17,12 +18,13 @@ case class VerticalLinearStepperStyle(common: CommonStyle = DefaultCommonStyle) ) val actionsContainer = style( - marginBottom((theme.spacing.unit * 2).px), + marginBottom((theme.spacing.unit * 2).px) ) val resetContainer = style( padding((theme.spacing.unit * 3).px) ) + } object DefaultVerticalLinearStepperStyle extends VerticalLinearStepperStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/CustomizedTableStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/CustomizedTableStyle.scala index 07ff8700..66a68dbe 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/CustomizedTableStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/CustomizedTableStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class CustomizedTableStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -35,6 +36,7 @@ case class CustomizedTableStyle(common: CommonStyle = DefaultCommonStyle) extend val body = style( fontSize(14.px) ) + } object DefaultCustomizedTableStyle extends CustomizedTableStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/EnhancedTableStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/EnhancedTableStyle.scala index a8ec0886..b8cb3115 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/EnhancedTableStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/EnhancedTableStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class EnhancedTableStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -19,6 +20,7 @@ case class EnhancedTableStyle(common: CommonStyle = DefaultCommonStyle) extends val tableWrapper = style( overflowX.auto ) + } object DefaultEnhancedTableStyle extends EnhancedTableStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/EnhancedTableToolbarStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/EnhancedTableToolbarStyle.scala index 16493462..627e9a8b 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/EnhancedTableToolbarStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/EnhancedTableToolbarStyle.scala @@ -5,6 +5,7 @@ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.styles.colorManipulator case class EnhancedTableToolbarStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -13,17 +14,14 @@ case class EnhancedTableToolbarStyle(common: CommonStyle = DefaultCommonStyle) e ) val highlight = styleF.bool(isLight => - if (isLight) { - styleS( - color :=! theme.palette.secondary.main, - backgroundColor :=! colorManipulator.lighten(theme.palette.secondary.light, 0.85) - ) - } else { - styleS( - color :=! theme.palette.text.primary, - backgroundColor :=! theme.palette.secondary.dark - ) - } + if (isLight) styleS( + color :=! theme.palette.secondary.main, + backgroundColor :=! colorManipulator.lighten(theme.palette.secondary.light, 0.85) + ) + else styleS( + color :=! theme.palette.text.primary, + backgroundColor :=! theme.palette.secondary.dark + ) ) val spacer = style( @@ -37,6 +35,7 @@ case class EnhancedTableToolbarStyle(common: CommonStyle = DefaultCommonStyle) e val title = style( flex := "0 0 auto" ) + } object DefaultEnhancedTableToolbarStyle extends EnhancedTableToolbarStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/SimpleTableStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/SimpleTableStyle.scala index 65e3a9dc..87235830 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/SimpleTableStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tables/SimpleTableStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class SimpleTableStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -20,6 +21,7 @@ case class SimpleTableStyle(common: CommonStyle = DefaultCommonStyle) extends St val tableContainer = style( height(320.px) ) + } object DefaultSimpleTableStyle extends SimpleTableStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tabs/CustomizedTabsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tabs/CustomizedTabsStyle.scala index d0865013..1f0f7dfe 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tabs/CustomizedTabsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tabs/CustomizedTabsStyle.scala @@ -53,20 +53,25 @@ case class CustomizedTabsStyle(common: CommonStyle = DefaultCommonStyle) extends ) private val tabSelectedPreliminary = style( - unsafeRoot(s".${tabRootPreliminary.htmlClass}.${tabSelected.htmlClass}")( + unsafeRoot( + s".${tabRootPreliminary.htmlClass}.${tabSelected.htmlClass}" + )( color :=! "#1890ff", fontWeight :=! theme.typography.fontWeightMedium.px ) ) - val tabRoot = style(addClassNames( - tabRootPreliminary.htmlClass, - tabSelectedPreliminary.htmlClass - )) + val tabRoot = style( + addClassNames( + tabRootPreliminary.htmlClass, + tabSelectedPreliminary.htmlClass + ) + ) val typography = style( padding((theme.spacing.unit * 3).px) ) + } object DefaultCustomizedTabsStyle extends CustomizedTabsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tabs/IconTabsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tabs/IconTabsStyle.scala index 41f2bd5e..9cf3bb84 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tabs/IconTabsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tabs/IconTabsStyle.scala @@ -10,6 +10,7 @@ case class IconTabsStyle(common: CommonStyle = DefaultCommonStyle) extends Style flexGrow(1), width(500.px) ) + } object DefaultIconTabsStyle extends IconTabsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/ComponentTextFieldStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/ComponentTextFieldStyle.scala index c00a85fe..8cd8b5b0 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/ComponentTextFieldStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/ComponentTextFieldStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ComponentTextFieldStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -15,6 +16,7 @@ case class ComponentTextFieldStyle(common: CommonStyle = DefaultCommonStyle) ext val formControl = style( margin(theme.spacing.unit.px) ) + } object DefaultComponentTextFieldStyle extends ComponentTextFieldStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/CustomizedInputBaseStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/CustomizedInputBaseStyle.scala index ced1b6bb..cb3f5148 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/CustomizedInputBaseStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/CustomizedInputBaseStyle.scala @@ -27,6 +27,7 @@ case class CustomizedInputBaseStyle(common: CommonStyle = DefaultCommonStyle) ex height(28.px), margin(4.px) ) + } object DefaultCustomizedInputBaseStyle extends CustomizedInputBaseStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/CustomizedInputsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/CustomizedInputsStyle.scala index d4e25ba2..027cfc85 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/CustomizedInputsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/CustomizedInputsStyle.scala @@ -7,6 +7,7 @@ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.colors case class CustomizedInputsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -40,7 +41,9 @@ case class CustomizedInputsStyle(common: CommonStyle = DefaultCommonStyle) exten val cssOutlinedInput = style() val cssOutlinedInputPreliminary = style( - unsafeRoot(s".${cssOutlinedInput.htmlClass}.${cssFocused.htmlClass} .${notchedOutline.htmlClass}")( + unsafeRoot( + s".${cssOutlinedInput.htmlClass}.${cssFocused.htmlClass} .${notchedOutline.htmlClass}" + )( borderColor :=! colors.purple.`500` ) ) diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/InputAdornmentsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/InputAdornmentsStyle.scala index 6fdf9b09..6aa9439c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/InputAdornmentsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/InputAdornmentsStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class InputAdornmentsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -27,6 +28,7 @@ case class InputAdornmentsStyle(common: CommonStyle = DefaultCommonStyle) extend val textField = style( flexBasis := 200.px ) + } object DefaultInputAdornmentsStyle extends InputAdornmentsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/TextFieldsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/TextFieldsStyle.scala index 3ae1be45..7ab526c8 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/TextFieldsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/TextFieldsStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class TextFieldsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -25,6 +26,7 @@ case class TextFieldsStyle(common: CommonStyle = DefaultCommonStyle) extends Sty val menu = style( width(200.px) ) + } object DefaultTextFieldsStyle extends TextFieldsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/VariantTextFieldsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/VariantTextFieldsStyle.scala index 881427a8..80840dea 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/VariantTextFieldsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/TextFields/VariantTextFieldsStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class VariantTextFieldsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -24,6 +25,7 @@ case class VariantTextFieldsStyle(common: CommonStyle = DefaultCommonStyle) exte val menu = style( width(200.px) ) + } object DefaultVariantTextFieldsStyle extends VariantTextFieldsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/InteractiveTooltipsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/InteractiveTooltipsStyle.scala index a8800f72..ab095d72 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/InteractiveTooltipsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/InteractiveTooltipsStyle.scala @@ -4,12 +4,14 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class InteractiveTooltipsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ val button = style( margin(theme.spacing.unit.px) ) + } object DefaultInteractiveTooltipsStyle extends InteractiveTooltipsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/PositionedTooltipsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/PositionedTooltipsStyle.scala index 5ce6c980..d87bc7fa 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/PositionedTooltipsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/PositionedTooltipsStyle.scala @@ -9,6 +9,7 @@ case class PositionedTooltipsStyle(common: CommonStyle = DefaultCommonStyle) ext val root = style( width(500.px) ) + } object DefaultPositionedTooltipsStyle extends PositionedTooltipsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/SimpleTooltipsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/SimpleTooltipsStyle.scala index 984ba8e5..e62d3c77 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/SimpleTooltipsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/SimpleTooltipsStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class SimpleTooltipsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -16,6 +17,7 @@ case class SimpleTooltipsStyle(common: CommonStyle = DefaultCommonStyle) extends bottom((theme.spacing.unit * 2).px), right((theme.spacing.unit * 3).px) ) + } object DefaultSimpleTooltipsStyle extends SimpleTooltipsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/VariableWidthStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/VariableWidthStyle.scala index adf9575c..e268a825 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/VariableWidthStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/demos/Tooltips/VariableWidthStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class VariableWidthStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -18,6 +19,7 @@ case class VariableWidthStyle(common: CommonStyle = DefaultCommonStyle) extends val noMaxWidth = style( maxWidth.none ) + } object DefaultVariableWidthStyle extends VariableWidthStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Breadcrumbs/BreadcrumbsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Breadcrumbs/BreadcrumbsStyle.scala index 8483ddd9..49c0e1f6 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Breadcrumbs/BreadcrumbsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Breadcrumbs/BreadcrumbsStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class BreadcrumbsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -25,6 +26,7 @@ case class BreadcrumbsStyle(common: CommonStyle = DefaultCommonStyle) extends St width(20.px), height(20.px) ) + } object DefaultBreadcrumbsStyle extends BreadcrumbsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Breadcrumbs/CustomizedBreadcrumbsStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Breadcrumbs/CustomizedBreadcrumbsStyle.scala index 7f519179..e476d76c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Breadcrumbs/CustomizedBreadcrumbsStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Breadcrumbs/CustomizedBreadcrumbsStyle.scala @@ -5,6 +5,7 @@ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} import io.kinoplan.scalajs.react.material.ui.core.styles.colorManipulator.emphasize case class CustomizedBreadcrumbsStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -30,6 +31,7 @@ case class CustomizedBreadcrumbsStyle(common: CommonStyle = DefaultCommonStyle) background := "none", marginRight((-theme.spacing.unit * 1.5).px) ) + } object DefaultCustomizedBreadcrumbsStyle extends CustomizedBreadcrumbsStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/DisabledSliderStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/DisabledSliderStyle.scala index bef7cfdc..68782d70 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/DisabledSliderStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/DisabledSliderStyle.scala @@ -13,6 +13,7 @@ case class DisabledSliderStyle(common: CommonStyle = DefaultCommonStyle) extends val slider = style( padding(8.px, 0.px) ) + } object DefaultDisabledSliderStyle extends DisabledSliderStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/SliderStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/SliderStyle.scala index 020884fc..6a5b23f9 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/SliderStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/SliderStyle.scala @@ -21,6 +21,7 @@ case class SliderStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSh val thumbIconWrapper = style( backgroundColor :=! "#2196f3" ) + } object DefaultSliderStyle extends SliderStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/VerticalSliderStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/VerticalSliderStyle.scala index acac96c9..f2f50fc1 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/VerticalSliderStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/labs/Slider/VerticalSliderStyle.scala @@ -14,6 +14,7 @@ case class VerticalSliderStyle(common: CommonStyle = DefaultCommonStyle) extends val slider = style( padding(0.px, 22.px) ) + } object DefaultVerticalSliderStyle extends VerticalSliderStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/labs/SpeedDial/SpeedDialStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/labs/SpeedDial/SpeedDialStyle.scala index dc024c01..2fdfc016 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/labs/SpeedDial/SpeedDialStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/labs/SpeedDial/SpeedDialStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class SpeedDialStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -16,6 +17,7 @@ case class SpeedDialStyle(common: CommonStyle = DefaultCommonStyle) extends Styl float.right, bottom((theme.spacing.unit * 2).px) ) + } object DefaultSpeedDialStyle extends SpeedDialStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/styles/labs/ToggleButton/ToggleButtonStyle.scala b/demo/src/main/scala/io/kinoplan/demo/styles/labs/ToggleButton/ToggleButtonStyle.scala index 55e498d1..e3609731 100644 --- a/demo/src/main/scala/io/kinoplan/demo/styles/labs/ToggleButton/ToggleButtonStyle.scala +++ b/demo/src/main/scala/io/kinoplan/demo/styles/labs/ToggleButton/ToggleButtonStyle.scala @@ -4,6 +4,7 @@ import io.kinoplan.demo.CssSettings._ import io.kinoplan.demo.styles.{CommonStyle, DefaultCommonStyle} case class ToggleButtonStyle(common: CommonStyle = DefaultCommonStyle) extends StyleSheet.Inline { + import common.theme import dsl._ @@ -16,6 +17,7 @@ case class ToggleButtonStyle(common: CommonStyle = DefaultCommonStyle) extends S margin(theme.spacing.unit.px, 0.px), background := theme.palette.background.default ) + } object DefaultToggleButtonStyle extends ToggleButtonStyle diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/CSSUtils.scala b/demo/src/main/scala/io/kinoplan/demo/utils/CSSUtils.scala index e9c7e4b3..09f6e7b1 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/CSSUtils.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/CSSUtils.scala @@ -3,15 +3,17 @@ package io.kinoplan.demo.utils import org.scalajs.dom.{HTMLStyleElement, document} object CSSUtils { + def createStyleElement(styleStr: String): HTMLStyleElement = { val e = document.createElement("style").asInstanceOf[HTMLStyleElement] e.`type` = "text/css" - e appendChild document.createTextNode(styleStr) + e.appendChild(document.createTextNode(styleStr)) e } def installStyle(style: HTMLStyleElement): Unit = { - document.head appendChild style + document.head.appendChild(style) () } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/Helpers.scala b/demo/src/main/scala/io/kinoplan/demo/utils/Helpers.scala index b3a6055b..e0b932ba 100755 --- a/demo/src/main/scala/io/kinoplan/demo/utils/Helpers.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/Helpers.scala @@ -9,6 +9,7 @@ import japgolly.scalajs.react.vdom.VdomNode import scalacss.internal.StyleA object Helpers { + implicit class StringExtended(value: String) { val toVdom = VdomNode(value) } @@ -18,14 +19,15 @@ object Helpers { } implicit class ExtendedStyle(css: StyleA) { + def toDictionary: js.Dictionary[String] = { val result = js.Dictionary.empty[String] css.style.data.values.flatMap(_.avIterator).foreach { property => // Map CSS property name to react style naming convention. // For example: padding-top => paddingTop val propertyName = property.attr.id.split("-") match { - case Array(head, other@_*) => head + other.map(_.capitalize).mkString - case _ => throw new Throwable("Css property name is empty for toDictionary implicit") + case Array(head, other @ _*) => head + other.map(_.capitalize).mkString + case _ => throw new Throwable("Css property name is empty for toDictionary implicit") } result(propertyName) = property.value } @@ -38,24 +40,21 @@ object Helpers { // Map CSS property name to react style naming convention. // For example: padding-top => paddingTop val propertyName = property.attr.id.split("-") match { - case Array(head, other@_*) => head + other.map(_.capitalize).mkString - case _ => throw new Throwable("Css property name is empty for toAny implicit") + case Array(head, other @ _*) => head + other.map(_.capitalize).mkString + case _ => throw new Throwable("Css property name is empty for toAny implicit") } result(propertyName) = property.value } result } + } - implicit def styleAToClassName(styleA: StyleA): String = - styleA.className.value + implicit def styleAToClassName(styleA: StyleA): String = styleA.className.value - implicit def styleAToUndefOrClassName(styleA: StyleA): js.UndefOr[String] = - styleA.className.value.some.orUndefined + implicit def styleAToUndefOrClassName(styleA: StyleA): js.UndefOr[String] = styleA.className.value.some.orUndefined - implicit def stylesToClassName(styleAs: Seq[StyleA]): String = - styleAs.map(styleAToClassName).mkString(" ") + implicit def stylesToClassName(styleAs: Seq[StyleA]): String = styleAs.map(styleAToClassName).mkString(" ") - implicit def stylesToUndefOrClassName(styleAs: Seq[StyleA]): js.UndefOr[String] = - stylesToClassName(styleAs) + implicit def stylesToUndefOrClassName(styleAs: Seq[StyleA]): js.UndefOr[String] = stylesToClassName(styleAs) } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/icons/MuiLightBulbFullIcon.scala b/demo/src/main/scala/io/kinoplan/demo/utils/icons/MuiLightBulbFullIcon.scala index 746f01c4..c32bee95 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/icons/MuiLightBulbFullIcon.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/icons/MuiLightBulbFullIcon.scala @@ -5,5 +5,7 @@ import japgolly.scalajs.react.vdom.all._ import io.kinoplan.scalajs.react.material.ui.utils.MuiSvgIconCustom object MuiLightBulbFullIcon extends MuiSvgIconCustom( - svg.path(svg.d := "m9,21c0,0.55 0.45,1 1,1l4,0c0.55,0 1,-0.45 1,-1l0,-1l-6,0l0,1zm3,-19c-3.86,0 -7,3.14 -7,7c0,2.38 1.19,4.47 3,5.74l0,2.26c0,0.55 0.45,1 1,1l6,0c0.55,0 1,-0.45 1,-1l0,-2.26c1.81,-1.27 3,-3.36 3,-5.74c0,-3.86 -3.14,-7 -7,-7z") -) + svg.path( + svg.d := "m9,21c0,0.55 0.45,1 1,1l4,0c0.55,0 1,-0.45 1,-1l0,-1l-6,0l0,1zm3,-19c-3.86,0 -7,3.14 -7,7c0,2.38 1.19,4.47 3,5.74l0,2.26c0,0.55 0.45,1 1,1l6,0c0.55,0 1,-0.45 1,-1l0,-2.26c1.81,-1.27 3,-3.36 3,-5.74c0,-3.86 -3.14,-7 -7,-7z" + ) + ) diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/icons/MuiLightBulbOutlineIcon.scala b/demo/src/main/scala/io/kinoplan/demo/utils/icons/MuiLightBulbOutlineIcon.scala index 0c843600..f4f48089 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/icons/MuiLightBulbOutlineIcon.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/icons/MuiLightBulbOutlineIcon.scala @@ -5,5 +5,7 @@ import japgolly.scalajs.react.vdom.all._ import io.kinoplan.scalajs.react.material.ui.utils.MuiSvgIconCustom object MuiLightBulbOutlineIcon extends MuiSvgIconCustom( - svg.path(svg.d := "M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z") -) + svg.path( + svg.d := "M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" + ) + ) diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiBackIconButtonProps.scala b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiBackIconButtonProps.scala index 8ee7ba34..86495ef8 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiBackIconButtonProps.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiBackIconButtonProps.scala @@ -9,13 +9,15 @@ trait MuiBackIconButtonProps extends js.Object { } object MuiBackIconButtonProps { + def apply( ariaLabel: js.UndefOr[String] = js.undefined ) = { - val o : Map[String, Any] = Seq( + val o: Map[String, Any] = Seq( ariaLabel.toOption.map("aria-label" -> _) ).flatten.toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MuiBackIconButtonProps] } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiContentProps.scala b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiContentProps.scala index 95b9def0..1caadd2f 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiContentProps.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiContentProps.scala @@ -10,15 +10,17 @@ trait MuiContentProps extends js.Object { } object MuiContentProps { + def apply( ariaDescribedby: js.UndefOr[String] = js.undefined, className: js.UndefOr[String] = js.undefined ) = { - val o : Map[String, Any] = Seq( + val o: Map[String, Any] = Seq( ariaDescribedby.toOption.map("aria-describedby" -> _), className.toOption.map("className" -> _) ).flatten.toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MuiContentProps] } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiInputLabelProps.scala b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiInputLabelProps.scala index 6f011785..395dc92c 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiInputLabelProps.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiInputLabelProps.scala @@ -10,6 +10,7 @@ trait MuiInputLabelProps extends js.Object { } object MuiInputLabelProps { + def apply( shrink: js.UndefOr[Boolean] = js.undefined, classes: js.UndefOr[js.Object] = js.undefined @@ -21,4 +22,5 @@ object MuiInputLabelProps { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MuiInputLabelProps] } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiInputProps.scala b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiInputProps.scala index bb1990ed..184f45af 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiInputProps.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiInputProps.scala @@ -15,6 +15,7 @@ trait MuiInputProps extends js.Object { } object MuiInputProps { + def apply( readOnly: js.UndefOr[Boolean] = js.undefined, ariaLabel: js.UndefOr[String] = js.undefined, @@ -32,4 +33,5 @@ object MuiInputProps { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MuiInputProps] } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiMenuProps.scala b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiMenuProps.scala index 0647d76d..fb9f5ae3 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiMenuProps.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiMenuProps.scala @@ -10,15 +10,17 @@ trait MuiMenuProps extends js.Object { } object MuiMenuProps { + def apply( PaperProps: js.UndefOr[js.Object] = js.undefined, className: js.UndefOr[String] = js.undefined ) = { - val o : Map[String, Any] = Seq( + val o: Map[String, Any] = Seq( PaperProps.toOption.map("PaperProps" -> _), className.toOption.map("className" -> _) ).flatten.toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MuiMenuProps] } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiNativeInputProps.scala b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiNativeInputProps.scala index 58a7941c..a71f6e0e 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiNativeInputProps.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiNativeInputProps.scala @@ -11,12 +11,13 @@ trait MuiNativeInputProps extends js.Object { } object MuiNativeInputProps { + def apply( step: Option[Int] = None, name: Option[String] = None, id: Option[String] = None ) = { - val o : Map[String, Any] = Seq( + val o: Map[String, Any] = Seq( step.map("step" -> _), name.map("name" -> _), id.map("id" -> _) @@ -24,4 +25,5 @@ object MuiNativeInputProps { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MuiNativeInputProps] } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiNextIconButtonProps.scala b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiNextIconButtonProps.scala index 96b1e1c4..020844e4 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiNextIconButtonProps.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiNextIconButtonProps.scala @@ -9,13 +9,15 @@ trait MuiNextIconButtonProps extends js.Object { } object MuiNextIconButtonProps { + def apply( ariaLabel: js.UndefOr[String] = js.undefined ) = { - val o : Map[String, Any] = Seq( + val o: Map[String, Any] = Seq( ariaLabel.toOption.map("aria-label" -> _) ).flatten.toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MuiNextIconButtonProps] } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiPaperProps.scala b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiPaperProps.scala index c31818a1..5ef4b827 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiPaperProps.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiPaperProps.scala @@ -9,6 +9,7 @@ trait MuiPaperProps extends js.Object { } object MuiPaperProps { + def apply( style: js.Dictionary[String] ) = { @@ -18,4 +19,5 @@ object MuiPaperProps { o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MuiPaperProps] } + } diff --git a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiSelectProps.scala b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiSelectProps.scala index 863dd910..630f7ffe 100644 --- a/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiSelectProps.scala +++ b/demo/src/main/scala/io/kinoplan/demo/utils/props/MuiSelectProps.scala @@ -10,15 +10,17 @@ trait MuiSelectProps extends js.Object { } object MuiSelectProps { + def apply( native: js.UndefOr[Boolean] = js.undefined, MenuProps: js.UndefOr[js.Object] = js.undefined ) = { - val o : Map[String, Any] = Seq( + val o: Map[String, Any] = Seq( MenuProps.toOption.map("MenuProps" -> _), native.toOption.map("native" -> _) ).flatten.toMap o.toJSDictionary.asInstanceOf[js.Object].asInstanceOf[MuiSelectProps] } + } diff --git a/icons/src/main/scala/io/kinoplan/scalajs/react/material/ui/icons/MuiIcons.scala b/icons/src/main/scala/io/kinoplan/scalajs/react/material/ui/icons/MuiIcons.scala index 46228e40..6d733738 100644 --- a/icons/src/main/scala/io/kinoplan/scalajs/react/material/ui/icons/MuiIcons.scala +++ b/icons/src/main/scala/io/kinoplan/scalajs/react/material/ui/icons/MuiIcons.scala @@ -18,9 +18,11 @@ class MuiIcons(value: js.Any) extends ReactBridgeComponent with SvgIconExtension titleAccess: js.UndefOr[String] = js.undefined, viewBox: js.UndefOr[String] = js.undefined ): WithProps = auto + } object MuiIcons extends SvgIconExtensions { + def apply(value: MuiIconsModule.Value)( classes: js.UndefOr[Map[ClassKey.Value, String]] = js.undefined, color: js.UndefOr[Color.Value] = js.undefined, @@ -40,4 +42,5 @@ object MuiIcons extends SvgIconExtensions { titleAccess = titleAccess, viewBox = viewBox ) + } diff --git a/icons/src/main/scala/io/kinoplan/scalajs/react/material/ui/icons/SvgIconExtensions.scala b/icons/src/main/scala/io/kinoplan/scalajs/react/material/ui/icons/SvgIconExtensions.scala index 93e0dad1..ae12547f 100644 --- a/icons/src/main/scala/io/kinoplan/scalajs/react/material/ui/icons/SvgIconExtensions.scala +++ b/icons/src/main/scala/io/kinoplan/scalajs/react/material/ui/icons/SvgIconExtensions.scala @@ -1,6 +1,7 @@ package io.kinoplan.scalajs.react.material.ui.icons trait SvgIconExtensions { + object Color extends Enumeration { type Value = String @@ -34,4 +35,5 @@ trait SvgIconExtensions { val fontSizeSmall = "fontSizeSmall" val fontSizeLarge = "fontSizeLarge" } + } diff --git a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiBreadcrumbs.scala b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiBreadcrumbs.scala index 5d60553c..9c7c42b6 100644 --- a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiBreadcrumbs.scala +++ b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiBreadcrumbs.scala @@ -22,4 +22,5 @@ object MuiBreadcrumbs extends ReactBridgeComponent { maxItems: js.UndefOr[Int] = js.undefined, separator: js.UndefOr[VdomNode] = js.undefined ): WithProps = auto + } diff --git a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSlider.scala b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSlider.scala index 73d07701..36a4d585 100644 --- a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSlider.scala +++ b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSlider.scala @@ -25,9 +25,11 @@ object MuiSlider extends ReactBridgeComponent with MuiSliderExtensions { vertical: js.UndefOr[Boolean] = false, onChange: js.UndefOr[ReactHandler2[ReactEvent, Double]] = js.undefined ): WithProps = auto + } trait MuiSliderExtensions { + object ClassKey extends Enumeration { type Value = String @@ -35,7 +37,7 @@ trait MuiSliderExtensions { val container = "container" val track = "track" val trackBefore = "trackBefore" - val trackAfter = "trackAfter" + val trackAfter = "trackAfter" val thumbWrapper = "thumbWrapper" val thumb = "thumb" val thumbIconWrapper = "thumbIconWrapper" @@ -46,4 +48,5 @@ trait MuiSliderExtensions { val activated = "activated" val vertical = "vertical" } + } diff --git a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDial.scala b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDial.scala index 75de9f74..dcfab960 100644 --- a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDial.scala +++ b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDial.scala @@ -29,9 +29,11 @@ object MuiSpeedDial extends ReactBridgeComponent with MuiSpeedDialExtensions { transitionDuration: js.UndefOr[Int | js.Object] = js.undefined, TransitionProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiSpeedDialExtensions { + object Direction extends Enumeration { type Value = String @@ -48,9 +50,10 @@ trait MuiSpeedDialExtensions { val fab = "fab" val directionUp = "directionUp" val directionDown = "directionDown" - val directionLeft = "directionLeft" + val directionLeft = "directionLeft" val directionRight = "directionRight" val actions = "actions" val actionsClosed = "actionsClosed" } + } diff --git a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDialAction.scala b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDialAction.scala index 82fd5607..51dc460f 100644 --- a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDialAction.scala +++ b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDialAction.scala @@ -41,9 +41,11 @@ object MuiSpeedDialAction extends ReactBridgeComponent with MuiSpeedDialActionEx TransitionComponent: js.UndefOr[ComponentPropType] = js.undefined, TransitionProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiSpeedDialActionExtensions { + object Placement extends Enumeration { type Value = String @@ -92,4 +94,5 @@ trait MuiSpeedDialActionExtensions { val tooltipPlacementTop = "tooltipPlacementTop" val tooltipPlacementBottom = "tooltipPlacementBottom" } + } diff --git a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDialIcon.scala b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDialIcon.scala index 90883b6f..760066dc 100644 --- a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDialIcon.scala +++ b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiSpeedDialIcon.scala @@ -19,9 +19,11 @@ object MuiSpeedDialIcon extends ReactBridgeComponent with MuiSpeedDialIconExtens icon: js.UndefOr[VdomNode] = js.undefined, openIcon: js.UndefOr[VdomNode] = js.undefined ): WithPropsNoChildren = autoNoChildren + } trait MuiSpeedDialIconExtensions { + object ClassKey extends Enumeration { type Value = String @@ -32,4 +34,5 @@ trait MuiSpeedDialIconExtensions { val openIcon = "openIcon" val openIconOpen = "openIconOpen" } + } diff --git a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiToggleButton.scala b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiToggleButton.scala index 3f480cc6..3ecb1a74 100644 --- a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiToggleButton.scala +++ b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiToggleButton.scala @@ -26,9 +26,11 @@ object MuiToggleButton extends ReactBridgeComponent with MuiToggleButtonExtensio onFocusVisible: js.UndefOr[js.Function] = js.undefined, TouchRippleProps: js.UndefOr[js.Object] = js.undefined ): WithProps = auto + } trait MuiToggleButtonExtensions { + object ClassKey extends Enumeration { type Value = String @@ -38,4 +40,5 @@ trait MuiToggleButtonExtensions { val label = "label" val focusVisible = "focusVisible" } + } diff --git a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiToggleButtonGroup.scala b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiToggleButtonGroup.scala index cc81dff9..af8f8275 100644 --- a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiToggleButtonGroup.scala +++ b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/MuiToggleButtonGroup.scala @@ -19,9 +19,11 @@ object MuiToggleButtonGroup extends ReactBridgeComponent with MuiToggleButtonGro onChange: js.UndefOr[Handler2[js.Object, String]] = js.undefined, selected: js.UndefOr[Boolean | Selected.Value] = js.undefined ): WithProps = auto + } trait MuiToggleButtonGroupExtensions { + object Selected extends Enumeration { type Value = String @@ -34,4 +36,5 @@ trait MuiToggleButtonGroupExtensions { val root = "root" val selected = "selected" } + } diff --git a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/package.scala b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/package.scala index 13600326..29e14392 100644 --- a/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/package.scala +++ b/lab/src/main/scala/io/kinoplan/scalajs/react/material/ui/lab/package.scala @@ -7,10 +7,10 @@ import japgolly.scalajs.react.Callback import japgolly.scalajs.react.facade.SyntheticEvent package object lab { - type Handler1[A] = A => Callback - type Handler2[A, B] = (A, B) => Callback - type ReactHandler1[E <: SyntheticEvent[_]] = Handler1[E] + type Handler1[A] = A => Callback + type Handler2[A, B] = (A, B) => Callback + type ReactHandler1[E <: SyntheticEvent[_]] = Handler1[E] type ReactHandler2[E <: SyntheticEvent[_], A] = Handler2[E, A] - type ComponentPropType = String | js.Function - type ComponentRefType = js.Function | js.Object + type ComponentPropType = String | js.Function + type ComponentRefType = js.Function | js.Object } diff --git a/project/BridgeGeneratorPlugin.scala b/project/BridgeGeneratorPlugin.scala index 25f4d731..acf2d75d 100644 --- a/project/BridgeGeneratorPlugin.scala +++ b/project/BridgeGeneratorPlugin.scala @@ -8,30 +8,33 @@ object BridgeGeneratorPlugin extends AutoPlugin { lazy val bridgeImplicitsGenerator = taskKey[Seq[File]]("bridge-implicits-generator") override lazy val projectSettings = Seq( - bridgeImplicitsGenerator := bridgeImplicits( - (Compile / sourceManaged).value / "io" / "kinoplan" / "scalajs" / "react" / "bridge" - ), + bridgeImplicitsGenerator := + bridgeImplicits( + (Compile / sourceManaged).value / "io" / "kinoplan" / "scalajs" / "react" / "bridge" + ), Compile / sourceGenerators += bridgeImplicitsGenerator.taskValue ) def bridgeImplicits(src: File) = { val moduleFile: File = src / "GeneratedImplicits.scala" - val functions = (0 to 22).map { arity => - val indices = 1 to arity - val types = indices.map(i => s"T$i") :+ "R" - val tParams = types.mkString(", ") - val params = indices.map(i => s"x$i: T$i").mkString(", ") - val args = indices.map(i => s"x$i").mkString(", ") - - s""" - | implicit def function${arity}Writer[$tParams](implicit writerR: JsWriter[R]): JsWriter[Function$arity[$tParams]] = { - | new JsWriter[Function$arity[$tParams]] { - | override def toJs(value: Function$arity[$tParams]): js.Any = - | fromFunction$arity(($params) => writerR.toJs(value($args))) - | } - | }""".stripMargin - }.mkString("\n") + val functions = (0 to 22) + .map { arity => + val indices = 1 to arity + val types = indices.map(i => s"T$i") :+ "R" + val tParams = types.mkString(", ") + val params = indices.map(i => s"x$i: T$i").mkString(", ") + val args = indices.map(i => s"x$i").mkString(", ") + + s""" + | implicit def function${arity}Writer[$tParams](implicit writerR: JsWriter[R]): JsWriter[Function$arity[$tParams]] = { + | new JsWriter[Function$arity[$tParams]] { + | override def toJs(value: Function$arity[$tParams]): js.Any = + | fromFunction$arity(($params) => writerR.toJs(value($args))) + | } + | }""".stripMargin + } + .mkString("\n") IO.write( moduleFile, @@ -49,4 +52,5 @@ object BridgeGeneratorPlugin extends AutoPlugin { Seq(moduleFile) } + } diff --git a/project/Dependencies.scala b/project/Dependencies.scala index f3a7c866..700cd4ae 100644 --- a/project/Dependencies.scala +++ b/project/Dependencies.scala @@ -4,14 +4,15 @@ import org.portablescala.sbtplatformdeps.PlatformDepsPlugin.autoImport._ object Dependencies { object Versions { - val catsCoreV = "2.7.0" - val scalaCssV = "1.0.0" - val scalaJsDomV = "2.1.0" + val catsCoreV = "2.7.0" + val scalaCssV = "1.0.0" + val scalaJsDomV = "2.1.0" val scalaJsReactV = "2.0.0" } import Versions._ + // format: off //A -> Z val catsCore = Def.setting("org.typelevel" %%% "cats-core" % catsCoreV) val scalaCssCore = Def.setting("com.github.japgolly.scalacss" %%% "core" % scalaCssV) @@ -20,4 +21,5 @@ object Dependencies { val scalaJsDom = Def.setting("org.scala-js" %%% "scalajs-dom" % scalaJsDomV) val scalaJsReactCore = Def.setting("com.github.japgolly.scalajs-react" %%% "core" % scalaJsReactV) val scalaJsReactExtra = Def.setting("com.github.japgolly.scalajs-react" %%% "extra" % scalaJsReactV) + // format: on } diff --git a/project/DependenciesNPM.scala b/project/DependenciesNPM.scala index 82ae6ee2..f47ce73f 100644 --- a/project/DependenciesNPM.scala +++ b/project/DependenciesNPM.scala @@ -1,13 +1,13 @@ object DependenciesNPM { object Versions { - val reactV = "17.0.2" + val reactV = "17.0.2" val reactSwipeableViewsV = "0.14.0" } import Versions._ - //A -> Z + // A -> Z val materialUiCore = "@material-ui/core" -> "3.9.0" val materialUiIcons = "@material-ui/icons" -> "3.0.2" val materialUiLab = "@material-ui/lab" -> "3.0.0-alpha.30" diff --git a/project/Modules.scala b/project/Modules.scala index f41bf859..371b6f57 100644 --- a/project/Modules.scala +++ b/project/Modules.scala @@ -12,12 +12,14 @@ object Modules { .settings(scalaJSUseMainModuleInitializer := false) .settings( libraryDependencies ++= Seq(Dependencies.scalaJsReactCore.value), - Compile / npmDependencies ++= Seq( - DependenciesNPM.react, - DependenciesNPM.reactDom, - DependenciesNPM.materialUiCore - ), - Compile / npmResolutions ++= (Compile / npmDependencies).value.toMap, + Compile / npmDependencies ++= + Seq( + DependenciesNPM.react, + DependenciesNPM.reactDom, + DependenciesNPM.materialUiCore + ), + Compile / npmResolutions ++= + (Compile / npmDependencies).value.toMap ) lazy val iconsProfile: Project => Project = _ @@ -26,13 +28,15 @@ object Modules { .settings(scalaJSUseMainModuleInitializer := false) .settings( libraryDependencies ++= Seq(Dependencies.scalaJsReactCore.value), - Compile / npmDependencies ++= Seq( - DependenciesNPM.react, - DependenciesNPM.reactDom, - DependenciesNPM.materialUiCore, - DependenciesNPM.materialUiIcons - ), - Compile / npmResolutions ++= (Compile / npmDependencies).value.toMap, + Compile / npmDependencies ++= + Seq( + DependenciesNPM.react, + DependenciesNPM.reactDom, + DependenciesNPM.materialUiCore, + DependenciesNPM.materialUiIcons + ), + Compile / npmResolutions ++= + (Compile / npmDependencies).value.toMap ) lazy val labProfile: Project => Project = _ @@ -41,13 +45,15 @@ object Modules { .settings(scalaJSUseMainModuleInitializer := false) .settings( libraryDependencies ++= Seq(Dependencies.scalaJsReactCore.value), - Compile / npmDependencies ++= Seq( - DependenciesNPM.react, - DependenciesNPM.reactDom, - DependenciesNPM.materialUiCore, - DependenciesNPM.materialUiLab - ), - Compile / npmResolutions ++= (Compile / npmDependencies).value.toMap, + Compile / npmDependencies ++= + Seq( + DependenciesNPM.react, + DependenciesNPM.reactDom, + DependenciesNPM.materialUiCore, + DependenciesNPM.materialUiLab + ), + Compile / npmResolutions ++= + (Compile / npmDependencies).value.toMap ) lazy val bridgeProfile: Project => Project = _ @@ -56,11 +62,9 @@ object Modules { .settings(scalaJSUseMainModuleInitializer := false) .settings( libraryDependencies ++= Seq(Dependencies.scalaJsReactCore.value), - Compile / npmDependencies ++= Seq( - DependenciesNPM.react, - DependenciesNPM.reactDom - ), - Compile / npmResolutions ++= (Compile / npmDependencies).value.toMap, + Compile / npmDependencies ++= Seq(DependenciesNPM.react, DependenciesNPM.reactDom), + Compile / npmResolutions ++= + (Compile / npmDependencies).value.toMap ) lazy val demoProfile: Project => Project = _ @@ -73,40 +77,44 @@ object Modules { fastOptJS / webpackConfigFile := Some(baseDirectory.value / "dev.webpack.config.js"), stUseScalaJsDom := false, stFlavour := Flavour.ScalajsReact, - stIgnore ++= List( - "react-dom", - "@material-ui/core", - "@material-ui/icons", - "@material-ui/lab", - "@material-ui/types" - ), + stIgnore ++= + List( + "react-dom", + "@material-ui/core", + "@material-ui/icons", + "@material-ui/lab", + "@material-ui/types" + ), stOutputPackage := "io.kinoplan.scalajs.react.libs.external" ) .settings( - libraryDependencies ++= Seq( - Dependencies.catsCore.value, - Dependencies.scalaCssCore.value, - Dependencies.scalaCssExtReact.value, - Dependencies.scalaCssExtScalatags.value, - Dependencies.scalaJsDom.value, - Dependencies.scalaJsReactCore.value, - Dependencies.scalaJsReactExtra.value - ), - Compile / npmDependencies ++= Seq( - DependenciesNPM.react, - DependenciesNPM.reactDom, - DependenciesNPM.materialUiCore, - DependenciesNPM.materialUiIcons, - DependenciesNPM.materialUiLab, - DependenciesNPM.reactSwipeableViews, - DependenciesNPM.reactSwipeableViewsUtils, - DependenciesNPM.typesReactSwipeableViewsUtils, - DependenciesNPM.typesReactSwipeableViews, - DependenciesNPM.typesReactSwipeableViewsUtils, - DependenciesNPM.typesReact, - DependenciesNPM.typesReactDom - ), - Compile / npmResolutions ++= (Compile / npmDependencies).value.toMap + libraryDependencies ++= + Seq( + Dependencies.catsCore.value, + Dependencies.scalaCssCore.value, + Dependencies.scalaCssExtReact.value, + Dependencies.scalaCssExtScalatags.value, + Dependencies.scalaJsDom.value, + Dependencies.scalaJsReactCore.value, + Dependencies.scalaJsReactExtra.value + ), + Compile / npmDependencies ++= + Seq( + DependenciesNPM.react, + DependenciesNPM.reactDom, + DependenciesNPM.materialUiCore, + DependenciesNPM.materialUiIcons, + DependenciesNPM.materialUiLab, + DependenciesNPM.reactSwipeableViews, + DependenciesNPM.reactSwipeableViewsUtils, + DependenciesNPM.typesReactSwipeableViewsUtils, + DependenciesNPM.typesReactSwipeableViews, + DependenciesNPM.typesReactSwipeableViewsUtils, + DependenciesNPM.typesReact, + DependenciesNPM.typesReactDom + ), + Compile / npmResolutions ++= + (Compile / npmDependencies).value.toMap ) .settings(publish / skip := true) diff --git a/project/MuiColorsGeneratorPlugin.scala b/project/MuiColorsGeneratorPlugin.scala index ef64ed67..c6f04cef 100644 --- a/project/MuiColorsGeneratorPlugin.scala +++ b/project/MuiColorsGeneratorPlugin.scala @@ -9,10 +9,12 @@ object MuiColorsGeneratorPlugin extends AutoPlugin { lazy val muiColorsGenerator = taskKey[Seq[File]]("mui-colors-generator") override lazy val projectSettings = Seq( - muiColorsGenerator := muiColors( - (Compile / sourceManaged).value / "io" / "kinoplan" / "scalajs" / "react" / "material" / "ui" / "core" / "colors", - (Compile / npmInstallDependencies).value - ), + muiColorsGenerator := + muiColors( + (Compile / sourceManaged).value / "io" / "kinoplan" / "scalajs" / "react" / "material" / "ui" / "core" / + "colors", + (Compile / npmInstallDependencies).value + ), Compile / sourceGenerators += muiColorsGenerator.taskValue ) @@ -24,35 +26,38 @@ object MuiColorsGeneratorPlugin extends AutoPlugin { val colorsPackageFile = src / "package.scala" - val colorsPackage = colorSources.get.sortBy(_.getName).map(file => { - val name = file.getName.stripSuffix(".js") - - s""" @JSImport("@material-ui/core/colors/$name", JSImport.Default) - | @js.native - | object $name extends Color - |""".stripMargin - }).mkString( - start = - """package io.kinoplan.scalajs.react.material.ui.core - | - |import scala.scalajs.js - |import scala.scalajs.js.annotation.JSImport - | - |package object colors { - | - |""".stripMargin, - sep = "\n", - end = - """ - | @JSImport("@material-ui/core/colors/common", JSImport.Default) - | @js.native - | object common extends CommonColors - |} - |""".stripMargin - ) + val colorsPackage = colorSources + .get + .sortBy(_.getName) + .map { file => + val name = file.getName.stripSuffix(".js") + + s""" @JSImport("@material-ui/core/colors/$name", JSImport.Default) + | @js.native + | object $name extends Color + |""".stripMargin + } + .mkString( + start = """package io.kinoplan.scalajs.react.material.ui.core + | + |import scala.scalajs.js + |import scala.scalajs.js.annotation.JSImport + | + |package object colors { + | + |""".stripMargin, + sep = "\n", + end = """ + | @JSImport("@material-ui/core/colors/common", JSImport.Default) + | @js.native + | object common extends CommonColors + |} + |""".stripMargin + ) IO.write(colorsPackageFile, colorsPackage) Seq(colorsPackageFile) } + } diff --git a/project/MuiIconsGeneratorPlugin.scala b/project/MuiIconsGeneratorPlugin.scala index 12018ed3..d38d1af5 100644 --- a/project/MuiIconsGeneratorPlugin.scala +++ b/project/MuiIconsGeneratorPlugin.scala @@ -9,10 +9,11 @@ object MuiIconsGeneratorPlugin extends AutoPlugin { lazy val muiIconsGenerator = taskKey[Seq[File]]("mui-icons-generator") override lazy val projectSettings = Seq( - muiIconsGenerator := muiIcons( - (Compile / sourceManaged).value / "io" / "kinoplan" / "scalajs" / "react" / "material" / "ui" / "icons", - (Compile / npmInstallDependencies).value - ), + muiIconsGenerator := + muiIcons( + (Compile / sourceManaged).value / "io" / "kinoplan" / "scalajs" / "react" / "material" / "ui" / "icons", + (Compile / npmInstallDependencies).value + ), Compile / sourceGenerators += muiIconsGenerator.taskValue ) @@ -41,4 +42,5 @@ object MuiIconsGeneratorPlugin extends AutoPlugin { Seq(moduleFile) } + } diff --git a/project/ProjectSettings.scala b/project/ProjectSettings.scala index 7cb78fe1..c9e8aad2 100644 --- a/project/ProjectSettings.scala +++ b/project/ProjectSettings.scala @@ -19,24 +19,25 @@ object ProjectSettings { webpack / version := "5.65.0", startWebpackDevServer / version := "4.7.2", webpackCliVersion := "4.9.1", - scalacOptions ~= (_.filterNot( - Set( - "-Wdead-code", - "-Wunused:params", - "-Ywarn-dead-code", - "-Ywarn-unused:params", - "-Ywarn-unused:patvars", - "-Wunused:explicits" - ) - )) + scalacOptions ~= + (_.filterNot( + Set( + "-Wdead-code", + "-Wunused:params", + "-Ywarn-dead-code", + "-Ywarn-unused:params", + "-Ywarn-unused:patvars", + "-Wunused:explicits" + ) + )) ) - lazy val rootProfile: Project => Project = _ - .settings( - name := "scalajs-react-material-ui", - publish / skip := true, - publishLocal / skip := true, - publishArtifact / skip := true, - Keys.`package` := file("") - ) + lazy val rootProfile: Project => Project = _.settings( + name := "scalajs-react-material-ui", + publish / skip := true, + publishLocal / skip := true, + publishArtifact / skip := true, + Keys.`package` := file("") + ) + } diff --git a/project/plugins.sbt b/project/plugins.sbt index b1e002d0..374ef7b4 100755 --- a/project/plugins.sbt +++ b/project/plugins.sbt @@ -1,6 +1,8 @@ val scalaJSVersion = Option(System.getenv("SCALAJS_VERSION")).getOrElse("1.8.0") -addSbtPlugin("org.scalablytyped.converter" % "sbt-converter" % "1.0.0-beta37") +addSbtPlugin( + "org.scalablytyped.converter" % "sbt-converter" % "1.0.0-beta37" +) addSbtPlugin("org.scala-js" % "sbt-scalajs" % scalaJSVersion) @@ -10,4 +12,6 @@ addSbtPlugin("io.github.davidgregory084" % "sbt-tpolecat" % "0.1.20") addSbtPlugin("ch.epfl.scala" % "sbt-scalafix" % "0.9.33") +addSbtPlugin("org.scalameta" % "sbt-scalafmt" % "2.4.6") + addSbtPlugin("com.github.sbt" % "sbt-ci-release" % "1.5.10") diff --git a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/JsWriter.scala b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/JsWriter.scala index b02a8ad4..cbfd3109 100644 --- a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/JsWriter.scala +++ b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/JsWriter.scala @@ -7,7 +7,9 @@ trait JsWriter[T] { } object JsWriter { + def apply[A](f: A => js.Any): JsWriter[A] = new JsWriter[A] { override def toJs(value: A) = f(value) } + } diff --git a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponent.scala b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponent.scala index 336455bf..579bc9ab 100644 --- a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponent.scala +++ b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponent.scala @@ -7,32 +7,30 @@ import scala.scalajs.js.Dynamic.global import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.VdomElement -/** - * See project's [README.md](https://github.com/payalabs/scalajs-react-bridge) - */ +/** See project's [README.md](https://github.com/payalabs/scalajs-react-bridge) + */ abstract class ReactBridgeComponent { - /** - * JS namespace for the underlying component. - * - * Certain libraries such as `ReactBootstrap` define components in a namespace. - * This property allows specifying a namespace for the bridge to look for - * the underlying component's function. - * - * See [ReactBootstrapComponent](https://github.com/payalabs/scalajs-react-bridge-example/src/main/scala/com/payalabs/scalajs/react/bridge/elements/ReactBootstrapBridge.scala) - * in the example app for typical usage. - * - * A '.' separated string of namespace (a package-like string) - */ + /** JS namespace for the underlying component. + * + * Certain libraries such as `ReactBootstrap` define components in a namespace. This property allows specifying a + * namespace for the bridge to look for the underlying component's function. + * + * See + * [ReactBootstrapComponent](https://github.com/payalabs/scalajs-react-bridge-example/src/main/scala/com/payalabs/scalajs/react/bridge/elements/ReactBootstrapBridge.scala) + * in the example app for typical usage. + * + * A '.' separated string of namespace (a package-like string) + */ protected lazy val componentNamespace: String = "" - // Class names generated by Scala for inner types (such as one used from our test cases have the following form) // com.payalabs.scalajs.react.bridge.test.ReactBridgeComponentTest$TestComponent$20$ // We would have liked to use getSimpleName, but it fails miserably (see https://github.com/scala/bug/issues/2034) // So, we use our own "parsing" to extract the simple name - protected lazy val componentName: String = this.getClass.getName.split('.').last.split('$').reverse.dropWhile(_.forall(_.isDigit)).head + protected lazy val componentName: String = + this.getClass.getName.split('.').last.split('$').reverse.dropWhile(_.forall(_.isDigit)).head protected lazy val componentValue: js.Any = { val componentPrefixes = if (componentNamespace.trim.isEmpty) Array[String]() else componentNamespace.split('.') @@ -52,46 +50,57 @@ abstract class ReactBridgeComponent { } object ReactBridgeComponent { + def autoImpl(c: Context): c.Expr[WithProps] = { import c.universe._ val ctor = symbolOf[WithProps] - c.Expr(q"new $ctor(${c.prefix.tree}.jsComponent, ${propsObject(c)})") + c.Expr( + q"new $ctor(${c.prefix.tree}.jsComponent, ${propsObject(c)})" + ) } def autoNoChildrenImpl(c: Context): c.Expr[WithPropsNoChildren] = { import c.universe._ val ctor = symbolOf[WithPropsNoChildren] - c.Expr(q"new $ctor(${c.prefix.tree}.jsComponent, ${propsObject(c)})") + c.Expr( + q"new $ctor(${c.prefix.tree}.jsComponent, ${propsObject(c)})" + ) } def autoNoTagModsImpl(c: Context): c.Expr[WithPropsAndTagsMods] = { import c.universe._ val ctor = symbolOf[WithPropsAndTagsMods] - c.Expr(q"new $ctor(${c.prefix.tree}.jsComponent, ${propsObject(c)}, _root_.scala.List())") + c.Expr( + q"new $ctor(${c.prefix.tree}.jsComponent, ${propsObject(c)}, _root_.scala.List())" + ) } def autoNoTagModsNoChildrenImpl(c: Context): c.Expr[VdomElement] = { import c.universe._ val ctor = symbolOf[WithPropsAndTagModsAndChildren] - c.Expr(q"new $ctor(${c.prefix.tree}.jsComponent, ${propsObject(c)}, _root_.scala.List()).apply") + c.Expr( + q"new $ctor(${c.prefix.tree}.jsComponent, ${propsObject(c)}, _root_.scala.List()).apply" + ) } private def propsObject(c: Context): c.Expr[js.Object] = { import c.universe._ - c.Expr(q"_root_.io.kinoplan.scalajs.react.bridge.ReactBridgeComponent.propsToDynamic(${computeParams(c)})") + c.Expr( + q"_root_.io.kinoplan.scalajs.react.bridge.ReactBridgeComponent.propsToDynamic(${computeParams(c)})" + ) } - /** - * Convert params passed to the apply method into their JS equivalent and pack them into a js.Dynamic - * @param c - * @return - * @see JsWriter - */ + /** Convert params passed to the apply method into their JS equivalent and pack them into a js.Dynamic + * @param c + * @return + * @see + * JsWriter + */ private def computeParams(c: Context): c.Expr[List[(String, js.Any)]] = { import c.universe._ @@ -102,7 +111,10 @@ object ReactBridgeComponent { val converted = { val conv = c.inferImplicitValue(appliedType(typeOf[JsWriter[_]], paramType :: Nil)) - if (conv.isEmpty) c.error(c.enclosingPosition, s"Could not find an implicit JsWriter[$paramType]") + if (conv.isEmpty) c.error( + c.enclosingPosition, + s"Could not find an implicit JsWriter[$paramType]" + ) q"$conv.toJs(${param.name.toTermName})" } @@ -115,10 +127,10 @@ object ReactBridgeComponent { c.Expr[List[(String, js.Any)]](q"$props") } - def propsToDynamic(props: List[(String, js.Any)]): js.Object = { + def propsToDynamic(props: List[(String, js.Any)]): js.Object = // If an argument is undefined, simply don't pass it to the JS world. Otherwise, `Object.keys` // etc will find the argument (with undefined as the value). The expectation in the JS world // is to simply not pass the argument if the value is undefined. js.Dictionary(props.filterNot(prop => js.isUndefined(prop._2)): _*).asInstanceOf[js.Object] - } + } diff --git a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponentNoSpecialProps.scala b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponentNoSpecialProps.scala index c269940f..e8b65076 100644 --- a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponentNoSpecialProps.scala +++ b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponentNoSpecialProps.scala @@ -3,9 +3,11 @@ package io.kinoplan.scalajs.react.bridge import japgolly.scalajs.react.vdom.TagMod abstract class ReactBridgeComponentNoSpecialProps extends ReactBridgeComponent { + def apply(attrAndChildren: TagMod*): WithPropsAndTagsMods = { val (props, children) = extractPropsAndChildren(attrAndChildren) new WithPropsAndTagsMods(jsComponent, props, children) } + } diff --git a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponentNoSpecialPropsNoChildren.scala b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponentNoSpecialPropsNoChildren.scala index 3fef036b..f33a53d4 100644 --- a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponentNoSpecialPropsNoChildren.scala +++ b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/ReactBridgeComponentNoSpecialPropsNoChildren.scala @@ -3,9 +3,11 @@ package io.kinoplan.scalajs.react.bridge import japgolly.scalajs.react.vdom.{TagMod, VdomElement} abstract class ReactBridgeComponentNoSpecialPropsNoChildren extends ReactBridgeComponent { + def apply(attrAndChildren: TagMod*): VdomElement = { val (props, children) = extractPropsAndChildren(attrAndChildren) new WithPropsAndTagModsAndChildren(jsComponent, props, children).apply } + } diff --git a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithProps.scala b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithProps.scala index d0fddde0..a2515eba 100644 --- a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithProps.scala +++ b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithProps.scala @@ -5,26 +5,26 @@ import scala.scalajs.js import japgolly.scalajs.react.vdom.{TagMod, VdomElement, VdomNode} class WithProps(jsComponent: JsComponentType, jsProps: js.Object) { + def apply(attrAndChildren: TagMod*): WithPropsAndTagsMods = { val (props, children) = extractPropsAndChildren(attrAndChildren) - val mergedProps = mergeJSObjects(props.asInstanceOf[js.Dynamic], jsProps.asInstanceOf[js.Dynamic]) + val mergedProps = mergeJSObjects( + props.asInstanceOf[js.Dynamic], + jsProps.asInstanceOf[js.Dynamic] + ) new WithPropsAndTagsMods(jsComponent, mergedProps.asInstanceOf[js.Object], children) } - def apply(children: VdomNode*): VdomElement = { - apply(List.empty[TagMod]: _*)(children: _*) - } + def apply(children: VdomNode*): VdomElement = apply(List.empty[TagMod]: _*)(children: _*) private def mergeJSObjects(objs: js.Dynamic*): js.Dynamic = { val result = js.Dictionary.empty[Any] - for (source <- objs) { - for ((key, value) <- source.asInstanceOf[js.Dictionary[Any]]) - result(key) = value - } + for (source <- objs) for ((key, value) <- source.asInstanceOf[js.Dictionary[Any]]) result(key) = value result.asInstanceOf[js.Dynamic] } + } object WithProps { diff --git a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithPropsAndTagsMods.scala b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithPropsAndTagsMods.scala index 2dea3795..8c96d1bb 100644 --- a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithPropsAndTagsMods.scala +++ b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithPropsAndTagsMods.scala @@ -5,9 +5,10 @@ import scala.scalajs.js import japgolly.scalajs.react.vdom.{VdomElement, VdomNode} class WithPropsAndTagsMods(jsComponent: JsComponentType, jsProps: js.Object, tagModChildren: List[VdomNode]) { - def apply(children: VdomNode*): VdomElement = { + + def apply(children: VdomNode*): VdomElement = new WithPropsAndTagModsAndChildren(jsComponent, jsProps, tagModChildren ++ children).apply - } + } object WithPropsAndTagsMods { diff --git a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithPropsNoChildren.scala b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithPropsNoChildren.scala index aa351083..876e513d 100644 --- a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithPropsNoChildren.scala +++ b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/WithPropsNoChildren.scala @@ -5,9 +5,10 @@ import scala.scalajs.js import japgolly.scalajs.react.vdom.{TagMod, VdomElement} class WithPropsNoChildren(jsComponent: JsComponentType, jsProps: js.Object) { - def apply(attrAndChildren: TagMod*): VdomElement = { + + def apply(attrAndChildren: TagMod*): VdomElement = new WithProps(jsComponent, jsProps).apply(attrAndChildren: _*).apply() - } + } object WithPropsNoChildren { diff --git a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/package.scala b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/package.scala index 86b35b46..528df263 100644 --- a/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/package.scala +++ b/utils/bridge/src/main/scala/io/kinoplan/scalajs/react/bridge/package.scala @@ -13,7 +13,11 @@ import japgolly.scalajs.react.vdom.{TagMod, VdomBuilder, VdomElement, VdomNode} import japgolly.scalajs.react.vdom.Implicits._ package object bridge extends GeneratedImplicits { - def writerFromConversion[A](implicit conv: A => js.Any): JsWriter[A] = JsWriter(x => x) + + def writerFromConversion[A](implicit + conv: A => js.Any + ): JsWriter[A] = JsWriter(x => x) + implicit def stringWriter: JsWriter[String] = writerFromConversion[String] implicit def boolWriter: JsWriter[Boolean] = writerFromConversion[Boolean] @@ -30,27 +34,32 @@ package object bridge extends GeneratedImplicits { implicit def unitWriter: JsWriter[Unit] = writerFromConversion[Unit] implicit def jsAnyWriter[A <: js.Any]: JsWriter[A] = JsWriter(identity) - implicit def callbackToWriter[T](implicit writerT: JsWriter[T]): JsWriter[CallbackTo[T]] = - JsWriter(value => value.map(writerT.toJs).runNow()) + implicit def callbackToWriter[T](implicit + writerT: JsWriter[T] + ): JsWriter[CallbackTo[T]] = JsWriter(value => value.map(writerT.toJs).runNow()) - implicit def undefOrWriter[A](implicit writerA: JsWriter[A]): JsWriter[js.UndefOr[A]] = - JsWriter(_.map(writerA.toJs)) + implicit def undefOrWriter[A](implicit + writerA: JsWriter[A] + ): JsWriter[js.UndefOr[A]] = JsWriter(_.map(writerA.toJs)) - implicit def optionWriter[A](implicit writerA: JsWriter[A]): JsWriter[Option[A]] = - JsWriter(_.map(writerA.toJs).orUndefined) + implicit def optionWriter[A](implicit + writerA: JsWriter[A] + ): JsWriter[Option[A]] = JsWriter(_.map(writerA.toJs).orUndefined) implicit def unionWriter[A, B](implicit - A: ClassTag[A], writerA: JsWriter[A], B: ClassTag[B], writerB: JsWriter[B] - ): JsWriter[A | B] = { - JsWriter { value => - A.unapply(value).map(writerA.toJs) - .orElse(B.unapply(value).map(writerB.toJs)) - .getOrElse(throw new RuntimeException(s"Value $value of type ($A | $B) matched neither}")) - } + A: ClassTag[A], + writerA: JsWriter[A], + B: ClassTag[B], + writerB: JsWriter[B] + ): JsWriter[A | B] = JsWriter { value => + A.unapply(value).map(writerA.toJs) + .orElse(B.unapply(value).map(writerB.toJs)) + .getOrElse( + throw new RuntimeException(s"Value $value of type ($A | $B) matched neither}") + ) } - implicit def enumerationWriter[T <: Enumeration#Value]: JsWriter[T] = - JsWriter(_.toString) + implicit def enumerationWriter[T <: Enumeration#Value]: JsWriter[T] = JsWriter(_.toString) implicit def baseSeqWriter[T: JsWriter]: JsWriter[scala.collection.Seq[T]] = { val elementWriter = implicitly[JsWriter[T]] @@ -58,25 +67,26 @@ package object bridge extends GeneratedImplicits { JsWriter(_.map(elementWriter.toJs).toJSArray) } - implicit def immutableSeqWriter[T : JsWriter]: JsWriter[scala.collection.immutable.Seq[T]] = { + implicit def immutableSeqWriter[T: JsWriter]: JsWriter[scala.collection.immutable.Seq[T]] = { val elementWriter = implicitly[JsWriter[T]] JsWriter((value: scala.collection.immutable.Seq[T]) => js.Array(value.map(e => elementWriter.toJs(e)): _*)) } - implicit def mapWriter[T : JsWriter]: JsWriter[Map[String, T]] = { + implicit def mapWriter[T: JsWriter]: JsWriter[Map[String, T]] = { val elementWriter = implicitly[JsWriter[T]] - JsWriter( - (value: Map[String, T]) => { + JsWriter { + (value: Map[String, T]) => val converted = value.map { case (k, v) => (k, elementWriter.toJs(v)) } js.Dictionary(converted.toSeq: _*) - } - ) + } } - implicit def futureWriter[A](implicit writeA: JsWriter[A], executionContext: ExecutionContext): JsWriter[Future[A]] = - JsWriter(_.map(writeA.toJs).toJSPromise) + implicit def futureWriter[A](implicit + writeA: JsWriter[A], + executionContext: ExecutionContext + ): JsWriter[Future[A]] = JsWriter(_.map(writeA.toJs).toJSPromise) implicit def vdomElementWriter: JsWriter[VdomElement] = JsWriter(_.rawElement) @@ -86,7 +96,11 @@ package object bridge extends GeneratedImplicits { implicit def reactNodeWriter: JsWriter[React.Node] = JsWriter(_.asInstanceOf[js.Dynamic]) - type JsComponentType = Js.ComponentSimple[Object, CtorType.Summoner.Aux[Object, Children.Varargs, CtorType.PropsAndChildren]#CT, Js.UnmountedWithRawType[Object, Null, Js.RawMounted[Object, Null]]] + type JsComponentType = Js.ComponentSimple[ + Object, + CtorType.Summoner.Aux[Object, Children.Varargs, CtorType.PropsAndChildren]#CT, + Js.UnmountedWithRawType[Object, Null, Js.RawMounted[Object, Null]] + ] def extractPropsAndChildren(attrAndChildren: Seq[TagMod]): (js.Object, List[VdomNode]) = { val b = new VdomBuilder.ToJs {} @@ -96,4 +110,5 @@ package object bridge extends GeneratedImplicits { (b.props, b.childrenAsVdomNodes) } + }