Updated to scalajs-react 1.2.3.

- Add JsImport's. - IndexChange now operates on Seq's. - Add crossScalaVersions. - Bump sbt to 1.2.0. - Bump scalaJS to 0.6.24 (and add sbt-scalajs-crossproject). - Bump version to 0.0.2.
trepidacious · trepidacious · Aug 3, 2018 · Jul 23, 2017 · Aug 1, 2018 · Aug 1, 2018
commit 1487d63f524dd43883a68f37db80a0b3f322e2ac
diff --git a/build.sbt b/build.sbt
@@ -1,10 +1,14 @@
-name := "scalajs-react-sortable-hoc root project"
+import sbtcrossproject.CrossPlugin.autoImport.crossProject
 
-version in ThisBuild := "0.1-SNAPSHOT"
+name := "scalajs-react-sortable-hoc root"
+
+version in ThisBuild := "0.0.2"
 
 organization in ThisBuild := "org.rebeam"
 
-scalaVersion in ThisBuild := "2.11.8"
+scalaVersion in ThisBuild := "2.12.6"
+
+crossScalaVersions in ThisBuild := Seq("2.11.12", "2.12.6")
 
 scalacOptions in ThisBuild ++= Seq(
   "-feature",
@@ -15,7 +19,7 @@ scalacOptions in ThisBuild ++= Seq(
   "-Xlint"
 )
 
-val scalajsReactVersion = "1.1.0"
+val scalajsReactVersion = "1.2.3"
 
 lazy val root = project.in(file(".")).
   aggregate(scalaJSReactSortableHOCJS, scalaJSReactSortableHOCJVM).
@@ -24,22 +28,14 @@ lazy val root = project.in(file(".")).
     publishLocal := {}
   )
 
-lazy val scalaJSReactSortableHOC = crossProject.in(file(".")).
+lazy val scalaJSReactSortableHOC = crossProject(JSPlatform, JVMPlatform).in(file(".")).
 
   //Settings for all projects
   settings(
-    name := "tree-material-ui",
-    version := "0.1-SNAPSHOT",
-    libraryDependencies ++= Seq()
-
-  //Settings specific to JVM
-  ).jvmSettings(
-    libraryDependencies ++= Seq()
-
-  //Settings specific to JS
+    name := "scalajs-react-sortable-hoc"
   ).jsSettings(
     //Scalajs dependencies that are used on the client only
-    libraryDependencies ++= Seq(      
+    libraryDependencies ++= Seq(
     	"com.github.japgolly.scalajs-react" %%% "core" % scalajsReactVersion,
       "com.github.japgolly.scalajs-react" %%% "extra" % scalajsReactVersion
 		)

diff --git a/js/src/main/scala/org/rebeam/sortable/IndexChange.scala b/js/src/main/scala/org/rebeam/sortable/IndexChange.scala
@@ -1,6 +1,6 @@
 package org.rebeam.sortable
 
-import scala.collection.mutable.ListBuffer
+import scala.collection.mutable
 
 /**
   * A change in index of an item generated by dragging
@@ -9,10 +9,11 @@ import scala.collection.mutable.ListBuffer
   * @param newIndex The item's new index
   */
 case class IndexChange(oldIndex: Int, newIndex: Int) {
-  def updatedList[A](l: List[A]) = {
-      val lb = ListBuffer(l: _*)
-      val e = lb.remove(oldIndex)
-      lb.insert(newIndex, e)
-      lb.toList
+  def updated[A](l: Seq[A]): Seq[A] = {
+    val lb = mutable.Buffer(l: _*)
+    val e = lb.remove(oldIndex)
+    lb.insert(newIndex, e)
+    lb
   }
 }
+
diff --git a/js/src/main/scala/org/rebeam/sortable/SortableContainer.scala b/js/src/main/scala/org/rebeam/sortable/SortableContainer.scala
@@ -1,13 +1,20 @@
 package org.rebeam.sortable
 
-import japgolly.scalajs.react.raw.ReactElement
-import japgolly.scalajs.react.{Callback, Children, GenericComponent, JsComponent, _}
+import japgolly.scalajs.react._
 
 import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
 import scala.language.higherKinds
 
 object SortableContainer {
 
+  @js.native
+  @JSImport("react-sortable-hoc", "SortableContainer", "Sortable.SortableContainer")
+  private object SortableContainerFacade extends js.Object {
+    def apply(wrapped: js.Any): js.Any = js.native
+  }
+
   @js.native
   protected trait Permutation extends js.Object {
     val oldIndex: Int = js.native
@@ -35,6 +42,7 @@ object SortableContainer {
     val onSortEnd: js.Function1[Permutation, Unit] = js.native
     //onSortStart <- undef or function({node, index, collection}, event)
     //onSortMove <- undef or function(event)
+    var key: js.UndefOr[Key] = js.native
   }
 
   object Props {
@@ -53,15 +61,16 @@ object SortableContainer {
               //getContainer <- undef or function returning scrollable container element, function(wrappedInstance: React element): DOM element.
               //getHelperDimensions <- undef or function({node, index, collection})
               //Note this function actually gets "{oldIndex, newIndex, collection}, e", but we don't have much use for the other arguments
-              onSortEnd: IndexChange => Callback = _ => Callback.empty
+              onSortEnd: IndexChange => Callback = _ => Callback.empty,
               //onSortStart <- undef or function({node, index, collection}, event)
               //onSortMove <- undef or function(event)
+              key: js.UndefOr[Key] = js.undefined
              ): Props =
       js.Dynamic.literal(
         axis = axis, lockAxis = lockAxis, helperClass = helperClass, transitionDuration = transitionDuration, pressDelay = pressDelay,
         distance = distance, useDragHandle = useDragHandle, useWindowAsScrollContainer = useWindowAsScrollContainer,
         hideSortableGhost = hideSortableGhost, lockToContainerEdges = lockToContainerEdges,
-        onSortEnd = js.defined { p: Permutation => onSortEnd(IndexChange(p.oldIndex, p.newIndex)).runNow() }
+        onSortEnd = js.defined { p: Permutation => onSortEnd(IndexChange(p.oldIndex, p.newIndex)).runNow() }, key = key.asInstanceOf[js.Any]
       ).asInstanceOf[Props]
   }
 
@@ -73,10 +82,10 @@ object SortableContainer {
     * @return A component wrapping the wrapped component...
     */
   def wrap[P, CT[_, _]](wrappedComponent: GenericComponent[P, CT, _]): Props => P => JsComponent.Unmounted[js.Object, Null] = {
-    (props) =>
-      (wrappedProps) => {
-        val reactElement = js.Dynamic.global.Sortable.SortableContainer(wrappedComponent.raw).asInstanceOf[ReactElement]
-        val component = JsComponent[js.Object, Children.None, Null](reactElement)
+    val reactElement = SortableContainerFacade(wrappedComponent.raw)
+    val component = JsComponent[js.Object, Children.None, Null](reactElement)
+    props =>
+      wrappedProps => {
         val mergedProps = js.Dynamic.literal()
         mergedProps.updateDynamic("axis")(props.axis)
         mergedProps.updateDynamic("lockAxis")(props.lockAxis)
@@ -89,10 +98,12 @@ object SortableContainer {
         mergedProps.updateDynamic("hideSortableGhost")(props.hideSortableGhost)
         mergedProps.updateDynamic("lockToContainerEdges")(props.lockToContainerEdges)
         mergedProps.updateDynamic("onSortEnd")(props.onSortEnd)
+        mergedProps.updateDynamic("key")(props.key.asInstanceOf[js.Any])
         mergedProps.updateDynamic("a")(wrappedProps.asInstanceOf[js.Any])
         component(mergedProps.asInstanceOf[js.Object])
       }
   }
+
 }
 
 
diff --git a/js/src/main/scala/org/rebeam/sortable/SortableElement.scala b/js/src/main/scala/org/rebeam/sortable/SortableElement.scala
@@ -1,25 +1,34 @@
 package org.rebeam.sortable
 
-import japgolly.scalajs.react.raw.ReactElement
-import japgolly.scalajs.react.{Children, GenericComponent, JsComponent, _}
+import japgolly.scalajs.react._
 
 import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
 import scala.language.higherKinds
 
 object SortableElement {
 
+  @js.native
+  @JSImport("react-sortable-hoc", "SortableElement", "Sortable.SortableElement")
+  private object SortableElementFacade extends js.Object {
+    def apply(wrapped: js.Any): js.Any = js.native
+  }
+
   @js.native
   trait Props extends js.Object {
     var index: Int = js.native
     var collection: Int = js.native
     var disabled: Boolean = js.native
+    var key: js.UndefOr[Key] = js.native
   }
 
   object Props {
     def apply(index: Int,
               collection: Int = 0,
-              disabled: Boolean = false): Props =
-      js.Dynamic.literal(index = index, collection = collection, disabled = disabled).asInstanceOf[Props]
+              disabled: Boolean = false,
+              key: js.UndefOr[Key] = js.undefined): Props =
+      js.Dynamic.literal(index = index, collection = collection, disabled = disabled, key = key.asInstanceOf[js.Any]).asInstanceOf[Props]
   }
 
   /**
@@ -29,13 +38,14 @@ object SortableElement {
     * @return                 A component wrapping the wrapped component...
     */
   def wrap[P, CT[_,_]](wrappedComponent: GenericComponent[P, CT, _]): Props => P => JsComponent.Unmounted[js.Object, Null] = {
-    (props) => (wrappedProps) => {
-      val reactElement = js.Dynamic.global.Sortable.SortableElement(wrappedComponent.raw).asInstanceOf[ReactElement]
-      val component = JsComponent[js.Object, Children.None, Null](reactElement)
+    val reactElement = SortableElementFacade(wrappedComponent.raw)
+    val component = JsComponent[js.Object, Children.None, Null](reactElement)
+    props => wrappedProps => {
       val mergedProps = js.Dynamic.literal()
       mergedProps.updateDynamic("index")(props.index)
       mergedProps.updateDynamic("collection")(props.collection)
       mergedProps.updateDynamic("disabled")(props.disabled)
+      mergedProps.updateDynamic("key")(props.key.asInstanceOf[js.Any])
       mergedProps.updateDynamic("a")(wrappedProps.asInstanceOf[js.Any])
       component(mergedProps.asInstanceOf[js.Object])
     }

diff --git a/js/src/main/scala/org/rebeam/sortable/SortableHandle.scala b/js/src/main/scala/org/rebeam/sortable/SortableHandle.scala
@@ -1,24 +1,30 @@
 package org.rebeam.sortable
 
 import japgolly.scalajs.react._
-import japgolly.scalajs.react.raw.ReactElement
 
 import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
 import scala.language.higherKinds
 
 object SortableHandle {
+  @js.native
+  @JSImport("react-sortable-hoc", "SortableHandle", "Sortable.SortableHandle")
+  private object SortableHandleFacade extends js.Object {
+    def apply(wrapped: js.Any): js.Any = js.native
+  }
+
   /**
     * Wrap another component
     *
     * @param wrappedComponent The wrapped component itself
     * @tparam P The type of Props of the wrapped component
     * @return A component wrapping the wrapped component
     */
-
   def wrap[P, CT[_, _]](wrappedComponent: GenericComponent[P, CT, _]): P => JsComponent.Unmounted[js.Object, Null] = {
-    (wrappedProps) => {
-      val reactElement = js.Dynamic.global.Sortable.SortableHandle(wrappedComponent.raw).asInstanceOf[ReactElement]
-      val component = JsComponent[js.Object, Children.None, Null](reactElement)
+    val reactElement = SortableHandleFacade(wrappedComponent.raw)
+    val component = JsComponent[js.Object, Children.None, Null](reactElement)
+    wrappedProps => {
       val mergedProps = js.Dynamic.literal()
       mergedProps.updateDynamic("a")(wrappedProps.asInstanceOf[js.Any])
       component(mergedProps.asInstanceOf[js.Object])

diff --git a/js/src/main/scala/org/rebeam/sortable/demo/SortableContainerDemo.scala b/js/src/main/scala/org/rebeam/sortable/demo/SortableContainerDemo.scala
@@ -43,7 +43,7 @@ object SortableContainerDemo {
         SortableContainer.Props(
           onSortEnd = p =>
             scope.modState(
-              l => p.updatedList(l)
+              l => p.updated(l).toList
             ),
           useDragHandle = true,
           helperClass = "react-sortable-handler"

diff --git a/project/build.properties b/project/build.properties
@@ -1 +1 @@
-sbt.version=0.13.15
+sbt.version=1.2.0
diff --git a/project/plugins.sbt b/project/plugins.sbt
@@ -1,3 +1,5 @@
-addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.13")
+addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.24")
 
-addSbtPlugin("io.spray" % "sbt-revolver" % "0.8.0")
+addSbtPlugin("org.portable-scala" % "sbt-scalajs-crossproject" % "0.5.0")
+
+addSbtPlugin("io.spray" % "sbt-revolver" % "0.9.1")