From abf26d9d10ff2281b651689a8894d70df0be6880 Mon Sep 17 00:00:00 2001 From: DivadNojnarg Date: Mon, 5 Jun 2023 09:21:01 +0200 Subject: [PATCH] sort of working prototype for navbar. TO DO: need to simplify ... --- R/layout.R | 20 +-- inst/examples/card/app.R | 198 ++++++++++++++++++++++++++- inst/examples/navbar/app.R | 260 ++++++++++++++++++++++-------------- inst/nextui-1.0.0/nextui.js | 2 +- js/src/inputs.js | 14 +- man/card.Rd | 198 ++++++++++++++++++++++++++- man/navbar.Rd | 155 ++++++++------------- man/theme_switcher.Rd | 56 ++++---- 8 files changed, 644 insertions(+), 259 deletions(-) diff --git a/R/layout.R b/R/layout.R index bf1befc..b875f3b 100644 --- a/R/layout.R +++ b/R/layout.R @@ -10,14 +10,14 @@ #' @return Object which can be passed as the UI of a Shiny app. #' @export nextui_page <- function(..., debug_react = FALSE) { - tagList( + #tagList( #create_react_deps(), - fluidPage( + htmltools::tags$body( htmltools::suppressDependencies("bootstrap"), if (debug_react) enableReactDebugMode(), ... ) - ) + #) } #' @rdname container @@ -54,9 +54,9 @@ grid_container <- custom_component("Grid.Container", " spacer <- component("Spacer") #' @rdname navbar -#' @inherit shinyInput params return +#' @inherit component params return #' @export -navbar <- input("Navbar") +navbar <- component("Navbar") #' @rdname navbar #' @inherit component params return @@ -85,10 +85,12 @@ navbar_item <- custom_component("Navbar.Item", " #' @rdname navbar #' @inherit component params return #' @export -navbar_link <- custom_component("Navbar.Link", " - const NextUI = jsmodule['@nextui-org/react']; - return NextUI.Navbar.Link; -") +navbar_link <- input("NavbarLink") + +#custom_component("Navbar.Link", " +# const NextUI = jsmodule['@nextui-org/react']; +# return NextUI.Navbar.Link; +#") #' @rdname navbar #' @inherit component params return diff --git a/inst/examples/card/app.R b/inst/examples/card/app.R index b53d3d4..eb9a978 100644 --- a/inst/examples/card/app.R +++ b/inst/examples/card/app.R @@ -1,14 +1,198 @@ library(shiny) library(shinyNextUI) +library(shiny.react) ui <- nextui_page( - card( - variant = "bordered", - card_header("Card title"), - card_divider(), - card_body(h1("Card body")), - card_divider(), - card_footer("Card Footer") + grid_container( + gap = 2, + grid( + xs = 4, + md = 4, + card( + variant = "bordered", + card_header("Card title"), + card_divider(), + card_body(h1("Card body")), + card_divider(), + card_footer("Card Footer") + ) + ), + grid( + xs = 4, + md = 4, + card( + css = JS("{ w: '100%', h: '400px' }"), + card_header( + css = JS("{ position: 'absolute', zIndex: 1, top: 5 }"), + col( + text( + size = 12, + weight = "bold", + transform = "uppercase", + color = "#9E9E9E", + "Your day your way" + ), + text(h3 = TRUE, color = "white", "Your checklist for better sleep") + ) + ), + card_body( + css = JS("{ p: 0 }"), + card_image( + src = "https://nextui.org/images/card-example-5.jpeg", + objectFit = "cover", + width = "100%", + height = "100%", + alt = "Relaxing app background", + ) + ), + card_footer( + isBlurred = TRUE, + css = JS( + "{ + position: 'absolute', + bgBlur: '#0f111466', + borderTop: '$borderWeights$light solid $gray800', + bottom: 0, + zIndex: 1, + }" + ), + row( + col( + row( + col( + span = 3, + card_image( + src = "https://nextui.org/images/breathing-app-icon.jpeg", + css = JS("{ bg: 'black', br: '50%' }"), + height = 40, + width = 40, + alt = "Breathing app icon" + ) + ), + col( + text(color = "#d1d1d1", size = 12, "Breathing App"), + text(color = "#d1d1d1", size = 12, "Get a good night's sleep.") + ) + ) + ), + col( + row( + justify = "flex-end", + action_button( + inputId = "card_button", + flat = TRUE, + auto = TRUE, + rounded = TRUE, + css = JS("{ color: '#94f9f0', bg: '#94f9f026' }"), + text( + css = JS("{ color: 'inherit' }"), + size = 12, + weight= "bold", + transform = "uppercase", + "Get App" + ) + ) + ) + ) + ) + ) + ) + ), + grid( + md = 4, + xs = 4, + card( + className = "user-twitter-card__container", + css = JS( + "{ + mw: '270px', + borderRadius: '$lg', + padding: '$sm', + }" + ), + row( + justify = "space-around", + align = "center", + col( + span = 8, + user( + src = "https://i.pravatar.cc/150?u=a042581f4e29026704d", + name = "Ariana Wattson", + description = "UI/UX Designer", + css = JS("{ px: 0 }") + ) + ), + col( + span = 4, + row( + action_button( + inputId = "twitter_button", + auto = TRUE, + rounded = TRUE, + onPress = NULL, + css = JS( + "{ + maxHeight: '$space$12', + fs: '$xs', + fontWeight: '$semibold', + borderColor: '$primary', + color: '$white' + }" + ), + color = "primary", + bordered = FALSE, + "Click me" + ) + ) + ) + ), + grid_container( + className = "user-twitter-card__username-container", + grid( + xs = 12, + text( + className = "user-twitter-card__text", + size = 14, + css = JS("{ mt: '$1' }"), + color = "#888888", + "Full-stack developer, @getnextui lover she/her 🎉" + ) + ) + ), + grid_container( + className = "user-twitter-card__metrics-container", + justify = "flex-start", + alignContent = "center", + text( + className = "user-twitter-card__text", + size = 14, + color = "#888888", + text( + b = TRUE, + color = "foreground", + classNam. = "user-twitter-card__text", + size = 14, + "4" + ), + text("Following") + ), + spacer(inline = TRUE, x = 0.5), + text( + className = "user-twitter-card__text", + size = 14, + color = "#888888", + text( + b = TRUE, + color = "foreground", + classNam. = "user-twitter-card__text", + size = 14, + "97.1K" + ), + text("Followers") + ) + ) + ) + ) ) ) diff --git a/inst/examples/navbar/app.R b/inst/examples/navbar/app.R index 757d890..697c70b 100644 --- a/inst/examples/navbar/app.R +++ b/inst/examples/navbar/app.R @@ -1,128 +1,184 @@ library(shiny) library(shinyNextUI) library(shiny.react) +library(shiny.router) -links <- lapply(1:4, function(i) { - navbar_link( - href = "#", - sprintf("Link %s", i), - onClick = JS("(e) => console.log(e)"), - isActive = if (i == 1) TRUE +sections <- c("main", "other") + +layout <- function(..., content) { + tags$div( + css = JS(" + { + maxW: '100%', + boxSizing: 'border-box', + }" + ), + ..., # Navbar + # Content + tags$div( + css = JS( + "{ + boxSizing: 'border-box', + px: '$12', + mt: '$8', + '@xsMax': {px: '$10'} + }" + ), + content + ) ) -}) +} +# TO DO: create wrapper for enduser to simplify all this mess. +create_navbar <- function(id) { -navbar_layout <- function(...) { - tags$div( - css = JS("{maxW: '100%', boxSizing: 'border-box'}"), - ... + input <- get("input", envir = parent.frame()) + + nav_links <- lapply(seq_along(sections), function(i) { + # Li elements + navbar_link( + inputId = sprintf("link_%s", i), + href = route_link(sections[[i]]), + key = i, + value = i, + parent = sprintf("navbar_%s", sections[[i]]), + isActive = if (is.null(input[[sprintf("navbar_%s", id)]])) { + if (i == 1) TRUE else FALSE + } else { + if (input[[sprintf("navbar_%s", id)]] == i) TRUE else FALSE + }, + sprintf("Link to %s", sections[[i]]) + ) + }) + + nav <- navbar( + id = sprintf("navbar_%s", id), + maxWidth = "lg", + variant = "floating", + isBordered = TRUE, + navbar_brand(text(b = TRUE, "Brand", color = "inherit", hideIn = "xs")), + # Ul element + navbar_content( + variant = "highlight", + activeColor = "success", + nav_links, + navbar_item( + action_button( + inputId = sprintf("navbar_button-%s", id), + "Click me", + auto = TRUE, + flat = TRUE + ) + ) + ) ) + + if (is.null(input[[sprintf("navbar_%s", id)]])) { + tagList( + tags$script( + sprintf("Shiny.setInputValue('navbar_%s', 0)", id) + ), + nav + ) + } else { + nav + } } -content <- function(...) { - tags$div( - css = JS("{px: '$12', mt: '$8', '@xsMax': {px: '$10'}}"), - ... +page <- function(id, content) { + layout( + reactOutput(sprintf("nav_%s", id)), + content = content ) } -ui <- nextui_page( - navbar_layout( - navbar( - inputId = "navbar", - maxWidth = "fluid", - #css = JS("{ maxW: '100%' }"), - isBordered = TRUE, - navbar_brand(text(b = TRUE, "Brand", color = "inherit", hideIn = "xs")), - navbar_content( - variant = "highlight", - activeColor = "primary", - enableCursorHighlight = TRUE, - hideIn = "xs", - links, - navbar_item( - action_button( - inputId = "navbar_button", - "Click me", - auto = TRUE, - flat = TRUE +home <- page( + id = "main", + grid_container( + gap = 2, + grid( + xs = 12, + card( + variant = "bordered", + card_header(text("Amazing plot", as = "h3")), + card_divider(), + card_body( + row( + justify = "center", + align = "center", + gap = 1, + col( + span = 2, + collapse_panel( + shadow = TRUE, + bordered = TRUE, + css = JS("{ + background: 'gainsboro' + }"), + title = "Plot options", + subtitle = "A panel containing options", + inputId = "options", + value = TRUE, + numeric_input( + inputId = "obs", + label = "Number of observations:", + value = 500 + ) + ) + ), + col( + span = 10, + plotOutput("distPlot") + ) ) ) ) - ), - content( - text( - size = "$lg", - "Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Purus gravida quis blandit turpis. Augue neque gravida in fermentum - et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. - Elementum tempus egestas sed sed risus pretium quam vulputate. - Interdum velit euismod in pellentesque massa placerat duis ultricies. - Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. - Praesent semper feugiat nibh sed pulvinar. Ultrices gravida dictum - fusce ut placerat orci nulla pellentesque. Malesuada proin libero - nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. - Sed viverra tellus in hac habitasse platea dictumst. Vivamus at augue - eget arcu. Augue mauris augue neque gravida in. - Tincidunt vitae semper quis lectus nulla at volutpat diam. - Gravida dictum fusce ut placerat. Erat velit scelerisque in dictum non. - Tempus quam pellentesque nec nam aliquam sem et tortor consequat. - Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. - Vel pharetra vel turpis nunc eget lorem dolor sed viverra. - Sollicitudin tempor id eu nisl nunc mi ipsum faucibus. - Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi - etiam dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit - gravida rutrum quisque non tellus orci ac. - Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. - In pellentesque massa placerat duis ultricies. Sit amet massa vitae - tortor condimentum. Morbi tincidunt augue interdum velit euismod. - Aliquet enim tortor at auctor urna nunc id. A scelerisque purus semper eget. - Vitae justo eget magna fermentum iaculis. Arcu non odio euismod lacinia - at quis. Et leo duis ut diam quam nulla porttitor massa. Eget nunc - scelerisque viverra mauris. Suscipit tellus mauris a diam maecenas - sed enim. Cras sed felis eget velit aliquet. Est placerat in egestas - erat imperdiet sed euismod nisi porta. In ante metus dictum at tempor - commodo. In cursus turpis massa tincidunt dui ut ornare lectus. Tempus - iaculis urna id volutpat. Iaculis eu non diam phasellus vestibulum lorem - sed risus. - Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. - Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper - malesuada. Faucibus pulvinar elementum integer enim neque volutpat. - Gravida arcu ac tortor dignissim convallis aenean. Lectus quam id leo in - vitae. Ultricies tristique nulla aliquet enim tortor. Nec tincidunt - praesent semper feugiat nibh sed. Imperdiet proin fermentum leo vel orci - porta non pulvinar neque. Praesent semper feugiat nibh sed pulvinar proin - gravida. Dis parturient montes nascetur ridiculus mus mauris. Rhoncus dolor - purus non enim praesent elementum facilisis leo vel. Ut lectus arcu bibendum - at. Integer enim neque volutpat ac. Diam sit amet nisl suscipit. Eros donec - ac odio tempor orci dapibus ultrices in iaculis. Ullamcorper a lacus - vestibulum sed arcu non odio euismod. Quis lectus nulla at volutpat diam ut. - Turpis egestas integer eget aliquet. Adipiscing tristique risus nec feugiat - in fermentum posuere. Morbi tempus iaculis urna id. Amet commodo nulla - facilisi nullam vehicula ipsum a arcu. - Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent - semper feugiat nibh sed pulvinar. Ultrices gravida dictum fusce ut placerat - orci nulla pellentesque. Malesuada proin libero nunc consequat interdum - varius sit amet. Lectus quam id leo in vitae. Sed viverra tellus in hac - habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue - neque gravida in. - Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum - fusce ut placerat. Erat velit scelerisque in dictum non. Tempus quam - pellentesque nec nam aliquam sem et tortor consequat. Eu nisl nunc mi - ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel pharetra - vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu - nisl nunc mi ipsum faucibus. Sed id semper risus in hendrerit gravida - rutrum. Eget nulla facilisi etiam dignissim. Erat imperdiet sed euismod - nisi. Risus in hendrerit gravida rutrum quisque non tellus orci ac." + ) + ) +) +other <- page( + id = "other", + grid_container( + gap = 2, + grid( + xs = 12, + card( + css = JS( + "{ + maxHeight: '400px', + overflowY: 'scroll' + }" + ), + variant = "bordered", + tableOutput('table') ) ) ) ) +ui <- nextui_page( + router_ui( + route("main", home), + route("other", other) + ) +) + server <- function(input, output, session) { observe(print(input$navbar)) + output$nav_main <- renderReact({ + create_navbar("main") + }) + + output$nav_other <- renderReact({ + create_navbar("other") + }) + + output$distPlot <- renderPlot({ + hist(rnorm(input$obs)) + }) + output$table <- renderTable(iris) + + router_server("main") } if (interactive() || is_testing()) shinyApp(ui, server) diff --git a/inst/nextui-1.0.0/nextui.js b/inst/nextui-1.0.0/nextui.js index 0f96351..d78e798 100644 --- a/inst/nextui-1.0.0/nextui.js +++ b/inst/nextui-1.0.0/nextui.js @@ -3172,7 +3172,7 @@ eval("// Set default theme as light\n$(document).on('shiny:connected', function( /***/ ((__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 */ \"Button\": () => (/* binding */ Button),\n/* harmony export */ \"Checkbox\": () => (/* binding */ Checkbox),\n/* harmony export */ \"CheckboxGroup\": () => (/* binding */ CheckboxGroup),\n/* harmony export */ \"Collapse\": () => (/* binding */ Collapse),\n/* harmony export */ \"CollapseGroup\": () => (/* binding */ CollapseGroup),\n/* harmony export */ \"Dropdown\": () => (/* binding */ Dropdown),\n/* harmony export */ \"Input\": () => (/* binding */ Input),\n/* harmony export */ \"Navbar\": () => (/* binding */ Navbar),\n/* harmony export */ \"Radio\": () => (/* binding */ Radio),\n/* harmony export */ \"Switch\": () => (/* binding */ Switch),\n/* harmony export */ \"Textarea\": () => (/* binding */ Textarea)\n/* harmony export */ });\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/button/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/switch/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/textarea/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/input/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/checkbox/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/radio/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/collapse/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/dropdown/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/navbar/index.js\");\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\n\n\nconst Button = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.ButtonAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\nconst Switch = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_2__[\"default\"], (value, setValue) => ({\n checked: value,\n onChange: (event) => {\n setValue(event.target.checked);\n },\n}));\n\nconst Textarea = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_3__[\"default\"], (value, setValue, props) => ({\n value: value,\n onChange: (event) => {\n setValue(event.target.value);\n },\n}));\n\nconst Input = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_4__[\"default\"], (value, setValue, props) => ({\n value: value,\n onChange: (event) => {\n let val = event.target.value;\n // For numeric input\n if (event.target.type === \"number\") {\n val = Number(val);\n }\n setValue(val);\n },\n}), { policy: _shiny_react__WEBPACK_IMPORTED_MODULE_0__.debounce, delay: 250 });\n\nconst Checkbox = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_5__[\"default\"], (value, setValue, props) => ({\n defaultSelected: value,\n onChange: (e) => {\n setValue(e);\n },\n}));\n\nconst CheckboxGroup = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_5__[\"default\"].Group, (value, setValue, props) => ({\n value: value,\n onChange: (v) => {\n console.log(props);\n props.value = v;\n setValue(v);\n },\n}));\n\nconst Radio = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_6__[\"default\"].Group, (value, setValue, props) => ({\n value: value,\n onChange: (event) => {\n setValue(event);\n },\n}));\n\nconst Collapse = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_7__[\"default\"], (value, setValue, props) => ({\n expanded: value,\n onChange: (e, i, v) => {\n setValue(v);\n },\n}));\n\nconst CollapseGroup = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_7__[\"default\"].Group, (value, setValue, props) => ({\n expanded: value,\n onChange: (i, v) => {\n // Returns index of opened element\n setValue(i);\n },\n}));\n\nconst Dropdown = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_8__[\"default\"].Menu, (value, setValue, props) => ({\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\nconst Navbar = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_9__[\"default\"], (value, setValue, props) => ({\n onClick: (e) => {\n // Get active item value\n let val = $(e.currentTarget)\n .find('li[class*=\"isActive\"] a')[0]\n .innerHTML;\n // TO DO.\n // when click on li item, toggle the old active ...\n setValue(val);\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 */ \"Button\": () => (/* binding */ Button),\n/* harmony export */ \"Checkbox\": () => (/* binding */ Checkbox),\n/* harmony export */ \"CheckboxGroup\": () => (/* binding */ CheckboxGroup),\n/* harmony export */ \"Collapse\": () => (/* binding */ Collapse),\n/* harmony export */ \"CollapseGroup\": () => (/* binding */ CollapseGroup),\n/* harmony export */ \"Dropdown\": () => (/* binding */ Dropdown),\n/* harmony export */ \"Input\": () => (/* binding */ Input),\n/* harmony export */ \"NavbarLink\": () => (/* binding */ NavbarLink),\n/* harmony export */ \"Radio\": () => (/* binding */ Radio),\n/* harmony export */ \"Switch\": () => (/* binding */ Switch),\n/* harmony export */ \"Textarea\": () => (/* binding */ Textarea)\n/* harmony export */ });\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/button/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/switch/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/textarea/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/input/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/checkbox/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/radio/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/collapse/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/dropdown/index.js\");\n/* harmony import */ var _nextui_org_react__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @nextui-org/react */ \"./node_modules/@nextui-org/react/esm/navbar/index.js\");\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\n\n\nconst Button = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.ButtonAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\nconst Switch = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_2__[\"default\"], (value, setValue) => ({\n checked: value,\n onChange: (event) => {\n setValue(event.target.checked);\n },\n}));\n\nconst Textarea = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_3__[\"default\"], (value, setValue, props) => ({\n value: value,\n onChange: (event) => {\n setValue(event.target.value);\n },\n}));\n\nconst Input = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_4__[\"default\"], (value, setValue, props) => ({\n value: value,\n onChange: (event) => {\n let val = event.target.value;\n // For numeric input\n if (event.target.type === \"number\") {\n val = Number(val);\n }\n setValue(val);\n },\n}), { policy: _shiny_react__WEBPACK_IMPORTED_MODULE_0__.debounce, delay: 250 });\n\nconst Checkbox = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_5__[\"default\"], (value, setValue, props) => ({\n defaultSelected: value,\n onChange: (e) => {\n setValue(e);\n },\n}));\n\nconst CheckboxGroup = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_5__[\"default\"].Group, (value, setValue, props) => ({\n value: value,\n onChange: (v) => {\n console.log(props);\n props.value = v;\n setValue(v);\n },\n}));\n\nconst Radio = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_6__[\"default\"].Group, (value, setValue, props) => ({\n value: value,\n onChange: (event) => {\n setValue(event);\n },\n}));\n\nconst Collapse = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_7__[\"default\"], (value, setValue, props) => ({\n expanded: value,\n onChange: (e, i, v) => {\n setValue(v);\n },\n}));\n\nconst CollapseGroup = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_7__[\"default\"].Group, (value, setValue, props) => ({\n expanded: value,\n onChange: (i, v) => {\n // Returns index of opened element\n setValue(i);\n },\n}));\n\nconst Dropdown = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_8__[\"default\"].Menu, (value, setValue, props) => ({\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\nconst NavbarLink = (0,_shiny_react__WEBPACK_IMPORTED_MODULE_0__.InputAdapter)(_nextui_org_react__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Link, (value, setValue, props) => ({\n value: value,\n onPress: (e) => {\n const navId = $(e.target).attr('parent');\n Shiny.setInputValue(navId, $(e.target).attr('value'), {priority: 'event'});\n }\n}));\n\n\n//# sourceURL=webpack://js/./src/inputs.js?"); /***/ }), diff --git a/js/src/inputs.js b/js/src/inputs.js index 023eebd..462ea20 100644 --- a/js/src/inputs.js +++ b/js/src/inputs.js @@ -79,14 +79,10 @@ export const Dropdown = InputAdapter(NextUI.Dropdown.Menu, (value, setValue, pro } })); -export const Navbar = InputAdapter(NextUI.Navbar, (value, setValue, props) => ({ - onClick: (e) => { - // Get active item value - let val = $(e.currentTarget) - .find('li[class*="isActive"] a')[0] - .innerHTML; - // TO DO. - // when click on li item, toggle the old active ... - setValue(val); +export const NavbarLink = InputAdapter(NextUI.Navbar.Link, (value, setValue, props) => ({ + value: value, + onPress: (e) => { + const navId = $(e.target).attr('parent'); + Shiny.setInputValue(navId, $(e.target).attr('value'), {priority: 'event'}); } })); diff --git a/man/card.Rd b/man/card.Rd index 504a1f8..ac57346 100644 --- a/man/card.Rd +++ b/man/card.Rd @@ -79,15 +79,199 @@ Card is a container for text, photos, and actions in the context of a single sub \examples{ library(shiny) library(shinyNextUI) +library(shiny.react) ui <- nextui_page( - card( - variant = "bordered", - card_header("Card title"), - card_divider(), - card_body(h1("Card body")), - card_divider(), - card_footer("Card Footer") + grid_container( + gap = 2, + grid( + xs = 4, + md = 4, + card( + variant = "bordered", + card_header("Card title"), + card_divider(), + card_body(h1("Card body")), + card_divider(), + card_footer("Card Footer") + ) + ), + grid( + xs = 4, + md = 4, + card( + css = JS("{ w: '100\%', h: '400px' }"), + card_header( + css = JS("{ position: 'absolute', zIndex: 1, top: 5 }"), + col( + text( + size = 12, + weight = "bold", + transform = "uppercase", + color = "#9E9E9E", + "Your day your way" + ), + text(h3 = TRUE, color = "white", "Your checklist for better sleep") + ) + ), + card_body( + css = JS("{ p: 0 }"), + card_image( + src = "https://nextui.org/images/card-example-5.jpeg", + objectFit = "cover", + width = "100\%", + height = "100\%", + alt = "Relaxing app background", + ) + ), + card_footer( + isBlurred = TRUE, + css = JS( + "{ + position: 'absolute', + bgBlur: '#0f111466', + borderTop: '$borderWeights$light solid $gray800', + bottom: 0, + zIndex: 1, + }" + ), + row( + col( + row( + col( + span = 3, + card_image( + src = "https://nextui.org/images/breathing-app-icon.jpeg", + css = JS("{ bg: 'black', br: '50\%' }"), + height = 40, + width = 40, + alt = "Breathing app icon" + ) + ), + col( + text(color = "#d1d1d1", size = 12, "Breathing App"), + text(color = "#d1d1d1", size = 12, "Get a good night's sleep.") + ) + ) + ), + col( + row( + justify = "flex-end", + action_button( + inputId = "card_button", + flat = TRUE, + auto = TRUE, + rounded = TRUE, + css = JS("{ color: '#94f9f0', bg: '#94f9f026' }"), + text( + css = JS("{ color: 'inherit' }"), + size = 12, + weight= "bold", + transform = "uppercase", + "Get App" + ) + ) + ) + ) + ) + ) + ) + ), + grid( + md = 4, + xs = 4, + card( + className = "user-twitter-card__container", + css = JS( + "{ + mw: '270px', + borderRadius: '$lg', + padding: '$sm', + }" + ), + row( + justify = "space-around", + align = "center", + col( + span = 8, + user( + src = "https://i.pravatar.cc/150?u=a042581f4e29026704d", + name = "Ariana Wattson", + description = "UI/UX Designer", + css = JS("{ px: 0 }") + ) + ), + col( + span = 4, + row( + action_button( + inputId = "twitter_button", + auto = TRUE, + rounded = TRUE, + onPress = NULL, + css = JS( + "{ + maxHeight: '$space$12', + fs: '$xs', + fontWeight: '$semibold', + borderColor: '$primary', + color: '$white' + }" + ), + color = "primary", + bordered = FALSE, + "Click me" + ) + ) + ) + ), + grid_container( + className = "user-twitter-card__username-container", + grid( + xs = 12, + text( + className = "user-twitter-card__text", + size = 14, + css = JS("{ mt: '$1' }"), + color = "#888888", + "Full-stack developer, @getnextui lover she/her 🎉" + ) + ) + ), + grid_container( + className = "user-twitter-card__metrics-container", + justify = "flex-start", + alignContent = "center", + text( + className = "user-twitter-card__text", + size = 14, + color = "#888888", + text( + b = TRUE, + color = "foreground", + classNam. = "user-twitter-card__text", + size = 14, + "4" + ), + text("Following") + ), + spacer(inline = TRUE, x = 0.5), + text( + className = "user-twitter-card__text", + size = 14, + color = "#888888", + text( + b = TRUE, + color = "foreground", + classNam. = "user-twitter-card__text", + size = 14, + "97.1K" + ), + text("Followers") + ) + ) + ) + ) ) ) diff --git a/man/navbar.Rd b/man/navbar.Rd index b4f6fa1..592f8df 100644 --- a/man/navbar.Rd +++ b/man/navbar.Rd @@ -11,7 +11,7 @@ \alias{navbar_collapse_item} \title{navbar} \usage{ -navbar(inputId, ..., value = default_value) +navbar(...) navbar_brand(...) @@ -19,7 +19,7 @@ navbar_content(...) navbar_item(...) -navbar_link(...) +navbar_link(inputId, ..., value = default_value) navbar_toggle(...) @@ -28,16 +28,11 @@ navbar_collapse(...) navbar_collapse_item(...) } \arguments{ -\item{inputId}{ID of the component.} - \item{...}{Props to pass to the component. The allowed props are listed below in the \bold{Details} section.} - -\item{value}{Starting value.} } \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{ A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more. @@ -166,43 +161,55 @@ A responsive navigation header positioned on top side of your page that includes library(shiny) library(shinyNextUI) library(shiny.react) +library(shiny.router) -links <- lapply(1:4, function(i) { +# $(e.target).closest('li').attr('isActive', '') +sections <- c("/", "other") +links <- lapply(seq_along(sections), function(i) { navbar_link( - href = "#", - sprintf("Link \%s", i), - onClick = JS("(e) => console.log(e)"), - isActive = if (i == 1) TRUE + href = route_link(sections[[i]]), + key = i, + sprintf("Link to \%s", sections[[i]]), + onPress = JS("(e) => console.log(e)"), ) }) -navbar_layout <- function(...) { +layout <- function(..., content) { tags$div( - css = JS("{maxW: '100\%', boxSizing: 'border-box'}"), - ... - ) -} - -content <- function(...) { - tags$div( - css = JS("{px: '$12', mt: '$8', '@xsMax': {px: '$10'}}"), - ... + css = JS(" + { + maxW: '100\%', + boxSizing: 'border-box', + }" + ), + ..., # Navbar + # Content + tags$div( + css = JS( + "{ + boxSizing: 'border-box', + px: '$12', + mt: '$8', + '@xsMax': {px: '$10'} + }" + ), + content + ) ) } -ui <- nextui_page( - navbar_layout( +page <- function(content) { + layout( navbar( - inputId = "navbar", - maxWidth = "fluid", - #css = JS("{ maxW: '100\%' }"), + #inputId = "navbar", + maxWidth = "lg", + variant = "floating", isBordered = TRUE, navbar_brand(text(b = TRUE, "Brand", color = "inherit", hideIn = "xs")), navbar_content( variant = "highlight", activeColor = "primary", - enableCursorHighlight = TRUE, hideIn = "xs", links, navbar_item( @@ -215,80 +222,36 @@ ui <- nextui_page( ) ) ), - content( - theme_switcher(), - text( - size = "$lg", - "Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Purus gravida quis blandit turpis. Augue neque gravida in fermentum - et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. - Elementum tempus egestas sed sed risus pretium quam vulputate. - Interdum velit euismod in pellentesque massa placerat duis ultricies. - Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. - Praesent semper feugiat nibh sed pulvinar. Ultrices gravida dictum - fusce ut placerat orci nulla pellentesque. Malesuada proin libero - nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. - Sed viverra tellus in hac habitasse platea dictumst. Vivamus at augue - eget arcu. Augue mauris augue neque gravida in. - Tincidunt vitae semper quis lectus nulla at volutpat diam. - Gravida dictum fusce ut placerat. Erat velit scelerisque in dictum non. - Tempus quam pellentesque nec nam aliquam sem et tortor consequat. - Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. - Vel pharetra vel turpis nunc eget lorem dolor sed viverra. - Sollicitudin tempor id eu nisl nunc mi ipsum faucibus. - Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi - etiam dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit - gravida rutrum quisque non tellus orci ac. - Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. - In pellentesque massa placerat duis ultricies. Sit amet massa vitae - tortor condimentum. Morbi tincidunt augue interdum velit euismod. - Aliquet enim tortor at auctor urna nunc id. A scelerisque purus semper eget. - Vitae justo eget magna fermentum iaculis. Arcu non odio euismod lacinia - at quis. Et leo duis ut diam quam nulla porttitor massa. Eget nunc - scelerisque viverra mauris. Suscipit tellus mauris a diam maecenas - sed enim. Cras sed felis eget velit aliquet. Est placerat in egestas - erat imperdiet sed euismod nisi porta. In ante metus dictum at tempor - commodo. In cursus turpis massa tincidunt dui ut ornare lectus. Tempus - iaculis urna id volutpat. Iaculis eu non diam phasellus vestibulum lorem - sed risus. - Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. - Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper - malesuada. Faucibus pulvinar elementum integer enim neque volutpat. - Gravida arcu ac tortor dignissim convallis aenean. Lectus quam id leo in - vitae. Ultricies tristique nulla aliquet enim tortor. Nec tincidunt - praesent semper feugiat nibh sed. Imperdiet proin fermentum leo vel orci - porta non pulvinar neque. Praesent semper feugiat nibh sed pulvinar proin - gravida. Dis parturient montes nascetur ridiculus mus mauris. Rhoncus dolor - purus non enim praesent elementum facilisis leo vel. Ut lectus arcu bibendum - at. Integer enim neque volutpat ac. Diam sit amet nisl suscipit. Eros donec - ac odio tempor orci dapibus ultrices in iaculis. Ullamcorper a lacus - vestibulum sed arcu non odio euismod. Quis lectus nulla at volutpat diam ut. - Turpis egestas integer eget aliquet. Adipiscing tristique risus nec feugiat - in fermentum posuere. Morbi tempus iaculis urna id. Amet commodo nulla - facilisi nullam vehicula ipsum a arcu. - Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent - semper feugiat nibh sed pulvinar. Ultrices gravida dictum fusce ut placerat - orci nulla pellentesque. Malesuada proin libero nunc consequat interdum - varius sit amet. Lectus quam id leo in vitae. Sed viverra tellus in hac - habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue - neque gravida in. - Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum - fusce ut placerat. Erat velit scelerisque in dictum non. Tempus quam - pellentesque nec nam aliquam sem et tortor consequat. Eu nisl nunc mi - ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel pharetra - vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu - nisl nunc mi ipsum faucibus. Sed id semper risus in hendrerit gravida - rutrum. Eget nulla facilisi etiam dignissim. Erat imperdiet sed euismod - nisi. Risus in hendrerit gravida rutrum quisque non tellus orci ac." + content = content + ) +} + +home <- page( + grid_container( + gap = 2, + lapply(1:20, function(i) { + grid( + xs = 12, + card( + card_header("My card"), + card_body("body") + ) ) - ) + }) + ) +) +other <- page("Other") + +ui <- nextui_page( + router_ui( + route("/", home), + route("other", other) ) ) server <- function(input, output, session) { observe(print(input$navbar)) + router_server() } if (interactive() || is_testing()) shinyApp(ui, server) diff --git a/man/theme_switcher.Rd b/man/theme_switcher.Rd index 0b2833f..0c84712 100644 --- a/man/theme_switcher.Rd +++ b/man/theme_switcher.Rd @@ -12,37 +12,37 @@ Change between light and dark mode \examples{ if (interactive()) { library(shiny) - library(shinyNextUI) - library(shiny.react) + library(shinyNextUI) + library(shiny.react) - ui <- nextui_page( - theme_switcher(), - reactOutput("card") - ) + ui <- nextui_page( + theme_switcher(), + reactOutput("card") + ) - server <- function(input, output, session) { - observe({ - print(input$theme) - }) - output$card <- renderReact({ - card( - variant = "bordered", - card_header("Card title"), - card_divider(), - card_body(h1("Card body")), - card_divider(), - card_footer("Card Footer"), - className = JS( - sprintf("window.jsmodule['@nextui-org/react'].createTheme({ - type: '\%s', - theme: {} - })", input$theme) - ) - ) - }) - } + server <- function(input, output, session) { + observe({ + print(input$theme) + }) + output$card <- renderReact({ + card( + variant = "bordered", + card_header("Card title"), + card_divider(), + card_body(h1("Card body")), + card_divider(), + card_footer("Card Footer"), + className = JS( + sprintf("window.jsmodule['@nextui-org/react'].createTheme({ + type: '\%s', + theme: {} + })", input$theme) + ) + ) + }) + } - shinyApp(ui, server) + shinyApp(ui, server) }