office-ui-fabric-react/lib/components/ResizeGroup/ResizeGroupPage.js

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Layer_1 = require("office-ui-fabric-react/lib/Layer");
var example_app_base_1 = require("@uifabric/example-app-base");
var ResizeGroup_OverflowSet_Example_1 = require("./examples/ResizeGroup.OverflowSet.Example");
var ResizeGroupBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx');
var ResizeGroupPage = (function (_super) {
    tslib_1.__extends(ResizeGroupPage, _super);
    function ResizeGroupPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ResizeGroupPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'ResizeGroup', componentName: 'ResizeGroupExample', exampleCards: React.createElement(Layer_1.LayerHost, null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'ResizeGroup', code: ResizeGroupBasicExampleCode },
                    React.createElement(ResizeGroup_OverflowSet_Example_1.ResizeGroupOverflowSetExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("span", null,
                    React.createElement("p", null, "ResizeGroup is a React component that can be used to help fit the right amount of content within a container. The consumer of the ResizeGroup provides some initial data, a reduce function, and a render function. The render function is responsible for populating the contents of a the container when given some data. The initial data should represent the data that should be rendered when the ResizeGroup has infinite width. If the contents returned by the render function do not fit within the ResizeGroup, the reduce function is called to get a version of the data whose rendered width should be smaller than the data that was just rendered."),
                    React.createElement("p", null, "An example scenario is shown below, where controls that do not fit on screen are rendered in an overflow menu. The data in this situation is a list of 'primary' controls that are rendered on the top level and a set of overflow controls rendered in the overflow menu. The initial data in this case has all the controls in the primary set. The implementation of onReduceData moves a control from the overflow well into the primary control set."),
                    React.createElement("p", null, "This component queries the DOM for the dimensions of elements. Too many of these dimension queries will negatively affect the performance of the component and could cause poor interactive performance on websites. One way to reduce the number of measurements performed by the component is to provide a cacheKey in the initial data and in the return value of onReduceData. Two data objects with the same cacheKey are assumed to have the same width, resulting in measurements being skipped for that data object. In the controls with an overflow example, the cacheKey is simply the concatenation of the keys of the controls that appear in the top level."))), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Ensure the width of the parent of this component has a fixed width that does not depend on the dimensions of it's children. Failure to do so may result in ResizeGroup attempting to fill a width of 0px."),
                    React.createElement("li", null, "Ensure that result of rendering the data returned by onReduceData is actually smaller than the previous data."),
                    React.createElement("li", null, "Include a cacheKey in your data to improve performance. Two objects with the same cacheKey are assumed to have the same width, so the ResizeGroup will only store one measurement per resize group."),
                    React.createElement("li", null, "Implement onGrowData for improved performance when the container for the resize group increases in size."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Do any DOM measurements inside your onReduce function as this will degrade performance"),
                    React.createElement("li", null, "Provide too many different return values for onReduce, it will degrade performance"))) }));
    };
    return ResizeGroupPage;
}(React.Component));
exports.ResizeGroupPage = ResizeGroupPage;

//# sourceMappingURL=ResizeGroupPage.js.map