office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
62 lines • 7.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var DetailsList_checklist_1 = require("./DetailsList.checklist");
var DetailsList_Basic_Example_1 = require("./examples/DetailsList.Basic.Example");
var DetailsListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx');
var DetailsList_Compact_Example_1 = require("./examples/DetailsList.Compact.Example");
var DetailsListCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx');
var DetailsList_CustomColumns_Example_1 = require("./examples/DetailsList.CustomColumns.Example");
var DetailsListCustomColumnsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx');
var DetailsList_CustomRows_Example_1 = require("./examples/DetailsList.CustomRows.Example");
var DetailsListCustomRowsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx');
var DetailsList_CustomGroupHeaders_Example_1 = require("./examples/DetailsList.CustomGroupHeaders.Example");
var DetailsListCustomGroupHeadersExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx');
var DetailsList_Advanced_Example_1 = require("./examples/DetailsList.Advanced.Example");
var DetailsListAdvancedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx');
var DetailsList_Grouped_Example_1 = require("./examples/DetailsList.Grouped.Example");
var DetailsListGroupedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx');
var DetailsList_DragDrop_Example_1 = require("./examples/DetailsList.DragDrop.Example");
var DetailsListDragDropExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx');
var DetailsList_Documents_Example_1 = require("./examples/DetailsList.Documents.Example");
var DetailsListDocumentsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx');
var DetailsList_NavigatingFocus_Example_1 = require("./examples/DetailsList.NavigatingFocus.Example");
var DetailsListNavigatingFocusExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx');
var DetailsListPage = /** @class */ (function (_super) {
tslib_1.__extends(DetailsListPage, _super);
function DetailsListPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DetailsListPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'DetailsList', componentName: 'DetailsListExample', componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/DetailsList', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Document DetailsList with 500 items, sorting, filtering, marquee selection, justified columns', isOptIn: true, code: DetailsListDocumentsExampleCode },
React.createElement(DetailsList_Documents_Example_1.DetailsListDocumentsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple DetailsList with 500 items, filtering, marquee selection', isOptIn: true, code: DetailsListBasicExampleCode },
React.createElement(DetailsList_Basic_Example_1.DetailsListBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Compact DetailsList with 500 items, filtering, marquee selection', isOptIn: true, code: DetailsListCompactExampleCode },
React.createElement(DetailsList_Compact_Example_1.DetailsListCompactExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Grouped DetailsList', isOptIn: true, code: DetailsListGroupedExampleCode },
React.createElement(DetailsList_Grouped_Example_1.DetailsListGroupedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom item columns with sorting', isOptIn: true, code: DetailsListCustomColumnsExampleCode },
React.createElement(DetailsList_CustomColumns_Example_1.DetailsListCustomColumnsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom item rows', isOptIn: true, code: DetailsListCustomRowsExampleCode },
React.createElement(DetailsList_CustomRows_Example_1.DetailsListCustomRowsExample, null)),
",",
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom group headers', isOptIn: true, code: DetailsListCustomGroupHeadersExampleCode },
React.createElement(DetailsList_CustomGroupHeaders_Example_1.DetailsListCustomGroupHeadersExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Advanced DetailsList of 5000 items, variable row heights', isOptIn: true, code: DetailsListAdvancedExampleCode },
React.createElement(DetailsList_Advanced_Example_1.DetailsListAdvancedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Drag and Drop DetailsList with 10 items', isOptIn: true, code: DetailsListDragDropExampleCode },
React.createElement(DetailsList_DragDrop_Example_1.DetailsListDragDropExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Navigating to new content preserving keyboard focus with initialFocusedIndex', isOptIn: true, code: DetailsListNavigatingFocusExampleCode },
React.createElement(DetailsList_NavigatingFocus_Example_1.DetailsListNavigatingFocusExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts')
] }), overview: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md')), donts: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, DetailsList_checklist_1.DetailsListStatus)) }));
};
return DetailsListPage;
}(React.Component));
exports.DetailsListPage = DetailsListPage;
//# sourceMappingURL=DetailsListPage.js.map