Updated to scalajs-react 1.1.0.

build.sbt

@@ -15,7 +15,7 @@ scalacOptions in ThisBuild ++= Seq(
   "-Xlint"
 )
 
-val scalajsReactVersion = "0.11.3"
+val scalajsReactVersion = "1.1.0"
 
 lazy val root = project.in(file(".")).
   aggregate(scalaJSReactSortableHOCJS, scalaJSReactSortableHOCJVM).

js/src/main/scala/org/rebeam/sortable/SortableContainer.scala

@@ -1,85 +1,98 @@
 package org.rebeam.sortable
 
-import japgolly.scalajs.react._
+import japgolly.scalajs.react.raw.ReactElement
+import japgolly.scalajs.react.{Callback, Children, GenericComponent, JsComponent, _}
 
 import scala.scalajs.js
+import scala.language.higherKinds
 
 object SortableContainer {
+
   @js.native
-  trait PermutationJS extends js.Object {
-    val oldIndex: Int                              = js.native
-    val newIndex: Int                              = js.native
+  protected trait Permutation extends js.Object {
+    val oldIndex: Int = js.native
+    val newIndex: Int = js.native
     //Could have collection as well
   }
 
-  case class Props(
-    axis: js.UndefOr[String] = js.undefined,
-    lockAxis: js.UndefOr[String] = js.undefined,
-    helperClass: js.UndefOr[String] = js.undefined,
-    transitionDuration: js.UndefOr[Int] = js.undefined,
-    pressDelay: js.UndefOr[Int] = js.undefined,
-    distance: js.UndefOr[Int] = js.undefined,
+  @js.native
+  trait Props extends js.Object {
+    val axis: js.UndefOr[String] = js.native
+    val lockAxis: js.UndefOr[String] = js.native
+    val helperClass: js.UndefOr[String] = js.native
+    val transitionDuration: js.UndefOr[Int] = js.native
+    val pressDelay: js.UndefOr[Int] = js.native
+    val distance: js.UndefOr[Int] = js.native
     //shouldCancelStart <- undef or a function from event to Boolean
-
-    useDragHandle: js.UndefOr[Boolean] = js.undefined,
-    useWindowAsScrollContainer: js.UndefOr[Boolean] = js.undefined,
-    hideSortableGhost: js.UndefOr[Boolean] = js.undefined,
-    lockToContainerEdges: js.UndefOr[Boolean] = js.undefined,
+    val useDragHandle: js.UndefOr[Boolean] = js.native
+    val useWindowAsScrollContainer: js.UndefOr[Boolean] = js.native
+    val hideSortableGhost: js.UndefOr[Boolean] = js.native
+    val lockToContainerEdges: js.UndefOr[Boolean] = js.native
     //lockOffset <- really not sure what this is from docs - maybe a string like "50%"?
     //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 = p => Callback{}
+    val onSortEnd: js.Function1[Permutation, Unit] = js.native
     //onSortStart <- undef or function({node, index, collection}, event)
     //onSortMove <- undef or function(event)
-  ) {
-    private[sortable] def toJS = {
-      val p = js.Dynamic.literal()
-      axis.foreach(p.updateDynamic("axis")(_))
-      lockAxis.foreach(p.updateDynamic("lockAxis")(_))
-      helperClass.foreach(p.updateDynamic("helperClass")(_))
-      transitionDuration.foreach(p.updateDynamic("transitionDuration")(_))
-      pressDelay.foreach(p.updateDynamic("pressDelay")(_))
-      distance.foreach(p.updateDynamic("distance")(_))
-      useDragHandle.foreach(p.updateDynamic("useDragHandle")(_))
-      useWindowAsScrollContainer.foreach(p.updateDynamic("useWindowAsScrollContainer")(_))
-      hideSortableGhost.foreach(p.updateDynamic("hideSortableGhost")(_))
-      lockToContainerEdges.foreach(p.updateDynamic("lockToContainerEdges")(_))
-
-      def permutationFromJS(p: PermutationJS): IndexChange = IndexChange(p.oldIndex, p.newIndex)
-
-      val onSortEndJS: (PermutationJS) => Unit = pjs => {
-        val p = permutationFromJS(pjs)
-        onSortEnd(p).runNow()
-      }
-
-      p.updateDynamic("onSortEnd")(onSortEndJS)
-
-      //TODO other callbacks
+  }
 
-      p
-    }
+  object Props {
+    def apply(axis: js.UndefOr[String] = js.undefined,
+              lockAxis: js.UndefOr[String] = js.undefined,
+              helperClass: js.UndefOr[String] = js.undefined,
+              transitionDuration: js.UndefOr[Int] = js.undefined,
+              pressDelay: js.UndefOr[Int] = js.undefined,
+              distance: js.UndefOr[Int] = js.undefined,
+              //shouldCancelStart <- undef or a function from event to Boolean
+              useDragHandle: js.UndefOr[Boolean] = js.undefined,
+              useWindowAsScrollContainer: js.UndefOr[Boolean] = js.undefined,
+              hideSortableGhost: js.UndefOr[Boolean] = js.undefined,
+              lockToContainerEdges: js.UndefOr[Boolean] = js.undefined,
+              //lockOffset <- really not sure what this is from docs - maybe a string like "50%"?
+              //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
+              //onSortStart <- undef or function({node, index, collection}, event)
+              //onSortMove <- undef or function(event)
+             ): 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() }
+      ).asInstanceOf[Props]
   }
 
   /**
     * 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...
+    * @tparam P The type of Props of the wrapped component
+    * @return A component wrapping the wrapped component...
     */
-  def wrap[P](wrappedComponent: ReactComponentC[P,_,_,_]): Props => P => ReactComponentU_ = {
-
-    val componentFactoryFunction = js.Dynamic.global.SortableContainer(wrappedComponent.factory)
-    val componentFactory = React.asInstanceOf[js.Dynamic].createFactory(componentFactoryFunction)
-
-    (props) => (wrappedProps) => {
-      val p = props.toJS
-      p.updateDynamic("v")(wrappedProps.asInstanceOf[js.Any])
-      componentFactory(p).asInstanceOf[ReactComponentU_]
-    }
+  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 mergedProps = js.Dynamic.literal()
+        mergedProps.updateDynamic("axis")(props.axis)
+        mergedProps.updateDynamic("lockAxis")(props.lockAxis)
+        mergedProps.updateDynamic("helperClass")(props.helperClass)
+        mergedProps.updateDynamic("transitionDuration")(props.transitionDuration)
+        mergedProps.updateDynamic("pressDelay")(props.pressDelay)
+        mergedProps.updateDynamic("distance")(props.distance)
+        mergedProps.updateDynamic("useDragHandle")(props.useDragHandle)
+        mergedProps.updateDynamic("useWindowAsScrollContainer")(props.useWindowAsScrollContainer)
+        mergedProps.updateDynamic("hideSortableGhost")(props.hideSortableGhost)
+        mergedProps.updateDynamic("lockToContainerEdges")(props.lockToContainerEdges)
+        mergedProps.updateDynamic("onSortEnd")(props.onSortEnd)
+        mergedProps.updateDynamic("a")(wrappedProps.asInstanceOf[js.Any])
+        component(mergedProps.asInstanceOf[js.Object])
+      }
   }
-
 }
 
 

js/src/main/scala/org/rebeam/sortable/SortableElement.scala

@@ -1,30 +1,43 @@
 package org.rebeam.sortable
 
-import japgolly.scalajs.react._
+import japgolly.scalajs.react.raw.ReactElement
+import japgolly.scalajs.react.{Children, GenericComponent, JsComponent, _}
 
 import scala.scalajs.js
+import scala.language.higherKinds
 
 object SortableElement {
-  case class Props(index: Int,
-                   collection: Int = 0,
-                   disabled: Boolean = false)
+
+  @js.native
+  trait Props extends js.Object {
+    var index: Int = js.native
+    var collection: Int = js.native
+    var disabled: Boolean = 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]
+  }
 
   /**
     * 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](wrappedComponent: ReactComponentC[P,_,_,_]): Props => P => ReactComponentU_ = {
-
-    val componentFactoryFunction = js.Dynamic.global.SortableElement(wrappedComponent.factory)
-    val componentFactory = React.asInstanceOf[js.Dynamic].createFactory(componentFactoryFunction)
-
-    (props) => (wrappedProps) => componentFactory(js.Dynamic.literal(
-      "index" -> props.index,
-      "collection" -> props.collection,
-      "disabled" -> props.disabled,
-      "v" -> wrappedProps.asInstanceOf[js.Any]
-    )).asInstanceOf[ReactComponentU_]
+  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 mergedProps = js.Dynamic.literal()
+      mergedProps.updateDynamic("index")(props.index)
+      mergedProps.updateDynamic("collection")(props.collection)
+      mergedProps.updateDynamic("disabled")(props.disabled)
+      mergedProps.updateDynamic("a")(wrappedProps.asInstanceOf[js.Any])
+      component(mergedProps.asInstanceOf[js.Object])
+    }
   }
 }

js/src/main/scala/org/rebeam/sortable/SortableHandle.scala

@@ -1,23 +1,27 @@
 package org.rebeam.sortable
 
 import japgolly.scalajs.react._
+import japgolly.scalajs.react.raw.ReactElement
 
 import scala.scalajs.js
+import scala.language.higherKinds
 
 object SortableHandle {
   /**
     * 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
+    * @tparam P The type of Props of the wrapped component
+    * @return A component wrapping the wrapped component
     */
-  def wrap[P](wrappedComponent: ReactComponentC[P,_,_,_]): P => ReactComponentU_ = {
 
-    val componentFactoryFunction = js.Dynamic.global.SortableHandle(wrappedComponent.factory)
-    val componentFactory = React.asInstanceOf[js.Dynamic].createFactory(componentFactoryFunction)
-
-    (wrappedProps) => componentFactory(js.Dynamic.literal(
-      "v" -> wrappedProps.asInstanceOf[js.Any]
-    )).asInstanceOf[ReactComponentU_]
+  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 mergedProps = js.Dynamic.literal()
+      mergedProps.updateDynamic("a")(wrappedProps.asInstanceOf[js.Any])
+      component(mergedProps.asInstanceOf[js.Object])
+    }
   }
 }

js/src/main/scala/org/rebeam/sortable/SortableView.scala

@@ -1,15 +1,15 @@
 package org.rebeam.sortable
 
-import japgolly.scalajs.react.ReactComponentB
-import japgolly.scalajs.react.vdom.prefix_<^._
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.html_<^._
 
 object SortableView {
 
   import japgolly.scalajs.react.vdom.SvgTags._
   import japgolly.scalajs.react.vdom.SvgAttrs._
 
-  private val handleGrip = ReactComponentB[Unit]("HandleGrip")
-    .render(_ =>
+  private val handleGrip = ScalaComponent.builder[Unit]("HandleGrip")
+    .renderStatic(
       <.div(
         ^.className := "react-sortable-handle",
         svg(

js/src/main/scala/org/rebeam/sortable/demo/SortableContainerDemo.scala

@@ -1,13 +1,13 @@
 package org.rebeam.sortable.demo
 
 import japgolly.scalajs.react._
-import japgolly.scalajs.react.vdom.prefix_<^._
+import japgolly.scalajs.react.vdom.html_<^._
 import org.rebeam.sortable._
 
 object SortableContainerDemo {
 
   // Equivalent of ({value}) => <li>{value}</li> in original demo
-  val itemView = ReactComponentB[String]("liView")
+  val itemView = ScalaComponent.builder[String]("liView")
     .render(d => {
       <.div(
         ^.className := "react-sortable-item",
@@ -21,11 +21,11 @@ object SortableContainerDemo {
   val sortableItem = SortableElement.wrap(itemView)
 
   // Equivalent of the `({items}) =>` lambda passed to SortableContainer in original demo
-  val listView = ReactComponentB[List[String]]("listView")
+  val listView = ScalaComponent.builder[List[String]]("listView")
     .render(d => {
       <.div(
         ^.className := "react-sortable-list",
-        d.props.zipWithIndex.map {
+        d.props.zipWithIndex.toTagMod {
           case (value, index) =>
             sortableItem(SortableElement.Props(index = index))(value)
         }
@@ -54,7 +54,7 @@ object SortableContainerDemo {
 
   val defaultItems = Range(0, 10).map("Item " + _).toList
 
-  val c = ReactComponentB[Unit]("SortableContainerDemo")
+  val c = ScalaComponent.builder[Unit]("SortableContainerDemo")
     .initialState(defaultItems)
     .backend(new Backend(_))
     .render(s => s.backend.render(s.props, s.state))

project/build.properties

@@ -1 +1 @@
-sbt.version=0.13.13
+sbt.version=0.13.15