create updated action sheet with callbacks and click events

srcjs/components/actionSheet.js

@@ -3,52 +3,57 @@ import { getAppInstance } from "../init.js";
 $(function() {
   const app = getAppInstance();
 
-  // handle action sheet
-  Shiny.addCustomMessageHandler("action-sheet", function(message) {
-    // Only create action sheet whenever necessary
-    if (app.store.state.actions[message.id] === undefined) {
-      var buttonsId = message.id + "_button";
+  // set input values, onclick and callbacks
+  function createActionSheet(message) {
+    var buttonsId = message.id + "_button";
 
-      // define function that set an inputvalue those name depends on an index
-      // parameter
-      function setButtonInput(index) {
-        Shiny.setInputValue(buttonsId, index);
-      }
+    // define function that set an inputvalue those name depends on an index
+    // parameter
+    function setButtonInput(index) {
+      Shiny.setInputValue(buttonsId, index);
+    }
 
-      // add those functions to the message.button array
-      function setOnClick(element, index) {
-        Object.defineProperty(element, "onClick", {
-          value: function() {
-            setButtonInput(index + 1);
-          },
-          writable: false
-        });
-      }
+    // add those functions to the message.button array
+    function setOnClick(element, index) {
+      Object.defineProperty(element, "onClick", {
+        value: function() {
+          setButtonInput(index + 1);
+        },
+        writable: false
+      });
+    }
 
-      message.buttons.forEach(setOnClick);
+    message.buttons.forEach(setOnClick);
 
-      // Callbacks for shiny inputs
-      message.on = {
-        open: function(target) {
-          if (target.app.params.dark) {
-            $(target.el).addClass("theme-dark");
-          }
-        },
-        opened: function() {
-          Shiny.setInputValue(message.id, true);
-        },
-        closed: function() {
-          Shiny.setInputValue(message.id, false);
-          // input$button is null when the action is closed
-          Shiny.setInputValue(buttonsId, null);
+    // Callbacks for shiny inputs
+    message.on = {
+      open: function(target) {
+        if (target.app.params.dark) {
+          $(target.el).addClass("theme-dark");
         }
-      };
+      },
+      opened: function() {
+        Shiny.setInputValue(message.id, true);
+      },
+      closed: function() {
+        Shiny.setInputValue(message.id, false);
+        // input$button is null when the action is closed
+        Shiny.setInputValue(buttonsId, null);
+      }
+    };
 
-      // create the sheet
-      var a = app.actions.create(message);
-      a.open();
-      // save action sheet to app data to update it later
-      app.store.state.actions[message.id] = a;
+    // create the sheet
+    var a = app.actions.create(message);
+    a.open();
+    // save action sheet to app data to update it later
+    app.store.state.actions[message.id] = a;
+  }
+
+  // handle action sheet
+  Shiny.addCustomMessageHandler("action-sheet", function(message) {
+    // Only create action sheet whenever necessary
+    if (app.store.state.actions[message.id] === undefined) {
+      createActionSheet(message);
     } else {
       app.store.state.actions[message.id].open();
     }
@@ -57,10 +62,8 @@ $(function() {
   Shiny.addCustomMessageHandler("update-action-sheet", function(message) {
     // Destroy old instance
     app.store.state.actions[message.id].destroy();
-    // Create new config
-    var a = app.actions.create(message);
-    // Update app data
-    app.store.state.actions[message.id] = a;
+    // Create new instance including callbacks and click events
+    createActionSheet(message);
   });
 });
 

tests/testthat/_snaps/f7ActionSheet/actionsheet-app-005.json

@@ -1,6 +1,6 @@
 {
   "input": {
-    "sheet1-action1": false,
-    "sheet1-action1_button": null
+    "sheet1-action1": true,
+    "sheet1-action1_button": 1
   }
 }

tests/testthat/test-f7ActionSheet.R

@@ -62,8 +62,10 @@ test_that("actionSheet work as expected", {
   app$click(selector = ".actions-button:nth-child(2)")
   app$expect_values(input = c("sheet1-action1", "sheet1-action1_button"))
 
+  app$click(selector = "div.dialog-buttons > span:nth-child(1)")
   app$click(selector = "#sheet1-update")
   app$click(selector = "#sheet1-go")
   app$wait_for_idle(3000)
+  app$click(selector = ".actions-button:first-child")
   app$expect_values(input = c("sheet1-action1", "sheet1-action1_button"))
 })