@pnp/spfx-controls-react/lib-commonjs/controls/placeholder/PlaceholderComponent.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Placeholder = void 0;
var tslib_1 = require("tslib");
var ThemeContext_1 = require("@fluentui/react-theme-provider/lib/ThemeContext");
var Button_1 = require("@fluentui/react/lib/Button");
var Icon_1 = require("@fluentui/react/lib/Icon");
var React = tslib_1.__importStar(require("react"));
var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
var ThemeUtility_1 = require("../../common/utilities/ThemeUtility");
var PlaceholderComponent_styles_1 = require("./PlaceholderComponent.styles");
/**
 * Placeholder component
 */
var Placeholder = /** @class */ (function (_super) {
    tslib_1.__extends(Placeholder, _super);
    /**
     * Constructor
     */
    function Placeholder(props) {
        var _this = _super.call(this, props) || this;
        _this._crntElm = null;
        /**
         * Execute the onConfigure function
         */
        _this._handleBtnClick = function (event) {
            _this.props.onConfigure();
        };
        /**
         * Set the current zone width
         */
        _this._setZoneWidth = function () {
            _this.setState({
                width: _this._crntElm.clientWidth
            });
        };
        /**
         * Stores the current element
         */
        _this._linkElm = function (e) {
            _this._crntElm = e;
        };
        _this.state = {
            width: null
        };
        telemetry.track('ReactPlaceholder', {
            description: !!props.description,
            iconName: !!props.iconName,
            iconText: !!props.iconText,
            buttonLabel: !!props.buttonLabel,
            onConfigure: !!props.onConfigure,
            contentClassName: !!props.contentClassName
        });
        return _this;
    }
    /**
     * componentDidMount lifecycle hook
     */
    Placeholder.prototype.componentDidMount = function () {
        this._setZoneWidth();
    };
    /**
     * componentDidUpdate lifecycle hook
     * @param prevProps
     * @param prevState
     */
    Placeholder.prototype.componentDidUpdate = function (prevProps, prevState) {
        this._setZoneWidth();
    };
    /**
     * shouldComponentUpdate lifecycle hook
     * @param nextProps
     * @param nextState
     */
    Placeholder.prototype.shouldComponentUpdate = function (nextProps, nextState) {
        /*
        * compare the props object for changes in primative values
        * Return/re-render, bexeting the function, if the props change
        */
        for (var property in nextProps) {
            if (property !== '_onConfigure') {
                if (nextProps[property] !== this.props[property]) {
                    return true;
                }
            }
        }
        return this.state.width !== nextState.width || this.props.hideButton !== nextProps.hideButton;
    };
    /**
     * Default React component render method
     */
    Placeholder.prototype.render = function () {
        var _this = this;
        var _a = this.props, iconName = _a.iconName, iconText = _a.iconText, description = _a.description, children = _a.children, buttonLabel = _a.buttonLabel, hideButton = _a.hideButton, theme = _a.theme;
        return (React.createElement(ThemeContext_1.ThemeContext.Consumer, null, function (contextTheme) {
            var themeToApply = (0, ThemeUtility_1.getFluentUIThemeOrDefault)((theme) ? theme : contextTheme);
            var styles = (0, PlaceholderComponent_styles_1.getClassNames)(themeToApply);
            var iconTextClassNames = "".concat(styles.placeholderText, " ").concat((_this.state.width && _this.state.width <= 380) ? styles.hide : "");
            var iconTextEl = typeof iconText === 'function' ? iconText(iconTextClassNames) : React.createElement("span", { className: iconTextClassNames }, _this.props.iconText);
            var descriptionEl = typeof description === 'function' ? description(styles.placeholderDescriptionText) : React.createElement("span", { className: styles.placeholderDescriptionText }, _this.props.description);
            return (React.createElement("div", { className: "".concat(styles.placeholder, " ").concat(_this.props.contentClassName ? _this.props.contentClassName : ''), ref: _this._linkElm },
                React.createElement("div", { className: styles.placeholderContainer },
                    React.createElement("div", { className: styles.placeholderHead },
                        React.createElement("div", { className: styles.placeholderHeadContainer },
                            iconName && React.createElement(Icon_1.Icon, { iconName: iconName, className: styles.placeholderIcon }),
                            iconTextEl)),
                    React.createElement("div", { className: styles.placeholderDescription }, descriptionEl),
                    children,
                    React.createElement("div", { className: styles.placeholderDescription }, (buttonLabel && !hideButton) &&
                        React.createElement(Button_1.PrimaryButton, { text: buttonLabel, ariaLabel: buttonLabel, ariaDescription: typeof description === 'string' ? description : '', onClick: _this._handleBtnClick, theme: themeToApply })))));
        }));
    };
    return Placeholder;
}(React.Component));
exports.Placeholder = Placeholder;
//# sourceMappingURL=PlaceholderComponent.js.map