test antd datepicker

Author: pvictor

R/antdCascader.R

@@ -4,7 +4,6 @@
 #' 
 #' @inheritParams shiny::textInput
 #' @param options Specify the options the user can select from.
-#' @param isDisabled Disable the control.
 #' 
 #' @importFrom reactR createReactShinyInput
 #' @importFrom htmltools htmlDependency tags validateCssUnit
@@ -23,11 +22,11 @@ antdCascaderInput <- function(inputId,
     inputId = inputId,
     class = "antdCascader",
     dependencies = htmlDependency(
-      name = "antd-cascader-input",
+      name = "antd-input",
       version = "1.0.0",
-      src = "www/reactwidgets/antdCascader",
+      src = "www/reactwidgets/antd",
       package = "reactwidgets",
-      script = "antdCascader.js"
+      script = "antd.js"
     ),
     default = if (is.null(selected)) list() else list1(selected),
     configuration = list(

R/antdDatePicker.R

@@ -0,0 +1,85 @@
+#' Ant Design Date Picker
+#' 
+#' Cascade selection box.
+#' 
+#' @inheritParams shiny::textInput
+#' @param options Specify the options the user can select from.
+#' 
+#' @importFrom reactR createReactShinyInput
+#' @importFrom htmltools htmlDependency tags validateCssUnit
+#' 
+#' @noRd
+antdDatePickerInput <- function(inputId,
+                                label,
+                                value = NULL,
+                                ...,
+                                className = "d-block w-100",
+                                width = 500) {
+  createReactShinyInput(
+    inputId = inputId,
+    class = "antdDatePicker",
+    dependencies = htmlDependency(
+      name = "antd-input",
+      version = "1.0.0",
+      src = "www/reactwidgets/antd",
+      package = "reactwidgets",
+      script = "antd.js"
+    ),
+    default = if (is.null(value)) list() else list1(value),
+    configuration = list(
+      options = options,
+      props = list(
+        className = className,
+        ...
+      ),
+      width = validateCssUnit(width),
+      label = makeLabel(label, inputId)
+    ),
+    container = tags$div
+  )
+}
+
+
+
+#' Ant Design Date Picker
+#' 
+#' Cascade selection box.
+#' 
+#' @inheritParams shiny::textInput
+#' @param options Specify the options the user can select from.
+#' 
+#' @importFrom reactR createReactShinyInput
+#' @importFrom htmltools htmlDependency tags validateCssUnit
+#' 
+#' @noRd
+antdDateRangePickerInput <- function(inputId,
+                                     label,
+                                     value = NULL,
+                                     ...,
+                                     className = "w-100",
+                                     width = 500) {
+  createReactShinyInput(
+    inputId = inputId,
+    class = "antdDateRangePicker",
+    dependencies = htmlDependency(
+      name = "antd-input",
+      version = "1.0.0",
+      src = "www/reactwidgets/antd",
+      package = "reactwidgets",
+      script = "antd.js"
+    ),
+    default = if (is.null(value)) list() else list1(value),
+    configuration = list(
+      options = options,
+      props = list(
+        defaultValue = value,
+        className = className,
+        ...
+      ),
+      width = validateCssUnit(width),
+      label = makeLabel(label, inputId)
+    ),
+    container = tags$div
+  )
+}
+

examples/antdDatePicker.R

@@ -0,0 +1,43 @@
+library(shiny)
+library(bslib)
+# library(reactwidgets)
+pkgload::load_all()
+
+ui <- page_fluid(
+  titlePanel("antdDatePickerInput Example"),
+  fluidRow(
+    column(
+      width = 6,
+      antdDatePickerInput(
+        "ID1",
+        label = "Basic Date Picker example:",
+        value = Sys.Date(),
+        # format = "YYYY-MM-DD",
+        # selected = "marseille",
+        width = "100%"
+      ),
+      verbatimTextOutput("res1")
+    ),
+    column(
+      width = 6,
+      antdDateRangePickerInput(
+        "ID2",
+        label = "Range Date Picker example:",
+        width = "100%"
+      ),
+      verbatimTextOutput("res2")
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  output$res1 <- renderPrint({
+    input$ID1
+  })
+  output$res2 <- renderPrint({
+    input$ID2
+  })
+}
+
+if (interactive())
+  shinyApp(ui, server)

inst/www/reactwidgets/antd/antd.js

@@ -0,0 +1,71 @@
+import { reactShinyInput } from "reactR";
+import React, { useState } from "react";
+import { Cascader, DatePicker } from "antd";
+import dayjs from 'dayjs';
+import LabelInput from "./LabelInput";
+
+
+const CascaderInput = ({ configuration, value, setValue }) => {
+  function onChange(newValue) {
+    setValue(newValue)
+  }
+  return (
+        <div class="form-group shiny-input-container" style={{width: configuration.width}}>
+          <LabelInput
+              config={configuration.label}
+          />
+          <Cascader 
+            options={configuration.options} 
+            onChange={onChange} 
+            {...configuration.props}
+          />
+        </div>
+    );
+};
+
+reactShinyInput(".antdCascader", "reactwidgets.antdCascader", CascaderInput);
+
+
+
+
+const DatePickerInput = ({ configuration, value, setValue }) => {
+  function onChange(date, dateString) {
+    setValue(dateString)
+  }
+  return (
+        <div class="form-group shiny-input-container" style={{width: configuration.width}}>
+          <LabelInput
+              config={configuration.label}
+          />
+          <DatePicker 
+            defaultValue={dayjs(value[0], "YYYY-MM-DD")}
+            onChange={onChange} 
+            {...configuration.props}
+          />
+        </div>
+    );
+};
+
+reactShinyInput(".antdDatePicker", "reactwidgets.antdDatePicker", DatePickerInput);
+
+
+
+const DateRangePickerInput = ({ configuration, value, setValue }) => {
+  const { RangePicker } = DatePicker;
+  function onChange(date, dateString) {
+    setValue(dateString)
+  }
+  return (
+        <div class="form-group shiny-input-container" style={{width: configuration.width}}>
+          <LabelInput
+              config={configuration.label}
+          />
+          <RangePicker 
+            onChange={onChange} 
+            {...configuration.props}
+          />
+        </div>
+    );
+};
+
+reactShinyInput(".antdDateRangePicker", "reactwidgets.antdDateRangePicker", DateRangePickerInput);

inst/www/reactwidgets/antd/antd.js.map

@@ -4,7 +4,7 @@ module.exports = {
     entry: {
       "dualListBox/dualListBox": path.join(__dirname, 'srcjs', 'dualListBox.jsx'),
       "reactSelect/reactSelect": path.join(__dirname, 'srcjs', 'reactSelect.jsx'),
-      "antdCascader/antdCascader": path.join(__dirname, 'srcjs', 'antdCascader.jsx')
+      "antd/antd": path.join(__dirname, 'srcjs', 'antd.jsx')
     },
     output: {
         path: path.join(__dirname, 'inst/www/reactwidgets'),