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

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { getRTL } from 'office-ui-fabric-react/lib/Utilities';
import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { List } from 'office-ui-fabric-react/lib/List';
import './List.Basic.Example.scss';
var ListBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(ListBasicExample, _super);
    function ListBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onFilterChanged = _this._onFilterChanged.bind(_this);
        _this.state = {
            filterText: '',
            items: props.items
        };
        return _this;
    }
    ListBasicExample.prototype.render = function () {
        var originalItems = this.props.items;
        var items = this.state.items;
        var resultCountText = items.length === originalItems.length ? '' : " (" + items.length + " of " + originalItems.length + " shown)";
        return (React.createElement(FocusZone, { direction: FocusZoneDirection.vertical },
            React.createElement(TextField, { label: 'Filter by name' + resultCountText, onBeforeChange: this._onFilterChanged }),
            React.createElement(List, { items: items, onRenderCell: this._onRenderCell })));
    };
    ListBasicExample.prototype._onFilterChanged = function (text) {
        var items = this.props.items;
        this.setState({
            filterText: text,
            items: text ? items.filter(function (item) { return item.name.toLowerCase().indexOf(text.toLowerCase()) >= 0; }) : items
        });
    };
    ListBasicExample.prototype._onRenderCell = function (item, index) {
        return (React.createElement("div", { className: "ms-ListBasicExample-itemCell", "data-is-focusable": true },
            React.createElement(Image, { className: "ms-ListBasicExample-itemImage", src: item.thumbnail, width: 50, height: 50, imageFit: ImageFit.cover }),
            React.createElement("div", { className: "ms-ListBasicExample-itemContent" },
                React.createElement("div", { className: "ms-ListBasicExample-itemName" }, item.name),
                React.createElement("div", { className: "ms-ListBasicExample-itemIndex" }, "Item " + index),
                React.createElement("div", { className: "ms-ListBasicExample-itemDesc" }, item.description)),
            React.createElement(Icon, { className: "ms-ListBasicExample-chevron", iconName: getRTL() ? 'ChevronLeft' : 'ChevronRight' })));
    };
    return ListBasicExample;
}(React.Component));
export { ListBasicExample };
//# sourceMappingURL=List.Basic.Example.js.map