@microsoft/sp-webpart-base/lib/core/AdaptiveCardExtensionWidthCalculator.d.ts

SharePoint Framework support for building web parts

/**
 * Interface that includes both medium and large card sizes
 * @internal
 */
export interface ICardWidthMap {
    Medium: number;
    Large: number;
}
/**
 * This class is used to shared card responsiveness logic between the AdaptiveCardExtensionWebPart and the canvas.
 * The goal is to maintain a grid layout at different screen / card container sizes that maximizes both card width
 * and how many cards can fit on a row.
 *
 * @internal
 */
export declare class AdaptiveCardExtensionWidthCalculator {
    /**
     * Minimum width for the 'Medium' card size.
     */
    mediumCardMinWidth: number;
    /**
     * Space between the cards, used to calculate large card size from medium card size.
     */
    cardSpacing: number;
    /**
     * Map of the default card widths.
     */
    defaultCardWidthMap: ICardWidthMap;
    private _mediumCardMaxWidth;
    private _mediumCardMinWidthSpacing;
    /**
     * The concept of breakpoints helps keep cards of different sizes on a grid layout
     * as they resize with their container while maximizing both card width
     * and how many cards can fit on a row.
     *
     * @param containerWidth - width of the container that houses the list of cards.
     * @param cardSize - adaptive card extension card size, 'Medium' or 'Large'.
     * @returns the calculated card width.
     */
    getCardWidthFromBreakpoint: (containerWidth: number, cardSize: string | undefined) => number;
    /**
     * Uses the defined card size to determine the card width. Medium cards have set min and max widths
     * while Large card width is calculated based the Medium card size to maintain the grid layout.
     *
     * @param mediumCardWidth - the current width of the Medium card size.
     * @param cardSize - the card size of the current card, Medium or Large.
     * @returns the card width.
     */
    getCardWidthFromSize: (mediumCardWidth: number, cardSize: string | undefined) => number;
    /**
     * This function is specifically used for cards inside dashboard web part.
     *
     * There exists an edge case where dashboard web part cannot fit two minimum width medium cards with margins in a row.
     * For such cases, reduce the size of medium cards to ensure we can fit two medium cards in a row.
     *
     * If we are able to fit two min width medium cards with margins in a row, optimize for grid layout and card size.
     * Refer to getCardWidthFromBreakpoint function above.
     *
     * @param containerWidth - width of the container that houses the list of cards.
     * @returns - ICardSizeWidths - contains both medium and large card widths.
     */
    getDashboardCardWidthsFromContainer: (containerWidth: number) => ICardWidthMap;
    private _getCardBreakpoint;
    private _getMaximizedCardWidth;
}
//# sourceMappingURL=AdaptiveCardExtensionWidthCalculator.d.ts.map