react-basic v4 (#3)

Author: spicydonuts

README.md

@@ -16,7 +16,7 @@ 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.Compat (ReactComponent, createElement, fragment, react)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (targetChecked)
 import React.Basic.Events as Events
@@ -54,7 +54,7 @@ component = react { displayName: "BasicExample", initialState, receiveProps, ren
         }
 
       where
-        renderTodo index todo = 
+        renderTodo index todo =
           createElement dnd.dragSource
             { beginDrag: \_ -> pure
                 { itemId: todo.id

bower.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "purescript-prelude": "^4.1.0",
-    "purescript-react-basic": "^2.0.0",
+    "purescript-react-basic": "^4.0.1",
     "purescript-nullable": "^4.0.0",
     "purescript-promises": "^3.0.0"
   },

examples/basic/index.js

@@ -5,6 +5,6 @@ var ReactDOM = require("react-dom");
 var Counter = require("./output/bundle.js");
 
 ReactDOM.render(
-  React.createElement(Counter.component, { label: 'Increment' }),
+  Counter.todoExample,
   document.getElementById("container")
 );

examples/basic/src/Basic.purs

@@ -5,21 +5,32 @@ import Prelude
 import Data.Array ((!!), drop, mapWithIndex, take)
 import Data.Foldable (for_)
 import Data.Maybe (Maybe(Nothing), fromMaybe, maybe)
-import React.Basic as React
+import React.Basic (Component, JSX, StateUpdate(..), createComponent, fragment, make)
 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 (DragDrop, DragDropItemType(..), createDragDrop, createDragDropContext)
 import React.Basic.ReactDND.Backends.HTML5Backend (html5Backend)
 
-dndContext :: React.Component DragDropContextProps
+dndContext :: JSX -> JSX
 dndContext = createDragDropContext html5Backend
 
 dnd :: DragDrop { itemId :: String, index :: Int }
 dnd = createDragDrop (DragDropItemType "TODO_ITEM")
 
-component :: React.Component {}
-component = React.component { displayName: "BasicExample", initialState, receiveProps, render }
+data Action
+  = Move { from :: Int, to :: Int }
+  | SetDone String Boolean
+
+component :: Component
+component = createComponent "TodoExample"
+
+todoExample :: JSX
+todoExample = unit # make component
+  { initialState = initialState
+  , update = update
+  , render = render
+  }
   where
     initialState =
       { todos:
@@ -29,22 +40,29 @@ component = React.component { displayName: "BasicExample", initialState, receive
           ]
       }
 
-    receiveProps _ =
-      pure unit
+    update self = case _ of
+      Move { from, to } ->
+        Update self.state { todos = moveItem from to self.state.todos }
 
-    render { state, setState } =
-      React.element dndContext
-        { child:
-            React.fragment
-              [ R.h1_ [ R.text "Todos" ]
-              , R.p_ [ R.text "Drag to reorder the list:" ]
-              , R.section_ (mapWithIndex renderTodo state.todos)
-              ]
-        }
+      SetDone id done ->
+        Update self.state
+          { todos = self.state.todos <#> \t ->
+              if t.id == id
+              then t { done = done }
+              else t
+          }
+
+    render { state, send } =
+      dndContext $
+        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 =
-          React.element dnd.dragSource
+          dnd.dragSource
             { beginDrag: \_ -> pure
                 { itemId: todo.id
                 , index
@@ -54,12 +72,10 @@ component = React.component { displayName: "BasicExample", initialState, receive
             , isDragging: \{ item: draggingItem } ->
                 pure $ maybe false (\i -> i.itemId == todo.id) draggingItem
             , render: \{ connectDragSource, isDragging } ->
-                React.element dnd.dropTarget
+                dnd.dropTarget
                   { drop: \{ item: dragItem } -> do
                       for_ (_.index <$> dragItem) \dragItemIndex ->
-                        setState \s -> s
-                          { todos = moveItem dragItemIndex index s.todos
-                          }
+                        send $ Move { from: dragItemIndex, to: index }
                       pure Nothing
                   , hover: const (pure unit)
                   , canDrop: const (pure true)
@@ -84,12 +100,7 @@ component = React.component { displayName: "BasicExample", initialState, receive
                                   { "type": "checkbox"
                                   , checked: todo.done
                                   , onChange: Events.handler targetChecked \checked -> do
-                                      setState \s -> s
-                                        { todos = s.todos <#> \t ->
-                                            if t.id == todo.id
-                                            then t { done = fromMaybe false checked }
-                                            else t
-                                        }
+                                      send $ SetDone todo.id $ fromMaybe false checked
                                   }
                               , R.text todo.text
                               ]

src/React/Basic/ReactDND.js

@@ -19,7 +19,7 @@ RenderPropComponent.prototype.render = function() {
   return this.props.render(this.props);
 };
 
-exports.createDragDropContext = function(backend) {
+exports.createDragDropContext_ = function(backend) {
   return DND.DragDropContext(backend)(SingleChildComponent);
 };
 

src/React/Basic/ReactDND.purs

@@ -6,7 +6,6 @@ module React.Basic.ReactDND
   , DragSourceCollectArgs
   , DropTargetCollectArgs
   , DragLayerCollectArgs
-  , DragDropContextProps
   , DragSourceProps
   , DropTargetProps
   , DragLayerProps
@@ -22,7 +21,7 @@ import Data.Maybe (Maybe)
 import Data.Nullable (Nullable, toMaybe, toNullable)
 import Effect (Effect)
 import Effect.Uncurried (mkEffectFn1)
-import React.Basic (Component, JSX, element, stateless)
+import React.Basic (JSX, ReactComponent, element)
 
 data Backend
 
@@ -65,10 +64,6 @@ type DragLayerCollectArgs item =
   | SharedCollectArgs item
   }
 
-type DragDropContextProps =
-  { child :: JSX
-  }
-
 type DragSourceProps item =
   { beginDrag :: DragSourceCollectArgs item -> Effect item
   , endDrag :: DragSourceCollectArgs item -> Effect Unit
@@ -89,9 +84,9 @@ type DragLayerProps item =
   }
 
 type DragDrop item =
-  { dragSource :: Component (DragSourceProps item)
-  , dropTarget :: Component (DropTargetProps item)
-  , dragLayer :: Component (DragLayerProps item)
+  { dragSource :: DragSourceProps item -> JSX
+  , dropTarget :: DropTargetProps item -> JSX
+  , dragLayer :: DragLayerProps item -> JSX
   }
 
 createDragDrop
@@ -106,53 +101,47 @@ createDragDrop itemType =
   where
     dragSource =
       let jsDragSource = runFn2 unsafeCreateDragSource toMaybe itemType
-      in stateless
-        { displayName: "DragSource"
-        , render: \props -> element jsDragSource
+      in \props -> element jsDragSource
             { beginDrag: mkEffectFn1 props.beginDrag
             , endDrag: mkEffectFn1 props.endDrag
             , canDrag: mkEffectFn1 props.canDrag
             , isDragging: mkEffectFn1 props.isDragging
             , render: mkFn1 props.render
             }
-        }
 
     dropTarget =
       let jsDropTarget = runFn2 unsafeCreateDropTarget toMaybe itemType
-      in stateless
-        { displayName: "DropTarget"
-        , render: \props -> element jsDropTarget
+      in \props -> element jsDropTarget
             { drop: mkEffectFn1 (map toNullable <<< props.drop)
             , hover: mkEffectFn1 props.hover
             , canDrop: mkEffectFn1 props.canDrop
             , render: mkFn1 props.render
             }
-        }
 
     dragLayer =
       let jsDragLayer = unsafeCreateDragLayer toMaybe
-      in stateless
-        { displayName: "DragLayer"
-        , render: element jsDragLayer
-        }
+      in element jsDragLayer
+
+createDragDropContext :: Backend -> JSX -> JSX
+createDragDropContext backend = (\c child -> element c { child }) (createDragDropContext_ backend)
 
-foreign import createDragDropContext :: Backend -> Component DragDropContextProps
+foreign import createDragDropContext_ :: Backend -> ReactComponent { child :: JSX }
 
 foreign import unsafeCreateDragSource
   :: forall a
    . Fn2
       (Nullable ~> Maybe)
       DragDropItemType
-      (Component { | a })
+      (ReactComponent { | a })
 
 foreign import unsafeCreateDropTarget
   :: forall a
    . Fn2
       (Nullable ~> Maybe)
       DragDropItemType
-      (Component { | a })
+      (ReactComponent { | a })
 
 foreign import unsafeCreateDragLayer
   :: forall a
    . (Nullable ~> Maybe)
-  -> Component { | a }
+  -> ReactComponent { | a }