@pnp/spfx-controls-react 3.24.0-beta.2252463 → 3.24.0-beta.2280641

package/lib-commonjs/controls/filePicker/controls/FolderTile/IFolderTileProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IFolderTileProps.js.map

package/lib-commonjs/controls/filePicker/controls/FolderTile/IFolderTileProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFolderTileProps.js","sourceRoot":"","sources":["../../../../../src/controls/filePicker/controls/FolderTile/IFolderTileProps.ts"],"names":[],"mappings":""}

package/lib-commonjs/controls/filePicker/controls/FolderTile/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FolderTile"), exports);
+tslib_1.__exportStar(require("./IFolderTileProps"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/controls/filePicker/controls/FolderTile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/controls/filePicker/controls/FolderTile/index.ts"],"names":[],"mappings":";;;AAAA,uDAA6B;AAC7B,6DAAmC"}

package/lib-commonjs/controls/filePicker/controls/TilesList/ITilesListProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ITilesListProps.js.map

package/lib-commonjs/controls/filePicker/controls/TilesList/ITilesListProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ITilesListProps.js","sourceRoot":"","sources":["../../../../../src/controls/filePicker/controls/TilesList/ITilesListProps.ts"],"names":[],"mappings":""}

package/lib-commonjs/controls/filePicker/controls/TilesList/TilesList.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TilesList = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var TilesList_module_scss_1 = tslib_1.__importDefault(require("./TilesList.module.scss"));
+var Selection_1 = require("@fluentui/react/lib/Selection");
+var List_1 = require("@fluentui/react/lib/List");
+var FocusZone_1 = require("@fluentui/react/lib/FocusZone");
+var Utilities_1 = require("@fluentui/react/lib/Utilities");
+var FolderTile_1 = require("../FolderTile");
+var DocumentTile_1 = require("../DocumentTile");
+var sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
+/**
+ * Rows per page
+ */
+var ROWS_PER_PAGE = 3;
+/**
+ * Maximum row height
+ */
+var MAX_ROW_HEIGHT = 250;
+/**
+ * Maximum number of cells per page
+ */
+var CELLS_PER_PAGE = 48;
+/**
+ * Standard tile margin
+ */
+var STANDARD_TILE_MARGIN = 4;
+/**
+ * Standard left and right padding
+ */
+var TILE_HORZ_PADDING = 32;
+/**
+ * Standard bottom margin
+ */
+var BOTTOM_MARGIN = 36;
+var TilesList = /** @class */ (function (_super) {
+    tslib_1.__extends(TilesList, _super);
+    function TilesList(props) {
+        var _this = _super.call(this, props) || this;
+        _this._listElem = undefined;
+        /**
+        * Gets called what a file is selected.
+        */
+        _this._handleItemInvoked = function (item) {
+            // If a file is selected, open the library
+            if (item.isFolder) {
+                _this.props.onFolderOpen(item);
+            }
+            else {
+                // Otherwise, remember it was selected
+                _this.props.onFileSelected(item);
+            }
+        };
+        /**
+          * Calculates how many items there should be in the page
+          */
+        _this._getItemCountForPage = function (itemIndex, surfaceRect) {
+            if (itemIndex === 0) {
+                if (surfaceRect.width === 0) {
+                    //surfaceRect.width is 0 on load of this component, so it won't render properly.
+                    //setting _pageWidth to -1 will re-render the entire component so surfaceRect.width will be returned correctly
+                    _this._pageWidth = -1;
+                }
+                else {
+                    _this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);
+                    _this._columnWidth = Math.floor(surfaceRect.width / _this._columnCount);
+                    _this._pageWidth = surfaceRect.width;
+                }
+                _this._rowHeight = _this._columnWidth;
+            }
+            // Get the list of items
+            var items = _this.props.items;
+            var isFolder = items && items.length > itemIndex && items[itemIndex] ? items[itemIndex].isFolder : undefined;
+            // Group items by folders and files
+            var pageLength = 0;
+            for (var index = itemIndex; index < items.length; index++) {
+                var element = items[index];
+                if (element && element.isFolder === isFolder) {
+                    pageLength++;
+                }
+                else {
+                    break;
+                }
+            }
+            // Return the page lenght, up to the maximum number of cells per page
+            return Math.min(pageLength, CELLS_PER_PAGE);
+        };
+        /**
+         * Renders a custom list page
+         */
+        _this._onRenderPage = function (pageProps, _defaultRender) {
+            var page = pageProps.page, pageClassName = pageProps.className, divProps = tslib_1.__rest(pageProps, ["page", "className"]);
+            var items = page.items;
+            // If there are not items to be rendered or the last one is a null mark -> request for next page data
+            if (!items) {
+                return null;
+            }
+            return (React.createElement("div", tslib_1.__assign({}, divProps, { className: (0, Utilities_1.css)(pageClassName, TilesList_module_scss_1.default.listPage), key: page.key }),
+                React.createElement("div", { className: TilesList_module_scss_1.default.grid, style: {
+                        width: _this._pageWidth,
+                        marginTop: -STANDARD_TILE_MARGIN,
+                        marginBottom: BOTTOM_MARGIN,
+                        marginLeft: -STANDARD_TILE_MARGIN,
+                        marginRight: -STANDARD_TILE_MARGIN
+                    } }, items.map(function (item, index) {
+                    return _this._onRenderCell(item, index);
+                }))));
+        };
+        /** Calculates the list "page" height (a.k.a. row) */
+        _this._getPageHeight = function () {
+            return _this._rowHeight * ROWS_PER_PAGE;
+        };
+        /**
+         * Renders a file folder cover
+         */
+        _this._onRenderCell = function (item, index) {
+            var _a;
+            if (!item) {
+                _this.props.onNextPageDataRequest();
+                return null;
+            }
+            //If List component have more than 1 page, it starts to index items from 0,
+            //but for Selection index should be unique
+            var itemIndex = (0, sp_lodash_subset_1.findIndex)(_this.props.items, item);
+            var isSelected = ((_a = _this.props.filePickerResults) === null || _a === void 0 ? void 0 : _a.filter(function (x) { return x.fileAbsoluteUrl === item.absoluteUrl; }).length) > 0;
+            // I know this is a lot of divs and spans inside of each other, but my
+            // goal was to mimic the HTML and style of the out-of-the-box file picker
+            // to the best of my ability.
+            return (React.createElement("div", { className: TilesList_module_scss_1.default.listCell, "data-item-index": itemIndex, style: {
+                    flexBasis: _this._columnWidth,
+                    maxWidth: _this._columnWidth,
+                    margin: STANDARD_TILE_MARGIN,
+                    borderStyle: "none",
+                    borderWidth: 0
+                } },
+                React.createElement("div", { role: "presentation", className: TilesList_module_scss_1.default.cell, 
+                    // I don't agree with this magic number. Where does this come from?
+                    style: { paddingTop: "97.16%" } },
+                    React.createElement("div", { role: "presentation", className: TilesList_module_scss_1.default.cellContent }, item.isFolder ?
+                        React.createElement(FolderTile_1.FolderTile, { item: item, index: itemIndex, isSelected: isSelected, pageWidth: _this._pageWidth, tileDimensions: {
+                                width: _this._columnWidth - TILE_HORZ_PADDING,
+                                height: _this._rowHeight - TILE_HORZ_PADDING
+                            }, onItemInvoked: function (itemInvoked) { return _this._handleItemInvoked(itemInvoked); } })
+                        :
+                            React.createElement(DocumentTile_1.DocumentTile, { fileBroserService: _this.props.fileBrowserService, item: item, index: itemIndex, isSelected: isSelected, pageWidth: _this._pageWidth, tileDimensions: {
+                                    width: _this._columnWidth - TILE_HORZ_PADDING,
+                                    height: _this._rowHeight - TILE_HORZ_PADDING
+                                }, onItemInvoked: function (itemInvoked) { return _this._handleItemInvoked(itemInvoked); } })))));
+        };
+        return _this;
+    }
+    TilesList.prototype.componentDidUpdate = function (prevProps) {
+        if ((this.props.filePickerResults !== prevProps.filePickerResults) || (this._pageWidth === -1)) {
+            this._listElem.forceUpdate();
+        }
+    };
+    TilesList.prototype.componentDidMount = function () {
+        if (this._pageWidth === -1) {
+            this.forceUpdate();
+        }
+    };
+    TilesList.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(Selection_1.SelectionZone, { selection: this.props.selection, onItemInvoked: function (item) { _this._handleItemInvoked(item); } },
+            React.createElement(FocusZone_1.FocusZone, null,
+                React.createElement("div", { "data-is-scrollable": true },
+                    React.createElement(List_1.List, { ref: function (e) { _this._listElem = e; }, className: TilesList_module_scss_1.default.folderList, items: this.props.items, getItemCountForPage: this._getItemCountForPage, getPageHeight: this._getPageHeight, onRenderPage: function (pageProps, defaultRender) { return _this._onRenderPage(pageProps, defaultRender); } })))));
+    };
+    return TilesList;
+}(React.Component));
+exports.TilesList = TilesList;
+//# sourceMappingURL=TilesList.js.map

package/lib-commonjs/controls/filePicker/controls/TilesList/TilesList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TilesList.js","sourceRoot":"","sources":["../../../../../src/controls/filePicker/controls/TilesList/TilesList.tsx"],"names":[],"mappings":"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"}