office-ui-fabric-react/lib-amd/components/Button/examples/Button.Swap.Example.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "react-dom", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Label"], function (require, exports, tslib_1, React, ReactDOM, Utilities_1, Button_1, Label_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ButtonSwapExample = (function (_super) {
        tslib_1.__extends(ButtonSwapExample, _super);
        function ButtonSwapExample() {
            var _this = _super.call(this) || this;
            _this.hasFocus = false;
            _this.buttonRef = null;
            _this.state = {
                isPrimary: true
            };
            return _this;
        }
        ButtonSwapExample.prototype.componentWillUpdate = function (nextProps, nextState) {
            // check to see if our button element has focus
            this.hasFocus = document.activeElement === this.buttonRef;
        };
        ButtonSwapExample.prototype.componentDidUpdate = function (prevProps, prevState) {
            // if our button previously had focus but we lost it
            // because we switched the control type, we need to set focus again
            if (this.hasFocus && document.activeElement !== this.buttonRef) {
                this.buttonRef.focus();
            }
        };
        ButtonSwapExample.prototype.render = function () {
            var isPrimary = this.state.isPrimary;
            var _a = this.props, disabled = _a.disabled, checked = _a.checked;
            var text = 'Swap';
            // determine which button to render
            var button = isPrimary
                ? React.createElement(Button_1.PrimaryButton, { ref: this._setButtonRef, disabled: disabled, checked: checked, onClick: this._onClick }, text)
                : React.createElement(Button_1.DefaultButton, { ref: this._setButtonRef, disabled: disabled, checked: checked, onClick: this._onClick }, text);
            return (React.createElement("div", { className: 'ms-BasicButtonsExample' },
                React.createElement(Label_1.Label, null, "Click to swap button types"),
                button));
        };
        ButtonSwapExample.prototype._setButtonRef = function (ref) {
            this.buttonRef = ReactDOM.findDOMNode(ref);
        };
        ButtonSwapExample.prototype._onClick = function () {
            // change the button type on click
            this.setState({ isPrimary: !this.state.isPrimary });
        };
        return ButtonSwapExample;
    }(React.Component));
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ButtonSwapExample.prototype, "_setButtonRef", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ButtonSwapExample.prototype, "_onClick", null);
    exports.ButtonSwapExample = ButtonSwapExample;
});

//# sourceMappingURL=Button.Swap.Example.js.map