office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
103 lines • 5.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var FocusZone_1 = require("office-ui-fabric-react/lib/FocusZone");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Dropdown_1 = require("office-ui-fabric-react/lib/Dropdown");
var List_1 = require("office-ui-fabric-react/lib/List");
var TextField_1 = require("office-ui-fabric-react/lib/TextField");
require("./List.Scrolling.Example.scss");
var evenItemHeight = 25;
var oddItemHeight = 50;
var numberOfItemsOnPage = 10;
var ListScrollingExample = /** @class */ (function (_super) {
tslib_1.__extends(ListScrollingExample, _super);
function ListScrollingExample(props) {
var _this = _super.call(this, props) || this;
_this._resolveList = function (list) {
_this._list = list;
};
_this.state = {
selectedIndex: 0,
scrollToMode: 0 /* auto */
};
return _this;
}
ListScrollingExample.prototype.render = function () {
var items = this.props.items;
return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.vertical },
React.createElement("div", null,
React.createElement(Button_1.DefaultButton, { onClick: this._scrollRelative(-10) }, "-10"),
React.createElement(Button_1.DefaultButton, { onClick: this._scrollRelative(-1) }, "-1"),
React.createElement(Button_1.DefaultButton, { onClick: this._scrollRelative(1) }, "+1"),
React.createElement(Button_1.DefaultButton, { onClick: this._scrollRelative(10) }, "+10")),
React.createElement(Dropdown_1.Dropdown, { placeHolder: 'Select an Option', label: 'Scroll To Mode:', id: 'Scrolldrop1', ariaLabel: 'Scroll To Mode', defaultSelectedKey: 'auto', options: [
{ key: 'auto', text: 'Auto' },
{ key: 'top', text: 'Top' },
{ key: 'bottom', text: 'Bottom' },
{ key: 'center', text: 'Center' },
], onChanged: this._onDropdownChanged }),
React.createElement("div", null,
"Scroll item index:",
React.createElement(TextField_1.TextField, { value: this.state.selectedIndex.toString(10), onChanged: this._onChangeText })),
React.createElement("div", { className: 'ms-ListScrollingExample-container', "data-is-scrollable": true },
React.createElement(List_1.List, { ref: this._resolveList, items: items, getPageHeight: this._getPageHeight, onRenderCell: this._onRenderCell }))));
};
ListScrollingExample.prototype._getPageHeight = function (idx) {
var h = 0;
for (var i = idx; i < idx + numberOfItemsOnPage; ++i) {
var isEvenRow = i % 2 === 0;
h += isEvenRow ? evenItemHeight : oddItemHeight;
}
return h;
};
ListScrollingExample.prototype._onChangeText = function (value) {
this._scroll(parseInt(value, 10) || 0, this.state.scrollToMode);
};
ListScrollingExample.prototype._onDropdownChanged = function (option) {
var scrollMode = this.state.scrollToMode;
switch (option.key) {
case 'auto':
scrollMode = 0 /* auto */;
break;
case 'top':
scrollMode = 1 /* top */;
break;
case 'bottom':
scrollMode = 2 /* bottom */;
break;
case 'center':
scrollMode = 3 /* center */;
break;
}
this._scroll(this.state.selectedIndex, scrollMode);
};
ListScrollingExample.prototype._onRenderCell = function (item, index) {
return (React.createElement("div", { className: 'ms-ListScrollingExample-itemCell', "data-is-focusable": true },
React.createElement("div", { className: Utilities_1.css('ms-ListScrollingExample-itemContent', (index % 2 === 0) && 'ms-ListScrollingExample-itemContent-even', (index % 2 === 1) && 'ms-ListScrollingExample-itemContent-odd') },
index,
" \u00A0 ",
item.name)));
};
ListScrollingExample.prototype._scrollRelative = function (delta) {
var _this = this;
return function () {
_this._scroll(_this.state.selectedIndex + delta, _this.state.scrollToMode);
};
};
ListScrollingExample.prototype._scroll = function (index, scrollToMode) {
var _this = this;
var updatedSelectedIndex = Math.min(Math.max(index, 0), this.props.items.length - 1);
this.setState({
selectedIndex: updatedSelectedIndex,
scrollToMode: scrollToMode
}, function () {
_this._list.scrollToIndex(updatedSelectedIndex, function (idx) { return idx % 2 === 0 ? evenItemHeight : oddItemHeight; }, scrollToMode);
});
};
return ListScrollingExample;
}(React.Component));
exports.ListScrollingExample = ListScrollingExample;
//# sourceMappingURL=List.Scrolling.Example.js.map