office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
85 lines • 3.78 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { createRef } from 'office-ui-fabric-react/lib/Utilities';
import { getTheme, FontWeights, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
// Themed styles for the example.
var theme = getTheme();
var styles = mergeStyleSets({
buttonArea: {
verticalAlign: 'top',
display: 'inline-block',
textAlign: 'center'
},
callout: {
maxWidth: 300
},
header: {
padding: '18px 24px 12px'
},
title: [
theme.fonts.xLarge,
{
margin: 0,
color: theme.palette.neutralPrimary,
fontWeight: FontWeights.semilight
}
],
inner: {
height: '100%',
padding: '0 24px 20px'
},
actions: {
position: 'relative',
marginTop: 20,
width: '100%',
whiteSpace: 'nowrap'
},
link: [
theme.fonts.medium,
{
color: theme.palette.neutralPrimary
}
]
});
// Example code
var CalloutBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(CalloutBasicExample, _super);
function CalloutBasicExample(props) {
var _this = _super.call(this, props) || this;
_this._menuButtonElement = createRef();
_this._onShowMenuClicked = function () {
_this.setState({
isCalloutVisible: !_this.state.isCalloutVisible
});
};
_this._onCalloutDismiss = function () {
_this.setState({
isCalloutVisible: false
});
};
_this.state = {
isCalloutVisible: false
};
return _this;
}
CalloutBasicExample.prototype.render = function () {
var isCalloutVisible = this.state.isCalloutVisible;
return (React.createElement("div", null,
React.createElement("div", { className: styles.buttonArea, ref: this._menuButtonElement },
React.createElement(DefaultButton, { id: "toggleCallout", onClick: this._onShowMenuClicked, text: isCalloutVisible ? 'Hide callout' : 'Show callout' })),
React.createElement(Callout, { className: "ms-CalloutExample-callout", ariaLabelledBy: 'callout-label-1', ariaDescribedBy: 'callout-description-1', role: 'alertdialog', gapSpace: 0, target: this._menuButtonElement.value, onDismiss: this._onCalloutDismiss, setInitialFocus: true, hidden: !this.state.isCalloutVisible },
React.createElement("div", { className: "ms-CalloutExample-header" },
React.createElement("p", { className: "ms-CalloutExample-title", id: 'callout-label-1' }, "All of your favorite people")),
React.createElement("div", { className: "ms-CalloutExample-inner" },
React.createElement("div", { className: "ms-CalloutExample-content" },
React.createElement("p", { className: "ms-CalloutExample-subText", id: 'callout-description-1' }, "Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.")),
React.createElement("div", { className: "ms-CalloutExample-actions" },
React.createElement(Link, { className: "ms-CalloutExample-link", href: "http://microsoft.com" }, "Go to microsoft"))))));
};
return CalloutBasicExample;
}(React.Component));
export { CalloutBasicExample };
//# sourceMappingURL=Callout.Basic.Example.js.map