office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
44 lines (42 loc) • 2.76 kB
JavaScript
;
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
require('./ExampleCard.scss');
var Button_1 = require('../../../Button');
var css_1 = require('../../../utilities/css');
var Highlight = require('react-highlight');
var ExampleCard = (function (_super) {
__extends(ExampleCard, _super);
function ExampleCard(props) {
_super.call(this, props);
this.state = {
isCodeVisible: false,
isExampleShown: props.isOptIn ? false : true
};
this._onToggleCodeClick = this._onToggleCodeClick.bind(this);
this._onShowExampleClick = this._onShowExampleClick.bind(this);
}
ExampleCard.prototype.render = function () {
var _a = this.props, title = _a.title, code = _a.code, children = _a.children, isRightAligned = _a.isRightAligned;
var _b = this.state, isCodeVisible = _b.isCodeVisible, isExampleShown = _b.isExampleShown;
var rootClass = 'ExampleCard' + (this.state.isCodeVisible ? ' is-codeVisible' : '');
return (React.createElement("div", {className: rootClass}, React.createElement("div", {className: 'ExampleCard-header'}, React.createElement("span", {className: 'ExampleCard-title ms-font-l'}, title), React.createElement("span", {className: 'ExampleCard-toggleButtons ms-font-l'}, React.createElement(Button_1.Button, {buttonType: Button_1.ButtonType.primary, onClick: this._onShowExampleClick}, isExampleShown ? 'Hide example' : 'Show example'), code ? (React.createElement(Button_1.Button, {buttonType: Button_1.ButtonType.primary, onClick: this._onToggleCodeClick}, isCodeVisible ? 'Hide code' : 'Show code')) : (null))), React.createElement("div", {className: css_1.css('ExampleCard-content', { ' ms-u-slideDownIn20': (isCodeVisible) })}, isCodeVisible && (React.createElement("div", {className: 'ExampleCard-code ms-u-slideDownIn20'}, React.createElement(Highlight, {className: 'javascript'}, code))), isExampleShown && (React.createElement("div", {className: css_1.css('ExampleCard-example', { ' is-right-aligned': (isRightAligned) })}, children)))));
};
ExampleCard.prototype._onToggleCodeClick = function () {
this.setState({
isCodeVisible: !this.state.isCodeVisible
});
};
ExampleCard.prototype._onShowExampleClick = function () {
this.setState({
isExampleShown: !this.state.isExampleShown
});
};
return ExampleCard;
}(React.Component));
exports.ExampleCard = ExampleCard;
//# sourceMappingURL=ExampleCard.js.map