office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
45 lines • 3.16 kB
JavaScript
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