@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
100 lines • 4.97 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DocumentLibraryBrowser = exports.MAX_ROW_HEIGHT = exports.ROWS_PER_PAGE = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const FocusZone_1 = require("@fluentui/react/lib/FocusZone");
const List_1 = require("@fluentui/react/lib/List");
const Spinner_1 = require("@fluentui/react/lib/Spinner");
const Image_1 = require("@fluentui/react/lib/Image");
const Button_1 = require("@fluentui/react/lib/Button");
const DocumentLibraryBrowser_module_scss_1 = tslib_1.__importDefault(require("./DocumentLibraryBrowser.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
/**
* Rows per page
*/
exports.ROWS_PER_PAGE = 3;
/**
* Maximum row height
*/
exports.MAX_ROW_HEIGHT = 250;
/**
* This would have been better done as an Office Fabric TileList, but it isn't available yet for production use
*/
class DocumentLibraryBrowser extends React.Component {
constructor(props) {
super(props);
/**
* Calculates how many items there should be in the page
*/
this._getItemCountForPage = (itemIndex, surfaceRect) => {
if (itemIndex === 0 && surfaceRect.width > 0) {
this._columnCount = Math.ceil(surfaceRect.width / exports.MAX_ROW_HEIGHT);
this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
this._rowHeight = this._columnWidth;
}
return this._columnCount * exports.ROWS_PER_PAGE;
};
/**
* Gets the height of a list "page"
*/
this._getPageHeight = () => {
return this._rowHeight * exports.ROWS_PER_PAGE;
};
/**
* Renders a cell for search suggestions
*/
this._onRenderLibraryTile = (item, index) => {
const imgSrc = item.iconPath ? item.iconPath : "";
return (React.createElement("div", { className: DocumentLibraryBrowser_module_scss_1.default.filePickerFolderCardTile, "data-is-focusable": true, style: {
width: 100 / this._columnCount + '%'
} },
React.createElement("div", { className: DocumentLibraryBrowser_module_scss_1.default.filePickerFolderCardSizer },
React.createElement("div", { className: DocumentLibraryBrowser_module_scss_1.default.filePickerFolderCardPadder },
React.createElement(Image_1.Image, { src: imgSrc, className: DocumentLibraryBrowser_module_scss_1.default.filePickerFolderCardImage, imageFit: Image_1.ImageFit.cover }),
React.createElement(Button_1.DefaultButton, { className: DocumentLibraryBrowser_module_scss_1.default.filePickerFolderCardLabel, onClick: (_event) => this._handleOpenLibrary(item) }, item.title)))));
};
/**
* Calls parent when library is opened
*/
this._handleOpenLibrary = (library) => {
this.props.onOpenLibrary(library);
};
this.state = {
isLoading: true,
lists: []
};
}
componentDidMount() {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const includePageLibraries = this.props.includePageLibraries ? this.props.includePageLibraries : false;
const lists = yield this.props.fileBrowserService.getSiteMediaLibraries(includePageLibraries);
this.setState({
lists: lists,
isLoading: false
});
});
}
render() {
if (this.state.isLoading) {
return (React.createElement(Spinner_1.Spinner, { label: strings.Loading }));
}
const libraries = this.state.lists;
return (React.createElement("div", { className: DocumentLibraryBrowser_module_scss_1.default.documentLibraryBrowserContainer },
React.createElement(FocusZone_1.FocusZone, null,
React.createElement(List_1.List, { ref: (e) => {
const needToUpdate = !!e && !this._columnWidth;
//
// sometimes getItemCountForPage is called when surfaceRect is still has 0 width
// We need to rerender the list if that happens
//
if (needToUpdate) {
setTimeout(() => {
e.forceUpdate();
}, 0);
}
}, className: DocumentLibraryBrowser_module_scss_1.default.filePickerFolderCardGrid, items: libraries, getItemCountForPage: this._getItemCountForPage, getPageHeight: this._getPageHeight, renderedWindowsAhead: 4, onRenderCell: this._onRenderLibraryTile }))));
}
}
exports.DocumentLibraryBrowser = DocumentLibraryBrowser;
//# sourceMappingURL=DocumentLibraryBrowser.js.map