@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
46 lines • 2.72 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Stack } from 'office-ui-fabric-react';
import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { CollapsibleSection } from '@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, 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, gap: 20, 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