office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
170 lines • 8.42 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { Check } from 'office-ui-fabric-react/lib/Check';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { Selection, SelectionMode, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
import { createListItems } from '@uifabric/example-app-base';
import './Selection.Example.scss';
var ITEM_COUNT = 100;
/**
* The SelectionItemExample controls and displays the selection state of a single item
*/
var SelectionItemExample = /** @class */ (function (_super) {
tslib_1.__extends(SelectionItemExample, _super);
function SelectionItemExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
SelectionItemExample.prototype.render = function () {
var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, selection = _a.selection;
var isSelected = false;
if (selection && itemIndex !== undefined) {
isSelected = selection.isIndexSelected(itemIndex);
}
return (React.createElement("div", { className: 'ms-SelectionItemExample', "data-is-focusable": true, "data-selection-index": itemIndex },
(selection && selection.canSelectItem(item) && selection.mode !== SelectionMode.none) && (React.createElement("div", { className: 'ms-SelectionItemExample-check', "data-is-focusable": true, "data-selection-toggle": true },
React.createElement(Check, { checked: isSelected }))),
React.createElement("span", { className: 'ms-SelectionItemExample-name' }, item.name)));
};
return SelectionItemExample;
}(React.Component));
export { SelectionItemExample };
/**
* The SelectionBasicExample controls the selection state of all items
*/
var SelectionBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(SelectionBasicExample, _super);
function SelectionBasicExample(props) {
var _this = _super.call(this, props) || 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: createListItems(ITEM_COUNT),
selection: new Selection({ onSelectionChanged: _this._onSelectionChanged }),
selectionMode: SelectionMode.multiple,
canSelect: 'all'
};
_this.state.selection.setItems(_this.state.items, false);
return _this;
}
SelectionBasicExample.prototype.componentDidMount = function () {
this._hasMounted = true;
};
SelectionBasicExample.prototype.render = function () {
var _a = this.state, items = _a.items, selection = _a.selection;
return (React.createElement("div", { className: 'ms-SelectionBasicExample' },
React.createElement(CommandBar, { items: this._getCommandItems() }),
React.createElement(MarqueeSelection, { selection: selection, isEnabled: selection.mode === SelectionMode.multiple },
React.createElement(SelectionZone, { selection: selection,
// tslint:disable-next-line:jsx-no-lambda
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, 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) {
var _this = this;
this.setState(function (previousState) {
var newSelection = new Selection({
onSelectionChanged: _this._onSelectionChanged,
canSelectItem: previousState.canSelect === 'vowels' ? _this._canSelectItem : undefined,
selectionMode: menuItem.data
});
newSelection.setItems(previousState.items, false);
return {
selection: newSelection
};
});
};
SelectionBasicExample.prototype._onCanSelectChanged = function (ev, menuItem) {
var _this = this;
var canSelectItem = (menuItem.data === 'vowels') ? this._canSelectItem : undefined;
this.setState(function (previousState) {
var newSelection = new Selection({ onSelectionChanged: _this._onSelectionChanged, canSelectItem: canSelectItem, selectionMode: previousState.selection.mode });
newSelection.setItems(previousState.items, false);
return {
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, selection = _a.selection, canSelect = _a.canSelect;
return [
{
key: 'selectionMode',
name: 'Selection Mode',
items: [
{
key: SelectionMode[SelectionMode.none],
name: 'None',
canCheck: true,
checked: selection.mode === SelectionMode.none,
onClick: this._onSelectionModeChanged,
data: SelectionMode.none
},
{
key: SelectionMode[SelectionMode.single],
name: 'Single select',
canCheck: true,
checked: selection.mode === SelectionMode.single,
onClick: this._onSelectionModeChanged,
data: SelectionMode.single
},
{
key: SelectionMode[SelectionMode.multiple],
name: 'Multi select',
canCheck: true,
checked: selection.mode === SelectionMode.multiple,
onClick: this._onSelectionModeChanged,
data: SelectionMode.multiple
},
]
},
{
key: 'selectAll',
name: 'Select All',
icon: 'CheckMark',
onClick: this._onToggleSelectAll
},
{
key: 'allowCanSelect',
name: 'Choose selectable items',
items: [
{
key: 'all',
name: 'All items',
canCheck: true,
checked: canSelect === 'all',
onClick: this._onCanSelectChanged,
data: 'all'
},
{
key: 'a',
name: 'Names starting with vowels',
canCheck: true,
checked: canSelect === 'vowels',
onClick: this._onCanSelectChanged,
data: 'vowels'
}
]
}
];
};
return SelectionBasicExample;
}(React.Component));
export { SelectionBasicExample };
//# sourceMappingURL=Selection.Basic.Example.js.map