@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
79 lines • 3.71 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 IPropertyFieldHeader_1 = require("./IPropertyFieldHeader");
const PropertyFieldHeader_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldHeader.module.scss"));
/**
* PropertyFieldHeader component.
* Displays a label and a callout
*/
class PropertyFieldHeader extends React.Component {
constructor(props, state) {
super(props, state);
this._onCalloutDismiss = this._onCalloutDismiss.bind(this);
this.state = {
isCalloutVisible: false,
};
}
render() {
const { disabled, label, calloutContent, calloutTrigger, calloutWidth, gapSpace, } = this.props;
return (React.createElement("div", { className: (0, react_1.css)({
[PropertyFieldHeader_module_scss_1.default.headerBar]: true,
[PropertyFieldHeader_module_scss_1.default.isDisabled]: !!disabled,
}) },
React.createElement("div", { className: PropertyFieldHeader_module_scss_1.default.header }, label),
React.createElement("div", { className: PropertyFieldHeader_module_scss_1.default.info }, calloutContent && (React.createElement("i", { className: (0, react_1.getIconClassName)('Info'), ref: (infoIcon) => {
this._infoIcon = infoIcon;
}, onMouseOver: !disabled && calloutTrigger === IPropertyFieldHeader_1.CalloutTriggers.Hover
? this._onInfoIconMouseOver.bind(this)
: null, onMouseOut: !disabled && calloutTrigger === IPropertyFieldHeader_1.CalloutTriggers.Hover
? this._onInfoIconMouseOut.bind(this)
: null, onClick: !disabled && calloutTrigger === IPropertyFieldHeader_1.CalloutTriggers.Click
? this._onInfoIconClick.bind(this)
: null }))),
this.state.isCalloutVisible && (React.createElement(react_1.Callout, { className: PropertyFieldHeader_module_scss_1.default.headerCallout, target: this._infoIcon, isBeakVisible: true, directionalHint: react_1.DirectionalHint.leftCenter, directionalHintForRTL: react_1.DirectionalHint.rightCenter, onDismiss: this._onCalloutDismiss, gapSpace: gapSpace !== undefined ? gapSpace : 5, calloutWidth: calloutWidth }, calloutContent))));
}
_onCalloutDismiss() {
if (this.state.isCalloutVisible) {
this.setState({
isCalloutVisible: false,
});
}
}
_onInfoIconMouseOver() {
if (this.props.calloutTrigger !== IPropertyFieldHeader_1.CalloutTriggers.Hover) {
return;
}
if (!this.state.isCalloutVisible) {
this.setState({
isCalloutVisible: true,
});
}
}
_onInfoIconMouseOut(e) {
if (this.props.calloutTrigger !== IPropertyFieldHeader_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 !== IPropertyFieldHeader_1.CalloutTriggers.Click) {
return;
}
this.setState({
isCalloutVisible: !this.state.isCalloutVisible,
});
}
}
exports.default = PropertyFieldHeader;
//# sourceMappingURL=PropertyFieldHeader.js.map