var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../Styling", "../../Icon", "../../common/DirectionalHint", "../../ContextualMenu"], function (require, exports, React, Utilities_1, Styling_1, Icon_1, DirectionalHint_1, ContextualMenu_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var BaseButton = (function (_super) {
        __extends(BaseButton, _super);
        function BaseButton(props, rootClassName) {
            var _this = _super.call(this, props) || this;
            _this._warnDeprecations({
                rootProps: null,
                icon: 'iconProps',
                menuIconName: 'menuIconProps',
                toggled: 'checked'
            });
            _this._labelId = Utilities_1.getId();
            _this._descriptionId = Utilities_1.getId();
            _this._ariaDescriptionId = Utilities_1.getId();
            _this.state = {
                menuProps: null
            };
            return _this;
        }
        BaseButton.prototype.render = function () {
            var _a = this.props, ariaDescription = _a.ariaDescription, ariaLabel = _a.ariaLabel, className = _a.className, description = _a.description, disabled = _a.disabled, href = _a.href, iconProps = _a.iconProps, styles = _a.styles, checked = _a.checked, variantClassName = _a.variantClassName;
            this._classNames = this._getClassNames(styles, className, variantClassName, iconProps && iconProps.className, disabled, checked);
            var _b = this, _ariaDescriptionId = _b._ariaDescriptionId, _labelId = _b._labelId, _descriptionId = _b._descriptionId;
            var renderAsAnchor = !!href;
            var tag = renderAsAnchor ? 'a' : 'button';
            var nativeProps = Utilities_1.getNativeProps(Utilities_1.assign(renderAsAnchor ? {} : { type: 'button' }, this.props.rootProps, this.props), renderAsAnchor ? Utilities_1.anchorProperties : Utilities_1.buttonProperties, [
                'disabled' // Let disabled buttons be focused and styled as disabled.
            ]);
            // Check for ariaDescription, description or aria-describedby in the native props to determine source of aria-describedby
            // otherwise default to null.
            var ariaDescribedBy;
            if (ariaDescription) {
                ariaDescribedBy = _ariaDescriptionId;
            }
            else if (description) {
                ariaDescribedBy = _descriptionId;
            }
            else if (nativeProps['aria-describedby']) {
                ariaDescribedBy = nativeProps['aria-describedby'];
            }
            else {
                ariaDescribedBy = null;
            }
            var buttonProps = Utilities_1.assign(nativeProps, {
                className: this._classNames.root,
                ref: this._resolveRef('_buttonElement'),
                'disabled': disabled,
                'aria-label': ariaLabel,
                'aria-labelledby': ariaLabel ? null : _labelId,
                'aria-describedby': ariaDescribedBy,
                'aria-disabled': disabled,
                'data-is-focusable': disabled ? false : true,
                'aria-pressed': checked
            });
            // Override onClick if contextualMenuItems passed in. Eventually allow _onToggleMenu to
            // be assigned to split button click if onClick already has a value
            if (this.props.menuProps) {
                Utilities_1.assign(buttonProps, {
                    'onClick': this._onToggleMenu,
                    'aria-expanded': this.state.menuProps ? true : false
                });
            }
            return this._onRenderContent(tag, buttonProps);
        };
        BaseButton.prototype.focus = function () {
            if (this._buttonElement) {
                this._buttonElement.focus();
            }
        };
        BaseButton.prototype._onRenderContent = function (tag, buttonProps) {
            var props = this.props;
            var baseClassName = props.baseClassName, styles = props.styles, menuIconName = props.menuIconName, menuProps = props.menuProps, _a = props.onRenderIcon, onRenderIcon = _a === void 0 ? this._onRenderIcon : _a, _b = props.onRenderText, onRenderText = _b === void 0 ? this._onRenderText : _b, _c = props.onRenderDescription, onRenderDescription = _c === void 0 ? this._onRenderDescription : _c, _d = props.onRenderAriaDescription, onRenderAriaDescription = _d === void 0 ? this._onRenderAriaDescription : _d, _e = props.onRenderChildren, onRenderChildren = _e === void 0 ? this._onRenderChildren : _e, _f = props.onRenderMenu, onRenderMenu = _f === void 0 ? this._onRenderMenu : _f, _g = props.onRenderMenuIcon, onRenderMenuIcon = _g === void 0 ? this._onRenderMenuIcon : _g;
            var className = Styling_1.mergeStyles(baseClassName + '-flexContainer', styles.flexContainer);
            return React.createElement(tag, buttonProps, React.createElement('div', { className: className }, onRenderIcon(props, this._onRenderIcon), onRenderText(props, this._onRenderText), onRenderDescription(props, this._onRenderDescription), onRenderAriaDescription(props, this._onRenderAriaDescription), onRenderChildren(props, this._onRenderChildren), (menuProps || menuIconName || this.props.onRenderMenuIcon) && onRenderMenuIcon(this.props, this._onRenderMenuIcon), this.state.menuProps && onRenderMenu(menuProps, this._onRenderMenu)));
        };
        BaseButton.prototype._onRenderIcon = function (buttonProps, defaultRender) {
            var _a = this.props, baseClassName = _a.baseClassName, disabled = _a.disabled, icon = _a.icon, iconProps = _a.iconProps, styles = _a.styles, checked = _a.checked;
            if (icon || iconProps) {
                iconProps = iconProps || {
                    iconName: icon
                };
            }
            return iconProps && (React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: this._classNames.icon })));
        };
        BaseButton.prototype._onRenderText = function () {
            var _a = this.props, children = _a.children, disabled = _a.disabled, styles = _a.styles, text = _a.text;
            // For backwards compat, we should continue to take in the text content from children.
            if (text === undefined && typeof (children) === 'string') {
                text = children;
            }
            return text && (React.createElement("span", { className: this._classNames.label, id: this._labelId }, text));
        };
        BaseButton.prototype._onRenderChildren = function () {
            var children = this.props.children;
            // If children is just a string, either it or the text will be rendered via onRenderLabel
            // If children is another component, it will be rendered after text
            if (typeof (children) === 'string') {
                return null;
            }
            return children;
        };
        BaseButton.prototype._onRenderDescription = function (props) {
            var description = this.props.description;
            // ms-Button-description is only shown when the button type is compound.
            // In other cases it will not be displayed.
            return description ? (React.createElement("span", { className: this._classNames.description, id: this._descriptionId }, description)) : (null);
        };
        BaseButton.prototype._onRenderAriaDescription = function () {
            var _a = this.props, ariaDescription = _a.ariaDescription, styles = _a.styles;
            // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
            // otherwise it will be assigned to descriptionSpan.
            return ariaDescription ? (React.createElement("span", { className: styles.screenReaderText, id: this._ariaDescriptionId }, ariaDescription)) : (null);
        };
        BaseButton.prototype._onRenderMenuIcon = function (props) {
            var _a = this.props, baseClassName = _a.baseClassName, checked = _a.checked, disabled = _a.disabled, menuIconName = _a.menuIconName, menuIconProps = _a.menuIconProps, styles = _a.styles;
            if (menuIconProps === undefined) {
                menuIconProps = {
                    iconName: menuIconName === undefined ? 'ChevronDown' : menuIconName
                };
            }
            return (menuIconProps ?
                React.createElement(Icon_1.Icon, __assign({}, menuIconProps, { className: Styling_1.mergeStyles(baseClassName + "-icon", styles.menuIcon, disabled && styles.menuIconDisabled, !disabled && checked && styles.menuIconChecked, menuIconProps.className) }))
                :
                    null);
        };
        BaseButton.prototype._onRenderMenu = function (menuProps) {
            return (React.createElement(ContextualMenu_1.ContextualMenu, __assign({ isBeakVisible: true, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge }, menuProps, { className: Styling_1.mergeStyles('ms-BaseButton-menuhost', menuProps.className), target: this._buttonElement, labelElementId: this._labelId, onDismiss: this._onToggleMenu })));
        };
        BaseButton.prototype._onToggleMenu = function () {
            var menuProps = this.props.menuProps;
            var currentMenuProps = this.state.menuProps;
            this.setState({ menuProps: currentMenuProps ? null : menuProps });
        };
        BaseButton.prototype._getClassNames = function (styles, className, variantClassName, iconClassName, disabled, checked) {
            return {
                root: Styling_1.mergeStyles(className, 'ms-Button', variantClassName, styles.root, checked && [
                    'is-checked',
                    styles.rootChecked
                ], disabled && [
                    'is-disabled',
                    styles.rootDisabled
                ], !disabled && {
                    ':hover': styles.rootHovered,
                    ':hover .ms-Button-description': styles.descriptionHovered,
                    ':active': styles.rootPressed,
                    ':active .ms-Button-description': styles.descriptionPressed
                }, disabled && checked && [
                    styles.rootCheckedDisabled
                ], !disabled && checked && {
                    ':hover': styles.rootCheckedHovered,
                    ':active': styles.rootCheckedPressed
                }),
                flexContainer: Styling_1.mergeStyles('ms-Button-flexContainer', styles.flexContainer),
                icon: Styling_1.mergeStyles('ms-Button-icon', iconClassName, styles.icon, checked && styles.iconChecked, disabled && styles.iconDisabled),
                label: Styling_1.mergeStyles('ms-Button-label', styles.label, checked && styles.labelChecked, disabled && styles.labelDisabled),
                menuIcon: Styling_1.mergeStyles('ms-Button-menuIcon', styles.menuIcon, checked && styles.menuIconChecked, disabled && styles.menuIconDisabled),
                description: Styling_1.mergeStyles('ms-Button-description', styles.description, checked && styles.descriptionChecked, disabled && styles.descriptionDisabled),
                screenReaderText: Styling_1.mergeStyles('ms-Button-screenReaderText', styles.screenReaderText)
            };
        };
        return BaseButton;
    }(Utilities_1.BaseComponent));
    BaseButton.defaultProps = {
        baseClassName: 'ms-Button',
        classNames: {},
        styles: {}
    };
    __decorate([
        Utilities_1.autobind
    ], BaseButton.prototype, "_onRenderIcon", null);
    __decorate([
        Utilities_1.autobind
    ], BaseButton.prototype, "_onRenderText", null);
    __decorate([
        Utilities_1.autobind
    ], BaseButton.prototype, "_onRenderChildren", null);
    __decorate([
        Utilities_1.autobind
    ], BaseButton.prototype, "_onRenderDescription", null);
    __decorate([
        Utilities_1.autobind
    ], BaseButton.prototype, "_onRenderAriaDescription", null);
    __decorate([
        Utilities_1.autobind
    ], BaseButton.prototype, "_onRenderMenuIcon", null);
    __decorate([
        Utilities_1.autobind
    ], BaseButton.prototype, "_onRenderMenu", null);
    __decorate([
        Utilities_1.autobind
    ], BaseButton.prototype, "_onToggleMenu", null);
    __decorate([
        Utilities_1.memoize
    ], BaseButton.prototype, "_getClassNames", null);
    exports.BaseButton = BaseButton;
});

//# sourceMappingURL=BaseButton.js.map
