Make events work

Author: easafe

examples/App/App.purs

@@ -28,12 +28,12 @@ update model = case _ of
       Update int → Just int :> []
 
 view ∷ Model → Html Message
-view model = HE.text (show model)
-
--- HE.div "main"
---       [ HE.text (show model)
---    --   , HE.button [ HA.onClick Roll ] "Roll"
---       ]
+view model =
+      HE.div "main"
+            [ HE.text "Dice roll:",
+              HE.text (show model)
+            , HE.button [ HA.onClick Roll ] "Roll"
+            ]
 
 main ∷ Effect Unit
 main = FAN.mount "App"

spago.dhall

@@ -13,6 +13,7 @@ You can edit this file as you like.
   , "arrays"
   , "bifunctors"
   , "console"
+  , "debug"
   , "effect"
   , "either"
   , "exceptions"
@@ -26,8 +27,8 @@ You can edit this file as you like.
   , "prelude"
   , "random"
   , "refs"
-  , "strings"
   , "spec"
+  , "strings"
   , "tuples"
   , "typelevel-prelude"
   , "unsafe-coerce"

src/Flame/Native/Attribute/Event.js

@@ -1,15 +1,28 @@
 let messageEventData = 5,
     rawEventData = 6;
 
+//the global functions will be set at the native renderer
+function messageHandler(message) {
+    return function() {
+        return global.globalFlameUpdater(global.globalFlameEventWrapper(message))();
+    }
+}
+
+function rawMessageHandler(handler) {
+    return function(event) {
+        return global.globalFlameUpdater(handler(event)())();
+    }
+}
+
 export function createEvent_(name) {
     return function (message) {
-        return [messageEventData, name, message];
+        return [messageEventData, name, messageHandler(message)];
     };
 }
 
 export function createRawEvent_(name) {
     return function (handler) {
-        return [rawEventData, name, handler];
+        return [rawEventData, name, rawMessageHandler(handler)];
     };
 }
 

src/Flame/Native/Attribute/Event.purs

@@ -64,7 +64,7 @@ onScroll' ∷ ∀ message. ToRawEvent message
 onScroll' = createEventMessage "scroll"
 
 onClick ∷ ∀ message. ToEvent message
-onClick = createEvent "click"
+onClick = createEvent "onPress"
 
 onClick' ∷ ∀ message. ToRawEvent message
 onClick' = createEventMessage "click"

src/Flame/Native/Element.js

@@ -1,5 +1,5 @@
 import React, {createElement } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Button } from 'react-native';
 
 let textNode = 1,
     elementNode = 2,
@@ -43,6 +43,14 @@ export function createViewNode(nodeData) {
     };
 }
 
+export function createButtonNode(nodeData) {
+    return function(text) {
+        let props = fromNodeData(nodeData)
+
+        return createElement(Button, { title: text, ...props });
+    }
+}
+
 export function createDatalessElementNode(tag) {
     return function (potentialChildren) {
         let children = potentialChildren,
@@ -176,51 +184,48 @@ function asSvg(elements) {
 }
 
 function fromNodeData(allData) {
-    let nodeData = {};
+    let nodeData;
+
+    if (allData !== undefined) {
+        nodeData = {};
 
-    if (allData !== undefined)
         for (let data of allData) {
             let dataOne = data[1];
             //[0] also always contain the data type
             switch (data[0]) {
-                case styleData:
-                    if (nodeData.styles === undefined)
-                        nodeData.styles = {};
-
-                    for (let key in dataOne)
-                        nodeData.styles[key] = dataOne[key];
-                    break;
-                case classData:
-                    if (nodeData.classes === undefined)
-                        nodeData.classes = [];
-
-                    nodeData.classes = nodeData.classes.concat(dataOne);
-                    break;
-                case propertyData:
-                    if (nodeData.properties === undefined)
-                        nodeData.properties = {};
-
-                    nodeData.properties[dataOne] = data[2];
-                    break;
-                case attributeData:
-                    if (nodeData.attributes === undefined)
-                        nodeData.attributes = {};
-
-                    nodeData.attributes[dataOne] = data[2];
-                    break;
-                case keyData:
-                    nodeData.key = dataOne;
-                    break;
+    //             case styleData:
+    //                 if (nodeData.styles === undefined)
+    //                     nodeData.styles = {};
+
+    //                 for (let key in dataOne)
+    //                     nodeData.styles[key] = dataOne[key];
+    //                 break;
+    //             case classData:
+    //                 if (nodeData.classes === undefined)
+    //                     nodeData.classes = [];
+
+    //                 nodeData.classes = nodeData.classes.concat(dataOne);
+    //                 break;
+    //             case propertyData:
+    //                 if (nodeData.properties === undefined)
+    //                     nodeData.properties = {};
+
+    //                 nodeData.properties[dataOne] = data[2];
+    //                 break;
+    //             case attributeData:
+    //                 if (nodeData.attributes === undefined)
+    //                     nodeData.attributes = {};
+
+    //                 nodeData.attributes[dataOne] = data[2];
+    //                 break;
+    //             case keyData:
+    //                 nodeData.key = dataOne;
+    //                 break;
                 default:
-                    if (nodeData.events === undefined)
-                        nodeData.events = {};
-
-                    if (nodeData.events[dataOne] === undefined)
-                        nodeData.events[dataOne] = [];
-
-                    nodeData.events[dataOne].push(data[2]);
+                    nodeData[dataOne] = data[2];
             }
         }
+    }
 
     return nodeData;
 }

src/Flame/Native/Element.purs

@@ -51,6 +51,7 @@ type NodeRenderer arg =
 
 foreign import createElementNode ∷ ∀ message. Tag → Array (NodeData message) → Array (Html message) → Html message
 foreign import createViewNode ∷ ∀ message. Array (NodeData message) → Array (Html message) → Html message
+foreign import createButtonNode ∷ ∀ message. Array (NodeData message) → String -> Html message
 foreign import createDatalessElementNode ∷ ∀ message. Tag → Array (Html message) → Html message
 foreign import createSingleElementNode ∷ ∀ message. Tag → Array (NodeData message) → Html message
 
@@ -245,8 +246,8 @@ body_ = createElement_ "body"
 body' ∷ ∀ a h. ToHtml' a h
 body' = createElement' "body"
 
-button ∷ ∀ a b h. ToHtml a b h
-button = createElement "button"
+
+button = createButtonNode
 
 button_ ∷ ∀ b h. ToHtml_ b h
 button_ = createElement_ "button"

src/Flame/Renderer/Internal/Native.js

@@ -3,13 +3,19 @@ import { AppRegistry } from 'react-native';
 
 //as far as I can tell we need this because for class based components react expects a class type and not an instance
 let reactWrapper = { app : undefined },
-    flameEventWrapper, flameGlobalUpdater, initialMarkup, initialState;
+    initialMarkup,
+    initialState;
+
+//needed so we can run events as it is
+global.globalFlameEventWrapper = undefined;
+global.globalFlameUpdater = undefined;
 
 export function start_(eventWrapper, updater, name, markup, state) {
     initialMarkup = markup;
     initialState = state;
-    flameGlobalUpdater = updater;
-    flameEventWrapper = eventWrapper;
+
+    global.globalFlameEventWrapper = eventWrapper;
+    global.globalFlameUpdater = updater;
 
     AppRegistry.registerComponent(name, function () {
         return N;
@@ -23,17 +29,13 @@ export function resume_(wrapper, view, model) {
 };
 
 class N extends Component {
-    eventWrapper;
-    flameUpdater;
     flameMarkup;
 
     constructor() {
         super();
 
         this.flameMarkup = initialMarkup;
         this.state = initialState;
-        this.flameUpdater = flameGlobalUpdater;
-        this.eventWrapper = flameEventWrapper;
 
         reactWrapper.app = this;
     }

src/Flame/Renderer/Internal/Native.purs

@@ -8,6 +8,7 @@ import Effect (Effect)
 import Effect.Uncurried (EffectFn3, EffectFn5)
 import Effect.Uncurried as EU
 import Flame.Types (Html)
+import Debug
 
 -- | Events that are messages rather than callbacks need to be wrapped from the FFI
 type MessageWrapper message = message → Maybe message