@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
48 lines • 2.93 kB
JavaScript
;
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 FocusZone_1 = require("office-ui-fabric-react/lib/FocusZone");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var CollapsibleSection_1 = require("@uifabric/experiments/lib/CollapsibleSection");
// 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