Sweetalert2 сообщение с выпадающим в R блестящий - PullRequest
Новая
       9

Sweetalert2 сообщение с выпадающим в R блестящий

0 голосов
/ 11 февраля 2019

Как создать версию R Shiny для sweetalert2 сообщения с выпадающим меню в нем. Я собрал довольно много типов и типов сообщений-подсластителей в R Shiny, но это новыйвведите для меня, и я застрял на правильном пути, чтобы получить выбор из ввода select внутри сообщения в виде текста, а не числа.

Получил его работать до некоторой степени, ноoutput - это номер n-го элемента в списке, а не текстовые строки .....

Оригинальный чистый пример JavaScript: пример в выберите (размещено в нижней части этого сообщения.

После того, как я создал демо-приложение, которое выдает цифры вместо текста, я попробовал это: (следуя рабочему решению, которое я строю в конце на основе этого другого SO вопрос о подсластителях 

myjava <- "shinyjs.swalFromButton = function(params) { 
    var defaultParams = {
title : null,
html : null,
inputOptions: null
};
params = shinyjs.getParams(params, defaultParams);
swal({title : params.title, html : params.html, inputOptions : params.inputOptions,
input: 'select',
inputPlaceholder: 'Select a batchname',
showCancelButton: true,
inputValidator: function(value) {
  return new Promise(function(resolve) {
    if (value === 'Select a batchname') {
      resolve('You need to select a batchname')
    } else {
      resolve()
    }
  })
}
})
.then(function(result){
  if(result.dismiss === swal.DismissReason.cancel) {
  } else {
    Shiny.setInputValue('SweetDropChoice', result.value, {priority: 'event'});
  }
});
};"

Я думаю, что моя проблема в том, что я понятия не имею, как правильно использовать разрешение из примера в моей собственной версии.

Здесьэто приложение для тестирования. Вам нужно будетПерейдите в каталог и загрузите два файла, чтобы sweetalert2 работал здесь: https://www.jsdelivr.com/package/npm/sweetalert2, кнопка загрузки находится справа от заголовка: sweetalert2 , а 2 необходимых файла находятся в dist папка с именем:

sweetalert2.min.js & sweetalert2.min.css 

setwd(PASTE LOCATION WHERE YOU SAVED THE SWEETALERT SCRIPTS)

    library(shiny)
    library(shinyjs)

    myjava <- "shinyjs.swalFromButton = function(params) { 
        var defaultParams = {
    title : null,
    html : null,
    inputOptions: null
    };
    params = shinyjs.getParams(params, defaultParams);
    swal({title : params.title, html : params.html, inputOptions : params.inputOptions,
    input: 'select',
    inputPlaceholder: 'Select a batchname',
    showCancelButton: true})
    .then(function(result){
    if (result.value === 'Select a batchname') {
    resolve('You need to select a batchname:)')
    } else {
    var batchname = result.value
    Shiny.setInputValue('SweetDropChoice', batchname, {priority: 'event'});}
    });
    };"



    ui  <- fluidPage(

      actionButton(inputId = 'messagebutton', label = 'click me'),
      verbatimTextOutput('Choice', placeholder = T),
      shinyjs::useShinyjs(),
      shinyjs::extendShinyjs(text = myjava),
      tags$head(includeScript("sweetalert2.min.js"),
                includeCSS("sweetalert2.min.css")
      )
    )

    server <- function(input, output, session) { 

      values <- reactiveValues(Choice = '?',
                               Choices = rownames(mtcars)[1:6] ## dummy input to use in the sweetalert with dropdown
                               )

      observeEvent(input$messagebutton, { 
        shinyjs::js$swalFromButton( title = paste('<span style ="color:#339FFF;">An alert with a choice'),
                                    html = paste('Pick a name'), 
                                    inputOptions = values$Choices)
      })


      output$Choice <- renderPrint({input$SweetDropChoice})  ## print output of new sweetalert

    }

    shinyApp(ui = ui, server = server)

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Вот моя версия.Но это так же, как у вас, насколько я вижу.За исключением того, что я не включил if(result.dismiss === swal.DismissReason.cancel) (я не уверен, что это правильно, кстати, в result нет поля dismiss). 

myjava <- "
shinyjs.swalFromButton = function(params) { 
  var defaultParams = {
    title: null,
    html: null,
    inputOptions: null
  };
  params = shinyjs.getParams(params, defaultParams);
  swal({
    title: params.title, 
    html: params.html, 
    inputOptions: params.inputOptions,
    input: 'select',
    inputPlaceholder: 'Select a batchname',
    showCancelButton: true,
    inputValidator: function(value) {
      return new Promise(function(resolve) {
        if (value !== '') {
          resolve();
        } else {
          resolve('You need to select a batch :)');
        }
      });
    }
  })
  .then(function(result){
    var batchname = params.inputOptions[result.value];
    Shiny.setInputValue('SweetDropChoice', batchname, {priority: 'event'});
  });
};"
0 голосов
/ 11 февраля 2019

@ Stéphane Странно, но теперь у меня работает другая версия ... 

myjava <- "shinyjs.swalFromButton = function(params) { 
    var defaultParams = {
title : null,
html : null,
inputOptions: null
};
params = shinyjs.getParams(params, defaultParams);
swal({title : params.title, html : params.html, inputOptions : params.inputOptions,
input: 'select',
inputPlaceholder: 'Select a batchname',
showCancelButton: true,
inputValidator: function(value) {
return new Promise(function(resolve) {
if (value === '') {
resolve('You need to select a batchname')
} else {
resolve()
}
})
}
})
.then(function(result){
if(result.dismiss === swal.DismissReason.cancel) {
} else {
var batchname = params.inputOptions[result.value];
Shiny.setInputValue('SweetDropChoice', batchname, {priority: 'event'});
}
});
};"
...