office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
46 lines (44 loc) • 4.28 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", "react", "../../components/index", "./examples/Selection.Basic.Example", "../../utilities/pageroute", "../../components/App/AppState"], function (require, exports, React, index_1, Selection_Basic_Example_1, pageroute_1, AppState_1) {
"use strict";
var SelectionBasicExampleCode = require('./examples/Selection.Basic.Example.tsx');
var SelectionPage = (function (_super) {
__extends(SelectionPage, _super);
function SelectionPage() {
var _this = _super.call(this) || this;
_this._url = pageroute_1.getPageRouteFromState(AppState_1.AppState, 'Basic components', 'Selection');
return _this;
}
SelectionPage.prototype.render = function () {
return (React.createElement(index_1.ComponentPage, { title: 'Selection', componentName: 'SelectionExample', exampleCards: React.createElement(index_1.ExampleCard, { title: 'Basic Selection Example', code: SelectionBasicExampleCode },
React.createElement(Selection_Basic_Example_1.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."))), route: this._url, isHeaderVisible: this.props.isHeaderVisible }));
};
return SelectionPage;
}(React.Component));
exports.SelectionPage = SelectionPage;
});
//# sourceMappingURL=SelectionPage.js.map