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

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

import { actionWrapper, getMergedProps } from '../helper.js';
import { ActionSet } from '../ActionSet.js';
import { Group } from '../types.js';

var Action;
(function (Action) {
    Action["OPEN"] = "APP::PICKER::OPEN";
    Action["SELECT"] = "APP::PICKER::SELECT";
    Action["UPDATE"] = "APP::PICKER::UPDATE";
    Action["CANCEL"] = "APP::PICKER::CANCEL";
    Action["SEARCH"] = "APP::PICKER::SEARCH";
    Action["LOAD_MORE"] = "APP::PICKER::LOAD_MORE";
})(Action || (Action = {}));
/**
 * To be used on validator as matchEnum(...). Make sure as new values are added to update
 * the items below
 *
 * Note: Intentionally not using an `enum type` directly as this would cause a dependency
 * of the same enum on the consumer API rather than just the string values.
 */
const ALL_BADGE_PROGRESSES = [
    'incomplete',
    'partiallyComplete',
    'complete',
];
const ALL_BADGE_STATUSES = [
    'success',
    'info',
    'attention',
    'critical',
    'warning',
    'new',
];
const ALL_MEDIA_KINDS = ['Avatar', 'Thumbnail'];
const ALL_RESOURCE_VERTICAL_ALIGNMENT = [
    'leading',
    'trailing',
    'center',
];
function select(payload) {
    return actionWrapper({
        payload,
        group: Group.unstable_Picker,
        type: Action.SELECT,
    });
}
function open(payload) {
    return actionWrapper({
        payload,
        group: Group.unstable_Picker,
        type: Action.OPEN,
    });
}
function cancel(payload) {
    return actionWrapper({
        payload,
        group: Group.unstable_Picker,
        type: Action.CANCEL,
    });
}
function update(payload) {
    return actionWrapper({
        payload,
        group: Group.unstable_Picker,
        type: Action.UPDATE,
    });
}
function search(payload) {
    return actionWrapper({
        payload,
        group: Group.unstable_Picker,
        type: Action.SEARCH,
    });
}
function loadMore(payload) {
    return actionWrapper({
        payload,
        group: Group.unstable_Picker,
        type: Action.LOAD_MORE,
    });
}
/**
 * @unstable This API may be updated without warning in the future
 */
class unstable_Picker extends ActionSet {
    items = [];
    maxSelectable;
    selectedItems = [];
    title;
    loading;
    searchQuery;
    searchQueryPlaceholder;
    primaryActionLabel;
    secondaryActionLabel;
    emptySearchLabel;
    canLoadMore;
    loadingMore;
    verticalAlignment;
    allowEmptySelection;
    resourceName;
    constructor(app, options) {
        super(app, Group.unstable_Picker, Group.unstable_Picker);
        this.set(options, false);
    }
    get payload() {
        return {
            ...this.options,
            id: this.id,
        };
    }
    get options() {
        return {
            items: this.items,
            maxSelectable: this.maxSelectable,
            selectedItems: this.selectedItems,
            title: this.title,
            loading: this.loading,
            searchQuery: this.searchQuery,
            searchQueryPlaceholder: this.searchQueryPlaceholder,
            primaryActionLabel: this.primaryActionLabel,
            secondaryActionLabel: this.secondaryActionLabel,
            emptySearchLabel: this.emptySearchLabel,
            canLoadMore: this.canLoadMore,
            loadingMore: this.loadingMore,
            verticalAlignment: this.verticalAlignment,
            allowEmptySelection: this.allowEmptySelection,
            resourceName: this.resourceName,
        };
    }
    set(options, shouldUpdate = true) {
        const mergedOptions = getMergedProps(this.options, options);
        const { selectedItems = [], maxSelectable = 0, items = [], loading = false, title, searchQuery, searchQueryPlaceholder, primaryActionLabel, secondaryActionLabel, emptySearchLabel, canLoadMore = false, loadingMore = false, verticalAlignment, allowEmptySelection, resourceName, } = mergedOptions;
        this.title = title;
        this.items = items;
        this.selectedItems = selectedItems;
        this.maxSelectable = maxSelectable;
        this.loading = loading;
        this.searchQuery = searchQuery;
        this.searchQueryPlaceholder = searchQueryPlaceholder;
        this.primaryActionLabel = primaryActionLabel;
        this.secondaryActionLabel = secondaryActionLabel;
        this.emptySearchLabel = emptySearchLabel;
        this.canLoadMore = canLoadMore;
        this.loadingMore = loadingMore;
        this.verticalAlignment = verticalAlignment;
        this.allowEmptySelection = allowEmptySelection;
        this.resourceName = resourceName;
        if (shouldUpdate) {
            this.update();
        }
        return this;
    }
    dispatch(action, payload) {
        if (action === Action.OPEN) {
            this.open();
        }
        else if (action === Action.UPDATE) {
            this.update();
        }
        else if (action === Action.CANCEL) {
            this.cancel();
        }
        else if (action === Action.SELECT) {
            this.selectedItems = payload?.selectedItems || [];
            this.app.dispatch(select({ id: this.id, selectedItems: this.selectedItems }));
        }
        else if (action === Action.SEARCH) {
            this.searchQuery = payload?.searchQuery || '';
            this.app.dispatch(search({ id: this.id, searchQuery: this.searchQuery }));
        }
        else if (action === Action.LOAD_MORE) {
            this.loadMore();
        }
        return this;
    }
    update() {
        this.app.dispatch(update(this.payload));
    }
    open() {
        this.app.dispatch(open(this.payload));
    }
    cancel() {
        this.app.dispatch(cancel({ id: this.id }));
    }
    loadMore() {
        this.app.dispatch(loadMore(this.payload));
    }
}

export { ALL_BADGE_PROGRESSES, ALL_BADGE_STATUSES, ALL_MEDIA_KINDS, ALL_RESOURCE_VERTICAL_ALIGNMENT, Action, cancel, loadMore, open, search, select, unstable_Picker, update };