office-ui-fabric-react/lib-es2015/components/TextField/examples/TextField.CustomRender.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import './TextField.Examples.scss';
var TextFieldCustomRenderExample = /** @class */ (function (_super) {
    tslib_1.__extends(TextFieldCustomRenderExample, _super);
    function TextFieldCustomRenderExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isCalloutVisible: false
        };
        return _this;
    }
    TextFieldCustomRenderExample.prototype.render = function () {
        return (React.createElement("div", { className: 'docs-TextFieldExample' },
            React.createElement(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(IconButton, { iconProps: { iconName: 'Info' }, title: 'Info', ariaLabel: 'Info', onClick: this._onClick })),
            isCalloutVisible && (React.createElement(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")))));
    };
    TextFieldCustomRenderExample.prototype._onClick = function () {
        this.setState({
            isCalloutVisible: !this.state.isCalloutVisible
        });
    };
    TextFieldCustomRenderExample.prototype._onDismiss = function () {
        this.setState({
            isCalloutVisible: false
        });
    };
    tslib_1.__decorate([
        autobind
    ], TextFieldCustomRenderExample.prototype, "_onRenderLabel", null);
    tslib_1.__decorate([
        autobind
    ], TextFieldCustomRenderExample.prototype, "_onClick", null);
    tslib_1.__decorate([
        autobind
    ], TextFieldCustomRenderExample.prototype, "_onDismiss", null);
    return TextFieldCustomRenderExample;
}(React.Component));
export { TextFieldCustomRenderExample };
//# sourceMappingURL=TextField.CustomRender.Example.js.map