"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 Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Callout_1 = require("office-ui-fabric-react/lib/Callout");
var TextFieldCustomRenderExample = (function (_super) {
    tslib_1.__extends(TextFieldCustomRenderExample, _super);
    function TextFieldCustomRenderExample() {
        var _this = _super.call(this) || this;
        _this.state = {
            isCalloutVisible: false
        };
        return _this;
    }
    TextFieldCustomRenderExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement(TextField_1.TextField, { onRenderLabel: this._onRenderLabel })));
    };
    TextFieldCustomRenderExample.prototype._onRenderLabel = function (props) {
        var _this = this;
        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', targetElement: 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")))));
    };
    TextFieldCustomRenderExample.prototype._onClick = function () {
        this.setState({
            isCalloutVisible: !this.state.isCalloutVisible
        });
    };
    TextFieldCustomRenderExample.prototype._onDismiss = function () {
        this.setState({
            isCalloutVisible: false
        });
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], TextFieldCustomRenderExample.prototype, "_onRenderLabel", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], TextFieldCustomRenderExample.prototype, "_onClick", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], TextFieldCustomRenderExample.prototype, "_onDismiss", null);
    return TextFieldCustomRenderExample;
}(React.Component));
exports.TextFieldCustomRenderExample = TextFieldCustomRenderExample;
//# sourceMappingURL=TextField.CustomRender.Example.js.map