api.ui

User interface manipulation and handling

ui.showNotification(name, title, message, sticky)

Show a notification

Param Type Description
name string The plugin ID of the plugin that sent the notification
title string Notification title
message string Notification message
sticky boolean Optional, default false, if true notification stays till user closes it

ui.showDialog(contentComponent, props, options)

Display a dialog with the specified content.

Supported dialog actions:

`dialog:enablePrimaryBtn`
Enables the primary button
`dialog:disablePrimaryBtn`
Disables the primary button

See: Component.DialogComponent

Param Type Description
contentComponent * A substance component or tool that will be rendered inside the dialog
props Object A object that will be passed as props to contentComponent
options Component.DialogComponent.Options Options passed to dialog
[options.title] string Dialog title
[options.primary] string | boolean Primary button caption, default is i18n representation of Ok, set to false to disable button
[options.secondary] string | boolean Secondary button caption, default is i18n representation of Cancel, set to false to disable button
[options.tertiary] string | Object Third button
[options.center] boolean As default the dialog is centered over the editor area, set to true to center over the full writer

Example

import {api} from 'writer'

const tertiary = [{
     caption: this.context.i18n.t('Remove'),
     callback: () => {
         // Do something
     }
}]

api.ui.showDialog(
  require('./XimimageSoftcropComponent'),
  {
      src: img.src,
      width: this.props.node.width,
      height: this.props.node.height,
      crops: this.props.node.crops,
      callback: this.setSoftcropData.bind(this)
  },
  {
      tertiary: tertiary
  }
)

ui.showAuthDialog(contentComponent, props, options)

Display a Auth dialog (401/402) above any other dialogs.

Param Type Description
contentComponent * A substance component or tool that will be rendered inside the dialog
props Object A object that will be passed as props to contentComponent
options Component.DialogComponent.Options Options passed to dialog
[options.title] string Dialog title
[options.primary] string | boolean Primary button caption, default is i18n representation of Ok, set to false to disable button
[options.secondary] string | boolean Secondary button caption, default is i18n representation of Cancel, set to false to disable button
[options.tertiary] string | Object Third button
[options.center] boolean As default the dialog is centered over the editor area, set to true to center over the full writer

ui.showMessageDialog(messages, cbContinue, cbCancel, [heading])

Display a number of messages and different options depending on the severity on each message. Messages can be of type info, warning or error.

If there are error messages the user will not be able to continue. If there are warnings the user can continue but suggested to cancel. If only info messages only a continue is possible.

Param Type Description
messages array An array of message objects. Each object have the properties type (string: info, warning, error), plugin (string: the plugin name) and message (string)
cbContinue function Callback function for when the user press continue
cbCancel function Callback function for when the user press cancel
[heading] string Additional text to display above the messages

Example

import {api} from 'writer'

api.ui.showMessageDialog(
    [{
        type: 'info',
        message: 'Hello'
    }],
    () => {
        console.log('The user clicked continue!')
    },
    () => {
        console.warn('The user clicked cancel')
    }
)

ui.showConfirmDialog(title, message, buttons)

Display a simple confirmation dialog

Param Type Description
title string dialog heading
message string dialog message
buttons object object with primary/secondary objects for button specifics

Example

api.ui.showConfirmDialog(
     'Title-string',
     'Message string',
     {
         primary: {
             label: this.getLabel('Ok'),
             callback: () => { logic }
         },
         secondary: {
             label: this.getLabel('Cancel'),
             callback: () => { logic }
         }
     }
)

ui.getComponent()

Deprecated

Deprecated, use import {UIComponent} from 'writer' statements for UIComponents instead

results matching ""

    No results matching ""