office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
44 lines • 2.46 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
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._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(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")))));
};
_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, { onRenderLabel: this._onRenderLabel })));
};
return TextFieldCustomRenderExample;
}(React.Component));
export { TextFieldCustomRenderExample };
//# sourceMappingURL=TextField.CustomRender.Example.js.map