office-ui-fabric-react/lib-es2015/utilities/selection/SelectionPage.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage } from '@uifabric/example-app-base';
import { SelectionBasicExample } from './examples/Selection.Basic.Example';
var SelectionBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/utilities/selection/examples/Selection.Basic.Example.tsx');
var SelectionPage = /** @class */ (function (_super) {
    tslib_1.__extends(SelectionPage, _super);
    function SelectionPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SelectionPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: 'Selection', componentName: 'SelectionExample', exampleCards: React.createElement(ExampleCard, { title: 'Basic Selection Example', code: SelectionBasicExampleCode },
                React.createElement(SelectionBasicExample, null)), overview: React.createElement("div", null,
                React.createElement("p", null, "Selection is a store that maintains the selection state of items in an efficient way. It exposes methods for accessing the selection state given an item index. If the items change, it can resolve the selection if items move in the array."),
                React.createElement("p", null, "SelectionZone is a React component that acts as a mediator between the Selection object and elements. By providing it the Selection instance and rendering content within it, you can have it manage clicking/focus/keyboarding from the DOM and translate into selection updates. You just need to provide the right data-selection-* attributes on elements within each row/tile to give SelectionZone a hint what the intent is."),
                React.createElement("p", null, "SelectionZone also takes in an onItemInvoked callback for when items are invoked. Invoking occurs when a user double clicks a row, presses enter while focused on it, or clicks within an element marked by the data-selection-invoke attribute."),
                React.createElement("p", null, "Available attributes:"),
                React.createElement("ul", null,
                    React.createElement("li", null,
                        React.createElement("b", null, "data-selection-index"),
                        ": the index of the item being represented.This would go on the root of the tile/row."),
                    React.createElement("li", null,
                        React.createElement("b", null, "data-selection-invoke"),
                        ": this boolean flag would be set on the element which should immediately invoke the item on click.There is also a nuanced behavior where we will clear selection and select the item if mousedown occurs on an unselected item."),
                    React.createElement("li", null,
                        React.createElement("b", null, "data-selection-toggle"),
                        ": this boolean flag would be set on the element which should handle toggles.This could be a checkbox or a div."),
                    React.createElement("li", null,
                        React.createElement("b", null, "data-selection-toggle-all"),
                        ": this boolean flag indicates that clicking it should toggle all selection."),
                    React.createElement("li", null,
                        React.createElement("b", null, "data-selection-disabled"),
                        ": allows a branch of the DOM to be marked to ignore input events that alter selections."))), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return SelectionPage;
}(React.Component));
export { SelectionPage };
//# sourceMappingURL=SelectionPage.js.map