@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
44 lines • 3.07 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/Button", "@uifabric/experiments/lib/CollapsibleSection"], function (require, exports, tslib_1, React, office_ui_fabric_react_1, FocusZone_1, Button_1, CollapsibleSection_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// tslint:disable:jsx-no-lambda
var CollapsibleSectionControlledExample = /** @class */ (function (_super) {
tslib_1.__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_1.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(office_ui_fabric_react_1.Stack, { horizontal: true, gap: 20, verticalAlign: "center" },
React.createElement(Button_1.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_1.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_1.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));
exports.CollapsibleSectionControlledExample = CollapsibleSectionControlledExample;
});
//# sourceMappingURL=CollapsibleSection.Controlled.Example.js.map