@shopify/app-bridge-core/esm/actions/TitleBar/index.js

**[Join our team and work on libraries like this one.](https://www.shopify.ca/careers)**

import { ActionSetWithChildren } from '../ActionSet.js';
import { clickButton } from '../Button/index.js';
import { ButtonGroup, isGroupedButtonPayload } from '../ButtonGroup/index.js';
import { getGroupedButton } from '../buttonGroupHelper.js';
import { getSingleButton } from '../buttonHelper.js';
import { actionWrapper, getMergedProps, updateActionFromPayload } from '../helper.js';
import { Group, ComponentType } from '../types.js';

var Action;
(function (Action) {
    Action["UPDATE"] = "APP::TITLEBAR::UPDATE";
    Action["BUTTON_CLICK"] = "APP::TITLEBAR::BUTTONS::BUTTON::CLICK";
    Action["BUTTON_UPDATE"] = "APP::TITLEBAR::BUTTONS::BUTTON::UPDATE";
    Action["BUTTON_GROUP_UPDATE"] = "APP::TITLEBAR::BUTTONS::BUTTONGROUP::UPDATE";
    Action["BREADCRUMBS_CLICK"] = "APP::TITLEBAR::BREADCRUMBS::BUTTON::CLICK";
    Action["BREADCRUMBS_UPDATE"] = "APP::TITLEBAR::BREADCRUMBS::BUTTON::UPDATE";
})(Action || (Action = {}));
const TITLEBAR_BUTTON_PROPS = {
    group: Group.TitleBar,
    subgroups: ['Buttons'],
};
const BREADCRUMB_BUTTON_PROPS = {
    group: Group.TitleBar,
    subgroups: ['Breadcrumbs'],
    type: ComponentType.Button,
};
function clickActionButton(id, payload) {
    const type = ComponentType.Button;
    const component = { id, type, ...TITLEBAR_BUTTON_PROPS };
    return clickButton(Group.TitleBar, component, payload);
}
function clickBreadcrumb(id, payload) {
    const component = { id, ...BREADCRUMB_BUTTON_PROPS };
    return clickButton(Group.TitleBar, component, payload);
}
function update(payload) {
    return actionWrapper({
        payload,
        group: Group.TitleBar,
        type: Action.UPDATE,
    });
}
class TitleBar extends ActionSetWithChildren {
    title;
    primary;
    secondary;
    primaryOptions;
    secondaryOptions;
    breadcrumb;
    breadcrumbsOption;
    constructor(app, options) {
        super(app, Group.TitleBar, Group.TitleBar);
        if (!options.title && !options.breadcrumbs && !options.buttons) {
            return;
        }
        // Trigger 'update' on creation
        this.set(options);
    }
    get buttons() {
        if (!this.primary && !this.secondary) {
            return undefined;
        }
        return {
            primary: this.primary,
            secondary: this.secondary,
        };
    }
    get buttonsOptions() {
        if (!this.primaryOptions && !this.secondaryOptions) {
            return undefined;
        }
        return {
            primary: this.primaryOptions,
            secondary: this.secondaryOptions,
        };
    }
    get options() {
        return {
            breadcrumbs: this.breadcrumbsOption,
            buttons: this.buttonsOptions,
            title: this.title,
        };
    }
    get payload() {
        return {
            ...this.options,
            breadcrumbs: this.breadcrumb,
            buttons: this.buttons,
            id: this.id,
        };
    }
    set(options, shouldUpdate = true) {
        const mergedOptions = getMergedProps(this.options, options);
        const { title, buttons, breadcrumbs } = mergedOptions;
        this.title = title;
        this.setBreadcrumbs(breadcrumbs);
        this.setPrimaryButton(buttons ? buttons.primary : undefined);
        this.setSecondaryButton(buttons ? buttons.secondary : undefined);
        if (shouldUpdate) {
            this.dispatch(Action.UPDATE);
        }
        return this;
    }
    dispatch(action) {
        switch (action) {
            case Action.UPDATE:
                this.app.dispatch(update(this.payload));
                break;
        }
        return this;
    }
    getButton(button, subgroups, updateCb) {
        if (button instanceof ButtonGroup) {
            return getGroupedButton(this, button, subgroups, updateCb);
        }
        return getSingleButton(this, button, subgroups, updateCb);
    }
    updatePrimaryButton(newPayload) {
        if (!this.primary) {
            return;
        }
        if (updateActionFromPayload(this.primary, newPayload)) {
            this.dispatch(Action.UPDATE);
        }
    }
    updateSecondaryButtons(newPayload) {
        if (!this.secondary) {
            return;
        }
        const buttonToUpdate = this.secondary.find((action) => action.id === newPayload.id);
        if (!buttonToUpdate) {
            return;
        }
        let updated = false;
        if (isGroupedButtonPayload(newPayload)) {
            updated = updateActionFromPayload(buttonToUpdate, newPayload);
        }
        else {
            updated = updateActionFromPayload(buttonToUpdate, newPayload);
        }
        if (updated) {
            this.dispatch(Action.UPDATE);
        }
    }
    updateBreadcrumbButton(newPayload) {
        if (!this.breadcrumb) {
            return;
        }
        if (updateActionFromPayload(this.breadcrumb, newPayload)) {
            this.dispatch(Action.UPDATE);
        }
    }
    setPrimaryButton(newOptions) {
        this.primaryOptions = this.getChildButton(newOptions, this.primaryOptions);
        this.primary = this.primaryOptions
            ? this.getButton(this.primaryOptions, TITLEBAR_BUTTON_PROPS.subgroups, this.updatePrimaryButton)
            : undefined;
    }
    setSecondaryButton(newOptions) {
        const newButtons = newOptions || [];
        const currentButtons = this.secondaryOptions || [];
        this.secondaryOptions = this.getUpdatedChildActions(newButtons, currentButtons);
        this.secondary = this.secondaryOptions
            ? this.secondaryOptions.map((action) => this.getButton(action, TITLEBAR_BUTTON_PROPS.subgroups, this.updateSecondaryButtons))
            : undefined;
    }
    setBreadcrumbs(breadcrumb) {
        this.breadcrumbsOption = this.getChildButton(breadcrumb, this.breadcrumbsOption);
        this.breadcrumb = this.breadcrumbsOption
            ? this.getButton(this.breadcrumbsOption, BREADCRUMB_BUTTON_PROPS.subgroups, this.updateBreadcrumbButton)
            : undefined;
    }
    getChildButton(newAction, currentAction) {
        const newButtons = newAction ? [newAction] : [];
        const currentButtons = currentAction ? [currentAction] : [];
        const updatedButton = this.getUpdatedChildActions(newButtons, currentButtons);
        return updatedButton ? updatedButton[0] : undefined;
    }
}

export { Action, TitleBar, clickActionButton, clickBreadcrumb, update };