Ui

User interface manipulation and handling

showNotification(name, title, message, sticky)

Show a notification

Parameters

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

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

Parameters

Param	Type	Description
contentComponent	*	Required - A substance component or tool that will be rendered inside the dialog
props	Object	Required - A object that will be passed as props to contentComponent
options	Component.DialogComponent.Options	Required - 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
  }
)

showAuthDialog(authComponent, authProps, authOptions)

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

Parameters

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

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.

Parameters

Param	Type	Description
messages	array	Required - 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	Required - Callback function for when the user press continue
cbCancel	function	Required - 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')
    }
)

showConfirmDialog(title, message, buttons)

Display a simple confirmation dialog

Parameters

Param	Type	Description
title	string	Required - dialog heading
message	string	Required - dialog message
buttons	object	Required - 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 }
         }
     }
)

showBottomPanel(pluginName, component, [props], [sticky])

Renders a supplied component in a screen-wide panel which smoothly animates from the bottom of the screen.

Parameters

Param	Type	Default	Description
pluginName	string		Required - Name of plugin that called the function
component	string		Required - Component class to be rendered in the Panel
props	object		Object which is sent as props to the component class. Defaults to empty object.
sticky	boolean	false	Set to true to prevent Panel from closing when clicking outside of the Panel. Defaults to false.

Example

api.ui.showBottomPanel(
    'im-mycoolplugin',
    MyCoolComponent,
    {
        propName: 'propvalue
    },
    true
)

showOverlay(pluginName, component, [props])

Renders a supplied component in a "fullscreen" overlay.

Parameters

Param	Type	Description
pluginName	string	Required - Name of plugin that called the function
component	string	Required - Component class to be rendered in the Overlay
props	object	Object which is sent as props to the component class. Defaults to empty object.

Example

api.ui.showOverlay(
    'im-mycoolplugin',
    MyCoolComponent,
    {
        propName: 'propvalue
    }
)

hideOverlay(pluginName)

Hides the overlay. Useful to call this in a component that rendered as and overlay component.

Parameters

Param	Type	Description
pluginName	string	Required - Name of plugin that called the function

Example

api.ui.hideOverlay('im-mycoolplugin')

~~getComponent() ~~

Deprecated

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