office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
46 lines • 2.59 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var TextField_1 = require("office-ui-fabric-react/lib/TextField");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Callout_1 = require("office-ui-fabric-react/lib/Callout");
require("./TextField.Examples.scss");
var TextFieldCustomRenderExample = /** @class */ (function (_super) {
tslib_1.__extends(TextFieldCustomRenderExample, _super);
function TextFieldCustomRenderExample(props) {
var _this = _super.call(this, props) || this;
_this._onRenderLabel = function (props) {
var isCalloutVisible = _this.state.isCalloutVisible;
return (React.createElement("div", { className: "ms-CustomRenderExample", style: { display: 'flex', alignItems: 'center' } },
React.createElement("span", null, "TextField with custom label render"),
React.createElement("span", { className: "ms-CustomRenderExample-labelIconArea", ref: function (menuButton) { return (_this._iconButtonElement = menuButton); } },
React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Info' }, title: "Info", ariaLabel: "Info", onClick: _this._onClick })),
isCalloutVisible && (React.createElement(Callout_1.Callout, { className: "ms-CustomRenderExample-callout", target: _this._iconButtonElement, onDismiss: _this._onDismiss },
React.createElement("text", null,
' ',
"In additon to the label itself, this label includes an iconbutton which pops out more information in a callout")))));
};
_this._onClick = function () {
_this.setState({
isCalloutVisible: !_this.state.isCalloutVisible
});
};
_this._onDismiss = function () {
_this.setState({
isCalloutVisible: false
});
};
_this.state = {
isCalloutVisible: false
};
return _this;
}
TextFieldCustomRenderExample.prototype.render = function () {
return (React.createElement("div", { className: "docs-TextFieldExample" },
React.createElement(TextField_1.TextField, { onRenderLabel: this._onRenderLabel })));
};
return TextFieldCustomRenderExample;
}(React.Component));
exports.TextFieldCustomRenderExample = TextFieldCustomRenderExample;
//# sourceMappingURL=TextField.CustomRender.Example.js.map