Panel API

About

API to render and manipulate extensions of type Panel.

Signature

1
2
3
4
5
6
7
8
9
type PanelRenderCallback = (container: HTMLElement) => void;

type PanelCleanupCallback = (container: HTMLElement) => void;

interface PanelAPI {
    onMount: (callback: PanelRenderCallback) => this;

    onUnmount: (callback: PanelCleanupCallback) => this;
}

onMount()

Provides a container to render custom content in it.

Callback Parameters

NameTypeDescription
containerHTMLElementHTML element to be used as a container to render custom content.

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { PanelExtension } from '@atlassian/clientside-extensions';

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default PanelExtension.factory(() => {
    function getPanelContent() {
        return `
            <h4>Cool panel</h4>
            <p>This is some cool content generated with JS</p>
        `;
    }

    return {
        label: 'JS Panel',
        onAction: panelApi => {
            panelApi.onMount(container => {
                container.innerHTML = getPanelContent();
            });
        },
    };
});

onUnmount()

Allows to set a cleanup callback to be called when the provided container is about to be deleted.

Callback Parameters

NameTypeDescription
containerHTMLElementHTML element that was provided to render custom content in it. It's important to unmount any React component you've mounted in there to avoid keeping the component alive when the container is destroyed.

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { PanelExtension } from '@atlassian/clientside-extensions';

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default PanelExtension.factory(() => {
    const onClick = () => {
        alert('You clicked a button');
    };

    return {
        label: 'JS Panel',
        onAction: panelApi => {
            let button;

            panelApi
                .onMount(container => {
                    button = document.createElement('button');
                    button.innerText = 'Click me!';
                    button.addEventListener('click', onClick);

                    container.appendChild(button);
                })
                .onUnmount(container => {
                    // use to cleanup any event listener, subscription, or unmount components
                    button.removeEventListener('click', onClick);
                });
        },
    };
});