From 03be6a46527a667da611ff5e83af17d97cf21fc6 Mon Sep 17 00:00:00 2001
From: pvictor <perrier.victor@gmail.com>
Date: Thu, 7 Mar 2024 15:49:52 +0100
Subject: [PATCH] DataGridCheckBoxRenderer

---
 examples/zzz-grid_editor-checkbox.R     | 84 +++++++++++++++++++++++++
 srcjs/modules/grid-renderer-checkbox.js | 32 ++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 examples/zzz-grid_editor-checkbox.R
 create mode 100644 srcjs/modules/grid-renderer-checkbox.js

diff --git a/examples/zzz-grid_editor-checkbox.R b/examples/zzz-grid_editor-checkbox.R
new file mode 100644
index 0000000..6b73d12
--- /dev/null
+++ b/examples/zzz-grid_editor-checkbox.R
@@ -0,0 +1,84 @@
+
+library(toastui)
+library(shiny)
+
+ui <- fluidPage(
+  theme = bslib::bs_theme(version = 5L),
+  tags$h2("Checkbox column grid demo"),
+  tags$script(HTML(
+    'class DatagridCheckboxRenderer {
+  constructor(props) {
+    const el = document.createElement("div");
+    el.className = "form-check form-switch my-1 d-flex justify-content-center";
+    const input = document.createElement("input");
+    const { grid, rowKey, columnInfo } = props;
+    const checked = Boolean(props.value);
+    input.type = "checkbox";
+    input.className = "form-check-input";
+    input.style.cursor = "pointer";
+    input.checked = checked;
+    input.addEventListener("change", () => {
+      if (input.checked) {
+        grid.setValue(rowKey, columnInfo.name, "TRUE");
+      } else {
+        grid.setValue(rowKey, columnInfo.name, "FALSE");
+      }
+    });
+    el.appendChild(input);
+    this.el = el;
+    this.render(props);
+  }
+  
+  getElement() {
+    return this.el;
+  }
+  
+  render(props) {
+    //const checked = Boolean(props.value);
+    //this.el.checked = checked;
+  }
+}
+'
+  )),
+  fluidRow(
+    column(
+      width = 8,
+      datagridOutput("grid1"),
+      verbatimTextOutput("edited1")
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  
+  output$grid1 <- renderDatagrid({
+    mydata <- data.frame(
+      month = month.name,
+      value = sample(c(TRUE, FALSE), 12, replace = TRUE)
+    )
+    grid <- datagrid(mydata, data_as_input = TRUE)
+    # grid$x$options$editingEvent <- "click"
+    grid %>%
+      grid_columns(
+        columns = "value",
+        # editor = list(
+        #   type = htmlwidgets::JS("DatagridCheckboxRenderer"),
+        #   options = list()
+        # ),
+        renderer = list(
+          type = htmlwidgets::JS("DatagridCheckboxRenderer"),
+          options = list()
+        )
+      )
+    
+  })
+  
+  output$edited1 <- renderPrint({
+    input$grid1_data
+  })
+  
+}
+
+if (interactive())
+  shinyApp(ui, server)
+
diff --git a/srcjs/modules/grid-renderer-checkbox.js b/srcjs/modules/grid-renderer-checkbox.js
new file mode 100644
index 0000000..c7a3ae4
--- /dev/null
+++ b/srcjs/modules/grid-renderer-checkbox.js
@@ -0,0 +1,32 @@
+class DatagridCheckboxRenderer {
+  constructor(props) {
+    const el = document.createElement("div");
+    el.className = "form-check form-switch d-flex justify-content-center my-1";
+    const input = document.createElement("input");
+    const { grid, rowKey, columnInfo } = props;
+    const checked = Boolean(props.value);
+    input.type = "checkbox";
+    input.className = "form-check-input";
+    input.style.cursor = "pointer";
+    input.checked = checked;
+    input.addEventListener("change", () => {
+      if (input.checked) {
+        grid.setValue(rowKey, columnInfo.name, "TRUE");
+      } else {
+        grid.setValue(rowKey, columnInfo.name, "FALSE");
+      }
+    });
+    el.appendChild(input);
+    this.el = el;
+    this.render(props);
+  }
+  
+  getElement() {
+    return this.el;
+  }
+  
+  render(props) {
+    //const checked = Boolean(props.value);
+    //this.el.checked = checked;
+  }
+}