@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
82 lines • 3.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Placeholder = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PlaceholderComponent_module_scss_1 = tslib_1.__importDefault(require("./PlaceholderComponent.module.scss"));
const react_1 = require("@fluentui/react");
/**
* Placeholder component
*/
class Placeholder extends React.Component {
/**
* Constructor
*/
constructor(props) {
super(props);
this._crntElm = null;
/**
* Execute the onConfigure function
*/
this._handleBtnClick = (event) => {
this.props.onConfigure();
};
/**
* Set the current zone width
*/
this._setZoneWidth = () => {
this.setState({
width: this._crntElm.clientWidth
});
};
/**
* Stores the current element
*/
this._linkElm = (e) => {
this._crntElm = e;
};
this.state = {
width: null
};
}
/**
* componentDidMount lifecycle hook
*/
componentDidMount() {
this._setZoneWidth();
}
/**
* componentDidUpdate lifecycle hook
* @param prevProps
* @param prevState
*/
componentDidUpdate(prevProps, prevState) {
this._setZoneWidth();
}
/**
* shouldComponentUpdate lifecycle hook
* @param nextProps
* @param nextState
*/
shouldComponentUpdate(nextProps, nextState) {
return this.state.width !== nextState.width || this.props.hideButton !== nextProps.hideButton;
}
/**
* Default React component render method
*/
render() {
return (React.createElement("div", { className: `${PlaceholderComponent_module_scss_1.default.placeholder} ${this.props.contentClassName ? this.props.contentClassName : ''}`, ref: this._linkElm },
React.createElement("div", { className: PlaceholderComponent_module_scss_1.default.placeholderContainer },
React.createElement("div", { className: PlaceholderComponent_module_scss_1.default.placeholderHead },
React.createElement("div", { className: PlaceholderComponent_module_scss_1.default.placeholderHeadContainer },
this.props.iconName && React.createElement(react_1.Icon, { iconName: this.props.iconName, className: PlaceholderComponent_module_scss_1.default.placeholderIcon }),
React.createElement("span", { className: `${PlaceholderComponent_module_scss_1.default.placeholderText} ${(this.state.width && this.state.width <= 380) ? PlaceholderComponent_module_scss_1.default.hide : ""}` }, this.props.iconText))),
React.createElement("div", { className: PlaceholderComponent_module_scss_1.default.placeholderDescription },
React.createElement("span", { className: PlaceholderComponent_module_scss_1.default.placeholderDescriptionText }, this.props.description)),
this.props.children,
React.createElement("div", { className: PlaceholderComponent_module_scss_1.default.placeholderDescription }, (this.props.buttonLabel && !this.props.hideButton) &&
React.createElement(react_1.PrimaryButton, { text: this.props.buttonLabel, ariaLabel: this.props.buttonLabel, ariaDescription: this.props.description, onClick: this._handleBtnClick })))));
}
}
exports.Placeholder = Placeholder;
//# sourceMappingURL=PlaceholderComponent.js.map