import { __assign, __extends, __rest } from "tslib";
/** @jsx withSlots */
import * as React from 'react';
import { Button } from '@uifabric/experiments';
import { withSlots } from '@uifabric/foundation';
// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { buttonProperties, getNativeProps } from '@uifabric/utilities';
import { Spinner, Stack } from 'office-ui-fabric-react';
/* eslint-disable deprecation/deprecation */
var stackProps = { tokens: { childrenGap: 16 }, padding: 8, maxWidth: 400 };
var SpinnerButton = composed(Button, {
    slots: { icon: 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 = __rest(props, ["icon", "content", "children", "disabled", "onClick", "allowDisabledFocus", "ariaLabel", "keytipProps", "buttonRef"]);
    var buttonProps = getNativeProps(rest, buttonProperties);
    var _onClick = function (ev) {
        if (!disabled && onClick) {
            onClick(ev);
            if (ev.defaultPrevented) {
                return;
            }
        }
    };
    return (withSlots(slots.root, __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 && withSlots(slots.content, null),
        children,
        icon && withSlots(slots.icon, null)));
};
var IconAtEndButton = composed(Button, {
    view: IconAtEndButtonView,
});
var SpinnerAtEndButton = composed(IconAtEndButton, {
    slots: { icon: Spinner },
});
var SlotsRecompositionExample = /** @class */ (function (_super) {
    __extends(SlotsRecompositionExample, _super);
    function SlotsRecompositionExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SlotsRecompositionExample.prototype.render = function () {
        return (withSlots(Stack, null,
            withSlots(Stack, __assign({}, stackProps),
                withSlots(SpinnerButton, { content: "Recomposed button with Spinner as its icon", icon: "Upload" }),
                withSlots(IconAtEndButton, { content: "Recomposed button with icon at the end", icon: "Upload" }),
                withSlots(SpinnerAtEndButton, { content: "Recomposed button with Spinner as its icon at the end", icon: "Upload" }))));
    };
    return SlotsRecompositionExample;
}(React.Component));
export { SlotsRecompositionExample };
//# sourceMappingURL=Slots.Recomposition.Example.js.map