@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
161 lines • 9.54 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FolderExplorer = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const FolderExplorer_module_scss_1 = tslib_1.__importDefault(require("./FolderExplorer.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const Icon_1 = require("@fluentui/react/lib/Icon");
const FolderExplorerService_1 = require("../../../../services/FolderExplorerService");
const NewFolder_1 = require("../NewFolder");
const Breadcrumb_1 = require("@fluentui/react/lib/Breadcrumb");
const SearchBox_1 = require("@fluentui/react/lib/SearchBox");
class FolderExplorer extends React.Component {
constructor(props) {
super(props);
this._allLibraries = [];
this._allFolders = [];
/**
* Get HTML elements for rendering breadcrumb
*/
this._getBreadcrumbDOM = () => {
let breadCrumbDOM = null;
const breadCrumbItems = this._getCurrentBreadcrumbItems();
const overflowIndex = breadCrumbItems.length > 1 ? 1 : 0;
breadCrumbDOM = React.createElement(Breadcrumb_1.Breadcrumb, { items: breadCrumbItems, className: FolderExplorer_module_scss_1.default.breadcrumbPath, maxDisplayedItems: 3, overflowIndex: overflowIndex });
return breadCrumbDOM;
};
/**
* Get breadcrumb items
* @returns an array of IBreadcrumbItem objects
*/
this._getCurrentBreadcrumbItems = () => {
let items = [];
if (this.props.initialBreadcrumbItems) {
items = [...this.props.initialBreadcrumbItems];
}
const rootItem = { text: this.props.rootFolder.Name, key: 'Root-Item', onClick: this._getFolders.bind(this, this.props.rootFolder) };
items.push(rootItem);
if (this.state.selectedFolder && this.state.selectedFolder.ServerRelativeUrl.toLowerCase() !== this.props.rootFolder.ServerRelativeUrl.toLowerCase()) {
const rootUrlLower = this.props.rootFolder.ServerRelativeUrl.toLowerCase();
const selectedUrlLower = this.state.selectedFolder.ServerRelativeUrl.toLowerCase();
const relativePath = selectedUrlLower.startsWith(rootUrlLower)
? this.state.selectedFolder.ServerRelativeUrl.substring(this.props.rootFolder.ServerRelativeUrl.length)
: this.state.selectedFolder.ServerRelativeUrl;
const folderPathSplit = relativePath.split('/');
let folderPath = this.props.rootFolder.ServerRelativeUrl;
folderPathSplit.forEach((folderName, index) => {
if (folderName !== '') {
folderPath += '/' + folderName;
let itemText = folderName;
// check if library and if so use the Title of the library that was retrieved in case it's not the same as the url part
const lib = this._allLibraries.filter(l => l.ServerRelativeUrl.toLowerCase() === folderPath.toLowerCase());
if (lib.length === 1) {
itemText = lib[0].Name;
}
const folderItem = { text: itemText, key: `Folder-${index.toString()}`, onClick: this._getFolders.bind(this, { Name: folderName, ServerRelativeUrl: folderPath }) };
items.push(folderItem);
}
});
}
items[items.length - 1].isCurrentItem = true;
return items;
};
/**
* Filter list of folders based on user input
* @param filterText - The text to use when filtering the collection
*/
this._onChangeFilterText = (filterText) => {
this.setState({
folders: filterText ? this._allFolders.filter(f => f.Name.toLowerCase().indexOf(filterText.toLowerCase()) > -1) : this._allFolders
});
};
/**
* Load sub folders and files within a given folder
* @param folder - Name of the folder
*/
this._getFolders = (folder) => tslib_1.__awaiter(this, void 0, void 0, function* () {
this.setState({ foldersLoading: true });
try {
const siteAbsoluteUrl = this.props.siteAbsoluteUrl || this.props.context.pageContext.web.absoluteUrl;
// check if absolute url ends with relative url to know if we are at the site level
if (siteAbsoluteUrl.lastIndexOf(folder.ServerRelativeUrl, siteAbsoluteUrl.length - folder.ServerRelativeUrl.length) !== -1) {
// site level, get libraries
if (this._allLibraries.length > 0) {
this._allFolders = [...this._allLibraries];
}
else {
this._allLibraries = yield this._spService.getDocumentLibraries(siteAbsoluteUrl);
this._allFolders = [...this._allLibraries];
}
}
else {
// library/folder level, get folders
this._allFolders = yield this._spService.getFolders(siteAbsoluteUrl, folder.ServerRelativeUrl);
}
this.setState({ folders: this._allFolders, selectedFolder: folder, foldersLoading: false });
// callback to parent component
this.props.onSelect(folder);
}
catch (error) {
this.setState({ selectedFolder: null, foldersLoading: false });
console.error(error);
}
});
/**
* Add new subfolder to current folder
*/
this._addSubFolder = (newFolder) => tslib_1.__awaiter(this, void 0, void 0, function* () {
if (newFolder) {
// add folder if a folder with the same name does not exist yet
if (!this._allFolders.some(f => f.Name === newFolder.Name)) {
// update both list of folders
this._allFolders.push(newFolder);
this.setState({
folders: this._allFolders
});
}
}
});
this._spService = new FolderExplorerService_1.FolderExplorerService(this.props.context);
this.state = {
foldersLoading: false,
folders: [],
selectedFolder: null,
};
}
componentDidMount() {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const targetFolder = this.props.defaultFolder ? this.props.defaultFolder : this.props.rootFolder;
const siteAbsoluteUrl = this.props.siteAbsoluteUrl || this.props.context.pageContext.web.absoluteUrl;
// get libraries if site absolute url does not end with folder relative url - if not retrieving document libraries by default
if (siteAbsoluteUrl.lastIndexOf(targetFolder.ServerRelativeUrl, siteAbsoluteUrl.length - targetFolder.ServerRelativeUrl.length) === -1) {
this._allLibraries = yield this._spService.getDocumentLibraries(siteAbsoluteUrl);
}
yield this._getFolders(targetFolder);
});
}
render() {
const siteAbsoluteUrl = this.props.siteAbsoluteUrl || this.props.context.pageContext.web.absoluteUrl;
return (React.createElement("div", null,
!this.props.hiddenBreadcrumb &&
this._getBreadcrumbDOM(),
React.createElement("div", { style: { opacity: this.state.foldersLoading ? 0.8 : 1, } },
!this.props.hiddenFilterBox && this._allFolders.length > 0 &&
React.createElement("div", null,
React.createElement(SearchBox_1.SearchBox, { className: FolderExplorer_module_scss_1.default.filterBox, placeholder: strings.FolderFilterBoxPlaceholder, onSearch: this._onChangeFilterText, onChange: (e, value) => this._onChangeFilterText(value) })),
this.state.folders.length === 0 &&
React.createElement("div", { className: FolderExplorer_module_scss_1.default.status },
React.createElement("span", { role: "status" }, this.state.foldersLoading ? strings.FolderExplorerLoading : strings.FolderExplorerNoItems)),
this.state.folders.length > 0 &&
React.createElement("div", null, this.state.folders.map((folder) => {
return (React.createElement("div", { key: folder.Name, className: FolderExplorer_module_scss_1.default.libraryItem, onClick: () => { this._getFolders(folder).then(() => { }).catch(() => { }); } },
React.createElement(Icon_1.Icon, { iconName: "FabricFolder", className: FolderExplorer_module_scss_1.default.folderIcon }),
folder.Name));
})),
this.props.canCreateFolders && (this.state.selectedFolder && this.state.selectedFolder.ServerRelativeUrl !== this.props.context.pageContext.web.serverRelativeUrl) &&
React.createElement(NewFolder_1.NewFolder, { context: this.props.context, siteAbsoluteUrl: siteAbsoluteUrl, selectedFolder: this.state.selectedFolder, addSubFolder: this._addSubFolder }))));
}
}
exports.FolderExplorer = FolderExplorer;
//# sourceMappingURL=FolderExplorer.js.map