diff --git a/DESCRIPTION b/DESCRIPTION index e84fcda..865414f 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -12,7 +12,8 @@ RoxygenNote: 7.2.3 Imports: htmltools, shiny, - shiny.react + shiny.react, + jsonlite Suggests: testthat (>= 3.0.0), shinytest2, diff --git a/NAMESPACE b/NAMESPACE index 6933b0d..bd5c616 100644 --- a/NAMESPACE +++ b/NAMESPACE @@ -23,7 +23,6 @@ export(createReactShinyInput) export(date_input) export(divider) export(dropdow_menu) -export(dropdown) export(dropdown_item) export(dropdown_section) export(dropdown_trigger) diff --git a/R/inputs.R b/R/inputs.R index 9f39f29..4e2611e 100644 --- a/R/inputs.R +++ b/R/inputs.R @@ -128,26 +128,32 @@ checkbox_input <- input("Checkbox", FALSE) update_checkbox_input <- shiny.react::updateReactInput #' @keywords internal -create_group_input <- function(inputId, ..., choices, selected, type = c("Checkbox", "Radio")) { +create_group_input <- function( + inputId, + ..., + choices, + selected, + type = c("CheckboxGroup", "RadioGroup", "DropdownMenu") + ) { type <- match.arg(type) - module <- paste0(type, "Group") process_val <- switch( type, - "Checkbox" = as.list, - "Radio" = I + "CheckboxGroup" = as.list, + "RadioGroup" = I, + "DropdownMenu" = as.list ) tagList( # This seems a bit hacky but this can't be called from the main JS script # because we only need it when the radio is invoked ... - tags$script(sprintf("jsmodule['@/ReactR']['%s']()", module)), + tags$script(sprintf("jsmodule['@/ReactR']['%s']()", type)), createReactShinyInput( inputId = inputId, - class = tolower(module), + class = tolower(type), default = process_val(selected), - configuration = list(children = as.list(choices), ...), + configuration = listRenderTags(list(children = as.list(choices), ...)), container = htmltools::tags$div ) ) @@ -169,7 +175,7 @@ radio_input <- function(inputId, ..., choices, selected = choices[1]) { ..., choices = choices, selected = selected, - type = "Radio" + type = "RadioGroup" ) } @@ -180,15 +186,15 @@ update_group_input <- function( ..., choices = NULL, selected = NULL, - type = c("Checkbox", "Radio") + type = c("CheckboxGroup", "RadioGroup") ) { type <- match.arg(type) message <- list() - if (type == "Checkbox") selected <- as.list(selected) + if (type == "CheckboxGroup") selected <- as.list(selected) message$value <- selected - configuration <- c(children = as.list(choices), list(...)) + configuration <- listRenderTags(c(children = as.list(choices), list(...))) if (length(configuration) > 0) { message$configuration <- configuration } @@ -212,7 +218,7 @@ update_radio_input <- function( ..., choices = choices, selected = selected, - type = "Radio" + type = "RadioGroup" ) } @@ -225,7 +231,7 @@ checkboxgroup_input <- function(inputId, ..., choices, selected = NULL) { ..., choices = choices, selected = selected, - type = "Checkbox" + type = "CheckboxGroup" ) } @@ -245,7 +251,7 @@ update_checkboxgroup_input <- function( ..., choices = choices, selected = selected, - type = "Checkbox" + type = "CheckboxGroup" ) } @@ -263,28 +269,43 @@ accordion_item <- component("AccordionItem") #' @export update_accordion <- shiny.react::updateReactInput -#' @rdname dropdown -#' @inherit component params return -#' @export -dropdown <- component("Dropdown") - #' @rdname dropdown #' @inherit shinyInput params return #' @export -dropdow_menu <- input("DropdownMenu") - -#' @rdname dropdown -#' @export -dropdown_trigger <- component("DropdownTrigger") +dropdow_menu <- function(inputId, ..., choices = NULL, selected = NULL) { + create_group_input( + inputId, + ..., + choices = choices, + selected = selected, + type = "DropdownMenu" + ) +} #' @rdname dropdown #' @export -dropdown_item <- component("DropdownItem") +dropdown_item <- function(...) { + list(..., dropdownItem = TRUE) +} #' @rdname dropdown #' @note Container for related \link{dropdown_item}. #' @export -dropdown_section <- component("DropdownSection") +dropdown_section <- function(...) { + tmp <- list(...) + props <- list() + children <- list() + for (i in seq_along(tmp)) { + if (inherits(tmp[[i]], "list")) { + children <- append(children, tmp[[i]]) + } else { + l <- tmp[[i]] + names(l) <- names(tmp)[[i]] + props <- append(props, l) + } + } + list(props = props, children = children, dropdownSection = TRUE) +} #' @rdname dropdown #' @export diff --git a/R/utils.R b/R/utils.R index 7ebf38a..caf7f7e 100644 --- a/R/utils.R +++ b/R/utils.R @@ -41,6 +41,23 @@ createReactShinyInput <- function ( ) } +# Converts any shiny tag into character so that toJSON does not cry +listRenderTags <- function(l) { + lapply( + X = l, + function(x) { + if (inherits(x, c("shiny.tag", "shiny.tag.list"))) { + as.character(x) + } else if (inherits(x, "list")) { + # Recursive part + listRenderTags(x) + } else { + x + } + } + ) +} + #' Indicates whether testthat is running #' #' @return Boolean. diff --git a/inst/examples/dropdown/app.R b/inst/examples/dropdown/app.R index c7bb0eb..65678d6 100644 --- a/inst/examples/dropdown/app.R +++ b/inst/examples/dropdown/app.R @@ -2,13 +2,63 @@ library(shiny) library(shinyNextUI) library(shiny.react) -items <- lapply(1:8, function(i) { - dropdown_item( - key = i, - description = sprintf("Description %s", i), - sprintf("Item %s", i) +items <- list( + # Dropdown section + dropdown_section( + showDivider = TRUE, + title = "Section 1", + # Dropdown Items + list( + dropdown_item( + title = "Item 1", + shortcut = "⌘N", + color = "danger", + description = "Item description", + startContent = icon("clock") + ), + dropdown_item( + title = "Item 2", + shortcut = "⌘N", + color = "success", + description = "Item description", + startContent = icon("home") + ) + ) + ), + dropdown_section( + showDivider = FALSE, + title = "Section 2", + # Dropdown Items + list( + dropdown_item( + title = "Item 3", + color = "warning", + description = "Item description" + ), + dropdown_item( + title = "Item 4" + ) + ) ) -}) +) + +# You can also skip section +#items <- list( +# dropdown_item( +# title = "Item 1", +# shortcut = "⌘N", +# color = "danger", +# description = "Item description"#, +# #startContent = icon("clock") +# ), +# dropdown_item( +# title = "Item 2", +# shortcut = "⌘N", +# color = "success", +# description = "Item description"#, +# #startContent = icon("home") +# ) +#) color <- "success" @@ -16,23 +66,15 @@ ui <- nextui_page( debug_react = TRUE, div( class = "flex gap-2 my-2", - dropdown( - dropdown_trigger( - button( - "Trigger", - color = color - ) - ), - dropdow_menu( - inputId = "dropdown", - color = color, - disabledKeys = JS("['3', '4']"), - selectionMode = "multiple", - items, - dropdown_section( - dropdown_item(key = 9, "Item 9") - ) - ) + dropdow_menu( + inputId = "dropdown", + label = "Dropdown menu", + color = color, + selected = "new", + variant = "bordered", + disabledKeys = c(3, 4), + selectionMode = "multiple", + choices = items ) ), verbatimTextOutput("dropdown_val") diff --git a/inst/nextui-2.0.0/nextui.js b/inst/nextui-2.0.0/nextui.js index 51c7364..dc86fdc 100644 --- a/inst/nextui-2.0.0/nextui.js +++ b/inst/nextui-2.0.0/nextui.js @@ -1987,7 +1987,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"CheckboxGroup\": () => (/* binding */ CheckboxGroup),\n/* harmony export */ \"RadioGroup\": () => (/* binding */ RadioGroup)\n/* harmony export */ });\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/dist/index.mjs\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils.js */ \"./src/utils.js\");\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\n\n\n/* Radio and checkbox group don't work with shiny.react, have to use reactR ... */\nvar GroupBuilder = function GroupBuilder(Component) {\n return function (_ref) {\n var configuration = _ref.configuration,\n value = _ref.value,\n setValue = _ref.setValue;\n var ParentTag = _nextui_org_react__WEBPACK_IMPORTED_MODULE_1__[Component + 'Group'];\n var ChildTag = _nextui_org_react__WEBPACK_IMPORTED_MODULE_1__[Component];\n var choices = configuration.children;\n var children = Object.keys(choices).map(function (choice) {\n return /*#__PURE__*/React.createElement(ChildTag, {\n key: choice,\n value: choice\n }, choices[choice]);\n });\n return /*#__PURE__*/React.createElement(ParentTag, _extends({}, configuration, {\n value: value,\n onValueChange: setValue\n }), children);\n };\n};\n\n// Note the first argument here should match the `class`\n// argument of the reactR::createReactShinyInput() from step 1\nvar RadioGroup = function RadioGroup() {\n _utils_js__WEBPACK_IMPORTED_MODULE_0__.reactShinyInput('.radiogroup', 'RadioGroup', GroupBuilder(\"Radio\"));\n};\nvar CheckboxGroup = function CheckboxGroup() {\n _utils_js__WEBPACK_IMPORTED_MODULE_0__.reactShinyInput('.checkboxgroup', 'CheckboxGroup', GroupBuilder(\"Checkbox\"));\n};\n\n//# sourceURL=webpack://js/./src/custom.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"CheckboxGroup\": () => (/* binding */ CheckboxGroup),\n/* harmony export */ \"DropdownMenu\": () => (/* binding */ DropdownMenu),\n/* harmony export */ \"RadioGroup\": () => (/* binding */ RadioGroup)\n/* harmony export */ });\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/dist/index.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/dropdown/dist/chunk-L6QJ42W6.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/dropdown/dist/chunk-63RZRIL7.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/button/dist/chunk-NXTXE2B3.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/dropdown/dist/chunk-SXHEBZUY.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/menu/dist/chunk-LRDIO3JU.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/menu/dist/chunk-EEKZGUSR.mjs\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils.js */ \"./src/utils.js\");\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\n\n\n/* Radio and checkbox group don't work with shiny.react, have to use reactR ... */\nvar GroupBuilder = function GroupBuilder(Component) {\n return function (_ref) {\n var configuration = _ref.configuration,\n value = _ref.value,\n setValue = _ref.setValue;\n var ParentTag = _nextui_org_react__WEBPACK_IMPORTED_MODULE_1__[Component + 'Group'];\n var ChildTag = _nextui_org_react__WEBPACK_IMPORTED_MODULE_1__[Component];\n var choices = configuration.children;\n var children = Object.keys(choices).map(function (choice) {\n return /*#__PURE__*/React.createElement(ChildTag, {\n key: choice,\n value: choice\n }, choices[choice]);\n });\n return /*#__PURE__*/React.createElement(ParentTag, _extends({}, configuration, {\n value: value,\n onValueChange: setValue\n }), children);\n };\n};\n\n// Note the first argument here should match the `class`\n// argument of the reactR::createReactShinyInput() from step 1\nvar RadioGroup = function RadioGroup() {\n _utils_js__WEBPACK_IMPORTED_MODULE_0__.reactShinyInput('.radiogroup', 'RadioGroup', GroupBuilder(\"Radio\"));\n};\nvar CheckboxGroup = function CheckboxGroup() {\n _utils_js__WEBPACK_IMPORTED_MODULE_0__.reactShinyInput('.checkboxgroup', 'CheckboxGroup', GroupBuilder(\"Checkbox\"));\n};\nvar DropdownBuilder = function DropdownBuilder() {\n return function (_ref2) {\n var configuration = _ref2.configuration,\n value = _ref2.value,\n setValue = _ref2.setValue;\n var Dropdown = _nextui_org_react__WEBPACK_IMPORTED_MODULE_2__.dropdown_default;\n var DropdownTrigger = _nextui_org_react__WEBPACK_IMPORTED_MODULE_3__.dropdown_trigger_default;\n var Button = _nextui_org_react__WEBPACK_IMPORTED_MODULE_4__.button_default;\n var DropdownMenu = _nextui_org_react__WEBPACK_IMPORTED_MODULE_5__.dropdown_menu_default;\n var DropdownItem = _nextui_org_react__WEBPACK_IMPORTED_MODULE_6__.menu_item_base_default;\n var DropdownSection = _nextui_org_react__WEBPACK_IMPORTED_MODULE_7__.menu_section_base_default;\n var choices = configuration.children;\n var menu = choices.map(function (choice) {\n var props = choice.props;\n if (choice.dropdownSection) {\n var items = choice.children.map(function (child) {\n return /*#__PURE__*/React.createElement(DropdownItem, _extends({\n key: child.title\n }, child));\n });\n return /*#__PURE__*/React.createElement(DropdownSection, props, items);\n } else {\n return /*#__PURE__*/React.createElement(DropdownItem, _extends({\n key: choice.title\n }, choice));\n }\n });\n return /*#__PURE__*/React.createElement(Dropdown, {\n classNames: {\n base: \"before:bg-default-200\",\n // change arrow background\n content: \"py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black\"\n }\n }, /*#__PURE__*/React.createElement(DropdownTrigger, null, /*#__PURE__*/React.createElement(Button, {\n variant: configuration.variant\n }, configuration.label)), /*#__PURE__*/React.createElement(DropdownMenu, _extends({}, configuration, {\n selectedKeys: value,\n onSelectionChange: function onSelectionChange(keys) {\n var vals = [];\n keys.forEach(function (key) {\n vals.push(key);\n });\n setValue(vals);\n }\n }), menu));\n };\n};\nvar DropdownMenu = function DropdownMenu() {\n _utils_js__WEBPACK_IMPORTED_MODULE_0__.reactShinyInput('.dropdownmenu', 'DropdownMenu', DropdownBuilder());\n};\n\n//# sourceURL=webpack://js/./src/custom.js?"); /***/ }), @@ -2009,7 +2009,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _out /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Accordion\": () => (/* binding */ Accordion),\n/* harmony export */ \"Autocomplete\": () => (/* binding */ Autocomplete),\n/* harmony export */ \"Button\": () => (/* binding */ Button),\n/* harmony export */ \"Checkbox\": () => (/* binding */ Checkbox),\n/* harmony export */ \"DropdownMenu\": () => (/* binding */ DropdownMenu),\n/* harmony export */ \"Input\": () => (/* binding */ Input),\n/* harmony export */ \"Listbox\": () => (/* binding */ Listbox),\n/* harmony export */ \"Pagination\": () => (/* binding */ Pagination),\n/* harmony export */ \"Select\": () => (/* binding */ Select),\n/* harmony export */ \"Slider\": () => (/* binding */ Slider),\n/* harmony export */ \"Switch\": () => (/* binding */ Switch),\n/* harmony export */ \"Tabs\": () => (/* binding */ Tabs),\n/* harmony export */ \"Textarea\": () => (/* binding */ Textarea),\n/* harmony export */ \"ThemeSwitcher\": () => (/* binding */ ThemeSwitcher),\n/* harmony export */ \"setTheme\": () => (/* binding */ setTheme)\n/* harmony export */ });\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/button/dist/chunk-NXTXE2B3.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/switch/dist/chunk-N4MZXI4F.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/input/dist/chunk-HXP4WOPN.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/input/dist/chunk-TC4QW7OA.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/checkbox/dist/chunk-AMSULWPV.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/accordion/dist/chunk-VEGXQLVL.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/autocomplete/dist/chunk-N2FRZORR.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/dropdown/dist/chunk-SXHEBZUY.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/listbox/dist/chunk-5UXUPTLW.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/pagination/dist/chunk-BIN3WWJN.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/select/dist/chunk-QHKZQCIM.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/avatar/dist/chunk-XBMXQVV7.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/slider/dist/chunk-E5JQEZUR.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/tabs/dist/chunk-Q33IKVZ4.mjs\");\n/* harmony import */ var _shiny_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/shiny.react */ \"@/shiny.react\");\n/* harmony import */ var _shiny_react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_shiny_react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\nvar setTheme = function setTheme() {\n var theme;\n if ($('html').hasClass('dark')) {\n theme = 'light';\n $('html').removeClass('dark').addClass('light');\n } else {\n $('html').removeClass('light').addClass('dark');\n theme = 'dark';\n }\n Shiny.setInputValue('theme', theme, {\n priority: 'event'\n });\n};\nvar Button = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.ButtonAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_2__.button_default);\nvar ThemeSwitcher = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_3__.switch_default, function (value, setValue) {\n return {\n isSelected: $('html').hasClass('light') ? true : false,\n onChange: function onChange(event) {\n setTheme();\n setValue(event.target.checked);\n }\n };\n});\nvar Switch = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_3__.switch_default, function (value, setValue, props) {\n return {\n isSelected: value,\n onChange: function onChange(event) {\n setValue(event.target.checked);\n }\n };\n});\nvar Textarea = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_4__.textarea_default, function (value, setValue, props) {\n return {\n value: value,\n onChange: function onChange(event) {\n setValue(event.target.value);\n }\n };\n});\nvar Input = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_5__.input_default, function (value, setValue, props) {\n return {\n value: value,\n onChange: function onChange(event) {\n var val = event.target.value;\n // For numeric input\n if (event.target.type === \"number\") {\n val = Number(val);\n }\n setValue(val);\n }\n };\n}, {\n policy: _shiny_react__WEBPACK_IMPORTED_MODULE_0__.debounce,\n delay: 250\n});\nvar Checkbox = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_6__.checkbox_default, function (value, setValue, props) {\n return {\n isSelected: value,\n onChange: function onChange(e) {\n setValue(e.target.checked);\n }\n };\n});\n\n//export const CheckboxGroup = InputAdapter(NextUI.CheckboxGroup, (value, setValue, props) => {\n// console.log(props);\n// return({\n// value: value,\n// onValueChange: (value) => {\n// setValue(value)\n// }\n// });\n//});\n\n//export const RadioGroup = InputAdapter(NextUI.RadioGroup, (value, setValue, props) => {\n// console.log(props);\n// return({\n// value: value,\n// onValueChange: (value) => {\n// setValue(value);\n// }\n// });\n//});\n\nvar Accordion = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_7__.accordion_default, function (value, setValue, props) {\n return {\n selectedKeys: value,\n onSelectionChange: function onSelectionChange(keys) {\n var vals = [];\n keys.forEach(function (key) {\n vals.push(key);\n });\n // So values appear in the right order\n // regardless of selection\n setValue(vals.sort());\n }\n };\n});\nvar Autocomplete = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_8__.autocomplete_default, function (value, setValue, props) {\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(true),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n touched = _React$useState2[0],\n setTouched = _React$useState2[1];\n var isValid = value !== null;\n return {\n isInvalid: isValid || !touched ? false : true,\n errorMessage: isValid || !touched ? \"\" : \"You must select a value\",\n selectedKey: value,\n onSelectionChange: function onSelectionChange(key) {\n setValue(key);\n },\n onClose: function onClose() {\n return setTouched(true);\n }\n };\n});\nvar DropdownMenu = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_9__.dropdown_menu_default, function (value, setValue, props) {\n return {\n selectedKeys: value,\n onSelectionChange: function onSelectionChange(keys) {\n var vals = [];\n keys.forEach(function (key) {\n vals.push(key);\n });\n // So values appear in the right order\n // regardless of selection\n setValue(vals.sort());\n }\n };\n});\nvar Listbox = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_10__.listbox_default, function (value, setValue, props) {\n return {\n selectedKeys: value,\n onSelectionChange: function onSelectionChange(keys) {\n var vals = [];\n keys.forEach(function (key) {\n vals.push(key);\n });\n // So values appear in the right order\n // regardless of selection\n setValue(vals.sort());\n }\n };\n});\nvar Pagination = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_11__.pagination_default, function (value, setValue, props) {\n return {\n page: value,\n onChange: function onChange(page) {\n setValue(page);\n }\n };\n});\nvar Select = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_12__.select_default, function (value, setValue, props) {\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_1___default().useState(true),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n touched = _React$useState4[0],\n setTouched = _React$useState4[1];\n var renderValue;\n if (props.items !== undefined) {\n renderValue = function renderValue(items) {\n var Avatar = _nextui_org_react__WEBPACK_IMPORTED_MODULE_13__.avatar_default;\n return items.map(function (item) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n key: item.key,\n className: \"flex items-center gap-2\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Avatar, {\n alt: item.key,\n className: \"flex-shrink-0\",\n size: \"sm\",\n src: item.props.startContent.props.src\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"flex flex-col\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", null, item.textValue), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"text-default-500 text-tiny\"\n }, \"Description\")));\n });\n };\n }\n var isValid = value !== '';\n return {\n isInvalid: isValid || !touched ? false : true,\n errorMessage: isValid || !touched ? \"\" : \"You must select a value\",\n selectedKeys: value,\n onSelectionChange: function onSelectionChange(keys) {\n var vals = [];\n keys.forEach(function (key) {\n vals.push(key);\n });\n // So values appear in the right order\n // regardless of selection\n setValue(vals.sort());\n if (vals.length === 0) isValid = false;\n },\n onClose: function onClose() {\n return setTouched(true);\n },\n renderValue: renderValue\n };\n});\nvar Slider = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_14__.slider_default, function (value, setValue, props) {\n return {\n value: value,\n onChange: function onChange(value) {\n setValue(value);\n }\n };\n}, {\n policy: _shiny_react__WEBPACK_IMPORTED_MODULE_0__.debounce,\n delay: 250\n});\nvar Tabs = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_15__.tabs_default, function (value, setValue, props) {\n return {\n selectedKey: value,\n onSelectionChange: function onSelectionChange(key) {\n setValue(key);\n }\n };\n});\n\n//# sourceURL=webpack://js/./src/inputs.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Accordion\": () => (/* binding */ Accordion),\n/* harmony export */ \"Autocomplete\": () => (/* binding */ Autocomplete),\n/* harmony export */ \"Button\": () => (/* binding */ Button),\n/* harmony export */ \"Checkbox\": () => (/* binding */ Checkbox),\n/* harmony export */ \"Input\": () => (/* binding */ Input),\n/* harmony export */ \"Listbox\": () => (/* binding */ Listbox),\n/* harmony export */ \"Pagination\": () => (/* binding */ Pagination),\n/* harmony export */ \"Select\": () => (/* binding */ Select),\n/* harmony export */ \"Slider\": () => (/* binding */ Slider),\n/* harmony export */ \"Switch\": () => (/* binding */ Switch),\n/* harmony export */ \"Tabs\": () => (/* binding */ Tabs),\n/* harmony export */ \"Textarea\": () => (/* binding */ Textarea),\n/* harmony export */ \"ThemeSwitcher\": () => (/* binding */ ThemeSwitcher),\n/* harmony export */ \"setTheme\": () => (/* binding */ setTheme)\n/* harmony export */ });\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/button/dist/chunk-NXTXE2B3.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/switch/dist/chunk-N4MZXI4F.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/input/dist/chunk-HXP4WOPN.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/input/dist/chunk-TC4QW7OA.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/checkbox/dist/chunk-AMSULWPV.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/accordion/dist/chunk-VEGXQLVL.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/autocomplete/dist/chunk-N2FRZORR.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/listbox/dist/chunk-5UXUPTLW.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/pagination/dist/chunk-BIN3WWJN.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/select/dist/chunk-QHKZQCIM.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/avatar/dist/chunk-XBMXQVV7.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/slider/dist/chunk-E5JQEZUR.mjs\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/tabs/dist/chunk-Q33IKVZ4.mjs\");\n/* harmony import */ var _shiny_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/shiny.react */ \"@/shiny.react\");\n/* harmony import */ var _shiny_react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_shiny_react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\nvar setTheme = function setTheme() {\n var theme;\n if ($('html').hasClass('dark')) {\n theme = 'light';\n $('html').removeClass('dark').addClass('light');\n } else {\n $('html').removeClass('light').addClass('dark');\n theme = 'dark';\n }\n Shiny.setInputValue('theme', theme, {\n priority: 'event'\n });\n};\nvar Button = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.ButtonAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_2__.button_default);\nvar ThemeSwitcher = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_3__.switch_default, function (value, setValue) {\n return {\n isSelected: $('html').hasClass('light') ? true : false,\n onChange: function onChange(event) {\n setTheme();\n setValue(event.target.checked);\n }\n };\n});\nvar Switch = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_3__.switch_default, function (value, setValue, props) {\n return {\n isSelected: value,\n onChange: function onChange(event) {\n setValue(event.target.checked);\n }\n };\n});\nvar Textarea = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_4__.textarea_default, function (value, setValue, props) {\n return {\n value: value,\n onChange: function onChange(event) {\n setValue(event.target.value);\n }\n };\n});\nvar Input = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_5__.input_default, function (value, setValue, props) {\n return {\n value: value,\n onChange: function onChange(event) {\n var val = event.target.value;\n // For numeric input\n if (event.target.type === \"number\") {\n val = Number(val);\n }\n setValue(val);\n }\n };\n}, {\n policy: _shiny_react__WEBPACK_IMPORTED_MODULE_0__.debounce,\n delay: 250\n});\nvar Checkbox = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_6__.checkbox_default, function (value, setValue, props) {\n return {\n isSelected: value,\n onChange: function onChange(e) {\n setValue(e.target.checked);\n }\n };\n});\n\n//export const CheckboxGroup = InputAdapter(NextUI.CheckboxGroup, (value, setValue, props) => {\n// console.log(props);\n// return({\n// value: value,\n// onValueChange: (value) => {\n// setValue(value)\n// }\n// });\n//});\n\n//export const RadioGroup = InputAdapter(NextUI.RadioGroup, (value, setValue, props) => {\n// console.log(props);\n// return({\n// value: value,\n// onValueChange: (value) => {\n// setValue(value);\n// }\n// });\n//});\n\nvar Accordion = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_7__.accordion_default, function (value, setValue, props) {\n return {\n selectedKeys: value,\n onSelectionChange: function onSelectionChange(keys) {\n var vals = [];\n keys.forEach(function (key) {\n vals.push(key);\n });\n // So values appear in the right order\n // regardless of selection\n setValue(vals.sort());\n }\n };\n});\nvar Autocomplete = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_8__.autocomplete_default, function (value, setValue, props) {\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(true),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n touched = _React$useState2[0],\n setTouched = _React$useState2[1];\n var isValid = value !== null;\n return {\n isInvalid: isValid || !touched ? false : true,\n errorMessage: isValid || !touched ? \"\" : \"You must select a value\",\n selectedKey: value,\n onSelectionChange: function onSelectionChange(key) {\n setValue(key);\n },\n onClose: function onClose() {\n return setTouched(true);\n }\n };\n});\n\n//export const DropdownMenu = InputAdapter(NextUI.DropdownMenu, (value, setValue, props) => {\n// return({\n// selectedKeys: value,\n// onSelectionChange: (keys) => {\n// let vals = [];\n// keys.forEach(key => {\n// vals.push(key);\n// });\n// // So values appear in the right order\n// // regardless of selection\n// setValue(vals.sort());\n// }\n// })\n//});\n\nvar Listbox = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_9__.listbox_default, function (value, setValue, props) {\n return {\n selectedKeys: value,\n onSelectionChange: function onSelectionChange(keys) {\n var vals = [];\n keys.forEach(function (key) {\n vals.push(key);\n });\n // So values appear in the right order\n // regardless of selection\n setValue(vals.sort());\n }\n };\n});\nvar Pagination = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_10__.pagination_default, function (value, setValue, props) {\n return {\n page: value,\n onChange: function onChange(page) {\n setValue(page);\n }\n };\n});\nvar Select = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_11__.select_default, function (value, setValue, props) {\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_1___default().useState(true),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n touched = _React$useState4[0],\n setTouched = _React$useState4[1];\n var renderValue;\n if (props.items !== undefined) {\n renderValue = function renderValue(items) {\n var Avatar = _nextui_org_react__WEBPACK_IMPORTED_MODULE_12__.avatar_default;\n return items.map(function (item) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n key: item.key,\n className: \"flex items-center gap-2\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Avatar, {\n alt: item.key,\n className: \"flex-shrink-0\",\n size: \"sm\",\n src: item.props.startContent.props.src\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"flex flex-col\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", null, item.textValue), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"text-default-500 text-tiny\"\n }, \"Description\")));\n });\n };\n }\n var isValid = value !== '';\n return {\n isInvalid: isValid || !touched ? false : true,\n errorMessage: isValid || !touched ? \"\" : \"You must select a value\",\n selectedKeys: value,\n onSelectionChange: function onSelectionChange(keys) {\n var vals = [];\n keys.forEach(function (key) {\n vals.push(key);\n });\n // So values appear in the right order\n // regardless of selection\n setValue(vals.sort());\n if (vals.length === 0) isValid = false;\n },\n onClose: function onClose() {\n return setTouched(true);\n },\n renderValue: renderValue\n };\n});\nvar Slider = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_13__.slider_default, function (value, setValue, props) {\n return {\n value: value,\n onChange: function onChange(value) {\n setValue(value);\n }\n };\n}, {\n policy: _shiny_react__WEBPACK_IMPORTED_MODULE_0__.debounce,\n delay: 250\n});\nvar Tabs = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_14__.tabs_default, function (value, setValue, props) {\n return {\n selectedKey: value,\n onSelectionChange: function onSelectionChange(key) {\n setValue(key);\n }\n };\n});\n\n//# sourceURL=webpack://js/./src/inputs.js?"); /***/ }), diff --git a/js/src/custom.js b/js/src/custom.js index 6840bc9..c69d0f0 100644 --- a/js/src/custom.js +++ b/js/src/custom.js @@ -39,3 +39,83 @@ export const RadioGroup = () => { export const CheckboxGroup = () => { ReactR.reactShinyInput('.checkboxgroup', 'CheckboxGroup', GroupBuilder("Checkbox")); } + +const DropdownBuilder = () => { + return( + ({ configuration, value, setValue }) => { + let Dropdown = NextUI.Dropdown; + let DropdownTrigger = NextUI.DropdownTrigger; + let Button = NextUI.Button; + let DropdownMenu = NextUI.DropdownMenu; + let DropdownItem = NextUI.DropdownItem; + let DropdownSection = NextUI.DropdownSection; + + let choices = configuration.children; + let menu = choices.map( + (choice) => { + let props = choice.props; + if (choice.dropdownSection) { + let items = choice.children.map( + (child) => + + ) + + return( + + {items} + + ) + } else { + return( + + + ) + } + }) + + return( + + + + + { + let vals = []; + keys.forEach(key => { + vals.push(key); + }); + setValue(vals) + } + } + > + {menu} + + + ); + } + ) +} + +export const DropdownMenu = () => { + ReactR.reactShinyInput('.dropdownmenu', 'DropdownMenu', DropdownBuilder()); +} diff --git a/js/src/inputs.js b/js/src/inputs.js index 7bd76fb..f765c05 100644 --- a/js/src/inputs.js +++ b/js/src/inputs.js @@ -107,18 +107,20 @@ export const Autocomplete = InputAdapter(NextUI.Autocomplete, (value, setValue, });} ); -export const DropdownMenu = InputAdapter(NextUI.DropdownMenu, (value, setValue, props) => ({ - selectedKeys: value, - onSelectionChange: (keys) => { - let vals = []; - keys.forEach(key => { - vals.push(key); - }); - // So values appear in the right order - // regardless of selection - setValue(vals.sort()); - } -})); +//export const DropdownMenu = InputAdapter(NextUI.DropdownMenu, (value, setValue, props) => { +// return({ +// selectedKeys: value, +// onSelectionChange: (keys) => { +// let vals = []; +// keys.forEach(key => { +// vals.push(key); +// }); +// // So values appear in the right order +// // regardless of selection +// setValue(vals.sort()); +// } +// }) +//}); export const Listbox = InputAdapter(NextUI.Listbox, (value, setValue, props) => ({ selectedKeys: value, diff --git a/man/dropdown.Rd b/man/dropdown.Rd index 434a000..d7617b5 100644 --- a/man/dropdown.Rd +++ b/man/dropdown.Rd @@ -9,9 +9,7 @@ \alias{update_dropdown} \title{dropdown} \usage{ -dropdown(...) - -dropdow_menu(inputId, ..., value = default_value) +dropdow_menu(inputId, ..., choices = NULL, selected = NULL) dropdown_trigger(...) @@ -22,17 +20,16 @@ dropdown_section(...) update_dropdown(session = shiny::getDefaultReactiveDomain(), inputId, ...) } \arguments{ -\item{...}{Props to pass to the component. -The allowed props are listed below in the \bold{Details} section.} - \item{inputId}{ID of the component.} -\item{value}{Starting value.} +\item{...}{Props to pass to the component. +The allowed props are listed below in the \bold{Details} section.} \item{session}{Object passed as the \code{session} argument to Shiny server.} } \value{ Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. +The update functions return nothing (called for side effects). } \description{ Displays a list of actions or options that a user can choose. Dropdown implementation is based on @@ -146,22 +143,14 @@ ui <- nextui_page( debug_react = TRUE, div( class = "flex gap-2 my-2", - dropdown( - dropdown_trigger( - button( - "Trigger", - color = color - ) - ), - dropdow_menu( - inputId = "dropdown", - color = color, - disabledKeys = JS("['3', '4']"), - selectionMode = "multiple", - items, - dropdown_section( - dropdown_item(key = 9, "Item 9") - ) + dropdow_menu( + inputId = "dropdown", + color = color, + #disabledKeys = JS("['3', '4']"), + selectionMode = "multiple", + choices = items, + dropdown_section( + dropdown_item(key = 9, "Item 9") ) ) ),