From 577739b65ca22e15236debd9feb994f262c33a93 Mon Sep 17 00:00:00 2001 From: Antoine Doeraene Date: Thu, 15 Aug 2024 17:43:17 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20Moving=20Table=20to=20compat.Tab?= =?UTF-8?q?le?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit So that it's more inlined with the new Table from SAP. --- VERSION2MIGRATION.md | 2 +- demo/src/main/scala/demo/CardExample.scala | 16 +-- demo/src/main/scala/demo/TableExample.scala | 132 +++++++++--------- ...{TableCell.scala => TableCellCompat.scala} | 2 +- ...leColumn.scala => TableColumnCompat.scala} | 2 +- .../ui5/{Table.scala => TableCompat.scala} | 12 +- .../{TableRow.scala => TableRowCompat.scala} | 4 +- .../webcomponents/ui5/deprecatedstuff.scala | 19 +++ 8 files changed, 103 insertions(+), 86 deletions(-) rename web-components/src/main/scala/be/doeraene/webcomponents/ui5/{TableCell.scala => TableCellCompat.scala} (94%) rename web-components/src/main/scala/be/doeraene/webcomponents/ui5/{TableColumn.scala => TableColumnCompat.scala} (96%) rename web-components/src/main/scala/be/doeraene/webcomponents/ui5/{Table.scala => TableCompat.scala} (89%) rename web-components/src/main/scala/be/doeraene/webcomponents/ui5/{TableRow.scala => TableRowCompat.scala} (92%) diff --git a/VERSION2MIGRATION.md b/VERSION2MIGRATION.md index 8468227..862b0a3 100644 --- a/VERSION2MIGRATION.md +++ b/VERSION2MIGRATION.md @@ -12,7 +12,7 @@ Despite that, some changes live outside of these compiler messages, and we highl ## 🚨 Breaking changes requiring your attention -1. Table has changed, and requires a new npm package import. If you were using the `Table` component, you need to add this extra package import in your `package.json`: `"@ui5/webcomponents-compat": "2.0.1"`. +1. Table has changed, and requires a new npm package import. If you were using the `Table` component, you need to add this extra package import in your `package.json`: `"@ui5/webcomponents-compat": "2.0.1"`. Also, since there will be a new `Table`, we moved the current Table implementation inside a `compat` object. This will be notified via deprecation notice, unless you skipped 2.0.0 and went directly higher, then you will end up with the new one "by mistake". 2. The default value of wrapping types has been switch. if you want to have word wrapping, you now need to actively add `_.wrappingType := WrappingType.None` 3. In ComboBox with groups, grouping is now done via nesting of items inside the groups, rather than a flat structure diff --git a/demo/src/main/scala/demo/CardExample.scala b/demo/src/main/scala/demo/CardExample.scala index 003dc5e..f4eebe3 100644 --- a/demo/src/main/scala/demo/CardExample.scala +++ b/demo/src/main/scala/demo/CardExample.scala @@ -108,30 +108,30 @@ object CardExample extends Example("Card") { Card( _.slots.header := Card .header(_.titleText := "New Purchase Orders", _.subtitleText := "Today", _.additionalText := "3 of 15"), - Table( + compat.Table( className := contentPadding, - _.slots.columns := TableColumn(Label("Sales Order")), - _.slots.columns := TableColumn(Label("Customer")), - _.slots.columns := TableColumn(Label("Net Amount")), - _.slots.columns := TableColumn( + _.slots.columns := compat.TableColumn(Label("Sales Order")), + _.slots.columns := compat.TableColumn(Label("Customer")), + _.slots.columns := compat.TableColumn(Label("Net Amount")), + _.slots.columns := compat.TableColumn( _.minWidth := 450, _.popinText := "Status", _.demandPopin := true, Label("Status") ), - TableRow( + compat.TableRow( _.cell(Label("5000010050")), _.cell(Label("Entertainment Argentinia")), _.cell(Label("6k USD")), _.cell(className := statusSuccess, "Approved") ), - TableRow( + compat.TableRow( _.cell(Label("5000010051")), _.cell(Label("Brazil Technologies")), _.cell(Label("2k USD")), _.cell(className := statusError, "Rejected") ), - TableRow( + compat.TableRow( _.cell(Label("5000010052")), _.cell(Label("Robert Brown Ent.")), _.cell(Label("17k USD")), diff --git a/demo/src/main/scala/demo/TableExample.scala b/demo/src/main/scala/demo/TableExample.scala index 9b0acd1..6bf1e12 100644 --- a/demo/src/main/scala/demo/TableExample.scala +++ b/demo/src/main/scala/demo/TableExample.scala @@ -36,19 +36,19 @@ object TableExample extends Example("Table") { span("Cards table - resize your browser to make some columns pop-in"), Button(_.events.onClick.mapTo(()) --> toggleStickyHeaderBus, "Toggle Sticky Column Header") ), - Table( + compat.Table( _.stickyColumnHeader <-- stickyHeaderSignal, - _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), - _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), - _.slots.columns := Table.column( - _.minWidth := 600, - _.popinText := "Comment", + _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), + _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), + _.slots.columns := compat.Table.column( + _.minWidth := 600, + _.popinText := "Comment", _.demandPopin := true, span(lineHeight := "1.4rem", "Comment") ), - _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")), + _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")), MTG.cards.map(card => - Table.row( + compat.Table.row( _.cell(card.name), _.cell(card.tpe), _.cell(card.comment), @@ -61,19 +61,19 @@ object TableExample extends Example("Table") { }, DemoPanel("Table in SingleSelect-mode")( //-- Begin: Table in SingleSelect-mode - Table( - _.mode := TableMode.SingleSelect, - _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), - _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), - _.slots.columns := Table.column( - _.minWidth := 600, - _.popinText := "Comment", + compat.Table( + _.mode := TableMode.SingleSelect, + _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), + _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), + _.slots.columns := compat.Table.column( + _.minWidth := 600, + _.popinText := "Comment", _.demandPopin := true, span(lineHeight := "1.4rem", "Comment") ), - _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")), + _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")), MTG.cards.map(card => - Table.row( + compat.Table.row( _.cell(card.name), _.cell(card.tpe), _.cell(card.comment), @@ -85,20 +85,20 @@ object TableExample extends Example("Table") { ), DemoPanel("Table in MultiSelect mode")( //-- Begin: Table in MultiSelect mode" - Table( + compat.Table( _.events.onSelectionChange.map(_.detail.selectedRows.map(_.dataset.toMap)) --> Observer(println), - _.mode := TableMode.MultiSelect, - _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), - _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), - _.slots.columns := Table.column( - _.minWidth := 600, - _.popinText := "Comment", + _.mode := TableMode.MultiSelect, + _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), + _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), + _.slots.columns := compat.Table.column( + _.minWidth := 600, + _.popinText := "Comment", _.demandPopin := true, span(lineHeight := "1.4rem", "Comment") ), - _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")), + _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")), MTG.cards.map(card => - Table.row( + compat.Table.row( dataAttr("card-name") := card.name, _.cell(card.name), _.cell(card.tpe), @@ -111,17 +111,17 @@ object TableExample extends Example("Table") { ), DemoPanel("Table with No Data")( //-- Begin: Table with No Data - Table( - _.noDataText := "No Data", - _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), - _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), - _.slots.columns := Table.column( - _.minWidth := 600, - _.popinText := "Comment", + compat.Table( + _.noDataText := "No Data", + _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), + _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), + _.slots.columns := compat.Table.column( + _.minWidth := 600, + _.popinText := "Comment", _.demandPopin := true, span(lineHeight := "1.4rem", "Comment") ), - _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")) + _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")) ) //-- End ), @@ -141,25 +141,25 @@ object TableExample extends Example("Table") { .scanLeft(0)(_ + _) .map(_ > 0) - Table( - _.busy <-- busyState, + compat.Table( + _.busy <-- busyState, _.growing := TableGrowingMode.Button, _.growingButtonSubtext <-- numberOfLoadedCards .map(_ min totalNumberOfCards) .map(n => s"[$n / $totalNumberOfCards]"), _.events.onLoadMore.mapTo(()) --> loadMoreBus, - _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), - _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), - _.slots.columns := Table.column( - _.minWidth := 600, - _.popinText := "Comment", + _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), + _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), + _.slots.columns := compat.Table.column( + _.minWidth := 600, + _.popinText := "Comment", _.demandPopin := true, span(lineHeight := "1.4rem", "Comment") ), - _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")), + _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")), children <-- cardsToDisplay.map( _.map(card => - Table.row( + compat.Table.row( dataAttr("card-name") := card.name, _.cell(card.name), _.cell(card.tpe), @@ -189,23 +189,23 @@ object TableExample extends Example("Table") { div( overflowY := "scroll", - height := "400px", - Table( - _.busy <-- busyState, + height := "400px", + compat.Table( + _.busy <-- busyState, _.growing := TableGrowingMode.Scroll, _.events.onLoadMore.mapTo(()) --> loadMoreBus, - _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), - _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), - _.slots.columns := Table.column( - _.minWidth := 600, - _.popinText := "Comment", + _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), + _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), + _.slots.columns := compat.Table.column( + _.minWidth := 600, + _.popinText := "Comment", _.demandPopin := true, span(lineHeight := "1.4rem", "Comment") ), - _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")), + _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")), children <-- cardsToDisplay.map( _.map(card => - Table.row( + compat.Table.row( dataAttr("card-name") := card.name, _.cell(card.name), _.cell(card.tpe), @@ -220,11 +220,11 @@ object TableExample extends Example("Table") { }, DemoPanel("Table with grouping (SingleSelect)")( //-- Begin: Table with grouping (SingleSelect) - Table( - _.mode := TableMode.SingleSelect, - _.slots.columns := Table.column(Label("City")), - _.slots.columns := Table.column(Label("Population")), - _.slots.columns := Table.column(Label("Country")), + compat.Table( + _.mode := TableMode.SingleSelect, + _.slots.columns := compat.Table.column(Label("City")), + _.slots.columns := compat.Table.column(Label("Population")), + _.slots.columns := compat.Table.column(Label("Country")), _.groupRow("Country: Belgium"), _.row(_.cell("Brussels"), _.cell("1.2 millions"), _.cell("Belgium")), _.row(_.cell("Antwerp"), _.cell("500,000"), _.cell("Belgium")), @@ -248,18 +248,18 @@ object TableExample extends Example("Table") { ) ) ), - Table( - _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), - _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), - _.slots.columns := Table.column( - _.minWidth := 600, - _.popinText := "Comment", + compat.Table( + _.slots.columns := compat.Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")), + _.slots.columns := compat.Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")), + _.slots.columns := compat.Table.column( + _.minWidth := 600, + _.popinText := "Comment", _.demandPopin := true, span(lineHeight := "1.4rem", "Comment") ), - _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")), + _.slots.columns := compat.Table.column(span(lineHeight := "1.4rem", "Cost")), MTG.cards.map(card => - Table.row( + compat.Table.row( _.navigated <-- isCurrentNavigatedCardSignal(card), _.cell(card.name), _.cell(card.tpe), diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCellCompat.scala similarity index 94% rename from web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala rename to web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCellCompat.scala index 1d20a21..c26bb25 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCellCompat.scala @@ -9,7 +9,7 @@ import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent -object TableCell extends WebComponent { +object TableCellCompat extends WebComponent { @js.native trait RawElement extends js.Object {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumnCompat.scala similarity index 96% rename from web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala rename to web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumnCompat.scala index 58dd320..ecb632d 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumnCompat.scala @@ -15,7 +15,7 @@ import com.raquo.laminar.codecs.BooleanAsAttrPresenceCodec import be.doeraene.webcomponents.WebComponent import be.doeraene.webcomponents.ui5.configkeys.TableColumnPopinDisplay -object TableColumn extends WebComponent { +object TableColumnCompat extends WebComponent { @js.native trait RawElement extends js.Object {} diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCompat.scala similarity index 89% rename from web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala rename to web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCompat.scala index 5f28aaf..efb7231 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCompat.scala @@ -10,15 +10,13 @@ import com.raquo.laminar.keys.HtmlAttr import com.raquo.laminar.nodes.ReactiveHtmlElement import org.scalajs.dom -import scala.compiletime.ops.int.<= - import scala.concurrent.duration.FiniteDuration import scala.scalajs.js import scala.scalajs.js.annotation.JSImport import be.doeraene.webcomponents.WebComponent import be.doeraene.webcomponents.ui5.configkeys.TableColumnPopinDisplay -object Table extends WebComponent { +object TableCompat extends WebComponent { @js.native trait RawElement extends js.Object {} @@ -54,16 +52,16 @@ object Table extends WebComponent { @js.native trait TableSelectionChangeDetail extends js.Object { - def previouslySelectedRows: js.Array[TableRow.Ref] = js.native + def previouslySelectedRows: js.Array[TableRowCompat.Ref] = js.native - def selectedRows: js.Array[TableRow.Ref] = js.native + def selectedRows: js.Array[TableRowCompat.Ref] = js.native } val onSelectionChange = new EventProp[dom.Event & HasDetail[TableSelectionChangeDetail]]("selection-change") } - def column: TableColumn.type = TableColumn - def row: TableRow.type = TableRow + def column: TableColumnCompat.type = TableColumnCompat + def row: TableRowCompat.type = TableRowCompat def groupRow(mods: Mod[ReactiveHtmlElement[dom.HTMLElement]]*): HtmlElement = htmlTag[dom.HTMLElement]("ui5-table-group-row")(mods*) diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRowCompat.scala similarity index 92% rename from web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala rename to web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRowCompat.scala index 62d0cea..4432cf4 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRowCompat.scala @@ -11,7 +11,7 @@ import be.doeraene.webcomponents.WebComponent import com.raquo.laminar.codecs.BooleanAsAttrPresenceCodec import com.raquo.laminar.keys.HtmlAttr -object TableRow extends WebComponent { +object TableRowCompat extends WebComponent { @js.native trait RawElement extends js.Object {} @@ -30,5 +30,5 @@ object TableRow extends WebComponent { lazy val navigated: HtmlAttr[Boolean] = htmlAttr("navigated", BooleanAsAttrPresenceCodec) //noinspection TypeAnnotation - val cell = TableCell + val cell = TableCellCompat } diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/deprecatedstuff.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/deprecatedstuff.scala index 1b7df94..68f7117 100644 --- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/deprecatedstuff.scala +++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/deprecatedstuff.scala @@ -3,7 +3,26 @@ package be.doeraene.webcomponents.ui5 @deprecated("Badge has been renamed to Tag", since = "2.0.0") def Badge = Tag +@deprecated("Table is deprecated while waiting for the Table v2 implementation. Use compat.Table instead", since = "2.0.0") +def Table = TableCompat + +@deprecated("Table is deprecated while waiting for the Table v2 implementation. Use compat.Table instead", since = "2.0.0") +def TableRow = TableRowCompat + +@deprecated("Table is deprecated while waiting for the Table v2 implementation. Use compat.Table instead", since = "2.0.0") +def TableColumn = TableColumnCompat + +@deprecated("Table is deprecated while waiting for the Table v2 implementation. Use compat.Table instead", since = "2.0.0") +def TableCell = TableCellCompat + @scala.annotation.compileTimeOnly( "UListGroupHeader has been replaced by UListGroup, and the structure of your list items now needs to be nested." ) def UListGroupHeader = ??? + +object compat { + def Table = TableCompat + def TableRow = TableRowCompat + def TableColumn = TableColumnCompat + def TableCell = TableCellCompat +}