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

SharePoint Framework support for building web parts

import strings from './loc/Strings.resx';
import styles from './styles/cswp-base.module.scss';
import ErrorMessage from './ErrorMessage';
/**
 * The error friendly component used for rendering webpart errors.
 */
var FriendlyErrorMessage = /** @class */ (function () {
    function FriendlyErrorMessage(props) {
        this._toggleExpandedDetails = this._toggleExpandedDetails.bind(this);
        this._errorMessage = new ErrorMessage(props).render();
        this._errorMessage.style.display = 'none';
    }
    FriendlyErrorMessage.prototype.render = function () {
        // Create container element and append children components
        var container = document.createElement('div');
        container.className = styles.errorBox;
        // Header text
        var headerContainer = document.createElement('div');
        var header = document.createElement('h2');
        header.className = styles.somethingWentWrongText;
        header.innerText = strings.WebpartErrorSomethingWentWrong;
        headerContainer.appendChild(header);
        container.appendChild(header);
        // Supporting text
        var siteAdminText = document.createElement('span');
        siteAdminText.className = styles.siteAdminText;
        siteAdminText.innerText = strings.WebpartErrorSiteAdminAdvice;
        container.appendChild(siteAdminText);
        // Button to reveal more details
        var buttonContainer = document.createElement('div');
        var techDetailsButton = document.createElement('button');
        techDetailsButton.className = styles.detailsButton;
        techDetailsButton.innerText = strings.WebpartErrorTechnicalDetails;
        techDetailsButton.onclick = this._toggleExpandedDetails;
        buttonContainer.appendChild(techDetailsButton);
        container.appendChild(buttonContainer);
        // Detailed information that is initially hiddren. Display is toggled with button above.
        container.appendChild(this._errorMessage);
        return container;
    };
    FriendlyErrorMessage.prototype._toggleExpandedDetails = function () {
        if (this._errorMessage.style.display === 'none') {
            this._errorMessage.style.display = '';
        }
        else {
            this._errorMessage.style.display = 'none';
        }
    };
    return FriendlyErrorMessage;
}());
export default FriendlyErrorMessage;
//# sourceMappingURL=FriendlyErrorMessage.js.map