@microsoft/sp-webpart-base/lib/core/AdaptiveCardExtensionWidthCalculator.js

SharePoint Framework support for building web parts

import { isDashboardWebPartMediumCardBreakPointKSActivated, isDashboardWebPartVerticalLayoutCardWidthFix } from '../common/KillSwitches';
/**
 * 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
 */
var AdaptiveCardExtensionWidthCalculator = /** @class */ (function () {
    function AdaptiveCardExtensionWidthCalculator() {
        var _this = this;
        /**
         * Minimum width for the 'Medium' card size.
         */
        this.mediumCardMinWidth = 164;
        /**
         * Space between the cards, used to calculate large card size from medium card size.
         */
        this.cardSpacing = 16;
        /**
         * Map of the default card widths.
         */
        this.defaultCardWidthMap = {
            Medium: this.mediumCardMinWidth,
            Large: this.mediumCardMinWidth * 2 + this.cardSpacing
        };
        this._mediumCardMaxWidth = 204;
        this._mediumCardMinWidthSpacing = this.mediumCardMinWidth + this.cardSpacing;
        /**
         * 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.
         */
        this.getCardWidthFromBreakpoint = function (containerWidth, cardSize) {
            var minCardWidth = _this.getCardWidthFromSize(_this.mediumCardMinWidth, cardSize);
            var availableCardWidth;
            if (containerWidth >= _this._getCardBreakpoint(6)) {
                return _this._getMaximizedCardWidth(Math.floor(containerWidth / 6 - _this.cardSpacing), cardSize);
            }
            if (containerWidth >= _this._getCardBreakpoint(5)) {
                availableCardWidth = Math.floor(containerWidth / 5 - _this.cardSpacing);
                return _this._getMaximizedCardWidth(availableCardWidth, cardSize);
            }
            if (containerWidth >= _this._getCardBreakpoint(4)) {
                availableCardWidth = Math.floor(containerWidth / 4 - _this.cardSpacing);
                return _this._getMaximizedCardWidth(availableCardWidth, cardSize);
            }
            if (containerWidth >= _this._getCardBreakpoint(3)) {
                availableCardWidth = Math.floor(containerWidth / 3 - _this.cardSpacing);
                return _this._getMaximizedCardWidth(availableCardWidth, cardSize);
            }
            if (containerWidth >= _this._getCardBreakpoint(2)) {
                availableCardWidth = Math.floor(containerWidth / 2 - _this.cardSpacing);
                return _this._getMaximizedCardWidth(availableCardWidth, cardSize);
            }
            return minCardWidth;
        };
        /**
         * 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.
         */
        this.getCardWidthFromSize = function (mediumCardWidth, cardSize) {
            return cardSize === 'Large' ? mediumCardWidth * 2 + _this.cardSpacing : mediumCardWidth;
        };
        /**
         * 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.
         */
        this.getDashboardCardWidthsFromContainer = function (containerWidth) {
            var requiredMinWidth = !isDashboardWebPartMediumCardBreakPointKSActivated()
                ? _this._getCardBreakpoint(2)
                : _this.mediumCardMinWidth * 2 + _this.cardSpacing;
            // check if we cannot fit two minimum width medium cards with margins.
            if (containerWidth < requiredMinWidth) {
                var newMinMediumCardWidth = !isDashboardWebPartVerticalLayoutCardWidthFix()
                    ? Math.floor(containerWidth / 2) - _this.cardSpacing
                    : Math.floor(containerWidth / 2 - _this.cardSpacing / 2);
                return {
                    Medium: newMinMediumCardWidth,
                    Large: _this.getCardWidthFromSize(newMinMediumCardWidth, 'Large')
                };
            }
            var mediumCardWidth = _this.getCardWidthFromBreakpoint(containerWidth, 'Medium');
            return {
                Medium: mediumCardWidth,
                Large: _this.getCardWidthFromSize(mediumCardWidth, 'Large')
            };
        };
        this._getCardBreakpoint = function (cardCount) {
            return _this._mediumCardMinWidthSpacing * cardCount;
        };
    }
    AdaptiveCardExtensionWidthCalculator.prototype._getMaximizedCardWidth = function (availableCardSpace, cardSize) {
        var maximizedMediumCardWidth = Math.min(Math.max(availableCardSpace, this.mediumCardMinWidth), this._mediumCardMaxWidth);
        return this.getCardWidthFromSize(maximizedMediumCardWidth, cardSize);
    };
    return AdaptiveCardExtensionWidthCalculator;
}());
export { AdaptiveCardExtensionWidthCalculator };
//# sourceMappingURL=AdaptiveCardExtensionWidthCalculator.js.map