office-ui-fabric-react/lib-es2015/components/List/ListPage.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
import { ListBasicExample } from './examples/List.Basic.Example';
import { ListGridExample } from './examples/List.Grid.Example';
import { ListScrollingExample } from './examples/List.Scrolling.Example';
import { ListGhostingExample } from './examples/List.Ghosting.Example';
import { createListItems } from '@uifabric/example-app-base';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { ListStatus } from './List.checklist';
var ListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx');
var ListGridExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx');
var ListScrollingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx');
var ListGhostingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Ghosting.Example.tsx');
var _cachedItems;
var ListPage = /** @class */ (function (_super) {
    tslib_1.__extends(ListPage, _super);
    function ListPage(props) {
        var _this = _super.call(this, props) || this;
        _cachedItems = _cachedItems || createListItems(5000);
        return _this;
    }
    ListPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: 'List', componentName: 'ListExample', exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: 'List of 5000 grid items', isOptIn: true, code: ListGridExampleCode },
                    React.createElement(ListGridExample, { items: _cachedItems })),
                React.createElement(ExampleCard, { title: 'List of 5000 variable height items', isOptIn: true, code: ListBasicExampleCode },
                    React.createElement(ListBasicExample, { items: _cachedItems })),
                React.createElement(ExampleCard, { title: 'Scrolling items into view', isOptIn: true, code: ListScrollingExampleCode },
                    React.createElement(ListScrollingExample, { items: _cachedItems })),
                React.createElement(ExampleCard, { title: 'Rendering ghost items while the list is scrolling', isOptIn: true, code: ListGhostingExampleCode },
                    React.createElement(ListGhostingExample, { items: _cachedItems }))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/List/List.types.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null,
                    React.createElement("span", null, "List provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately.")),
                React.createElement("p", null,
                    React.createElement("b", null, "Performance is important, and DOM content is expensive. Therefore limit what you render."),
                    " Unlike a simple for loop that renders all items in a set, a List uses ui virtualization. It only renders a subset of items, and as you scroll around, the subset of rendered content is shifted to what you're looking at. This gives a much better experience for large sets, especially when the per-item components are complex/render intensive/network intensive."),
                React.createElement("p", null, "Lists break down the set of items passed in into pages. Only pages within a \"materialized window\" are actually rendered. As that window changes due to scroll events, pages that fall outside that window are removed, and their layout space is remembered and pushed into spacer elements. This gives the user the experience of browsing massive amounts of content but only using a small number of actual elements. This gives the browser much less layout to resolve, and gives React DOM diffing much less content to worry about.")), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, ListStatus)) }));
    };
    return ListPage;
}(React.Component));
export { ListPage };
//# sourceMappingURL=ListPage.js.map