"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
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 TextField_1 = require("office-ui-fabric-react/lib/TextField");
var Image_1 = require("office-ui-fabric-react/lib/Image");
var Icon_1 = require("office-ui-fabric-react/lib/Icon");
var List_1 = require("office-ui-fabric-react/lib/List");
require("./List.Basic.Example.scss");
var ListBasicExample = (function (_super) {
    __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_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.vertical },
            React.createElement(TextField_1.TextField, { label: 'Filter by name' + resultCountText, onBeforeChange: this._onFilterChanged }),
            React.createElement(List_1.List, { items: items, onRenderCell: function (item, index) { return (React.createElement("div", { className: 'ms-ListBasicExample-itemCell', "data-is-focusable": true },
                    React.createElement(Image_1.Image, { className: 'ms-ListBasicExample-itemImage', src: item.thumbnail, width: 50, height: 50, imageFit: Image_1.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_1.Icon, { className: 'ms-ListBasicExample-chevron', iconName: Utilities_1.getRTL() ? 'chevronLeft' : 'chevronRight' }))); } })));
    };
    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
        });
    };
    return ListBasicExample;
}(React.Component));
exports.ListBasicExample = ListBasicExample;

//# sourceMappingURL=List.Basic.Example.js.map
