Layout Manager

Associates React components with layouts.

You can access a global instance of this class via inkdrop.layouts.

Registering and unregistering a React component

You can register your React component classes to the component registry. Then, the registered components can be added to layouts. Below example registers MyDialog class to the component registry and adds it to modal layout so that you can show it as a modal view.

module.exports = {
  activate() {
    inkdrop.components.registerClass(MyDialog)
    inkdrop.layouts.addComponentToLayout('modal', 'MyDialog')
  },

  deactivate() {
    inkdrop.layouts.removeComponentFromLayout('modal', 'MyDialog')
    inkdrop.components.deleteClass(MyDialog)
  }
}

This is described in detail in the Word Count plugin walkthrough.

Available layouts can be found here.

onLayoutChange(name, callback)

Event Subscription

Invokes the given callback when the layout with given name is changed.

Parameters

Name
layoutName
Type
string
Required
Description
A layout name.
Name
callback
Type
(components: Array<string>) => void
Required
Description
A function which is called with an array of React component class names

Returns

Returns a Disposable on which .dispose() can be called to unsubscribe.

Example

inkdrop.layouts.onLayoutChange(
  'modal',
  (components) => console.log(components)
);

addComponentToLayout(layoutName, componentClassName)

Add a component to a layout

Adds a component to specified layout.

Parameters

Name
layoutName
Type
string
Required
Description
A layout name.
Name
componentClassName
Type
string
Required
Description
A React component class name which is registered in the component registry

Example

inkdrop.layouts.addComponentToLayout('modal', 'MyDialog')

insertComponentToLayoutBefore(layoutName, referenceComponentClassName, componentClassNameToInsert)

Add a component to a layout before another

Inserts a component before the reference component to specified layout.

Parameters

Name
layoutName
Type
string
Required
Description
A layout name.
Name
referenceComponentClassName
Type
string
Required
Description
A React component class name before which componentClassName is inserted.
Name
componentClassNameToInsert
Type
string
Required
Description
A React component class name which is registered in the component registry.

Example

inkdrop.layouts.insertComponentToLayoutBefore(
  'modal',
  'MySecondDialog', 'MyDialog'
)

insertComponentToLayoutAfter(layoutName, referenceComponentClassName, componentClassNameToInsert)

Add a component to a layout after another

Inserts a component after the reference component to specified layout.

Parameters

Name
layoutName
Type
string
Required
Description
A layout name.
Name
referenceComponentClassName
Type
string
Required
Description
A React component class name after which componentClassName is inserted.
Name
componentClassNameToInsert
Type
string
Required
Description
A React component class name which is registered in the component registry.

Example

inkdrop.layouts.insertComponentToLayoutAfter(
  'modal',
  'MyDialog',
  'MySecondDialog'
)

getLayout(name)

Get components names from layout

Returns a set of components of the specified layout.

Parameters

Name
name
Type
string
Required
Description
A name of the layout to get.

Return values

An array of React component class names.

Example

inkdrop.layouts.getLayout('modal')

getLayoutComponents(name)

Get components from layout

Returns a set of React component classes of the specified layout.

Parameters

Name
name
Type
string
Required
Description
A name of the layout to get.

Return values

An array of React component classes.

Example

inkdrop.layouts.getLayoutComponents('modal')

indexOfComponentInLayout(layoutName, componentClassName)

Get index of component in layout

Returns the first index at which a given component can be found in the specified layout, or -1 if cannot found.

Parameters

Name
layoutName
Type
string
Required
Description
A layout name.
Name
componentClassName
Type
string
Required
Description
A React component class name to search.

Return values

Index of the component in the layout

Example

inkdrop.layouts.indexOfComponentInLayout('modal', 'MyDialog')

removeComponentFromLayout(layoutName, componentClassName)

Remove a component from a layout

Removes a component from specified layout.

Parameters

Name
layoutName
Type
string
Required
Description
A layout name.
Name
componentClassName
Type
string
Required
Description
A React complonent class name which is registered in the component registry.

Example

inkdrop.layouts.removeComponentFromLayout('modal', 'MyDialog')

setLayout(name, components)

Overwrite the components of a layout

Sets a set of components to the specified layout

Parameters

Name
name
Type
string
Required
Description
A layout name.
Name
components
Type
Array<string>
Required
Description
An array of component class names.

Example

inkdrop.layouts.setLayout('modal', ['MyDialog'])