office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
50 lines • 3.18 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/TextField", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Callout", "./TextField.Examples.scss"], function (require, exports, tslib_1, React, TextField_1, Utilities_1, Button_1, Callout_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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_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', 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([
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