import { __assign, __extends } from "tslib";
import * as React from 'react';
import { Button } from '@uifabric/experiments';
import { Spinner, Stack, TooltipHost } from 'office-ui-fabric-react';
var stackProps = { tokens: { childrenGap: 16 }, padding: 8, maxWidth: 400 };
var SlotsExample = /** @class */ (function (_super) {
    __extends(SlotsExample, _super);
    function SlotsExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SlotsExample.prototype.render = function () {
        return (React.createElement(Stack, __assign({}, stackProps, { maxWidth: 400 }),
            React.createElement(Button
            // Render function usage, wrapping default content
            , { 
                // Render function usage, wrapping default content
                slots: {
                    root: {
                        render: function (rootProps, DefaultComponent) { return (React.createElement(TooltipHost, { content: "This is the tooltip" },
                            React.createElement(DefaultComponent, __assign({}, rootProps)))); },
                    },
                    content: {
                        // TODO: add 'element' option with JSX?
                        // element: <Spinner />
                        component: Spinner,
                    },
                }, 
                // Shorthand prop usage
                icon: "share" }, "Just a button with a spinner as its content.")));
    };
    return SlotsExample;
}(React.Component));
export { SlotsExample };
//# sourceMappingURL=Slots.Example.js.map