UNPKG

office-ui-fabric-react

Version:

Reusable React components for building experiences for Office 365.

154 lines (153 loc) 8.22 kB
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', '../../../../index', '../../../../components/Check/Check', '../../../../utilities/selection/index', '../../../utilities/data', './Selection.Example.scss'], function (require, exports, React, index_1, Check_1, index_2, data_1) { "use strict"; var ITEM_COUNT = 100; /** * The SelectionBasicExample controls the selection state of all items */ var SelectionBasicExample = (function (_super) { __extends(SelectionBasicExample, _super); function SelectionBasicExample() { _super.call(this); this._hasMounted = false; this._onSelectionChanged = this._onSelectionChanged.bind(this); this._onSelectionModeChanged = this._onSelectionModeChanged.bind(this); this._onToggleSelectAll = this._onToggleSelectAll.bind(this); this._onCanSelectChanged = this._onCanSelectChanged.bind(this); this._canSelectItem = this._canSelectItem.bind(this); this.state = { items: data_1.createListItems(ITEM_COUNT), selection: new index_2.Selection({ onSelectionChanged: this._onSelectionChanged }), selectionMode: index_2.SelectionMode.multiple, canSelect: 'all' }; this.state.selection.setItems(this.state.items, false); } SelectionBasicExample.prototype.componentDidMount = function () { this._hasMounted = true; }; SelectionBasicExample.prototype.render = function () { var _a = this.state, items = _a.items, selection = _a.selection, selectionMode = _a.selectionMode; return (React.createElement("div", {className: 'ms-SelectionBasicExample'}, React.createElement(index_1.CommandBar, {items: this._getCommandItems()}), React.createElement(index_1.MarqueeSelection, {selection: selection, isEnabled: selectionMode === index_2.SelectionMode.multiple}, React.createElement(index_2.SelectionZone, {selection: selection, selectionMode: selectionMode, onItemInvoked: function (item) { return alert('item invoked: ' + item.name); }}, items.map(function (item, index) { return (React.createElement(SelectionItemExample, {ref: 'detailsGroup_' + index, key: item.key, item: item, itemIndex: index, selectionMode: selectionMode, selection: selection})); })) ))); }; SelectionBasicExample.prototype._onSelectionChanged = function () { if (this._hasMounted) { this.forceUpdate(); } }; SelectionBasicExample.prototype._onToggleSelectAll = function () { var selection = this.state.selection; selection.toggleAllSelected(); }; SelectionBasicExample.prototype._onSelectionModeChanged = function (ev, menuItem) { this.setState({ selectionMode: menuItem.data }); }; SelectionBasicExample.prototype._onCanSelectChanged = function (ev, menuItem) { var canSelectItem = (menuItem.data === 'vowels') ? this._canSelectItem : undefined; var newSelection = new index_2.Selection({ onSelectionChanged: this._onSelectionChanged, canSelectItem: canSelectItem }); newSelection.setItems(this.state.items, false); this.setState({ selection: newSelection, canSelect: (menuItem.data === 'vowels') ? 'vowels' : 'all' }); }; SelectionBasicExample.prototype._canSelectItem = function (item) { return item.name && (item.name.indexOf('a') === 0 || item.name.indexOf('e') === 0 || item.name.indexOf('i') === 0 || item.name.indexOf('o') === 0 || item.name.indexOf('u') === 0); }; SelectionBasicExample.prototype._getCommandItems = function () { var _a = this.state, selectionMode = _a.selectionMode, canSelect = _a.canSelect; return [ { key: 'selectionMode', name: 'Selection Mode', items: [ { key: index_2.SelectionMode[index_2.SelectionMode.none], name: 'None', canCheck: true, isChecked: selectionMode === index_2.SelectionMode.none, onClick: this._onSelectionModeChanged, data: index_2.SelectionMode.none }, { key: index_2.SelectionMode[index_2.SelectionMode.single], name: 'Single select', canCheck: true, isChecked: selectionMode === index_2.SelectionMode.single, onClick: this._onSelectionModeChanged, data: index_2.SelectionMode.single }, { key: index_2.SelectionMode[index_2.SelectionMode.multiple], name: 'Multi select', canCheck: true, isChecked: selectionMode === index_2.SelectionMode.multiple, onClick: this._onSelectionModeChanged, data: index_2.SelectionMode.multiple }, ] }, { key: 'selectAll', name: 'Select All', icon: 'check', onClick: this._onToggleSelectAll }, { key: 'allowCanSelect', name: 'Choose selectable items', items: [ { key: 'all', name: 'All items', canCheck: true, isChecked: canSelect === 'all', onClick: this._onCanSelectChanged, data: 'all' }, { key: 'a', name: 'Names starting with vowels', canCheck: true, isChecked: canSelect === 'vowels', onClick: this._onCanSelectChanged, data: 'vowels' } ] } ]; }; return SelectionBasicExample; }(React.Component)); exports.SelectionBasicExample = SelectionBasicExample; /** * The SelectionItemExample controls and displays the selection state of a single item */ var SelectionItemExample = (function (_super) { __extends(SelectionItemExample, _super); function SelectionItemExample() { _super.apply(this, arguments); } SelectionItemExample.prototype.render = function () { var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, selection = _a.selection, selectionMode = _a.selectionMode; var isSelected = selection.isIndexSelected(itemIndex); return (React.createElement("div", {className: 'ms-SelectionItemExample', "data-selection-index": itemIndex}, (selectionMode !== index_2.SelectionMode.none) && (React.createElement("div", {className: 'ms-SelectionItemExample-check', "data-selection-toggle": true}, React.createElement(Check_1.Check, {isChecked: isSelected}) )), React.createElement("span", {className: 'ms-SelectionItemExample-name'}, item.name))); }; return SelectionItemExample; }(React.Component)); exports.SelectionItemExample = SelectionItemExample; });