@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
76 lines • 3.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@fluentui/react");
const Callout_1 = require("../callout/Callout");
const PlaceholderWithCallout_module_scss_1 = tslib_1.__importDefault(require("./PlaceholderWithCallout.module.scss"));
/**
* PlaceholderWithCallout component.
* Displays a label and a callout
*/
class PlaceholderWithCallout extends React.Component {
constructor(props, state) {
super(props, state);
this._onCalloutDismiss = this._onCalloutDismiss.bind(this);
this.state = {
isCalloutVisible: false,
};
}
render() {
return (React.createElement("div", { className: PlaceholderWithCallout_module_scss_1.default.placeholder },
React.createElement("div", { className: PlaceholderWithCallout_module_scss_1.default.children }, this.props.children),
React.createElement("div", { className: PlaceholderWithCallout_module_scss_1.default.info },
React.createElement("i", { className: (0, react_1.getIconClassName)('Info'), ref: (infoIcon) => {
this._infoIcon = infoIcon;
}, onMouseOver: this.props.calloutTrigger === Callout_1.CalloutTriggers.Hover
? this._onInfoIconMouseOver.bind(this)
: null, onMouseOut: this.props.calloutTrigger === Callout_1.CalloutTriggers.Hover
? this._onInfoIconMouseOut.bind(this)
: null, onClick: this.props.calloutTrigger === Callout_1.CalloutTriggers.Click
? this._onInfoIconClick.bind(this)
: null })),
this.state.isCalloutVisible && (React.createElement(react_1.Callout, { className: PlaceholderWithCallout_module_scss_1.default.callout, target: this._infoIcon, isBeakVisible: true, directionalHint: react_1.DirectionalHint.leftCenter, directionalHintForRTL: react_1.DirectionalHint.rightCenter, onDismiss: this._onCalloutDismiss, gapSpace: this.props.gapSpace !== undefined ? this.props.gapSpace : 5, calloutWidth: this.props.calloutWidth }, this.props.calloutContent))));
}
_onCalloutDismiss() {
if (this.state.isCalloutVisible) {
this.setState({
isCalloutVisible: false,
});
}
}
_onInfoIconMouseOver() {
if (this.props.calloutTrigger !== Callout_1.CalloutTriggers.Hover) {
return;
}
if (!this.state.isCalloutVisible) {
this.setState({
isCalloutVisible: true,
});
}
}
_onInfoIconMouseOut(e) {
if (this.props.calloutTrigger !== Callout_1.CalloutTriggers.Hover) {
return;
}
if (e.relatedTarget) {
const relatedTarget = e.relatedTarget;
if (relatedTarget && relatedTarget.closest('.ms-Callout-container')) {
return;
}
}
this.setState({
isCalloutVisible: false,
});
}
_onInfoIconClick() {
if (this.props.calloutTrigger !== Callout_1.CalloutTriggers.Click) {
return;
}
this.setState({
isCalloutVisible: !this.state.isCalloutVisible,
});
}
}
exports.default = PlaceholderWithCallout;
//# sourceMappingURL=PlaceholderWithCallout.js.map