jitz-sharepoint-utilities 2.0.14 → 2.0.16

package/lib/controls/JitzGrid.js

@@ -0,0 +1,606 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JitzGrid = exports.DisplayMode = exports.SortOrder = void 0;
+var React = require("react");
+var UtilityService_1 = require("../services/UtilityService");
+var react_1 = require("@fluentui/react");
+var SortOrder;
+(function (SortOrder) {
+    SortOrder["Asc"] = "asc";
+    SortOrder["Desc"] = "desc";
+})(SortOrder || (exports.SortOrder = SortOrder = {}));
+var DisplayMode;
+(function (DisplayMode) {
+    DisplayMode["Grid"] = "Grid";
+    DisplayMode["Tile"] = "Tile";
+})(DisplayMode || (exports.DisplayMode = DisplayMode = {}));
+var JitzGrid = /** @class */ (function (_super) {
+    __extends(JitzGrid, _super);
+    function JitzGrid(props) {
+        var _this = _super.call(this, props) || this;
+        _this._getSelectedItems = function () {
+            if (_this.props.onItemSelect != undefined) {
+                _this.props.onItemSelect(_this._selection.getSelection());
+            }
+            return {};
+        };
+        _this.getSortOrderString = function (sortOrder, isPreviousNavigation) {
+            if (sortOrder == SortOrder.Asc) {
+                return isPreviousNavigation ? "desc" : "asc";
+            }
+            else {
+                return isPreviousNavigation ? "asc" : "desc";
+            }
+        };
+        _this.initalLoad = function () { return __awaiter(_this, void 0, void 0, function () {
+            var list, data, items, rawShowingData_1;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.setState({
+                            items: [],
+                            showingItems: [],
+                            rawData: [],
+                            showingRawData: [],
+                        })];
+                    case 1:
+                        _a.sent();
+                        list = this.props.list;
+                        data = [];
+                        items = [];
+                        return [4 /*yield*/, list
+                                .getItems(this.props.filterQuery, this.props.orderBy, this.props.pageSize || 100)
+                                .then(function (results) {
+                                data = results;
+                                _this.setState({ isItIndexedSearch: false });
+                            })
+                                .catch(function (err) { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, list.getItemsIndexed(this.props.filterQuery, this.props.orderBy, this.props.pageSize || 100)];
+                                        case 1:
+                                            data = _a.sent();
+                                            this.setState({ isItIndexedSearch: true });
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); })];
+                    case 2:
+                        _a.sent();
+                        if (this.props.displayFields != undefined) {
+                            rawShowingData_1 = [];
+                            data.map(function (record) {
+                                var item = {};
+                                if (_this.props.displayFields != undefined) {
+                                    _this.props.displayFields.map(function (field) {
+                                        if (_this.hasKey(record, field)) {
+                                            item[field] =
+                                                typeof record[field] == "object"
+                                                    ? JSON.stringify(record[field])
+                                                    : record[field]; // works fine!
+                                        }
+                                    });
+                                    items.push(item);
+                                    rawShowingData_1.push(record);
+                                }
+                            });
+                            this.setState({
+                                items: items,
+                                showingItems: items,
+                                rawData: items,
+                                showingRawData: rawShowingData_1,
+                                columns: this._buildColumns(items),
+                                list: list,
+                                hasNextPage: (list._nextPageLink != undefined &&
+                                    list._nextPageLink.length > 0) ||
+                                    list.lowerId > 0,
+                            }, function () { });
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.loadMore = function () { return __awaiter(_this, void 0, void 0, function () {
+            var list, data, items_1, rawShowingData_2, _a;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 7, , 8]);
+                        list = this.state.list;
+                        data = [];
+                        if (!this.state.isItIndexedSearch) return [3 /*break*/, 2];
+                        return [4 /*yield*/, list.loadMoreIndexed()];
+                    case 1:
+                        data = _b.sent();
+                        return [3 /*break*/, 4];
+                    case 2: return [4 /*yield*/, list.loadMore()];
+                    case 3:
+                        data = _b.sent();
+                        _b.label = 4;
+                    case 4:
+                        if (!(this.props.displayFields != undefined)) return [3 /*break*/, 6];
+                        items_1 = [];
+                        rawShowingData_2 = [];
+                        data.map(function (record) {
+                            var item = {};
+                            if (_this.props.displayFields != undefined) {
+                                _this.props.displayFields.map(function (field) {
+                                    if (_this.hasKey(record, field)) {
+                                        item[field] =
+                                            typeof record[field] == "object"
+                                                ? JSON.stringify(record[field])
+                                                : record[field]; // works fine!
+                                    }
+                                });
+                                items_1.push(item);
+                                rawShowingData_2.push(record);
+                            }
+                        });
+                        if (data.length == 0) {
+                            //TODO: No more records message
+                        }
+                        return [4 /*yield*/, this.setState({
+                                items: __spreadArray(__spreadArray([], this.state.items, true), items_1, true),
+                                showingItems: __spreadArray(__spreadArray([], this.state.showingItems, true), items_1, true),
+                                rawData: items_1,
+                                showingRawData: __spreadArray(__spreadArray([], this.state.showingRawData, true), rawShowingData_2, true),
+                                list: list,
+                                hasNextPage: (list._nextPageLink != undefined &&
+                                    list._nextPageLink.length > 0) ||
+                                    list.lowerId > 0,
+                            }, function () { })];
+                    case 5:
+                        _b.sent();
+                        _b.label = 6;
+                    case 6: return [3 /*break*/, 8];
+                    case 7:
+                        _a = _b.sent();
+                        return [3 /*break*/, 8];
+                    case 8: return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.downloadData = function () { return __awaiter(_this, void 0, void 0, function () {
+            var items_2, data, _a;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 3, , 4]);
+                        return [4 /*yield*/, this.setState({ downloading: true })];
+                    case 1:
+                        _b.sent();
+                        return [4 /*yield*/, this.initiateDownload()];
+                    case 2:
+                        _b.sent();
+                        items_2 = [];
+                        data = this.state.exportData;
+                        data.map(function (record) {
+                            var item = {};
+                            if (_this.props.exportFields != undefined) {
+                                _this.props.exportFields.map(function (field) {
+                                    if (_this.hasKey(record, field)) {
+                                        if (typeof record[field] == "object") {
+                                            if (record[field] == null || record[field] == undefined) {
+                                                item[field] = "";
+                                            }
+                                            else if (record[field].EMail != undefined) {
+                                                if (record[field].Title != undefined) {
+                                                    item[field + "_Title"] = record[field].Title || "";
+                                                }
+                                                item[field + "_Email"] = record[field].EMail || "";
+                                            }
+                                            else if (record[field].Name != undefined) {
+                                                item[field + "_Name"] = record[field].Name || "";
+                                            }
+                                        }
+                                        else {
+                                            item[field] = record[field];
+                                        }
+                                        // item[field] =
+                                        //   typeof record[field] == "object"
+                                        //     ? JSON.stringify(record[field])
+                                        //     : record[field]; // works fine!
+                                    }
+                                    else if (field.indexOf("/") > 0) {
+                                        var lookUpField = field.split("/")[0];
+                                        var lookUpValueColumn = field.split("/")[1];
+                                        if (typeof record[lookUpField] == "object") {
+                                            item[field] = record[lookUpField][lookUpValueColumn];
+                                        }
+                                    }
+                                });
+                                items_2.push(item);
+                            }
+                        });
+                        UtilityService_1.default.exportJsonAsExcelSheet(items_2, this.props.downloadFileName || "export");
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _a = _b.sent();
+                        return [3 /*break*/, 4];
+                    case 4:
+                        this.setState({ downloading: false });
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.initiateDownload = function () { return __awaiter(_this, void 0, void 0, function () {
+            var list, data, items;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        list = this.props.list;
+                        data = [];
+                        items = [];
+                        return [4 /*yield*/, list
+                                .getItems(this.props.filterQuery, this.props.orderBy, 5000)
+                                .then(function (results) {
+                                data = results;
+                                _this.setState({ isItIndexedDownload: false });
+                            })
+                                .catch(function (err) { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, list.getItemsIndexed(this.props.filterQuery, this.props.orderBy, 5000)];
+                                        case 1:
+                                            data = _a.sent();
+                                            this.setState({ isItIndexedDownload: true });
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); })];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, this.setState({
+                                exportData: data,
+                                hasNextPageToDownload: (list._nextPageLink != undefined && list._nextPageLink.length > 0) ||
+                                    list.lowerId > 0,
+                            })];
+                    case 2:
+                        _a.sent();
+                        if (!(this.state.hasNextPageToDownload === true)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.continueDownload(list)];
+                    case 3:
+                        _a.sent();
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.continueDownload = function (list) { return __awaiter(_this, void 0, void 0, function () {
+            var data, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 8, , 9]);
+                        data = [];
+                        if (!this.state.isItIndexedDownload) return [3 /*break*/, 2];
+                        return [4 /*yield*/, list.loadMoreIndexed()];
+                    case 1:
+                        data = _b.sent();
+                        return [3 /*break*/, 4];
+                    case 2: return [4 /*yield*/, list.loadMore()];
+                    case 3:
+                        data = _b.sent();
+                        _b.label = 4;
+                    case 4: return [4 /*yield*/, this.setState({
+                            exportData: __spreadArray(__spreadArray([], this.state.exportData, true), data, true),
+                            hasNextPageToDownload: (list._nextPageLink != undefined && list._nextPageLink.length > 0) ||
+                                list.lowerId > 0,
+                        })];
+                    case 5:
+                        _b.sent();
+                        if (!(this.state.hasNextPageToDownload === true)) return [3 /*break*/, 7];
+                        return [4 /*yield*/, this.continueDownload(list)];
+                    case 6:
+                        _b.sent();
+                        _b.label = 7;
+                    case 7: return [3 /*break*/, 9];
+                    case 8:
+                        _a = _b.sent();
+                        return [3 /*break*/, 9];
+                    case 9: return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.itemSelected = function (item, index) { };
+        _this._buildColumns = function (items) {
+            var columns = [];
+            if (items != null && items.length > 0) {
+                columns = (0, react_1.buildColumns)(items);
+            }
+            else if (_this.state.items != null &&
+                _this.state.items != undefined &&
+                _this.state.items.length > 0) {
+                columns = (0, react_1.buildColumns)(_this.state.items);
+            }
+            var idIndex = 0;
+            columns.map(function (raw, i) {
+                raw.name = raw.name.split("_").join(" ");
+                raw.name = raw.name.replace(/\b\w/g, function (l) {
+                    return l.toUpperCase();
+                });
+                if (raw.name == "Id") {
+                    idIndex = i;
+                }
+            });
+            // columns = columns.filter(matchedColumns => matchedColumns.name != "Id" && matchedColumns.name !="ID");
+            if (_this.props.modifyColumns != undefined &&
+                _this.props.modifyColumns != null) {
+                columns = _this.props.modifyColumns(columns);
+            }
+            return columns;
+        };
+        _this._renderItemColumn = function (item, index, column) {
+            if (_this.state.showingRawData != null &&
+                _this.state.showingRawData != undefined &&
+                _this.state.showingRawData.length > 0) {
+                if (column != undefined && column.fieldName != undefined) {
+                    var fieldContent = item[column.fieldName];
+                    if (_this.props.renderCustomColumns != undefined &&
+                        _this.props.renderCustomColumns != undefined) {
+                        return _this.props.renderCustomColumns(fieldContent, column.key, _this.state.showingRawData[index || 0]);
+                    }
+                    else {
+                        return React.createElement("span", null, fieldContent);
+                    }
+                }
+            }
+        };
+        _this._onColumnClick = function (event, column) {
+            var columns = _this.state.columns;
+            var items = _this.state.items;
+            if (column != undefined && column.fieldName != undefined) {
+                var isSortedDescending_1 = column.isSortedDescending;
+                // If we've sorted this column, flip it.
+                if (column.isSorted) {
+                    isSortedDescending_1 = !isSortedDescending_1;
+                }
+                // Sort the items.
+                items = items.concat([]).sort(function (a, b) {
+                    var firstValue = column.fieldName != undefined ? a[column.fieldName] : undefined;
+                    var secondValue = column.fieldName != undefined ? b[column.fieldName] : undefined;
+                    if (isSortedDescending_1) {
+                        return firstValue > secondValue ? -1 : 1;
+                    }
+                    else {
+                        return firstValue > secondValue ? 1 : -1;
+                    }
+                });
+                // Reset the items and columns to match the state.
+                _this.setState({
+                    items: items,
+                    columns: columns.map(function (col) {
+                        col.isSorted = col.key === column.key;
+                        if (col.isSorted) {
+                            col.isSortedDescending = isSortedDescending_1;
+                        }
+                        return col;
+                    }),
+                });
+            }
+        };
+        _this._onItemInvoked = function (item, index) {
+            if (_this.props.onItemInvoked != undefined &&
+                _this.props.onItemInvoked != null) {
+                _this.props.onItemInvoked(item, index);
+            }
+        };
+        var item = {};
+        if (props.displayFields) {
+            props.displayFields.map(function (field) {
+                item[field] = "";
+            });
+        }
+        _this.state = {
+            list: _this.props.list,
+            listForDownload: _this.props.list,
+            items: [],
+            showingItems: [],
+            rawData: [],
+            showingRawData: [],
+            exportData: [],
+            totalCount: 0,
+            columns: [],
+            displayMode: props.displayMode || DisplayMode.Tile,
+            filterQuery: props.filterQuery,
+            isItIndexedSearch: false,
+            isItIndexedDownload: false,
+            processing: false,
+            downloading: false,
+            hasNextPage: false,
+            hasNextPageToDownload: false,
+        };
+        _this._selection = new react_1.Selection({
+            onSelectionChanged: function () {
+                return _this.setState({ selectedItems: _this._getSelectedItems() });
+            },
+        });
+        return _this;
+    }
+    // private hasKey<O>(obj: O, key: keyof any): key is keyof O {
+    //   return key in obj;
+    // }
+    JitzGrid.prototype.hasKey = function (obj, key) {
+        return key in obj;
+    };
+    JitzGrid.prototype.componentDidMount = function () {
+        this.initalLoad();
+    };
+    JitzGrid.prototype.componentWillReceiveProps = function (nextProps) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(nextProps.filterQuery != this.state.filterQuery)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.setState({ filterQuery: nextProps.filterQuery })];
+                    case 1:
+                        _a.sent();
+                        this.initalLoad();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    JitzGrid.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("div", { className: "ms-Grid", dir: "ltr" },
+            this.props.hasExport == true &&
+                this.state.showingItems != undefined &&
+                this.state.showingItems.length > 0 && (React.createElement("div", { className: "ms-Grid-row" },
+                React.createElement("div", { className: "ms-Grid-col ms-sm12 ms-md12 ms-lg12" },
+                    React.createElement(react_1.CommandBar, { farItems: [
+                            {
+                                key: "grid",
+                                text: "",
+                                title: "Grid View",
+                                disabled: this.state.displayMode === DisplayMode.Grid,
+                                iconProps: { iconName: "Table" },
+                                onClick: function () {
+                                    _this.setState({ displayMode: DisplayMode.Grid });
+                                },
+                            },
+                            {
+                                key: "tile",
+                                text: "",
+                                title: "Tile View",
+                                disabled: this.state.displayMode === DisplayMode.Tile,
+                                iconProps: { iconName: "Tiles" },
+                                onClick: function () {
+                                    _this.setState({ displayMode: DisplayMode.Tile });
+                                },
+                            },
+                            {
+                                key: "export",
+                                text: "",
+                                title: "Download",
+                                iconProps: { iconName: "Download" },
+                                onClick: function () {
+                                    _this.downloadData();
+                                },
+                            },
+                        ], items: [
+                            {
+                                key: "total",
+                                text: "Showing ".concat(this.state.items.length, " records"),
+                                title: "Showing ".concat(this.state.items.length, " records"),
+                                onClick: function () { },
+                            },
+                            // {
+                            //   key: "loadMore",
+                            //   text: "Try to get more older records",
+                            //   title: "Try to get more older records",
+                            //   iconProps: { iconName: "DoubleChevronDown" },
+                            //   onClick: () => {
+                            //     if (this.state.processing != true)
+                            //       this.setState({ processing: true }, async () => {
+                            //         await this.loadMore();
+                            //         this.setState({ processing: false });
+                            //       });
+                            //   },
+                            // },
+                        ] }),
+                    this.state.downloading && React.createElement(react_1.Spinner, { label: "Please wait..." })))),
+            (this.state.showingItems == undefined ||
+                this.state.showingItems.length > 0) && (React.createElement("div", { className: "ms-Grid-row" },
+                React.createElement("div", { className: "ms-Grid-col ms-sm12 ms-md12 ms-lg12" },
+                    this.state.displayMode === DisplayMode.Grid && (React.createElement(react_1.DetailsList, { items: this.state.showingItems != undefined
+                            ? this.state.showingItems
+                            : [], setKey: "Id", columns: this.state.columns, onRenderItemColumn: this._renderItemColumn, onColumnHeaderClick: this._onColumnClick, onItemInvoked: this._onItemInvoked, onShouldVirtualize: function () { return false; }, onColumnHeaderContextMenu: this._onColumnHeaderContextMenu, onActiveItemChanged: function (item, index) {
+                            _this.itemSelected(item, index);
+                        }, selectionMode: this.props.selectionMode || react_1.SelectionMode.none, selection: this._selection })),
+                    this.state.displayMode === DisplayMode.Tile &&
+                        this.state.showingItems != undefined &&
+                        this.state.showingItems.length > 0 &&
+                        this.state.showingItems.map(function (item) {
+                            return _this.props.tileComponent != undefined ? (_this.props.tileComponent(item)) : (React.createElement(React.Fragment, null));
+                        })))),
+            (this.state.showingItems == undefined ||
+                this.state.showingItems.length == 0) && (React.createElement("div", { className: "ms-Grid-row" },
+                React.createElement("div", { className: "ms-Grid-col ms-sm12 ms-md12 ms-lg12 centralizeContent  ".concat(this.props.noRecordsMessageCssClass || "") }, this.props.noRecordsMessage || "No records found"))),
+            React.createElement("div", { className: "ms-Grid-row" },
+                React.createElement("div", { className: "ms-Grid-col ms-sm12 ms-md12 ms-lg12 centralizeContent loadMoreGrid  ".concat(this.props.noRecordsMessageCssClass || "") },
+                    this.state.processing !== true && this.state.hasNextPage && (React.createElement(react_1.ActionButton, { iconProps: { iconName: "DoubleChevronDown" }, onClick: function () {
+                            _this.setState({ processing: true }, function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, this.loadMore()];
+                                        case 1:
+                                            _a.sent();
+                                            this.setState({ processing: false });
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); });
+                        } }, "Try to get more older records")),
+                    this.state.processing && React.createElement(react_1.Spinner, { label: "Please wait..." })))));
+    };
+    JitzGrid.prototype._onColumnHeaderContextMenu = function (column, ev) {
+        // console.log(`column ${column!.key} contextmenu opened.`);
+    };
+    return JitzGrid;
+}(React.Component));
+exports.JitzGrid = JitzGrid;

package/lib/controls/JitzImage.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface IJitzImageProps {
+    email?: string;
+    siteUrl: string;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export interface IJitzImageState {
+}
+export declare class JitzImage1 extends React.Component<IJitzImageProps, IJitzImageState> {
+    constructor(props: IJitzImageProps, state: IJitzImageState);
+    render(): React.ReactElement<IJitzImageProps>;
+}

package/lib/controls/JitzImage.js

@@ -0,0 +1,37 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JitzImage1 = void 0;
+var React = require("react");
+var react_1 = require("@fluentui/react");
+var JitzImage1 = /** @class */ (function (_super) {
+    __extends(JitzImage1, _super);
+    function JitzImage1(props, state) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {};
+        return _this;
+    }
+    JitzImage1.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(react_1.Image, { src: "".concat(encodeURIComponent(this.props.email || "")), alt: "", onError: function (e) {
+                e.target.onerror = null;
+                e.target.src = "".concat(_this.props.siteUrl, "/_layouts/15/userphoto.aspx?size=L&accountname=").concat(_this.props.email);
+            }, width: this.props.width, height: this.props.height, className: this.props.className }));
+    };
+    return JitzImage1;
+}(React.Component));
+exports.JitzImage1 = JitzImage1;