react-basic 2 (#2)

Author: spicydonuts

bower.json

@@ -7,8 +7,8 @@
     "url": "https://github.com/lumihq/purescript-react-dnd-basic.git"
   },
   "dependencies": {
-    "purescript-prelude": "^4.0.0",
-    "purescript-react-basic": "^1.0.0",
+    "purescript-prelude": "^4.1.0",
+    "purescript-react-basic": "^2.0.0",
     "purescript-nullable": "^4.0.0",
     "purescript-promises": "^3.0.0"
   },

examples/basic/src/Basic.purs

@@ -5,21 +5,21 @@ import Prelude
 import Data.Array ((!!), drop, mapWithIndex, take)
 import Data.Foldable (for_)
 import Data.Maybe (Maybe(Nothing), fromMaybe, maybe)
-import React.Basic (ReactComponent, createElement, fragment, react)
+import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (targetChecked)
 import React.Basic.Events as Events
 import React.Basic.ReactDND (DragDrop, DragDropContextProps, DragDropItemType(..), createDragDrop, createDragDropContext)
 import React.Basic.ReactDND.Backends.HTML5Backend (html5Backend)
 
-dndContext :: ReactComponent DragDropContextProps
+dndContext :: React.Component DragDropContextProps
 dndContext = createDragDropContext html5Backend
 
 dnd :: DragDrop { itemId :: String, index :: Int }
 dnd = createDragDrop (DragDropItemType "TODO_ITEM")
 
-component :: ReactComponent {}
-component = react { displayName: "BasicExample", initialState, receiveProps, render }
+component :: React.Component {}
+component = React.component { displayName: "BasicExample", initialState, receiveProps, render }
   where
     initialState =
       { todos:
@@ -29,22 +29,22 @@ component = react { displayName: "BasicExample", initialState, receiveProps, ren
           ]
       }
 
-    receiveProps _ _ _ =
+    receiveProps _ =
       pure unit
 
-    render _ state setState =
-      createElement dndContext
+    render { state, setState } =
+      React.element dndContext
         { child:
-            fragment
+            React.fragment
               [ R.h1_ [ R.text "Todos" ]
               , R.p_ [ R.text "Drag to reorder the list:" ]
               , R.section_ (mapWithIndex renderTodo state.todos)
               ]
         }
 
       where
-        renderTodo index todo = 
-          createElement dnd.dragSource
+        renderTodo index todo =
+          React.element dnd.dragSource
             { beginDrag: \_ -> pure
                 { itemId: todo.id
                 , index
@@ -54,7 +54,7 @@ component = react { displayName: "BasicExample", initialState, receiveProps, ren
             , isDragging: \{ item: draggingItem } ->
                 pure $ maybe false (\i -> i.itemId == todo.id) draggingItem
             , render: \{ connectDragSource, isDragging } ->
-                createElement dnd.dropTarget
+                React.element dnd.dropTarget
                   { drop: \{ item: dragItem } -> do
                       for_ (_.index <$> dragItem) \dragItemIndex ->
                         setState \s -> s

package-lock.json

@@ -22,7 +22,7 @@ import Data.Maybe (Maybe)
 import Data.Nullable (Nullable, toMaybe, toNullable)
 import Effect (Effect)
 import Effect.Uncurried (mkEffectFn1)
-import React.Basic (JSX, ReactComponent, createElement, stateless)
+import React.Basic (Component, JSX, element, stateless)
 
 data Backend
 
@@ -89,9 +89,9 @@ type DragLayerProps item =
   }
 
 type DragDrop item =
-  { dragSource :: ReactComponent (DragSourceProps item)
-  , dropTarget :: ReactComponent (DropTargetProps item)
-  , dragLayer :: ReactComponent (DragLayerProps item)
+  { dragSource :: Component (DragSourceProps item)
+  , dropTarget :: Component (DropTargetProps item)
+  , dragLayer :: Component (DragLayerProps item)
   }
 
 createDragDrop
@@ -108,7 +108,7 @@ createDragDrop itemType =
       let jsDragSource = runFn2 unsafeCreateDragSource toMaybe itemType
       in stateless
         { displayName: "DragSource"
-        , render: \props -> createElement jsDragSource
+        , render: \props -> element jsDragSource
             { beginDrag: mkEffectFn1 props.beginDrag
             , endDrag: mkEffectFn1 props.endDrag
             , canDrag: mkEffectFn1 props.canDrag
@@ -121,7 +121,7 @@ createDragDrop itemType =
       let jsDropTarget = runFn2 unsafeCreateDropTarget toMaybe itemType
       in stateless
         { displayName: "DropTarget"
-        , render: \props -> createElement jsDropTarget
+        , render: \props -> element jsDropTarget
             { drop: mkEffectFn1 (map toNullable <<< props.drop)
             , hover: mkEffectFn1 props.hover
             , canDrop: mkEffectFn1 props.canDrop
@@ -133,26 +133,26 @@ createDragDrop itemType =
       let jsDragLayer = unsafeCreateDragLayer toMaybe
       in stateless
         { displayName: "DragLayer"
-        , render: createElement jsDragLayer
+        , render: element jsDragLayer
         }
 
-foreign import createDragDropContext :: Backend -> ReactComponent DragDropContextProps
+foreign import createDragDropContext :: Backend -> Component DragDropContextProps
 
 foreign import unsafeCreateDragSource
   :: forall a
    . Fn2
       (Nullable ~> Maybe)
       DragDropItemType
-      (ReactComponent { | a })
+      (Component { | a })
 
 foreign import unsafeCreateDropTarget
   :: forall a
    . Fn2
       (Nullable ~> Maybe)
       DragDropItemType
-      (ReactComponent { | a })
+      (Component { | a })
 
 foreign import unsafeCreateDragLayer
   :: forall a
    . (Nullable ~> Maybe)
-  -> ReactComponent { | a }
+  -> Component { | a }