office-ui-fabric-react/lib/components/List/examples/List.Scrolling.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { css } from 'office-ui-fabric-react/lib/Utilities';
import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { List } from 'office-ui-fabric-react/lib/List';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import './List.Scrolling.Example.scss';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
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._onChangeText = function (ev, value) {
            _this._scroll(parseInt(value, 10) || 0, _this.state.scrollToMode);
        };
        _this._onDropdownChange = function (event, 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);
        };
        _this._onRenderCell = function (item, index) {
            return (React.createElement("div", { className: "ms-ListScrollingExample-itemCell", "data-is-focusable": true },
                React.createElement("div", { className: css('ms-ListScrollingExample-itemContent', index % 2 === 0 && 'ms-ListScrollingExample-itemContent-even', index % 2 === 1 && 'ms-ListScrollingExample-itemContent-odd') },
                    index,
                    " \u00A0 ",
                    item.name)));
        };
        _this._scrollRelative = function (delta) {
            return function () {
                _this._scroll(_this.state.selectedIndex + delta, _this.state.scrollToMode);
            };
        };
        _this._scroll = function (index, scrollToMode) {
            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);
            });
        };
        _this._resolveList = function (list) {
            _this._list = list;
        };
        _this._onShowItemIndexInViewChanged = function (event, checked) {
            _this.setState({
                showItemIndexInView: checked
            });
        };
        _this.state = {
            selectedIndex: 0,
            scrollToMode: 0 /* auto */,
            showItemIndexInView: false
        };
        return _this;
    }
    ListScrollingExample.prototype.render = function () {
        var items = this.props.items;
        return (React.createElement(FocusZone, { direction: FocusZoneDirection.vertical },
            React.createElement("div", null,
                React.createElement(DefaultButton, { onClick: this._scrollRelative(-10) }, "-10"),
                React.createElement(DefaultButton, { onClick: this._scrollRelative(-1) }, "-1"),
                React.createElement(DefaultButton, { onClick: this._scrollRelative(1) }, "+1"),
                React.createElement(DefaultButton, { onClick: this._scrollRelative(10) }, "+10")),
            React.createElement(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' }
                ], onChange: this._onDropdownChange }),
            React.createElement("div", null,
                "Scroll item index:",
                React.createElement(TextField, { value: this.state.selectedIndex.toString(10), onChange: this._onChangeText })),
            React.createElement("div", null,
                React.createElement(Checkbox, { label: "Show index of the first item in view when unmounting", checked: this.state.showItemIndexInView, onChange: this._onShowItemIndexInViewChanged })),
            React.createElement("div", { className: "ms-ListScrollingExample-container", "data-is-scrollable": true },
                React.createElement(List, { ref: this._resolveList, items: items, getPageHeight: this._getPageHeight, onRenderCell: this._onRenderCell }))));
    };
    ListScrollingExample.prototype.componentWillUnmount = function () {
        if (this.state.showItemIndexInView) {
            var itemIndexInView = this._list.getStartItemIndexInView(function (idx) { return (idx % 2 === 0 ? evenItemHeight : oddItemHeight); } /* measureItem */);
            alert('unmounting, getting first item index that was in view: ' + itemIndexInView);
        }
    };
    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;
    };
    return ListScrollingExample;
}(React.Component));
export { ListScrollingExample };
//# sourceMappingURL=List.Scrolling.Example.js.map