"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/** @jsx withSlots */
var React = require("react");
var experiments_1 = require("@uifabric/experiments");
var foundation_1 = require("@uifabric/foundation");
// Temporary import file to experiment with next version of foundation.
var composed_1 = require("@uifabric/foundation/lib-commonjs/next/composed");
var utilities_1 = require("@uifabric/utilities");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var stackProps = { tokens: { childrenGap: 16 }, padding: 8, maxWidth: 400 };
var SpinnerButton = composed_1.composed(experiments_1.Button, {
    slots: { icon: office_ui_fabric_react_1.Spinner },
});
var IconAtEndButtonView = function (props, slots) {
    var icon = props.icon, content = props.content, children = props.children, disabled = props.disabled, onClick = props.onClick, allowDisabledFocus = props.allowDisabledFocus, ariaLabel = props.ariaLabel, keytipProps = props.keytipProps, buttonRef = props.buttonRef, rest = tslib_1.__rest(props, ["icon", "content", "children", "disabled", "onClick", "allowDisabledFocus", "ariaLabel", "keytipProps", "buttonRef"]);
    var buttonProps = utilities_1.getNativeProps(rest, utilities_1.buttonProperties);
    var _onClick = function (ev) {
        if (!disabled && onClick) {
            onClick(ev);
            if (ev.defaultPrevented) {
                return;
            }
        }
    };
    return (foundation_1.withSlots(slots.root, tslib_1.__assign({ type: "button", role: "button", onClick: _onClick }, buttonProps, { disabled: disabled && !allowDisabledFocus, "aria-disabled": disabled, tabIndex: !disabled || allowDisabledFocus ? 0 : undefined, "aria-label": ariaLabel, ref: buttonRef }),
        content && foundation_1.withSlots(slots.content, null),
        children,
        icon && foundation_1.withSlots(slots.icon, null)));
};
var IconAtEndButton = composed_1.composed(experiments_1.Button, {
    view: IconAtEndButtonView,
});
var SpinnerAtEndButton = composed_1.composed(IconAtEndButton, {
    slots: { icon: office_ui_fabric_react_1.Spinner },
});
var SlotsRecompositionExample = /** @class */ (function (_super) {
    tslib_1.__extends(SlotsRecompositionExample, _super);
    function SlotsRecompositionExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SlotsRecompositionExample.prototype.render = function () {
        return (foundation_1.withSlots(office_ui_fabric_react_1.Stack, null,
            foundation_1.withSlots(office_ui_fabric_react_1.Stack, tslib_1.__assign({}, stackProps),
                foundation_1.withSlots(SpinnerButton, { content: "Recomposed button with Spinner as its icon", icon: "Upload" }),
                foundation_1.withSlots(IconAtEndButton, { content: "Recomposed button with icon at the end", icon: "Upload" }),
                foundation_1.withSlots(SpinnerAtEndButton, { content: "Recomposed button with Spinner as its icon at the end", icon: "Upload" }))));
    };
    return SlotsRecompositionExample;
}(React.Component));
exports.SlotsRecompositionExample = SlotsRecompositionExample;
//# sourceMappingURL=Slots.Recomposition.Example.js.map