office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
54 lines • 2.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Coachmark_1 = require("../Coachmark");
var TeachingBubble_1 = require("office-ui-fabric-react/lib/TeachingBubble");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var CoachmarkBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(CoachmarkBasicExample, _super);
function CoachmarkBasicExample(props) {
var _this = _super.call(this, props) || this;
_this._onShowMenuClicked = _this._onShowMenuClicked.bind(_this);
_this._onCalloutDismiss = _this._onCalloutDismiss.bind(_this);
_this.state = {
isVisible: false,
isCoachmarkCollapsed: true
};
return _this;
}
CoachmarkBasicExample.prototype.render = function () {
var isVisible = this.state.isVisible;
var calloutProps = {
doNotLayer: true
};
var getClassNames = Utilities_1.classNamesFunction();
var classNames = getClassNames(function () {
return {
root: {},
buttonContainer: {
display: 'inline-block'
}
};
});
return (React.createElement("div", { className: classNames.root },
React.createElement("div", { className: classNames.buttonContainer, ref: this._resolveRef('_targetButton') },
React.createElement(Button_1.DefaultButton, { onClick: this._onShowMenuClicked, text: isVisible ? 'Hide Coachmark' : 'Show Coachmark' })),
isVisible && (React.createElement(Coachmark_1.Coachmark, { target: this._targetButton },
React.createElement(TeachingBubble_1.TeachingBubbleContent, { headline: 'Example Title', calloutProps: calloutProps }, "Welcome to the land of coachmarks")))));
};
CoachmarkBasicExample.prototype._onShowMenuClicked = function () {
this.setState({
isVisible: !this.state.isVisible
});
};
CoachmarkBasicExample.prototype._onCalloutDismiss = function () {
this.setState({
isVisible: false
});
};
return CoachmarkBasicExample;
}(Utilities_1.BaseComponent));
exports.CoachmarkBasicExample = CoachmarkBasicExample;
//# sourceMappingURL=Coachmark.Basic.Example.js.map