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

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/TextField", "office-ui-fabric-react/lib/Image", "office-ui-fabric-react/lib/Icon", "office-ui-fabric-react/lib/List", "./List.Basic.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, FocusZone_1, TextField_1, Image_1, Icon_1, List_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    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_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: 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_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' })));
        };
        return ListBasicExample;
    }(React.Component));
    exports.ListBasicExample = ListBasicExample;
});
//# sourceMappingURL=List.Basic.Example.js.map