"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var CollapsibleSection_1 = require("@uifabric/experiments/lib-commonjs/CollapsibleSection");
// TODO: convert this example to use extendComponent
// This is our customized component making use of default CollapsibleSectionTitle while using slots
// to add the tooltip and icon. This would also have to be modified to add a prop for tooltip content (not done here)
var CustomizedCollapsibleSectionTitle = function (props) {
    var titleText = {
        text: {
            render: function (renderProps, DefaultComponent) { return (
            // Supplement the default title text with an icon. Wrap in a Stack for proper placement.
            React.createElement(office_ui_fabric_react_1.Stack, { grow: true, horizontal: true, horizontalAlign: "space-between" },
                React.createElement(DefaultComponent, tslib_1.__assign({}, renderProps), props.text),
                React.createElement(office_ui_fabric_react_1.Icon, { iconName: "warning", styles: { root: { color: 'red' } } }))); },
        },
    };
    // Wrap the entire title in a Tooltip
    return (React.createElement(office_ui_fabric_react_1.TooltipHost, { content: "This is the tooltip" },
        React.createElement(CollapsibleSection_1.CollapsibleSectionTitle, tslib_1.__assign({}, props, { slots: titleText }))));
};
var CollapsibleSectionSlotsExample = /** @class */ (function (_super) {
    tslib_1.__extends(CollapsibleSectionSlotsExample, _super);
    function CollapsibleSectionSlotsExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CollapsibleSectionSlotsExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement("p", null, "This CollapsibleSection has been customized with a TooltipHost around its entire title and an icon in its title."),
            React.createElement(office_ui_fabric_react_1.Stack, { maxWidth: 200, styles: { root: { border: '1px solid black' } } },
                React.createElement(CollapsibleSection_1.CollapsibleSection, { key: 1, defaultCollapsed: true, title: "Shorthand Title Text", slots: {
                        title: {
                            component: CustomizedCollapsibleSectionTitle,
                        },
                    } }, "Content 1"))));
    };
    return CollapsibleSectionSlotsExample;
}(React.Component));
exports.CollapsibleSectionSlotsExample = CollapsibleSectionSlotsExample;
//# sourceMappingURL=CollapsibleSection.Slots.Example.js.map