@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
270 lines • 15.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var findIndex_1 = tslib_1.__importDefault(require("lodash/findIndex"));
var DocumentLibraryBrowser_1 = require("../controls/DocumentLibraryBrowser/DocumentLibraryBrowser");
var FileBrowser_1 = require("../controls/FileBrowser/FileBrowser");
var Button_1 = require("@fluentui/react/lib/Button");
var ScrollablePane_1 = require("@fluentui/react/lib/ScrollablePane");
var Breadcrumb_1 = require("@fluentui/react/lib/Breadcrumb");
var SiteFilePickerTab_module_scss_1 = tslib_1.__importDefault(require("./SiteFilePickerTab.module.scss"));
var strings = tslib_1.__importStar(require("ControlStrings"));
var utilities_1 = require("../../../common/utilities");
var sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
var SiteFilePickerTab = /** @class */ (function (_super) {
tslib_1.__extends(SiteFilePickerTab, _super);
function SiteFilePickerTab(props) {
var _this = _super.call(this, props) || this;
_this._defaultLibraryNamePromise = Promise.resolve();
/**
* Handles breadcrumb item click
*/
_this.onBreadcrumbItemClick = function (node) {
var breadcrumbItems = _this.state.breadcrumbItems;
var breadcrumbClickedItemIndx = 0;
// Site node clicked
if (!node.libraryData && !node.folderData) {
_this.setState({
libraryAbsolutePath: undefined,
libraryPath: undefined,
folderName: undefined
});
}
// Check if it is folder item
else if (node.folderData) {
_this._handleOpenFolder(node.folderData, false);
// select which node has been clicked
breadcrumbClickedItemIndx = (0, findIndex_1.default)(breadcrumbItems, function (item) { return item.folderData && item.folderData.absoluteUrl === node.key; });
}
// Check if it is library node
else if (node.libraryData) {
_this._handleOpenLibrary(node.libraryData, false);
// select which node has been clicked
breadcrumbClickedItemIndx = (0, findIndex_1.default)(breadcrumbItems, function (item) { return item.libraryData && item.libraryData.serverRelativeUrl === node.key; });
}
// Trim nodes array
breadcrumbItems = breadcrumbItems.slice(0, breadcrumbClickedItemIndx + 1);
// Set new current node
breadcrumbItems[breadcrumbItems.length - 1].isCurrentItem = true;
_this.setState({
breadcrumbItems: breadcrumbItems,
filePickerResults: undefined
});
};
/**
* Is called when user selects a different file
*/
_this._handleSelectionChange = function (filePickerResults) {
filePickerResults.map(function (filePickerResult) {
filePickerResult.downloadFileContent = function () { return _this.props.fileBrowserService.downloadSPFileContent(filePickerResult.fileAbsoluteUrl, filePickerResult.fileName); };
});
// this.props.fileBrowserService
_this.setState({ filePickerResults: filePickerResults });
};
/**
* Called when user saves
*/
_this._handleSave = function () {
_this.props.onSave(_this.state.filePickerResults);
};
/**
* Called when user closes tab
*/
_this._handleClose = function () {
_this.props.onClose();
};
/**
* Triggered when user opens a file folder
*/
_this._handleOpenFolder = function (folder, addBreadcrumbNode) {
var breadcrumbItems = _this.state.breadcrumbItems;
if (addBreadcrumbNode) {
breadcrumbItems.map(function (item) { item.isCurrentItem = false; });
var breadcrumbNode = {
folderData: folder,
isCurrentItem: true,
text: folder.name,
key: folder.absoluteUrl,
onClick: function (ev, itm) { _this.onBreadcrumbItemClick(itm); }
};
breadcrumbItems.push(breadcrumbNode);
}
_this.setState({
filePickerResults: null,
libraryPath: folder.serverRelativeUrl,
folderName: folder.name,
libraryAbsolutePath: folder.absoluteUrl,
breadcrumbItems: breadcrumbItems
});
};
/**
* Triggered when user opens a top-level document library
*/
_this._handleOpenLibrary = function (library, addBreadcrumbNode) {
var breadcrumbItems = _this.state.breadcrumbItems;
if (addBreadcrumbNode) {
breadcrumbItems.map(function (item) { item.isCurrentItem = false; });
var breadcrumbNode = {
libraryData: library,
isCurrentItem: true,
text: library.title,
key: library.serverRelativeUrl,
onClick: function (ev, itm) { _this.onBreadcrumbItemClick(itm); }
};
breadcrumbItems.push(breadcrumbNode);
}
_this.setState({
libraryAbsolutePath: library.absoluteUrl,
libraryUrl: library.serverRelativeUrl,
libraryPath: library.serverRelativeUrl,
breadcrumbItems: breadcrumbItems
});
};
// Add current site to the breadcrumb or the provided node
var breadcrumbSiteNode = _this.props.breadcrumbFirstNode ? _this.props.breadcrumbFirstNode : {
isCurrentItem: false,
text: props.webTitle || props.context.pageContext.web.title,
key: props.webId || props.context.pageContext.web.id.toString(),
};
// add click event after defining breadcrumb so that it also applies to breadcrumb items passed to the component as properties
breadcrumbSiteNode.onClick = function (ev, itm) { _this.onBreadcrumbItemClick(itm); };
var breadcrumbItems = [breadcrumbSiteNode];
var webAbsoluteUrl = props.webAbsoluteUrl || props.context.pageContext.web.absoluteUrl;
var webServerRelativeUrl = (0, utilities_1.toRelativeUrl)(webAbsoluteUrl);
var _a = props.defaultFolderAbsolutePath
? _this._parseInitialLocationState(props.defaultFolderAbsolutePath, {
serverRelativeUrl: webServerRelativeUrl,
absoluteUrl: webAbsoluteUrl
})
: {}, _b = _a.folderAbsPath, folderAbsPath = _b === void 0 ? undefined : _b, _c = _a.libraryServRelUrl, libraryServRelUrl = _c === void 0 ? undefined : _c, _d = _a.folderServRelPath, folderServRelPath = _d === void 0 ? undefined : _d, _e = _a.folderBreadcrumbs, folderBreadcrumbs = _e === void 0 ? [] : _e;
breadcrumbItems.push.apply(breadcrumbItems, folderBreadcrumbs);
breadcrumbItems[breadcrumbItems.length - 1].isCurrentItem = true;
_this.state = {
filePickerResults: [],
libraryAbsolutePath: folderAbsPath || undefined,
libraryUrl: libraryServRelUrl || (0, utilities_1.urlCombine)(props.context.pageContext.web.serverRelativeUrl, '/Shared%20Documents'),
libraryPath: folderServRelPath,
folderName: strings.DocumentLibraries,
breadcrumbItems: breadcrumbItems
};
return _this;
}
SiteFilePickerTab.prototype.componentDidMount = function () {
var _this = this;
this._defaultLibraryNamePromise.then(function (docLibName) {
if (docLibName) {
var updatedBCItems = (0, sp_lodash_subset_1.cloneDeep)(_this.state.breadcrumbItems);
updatedBCItems.forEach(function (crumb) {
if (crumb.libraryData) {
crumb.text = docLibName;
crumb.libraryData.title = docLibName;
}
});
_this.setState({ breadcrumbItems: updatedBCItems });
}
}).catch(function (err) {
console.log("[SiteFilePicker] Failed To Fetch defaultLibraryName, defaulting to internal name");
});
};
SiteFilePickerTab.prototype.render = function () {
var _this = this;
return (React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.tabContainer },
React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.tabHeaderContainer },
React.createElement(Breadcrumb_1.Breadcrumb, { items: this.state.breadcrumbItems, className: SiteFilePickerTab_module_scss_1.default.breadcrumbNav })),
React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.tabFiles },
this.state.libraryAbsolutePath === undefined &&
React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.scrollablePaneWrapper },
React.createElement(ScrollablePane_1.ScrollablePane, null,
React.createElement(DocumentLibraryBrowser_1.DocumentLibraryBrowser, { fileBrowserService: this.props.fileBrowserService, includePageLibraries: this.props.includePageLibraries, onOpenLibrary: function (selectedLibrary) { return _this._handleOpenLibrary(selectedLibrary, true); } }))),
this.state.libraryAbsolutePath !== undefined &&
React.createElement(FileBrowser_1.FileBrowser, { onChange: function (filePickerResults) { return _this._handleSelectionChange(filePickerResults); }, onOpenFolder: function (folder) { return _this._handleOpenFolder(folder, true); }, fileBrowserService: this.props.fileBrowserService, libraryUrl: this.state.libraryUrl, folderPath: decodeURIComponent(this.state.libraryPath), accepts: this.props.accepts })),
React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.actionButtonsContainer },
React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.actionButtons },
React.createElement(Button_1.PrimaryButton, { disabled: this.state.filePickerResults && !this.state.filePickerResults.length, onClick: function () { return _this._handleSave(); }, className: SiteFilePickerTab_module_scss_1.default.actionButton }, strings.OpenButtonLabel),
React.createElement(Button_1.DefaultButton, { onClick: function () { return _this._handleClose(); }, className: SiteFilePickerTab_module_scss_1.default.actionButton }, strings.CancelButtonLabel)))));
};
/**
* Initializes the initial location for the navigation
* @param folderAbsPath Absolute folder path
* @param param1 custom object with absolute & relative Url
* @returns initial location parameters set
*/
SiteFilePickerTab.prototype._parseInitialLocationState = function (folderAbsPath, _a) {
// folderAbsPath: "https://tenant.sharepoint.com/teams/Test/DocLib/Folder"
var webServRelUrl = _a.serverRelativeUrl, webAbsUrl = _a.absoluteUrl;
// folderServRelPath: "/teams/Test/DocLib/Folder"
var folderServRelPath = folderAbsPath && folderAbsPath.substr(folderAbsPath.indexOf(webServRelUrl));
// folderAbsPath: "https://tenant.sharepoint.com/DocLib/Folder"
if (webServRelUrl === "/") {
folderServRelPath = folderAbsPath && folderAbsPath.split(webAbsUrl)[1];
}
// folderWebRelPath: "/DocLib/Folder"
var folderWebRelPath = folderServRelPath && folderServRelPath.substr(webServRelUrl.length);
var libInternalName = folderWebRelPath && folderWebRelPath.substring(1, Math.max(folderWebRelPath.indexOf("/", 2), 0) || undefined);
if (webServRelUrl === "/") {
libInternalName = folderWebRelPath && folderWebRelPath.substring(0, Math.max(folderWebRelPath.indexOf("/", 2), 0) || undefined);
}
// libraryServRelUrl: "/teams/Test/DocLib/"
var libraryServRelUrl = (0, utilities_1.urlCombine)(webServRelUrl, libInternalName);
var tenantUrl = folderAbsPath.substring(0, folderAbsPath.indexOf(webServRelUrl));
if (webAbsUrl === "/") {
tenantUrl = webAbsUrl;
}
var folderBreadcrumbs = this.parseBreadcrumbsFromPaths(libraryServRelUrl, folderServRelPath, folderWebRelPath, webAbsUrl, tenantUrl, libInternalName, webServRelUrl);
return { libraryServRelUrl: libraryServRelUrl, folderServRelPath: folderServRelPath, folderAbsPath: folderAbsPath, folderBreadcrumbs: folderBreadcrumbs };
};
/**
* Creates a breadcrumb from the paths
* @param libraryServRelUrl Library server relative URL
* @param folderServRelPath Folder server relative path
* @param folderWebRelPath Folder web relative path
* @param webAbsUrl Web absolute URL
* @param tenantUrl Tenant URL
* @param libInternalName Library internal name
* @param webServRelUrl Web server relative URL
* @returns Breadcrumb items
*/
SiteFilePickerTab.prototype.parseBreadcrumbsFromPaths = function (libraryServRelUrl, folderServRelPath, folderWebRelPath, webAbsUrl, tenantUrl, libInternalName, webServRelUrl) {
var _this = this;
this._defaultLibraryNamePromise = this.props.fileBrowserService.getLibraryNameByInternalName(libInternalName);
var folderBreadcrumbs = [];
folderBreadcrumbs.push({
isCurrentItem: false,
text: libInternalName,
key: libraryServRelUrl,
libraryData: {
serverRelativeUrl: libraryServRelUrl,
absoluteUrl: (0, utilities_1.urlCombine)(webAbsUrl, libInternalName),
title: libInternalName
},
onClick: function (ev, itm) { _this.onBreadcrumbItemClick(itm); }
});
if (folderServRelPath !== libraryServRelUrl) {
var folderLibRelPath = folderWebRelPath.substring(libInternalName.length + 2);
if (webServRelUrl === "/") {
folderLibRelPath = folderWebRelPath.substring(libInternalName.length + 1);
}
var breadcrumbFolderServRelPath_1 = libraryServRelUrl;
var crumbs = folderLibRelPath.split("/").map((function (currFolderName) {
breadcrumbFolderServRelPath_1 += "/".concat(currFolderName);
return {
isCurrentItem: false,
text: currFolderName,
key: (0, utilities_1.urlCombine)(tenantUrl, breadcrumbFolderServRelPath_1),
folderData: {
name: currFolderName,
absoluteUrl: (0, utilities_1.urlCombine)(tenantUrl, breadcrumbFolderServRelPath_1),
serverRelativeUrl: breadcrumbFolderServRelPath_1,
},
onClick: function (ev, itm) { _this.onBreadcrumbItemClick(itm); }
};
}));
folderBreadcrumbs.push.apply(folderBreadcrumbs, crumbs);
}
return folderBreadcrumbs;
};
return SiteFilePickerTab;
}(React.Component));
exports.default = SiteFilePickerTab;
//# sourceMappingURL=SiteFilePickerTab.js.map