Keytips: Keytips

KeytipLayerR Documentation

Keytips

Description

For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Usage

KeytipLayer(...)

Arguments

...

Props to pass to shiny.react::reactElement. See allowed props listed below in Details section

Details

  • componentRef IRefObject<IKeytipLayer>
    Optional callback to access the KeytipLayer component. Use this instead of ref for accessing the public methods and properties of the component.

  • content string
    String to put inside the layer to be used for the aria-describedby for the component with the keytip Should be one of the starting sequences

  • keytipExitSequences IKeytipTransitionKey[]
    List of key sequences that will exit keytips mode

  • keytipReturnSequences IKeytipTransitionKey[]
    List of key sequences that execute the return functionality in keytips (going back to the previous level of keytips)

  • keytipStartSequences IKeytipTransitionKey[]
    List of key sequences that will start keytips mode

  • onEnterKeytipMode () => void
    Callback function triggered when keytip mode is entered

  • onExitKeytipMode (ev?: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void
    Callback function triggered when keytip mode is exited. ev is the Mouse or Keyboard Event that triggered the exit, if any.

  • styles IStyleFunctionOrObject<IKeytipLayerStyleProps, IKeytipLayerStyles>
    (Optional) Call to provide customized styling.

  • calloutProps ICalloutProps
    ICalloutProps to pass to the callout element

  • content string
    Content to put inside the keytip

  • disabled boolean
    T/F if the corresponding control for this keytip is disabled

  • hasDynamicChildren boolean
    Whether or not this keytip will have children keytips that are dynamically created (DOM is generated on keytip activation). Common cases are a Pivot or Modal.

  • hasMenu boolean
    Whether or not this keytip belongs to a component that has a menu Keytip mode will stay on when a menu is opened, even if the items in that menu have no keytips

  • keySequences string[]
    Array of KeySequences which is the full key sequence to trigger this keytip Should not include initial 'start' key sequence

  • offset Point
    Offset x and y for the keytip, added from the top-left corner By default the keytip will be anchored to the bottom-center of the element

  • onExecute (executeTarget: HTMLElement | null, target: HTMLElement | null) => void
    Function to call when this keytip is activated. 'executeTarget' is the DOM element marked with 'data-ktp-execute-target'. 'target' is the DOM element marked with 'data-ktp-target'.

  • onReturn (executeTarget: HTMLElement | null, target: HTMLElement | null) => void
    Function to call when the keytip is the currentKeytip and a return sequence is pressed. 'executeTarget' is the DOM element marked with 'data-ktp-execute-target'. 'target' is the DOM element marked with 'data-ktp-target'.

  • overflowSetSequence string[]
    Full KeySequence of the overflow set button, will be set automatically if this keytip is inside an overflow

  • styles IStyleFunctionOrObject<IKeytipStyleProps, IKeytipStyles>
    Optional styles for the component.

  • theme ITheme
    Theme for the component

  • visible boolean
    T/F if the keytip is visible

Examples

library(shiny.fluent)

if (interactive()) {
  shinyApp(
    ui = tagList(
      tags$script(HTML("
        const btnExecute = (el) => {
          console.log(el);
          el.click();
        };

        const keytipConfig = {
          keytips: [
            // Button example
            {
              id: 'Button',
              content: '1A',
              optionalProps: {
                onExecute: btnExecute,
              },
            },
            {
              id: 'CompoundButton',
              content: '1B',
              optionalProps: {
                onExecute: btnExecute,
              },
            },
            {
              id: 'ButtonWithMenu',
              content: '2A',
              optionalProps: {
                onExecute: btnExecute,
              },
              children: [
                {
                  id: 'ButtonMenuItem1',
                  content: 'E',
                  optionalProps: {
                    onExecute: btnExecute,
                  },
                },
                {
                  id: 'ButtonMenuItem2',
                  content: '8',
                  optionalProps: {
                    onExecute: btnExecute,
                  },
                },
              ],
            }
          ],
        };

        keytipMap = jsmodule['@fluentui/react'].buildKeytipConfigMap(keytipConfig);

        const buttonProps = {
          items: [
            {
              key: 'buttonMenuItem1',
              text: 'Menu Item 1',
              keytipProps: keytipMap.ButtonMenuItem1,
              onClick: () => Shiny.setInputValue('button3', Math.random())
            },
            {
              key: 'buttonMenuItem2',
              text: 'Menu Item 2',
              keytipProps: keytipMap.ButtonMenuItem2,
              onClick: () => Shiny.setInputValue('button3', Math.random())
            },
          ],
        };
      ")),
      textOutput("keytipsResult"),
      div(
        Label(
          paste0(
            "To open keytips, hit 'Alt-Windows' on Windows/Linux and 'Option-Control' on macOS.",
            "Keytips will appear. Type what you see, e.g. 1 and then A to 'click' the first button."
          )
        ),
        Label(
          paste0(
            "When multiple Keytips start with the same character,",
            "typing that character will filter the visible keytips."
          )
        ),
        KeytipLayer(),
        Stack(horizontal = TRUE, tokens = list(childrenGap = 20),
          DefaultButton.shinyInput(
            "button1",
            keytipProps = JS("keytipMap.Button"),
            text = "Button"
          ),
          CompoundButton.shinyInput("button2",
            style = list(marginBottom = 28),
            keytipProps = JS("keytipMap.CompoundButton"),
            text = "Compound Button",
            secondaryText = 'With a Keytip'
          ),
          DefaultButton.shinyInput("button3",
            keytipProps = JS("keytipMap.ButtonWithMenu"),
            text = "Button with Menu",
            menuProps = JS("buttonProps")
          )
        )
      )
    ),
    server = function(input, output) {
      clicks <- reactiveVal(0)
      addClick <- function() clicks(clicks() + 1)
      output$keytipsResult <- renderText(paste("Buttons clicked: ", clicks()))
      observeEvent(input$button1, addClick())
      observeEvent(input$button2, addClick())
      observeEvent(input$button3, addClick())
    }
  )

}

Appsilon/shiny.fluent documentation built on June 12, 2022, 2:41 a.m.