import { __extends } from "tslib";
import * as React from 'react';
import { DefaultButton, FocusZone, Stack } from 'office-ui-fabric-react';
import { CollapsibleSection } from '@uifabric/experiments/lib/CollapsibleSection';
var stackTokens = { childrenGap: 20 };
/* eslint-disable react/jsx-no-bind */
var CollapsibleSectionControlledExample = /** @class */ (function (_super) {
    __extends(CollapsibleSectionControlledExample, _super);
    function CollapsibleSectionControlledExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            collapsed: true,
            clicks: 0,
        };
        return _this;
    }
    CollapsibleSectionControlledExample.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", null,
            React.createElement(FocusZone, null,
                React.createElement("p", null, "Even though we are using the same CollapsibleSection with the same state component, createComponent overrides the state component's output when the controlled prop has a value passed in automatically. As a result, clicking on the titles in this example does not affect collapsed state, only clicking on the Toggle button does."),
                React.createElement(Stack, { horizontal: true, tokens: stackTokens, verticalAlign: "center" },
                    React.createElement(DefaultButton, { text: "Toggle", onClick: function () {
                            _this.setState({ collapsed: !_this.state.collapsed });
                        } }),
                    React.createElement("p", null,
                        "Number of title clicks: ",
                        this.state.clicks)),
                React.createElement(CollapsibleSection, { collapsed: this.state.collapsed, title: {
                        text: "Title 1",
                        onClick: function () {
                            _this.setState(function (state) { return ({ clicks: state.clicks + 1 }); });
                        },
                    } }, "Content 1"),
                React.createElement(CollapsibleSection, { collapsed: this.state.collapsed, title: {
                        text: "Title 2",
                        onClick: function () {
                            _this.setState(function (state) { return ({ clicks: state.clicks + 1 }); });
                        },
                    } }, "Content 2"))));
    };
    return CollapsibleSectionControlledExample;
}(React.Component));
export { CollapsibleSectionControlledExample };
//# sourceMappingURL=CollapsibleSection.Controlled.Example.js.map