@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
173 lines • 8.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
const controls_1 = require("../controls");
const react_1 = require("@fluentui/react");
const Link_1 = require("@fluentui/react/lib/Link");
const SiteFilePickerTab_module_scss_1 = tslib_1.__importDefault(require("./SiteFilePickerTab.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
class SiteFilePickerTab extends React.Component {
constructor(props) {
super(props);
this.renderBreadcrumbItem = (item) => {
return (React.createElement(Link_1.Link, { href: item.href, onClick: item.onClick, key: item.key, className: `ms-Link ms-Breadcrumb-itemLink ${SiteFilePickerTab_module_scss_1.default.breadcrumbNavItem}` }, item.text));
};
/**
* Handles breadcrump item click
*/
this.onBreadcrumpItemClick = (node) => {
let { breadcrumbItems } = this.state;
let 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, sp_lodash_subset_1.findIndex)(breadcrumbItems, (item) => 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, sp_lodash_subset_1.findIndex)(breadcrumbItems, (item) => 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,
filePickerResult: undefined,
});
};
/**
* Is called when user selects a different file
*/
this._handleSelectionChange = (filePickerResult) => {
if (filePickerResult) {
filePickerResult.downloadFileContent = () => {
return this.props.fileBrowserService.downloadSPFileContent(filePickerResult.fileAbsoluteUrl, filePickerResult.fileName);
};
}
// this.props.fileBrowserService
this.setState({
filePickerResult,
});
};
/**
* Called when user saves
*/
this._handleSave = () => {
this.props.onSave(this.state.filePickerResult);
};
/**
* Called when user closes tab
*/
this._handleClose = () => {
this.props.onClose();
};
/**
* Triggered when user opens a file folder
*/
this._handleOpenFolder = (folder, addBreadcrumbNode) => {
const { breadcrumbItems } = this.state;
if (addBreadcrumbNode) {
breadcrumbItems.map((item) => {
item.isCurrentItem = false;
});
const breadcrumbNode = {
folderData: folder,
isCurrentItem: true,
text: folder.name,
key: folder.absoluteUrl,
};
breadcrumbNode.onClick = () => {
this.onBreadcrumpItemClick(breadcrumbNode);
};
breadcrumbItems.push(breadcrumbNode);
}
this.setState({
filePickerResult: null,
libraryPath: folder.serverRelativeUrl,
folderName: folder.name,
libraryAbsolutePath: folder.absoluteUrl,
breadcrumbItems,
});
};
/**
* Triggered when user opens a top-level document library
*/
this._handleOpenLibrary = (library, addBreadcrumbNode) => {
const { breadcrumbItems } = this.state;
if (addBreadcrumbNode) {
breadcrumbItems.map((item) => {
item.isCurrentItem = false;
});
const breadcrumbNode = {
libraryData: library,
isCurrentItem: true,
text: library.title,
key: library.serverRelativeUrl,
};
breadcrumbNode.onClick = () => {
this.onBreadcrumpItemClick(breadcrumbNode);
};
breadcrumbItems.push(breadcrumbNode);
}
this.setState({
libraryAbsolutePath: library.absoluteUrl,
libraryTitle: library.title,
libraryId: library.id,
libraryPath: library.serverRelativeUrl,
breadcrumbItems,
});
};
// Add current site to the breadcrumb or the provided node
const breadcrumbSiteNode = this.props
.breadcrumbFirstNode
? this.props.breadcrumbFirstNode
: {
isCurrentItem: true,
text: props.context.pageContext.web.title,
key: props.context.pageContext.web.id.toString(),
};
breadcrumbSiteNode.onClick = () => {
this.onBreadcrumpItemClick(breadcrumbSiteNode);
};
this.state = {
filePickerResult: null,
libraryAbsolutePath: undefined,
libraryTitle: strings.DocumentLibraries,
libraryId: '',
libraryPath: undefined,
folderName: strings.DocumentLibraries,
breadcrumbItems: [breadcrumbSiteNode],
};
}
render() {
return (React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.tabContainer },
React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.tabHeaderContainer },
React.createElement(react_1.Breadcrumb, { items: this.state.breadcrumbItems,
/*onRenderItem={this.renderBreadcrumbItem}*/ 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(react_1.ScrollablePane, null,
React.createElement(controls_1.DocumentLibraryBrowser, { fileBrowserService: this.props.fileBrowserService, onOpenLibrary: (selectedLibrary) => this._handleOpenLibrary(selectedLibrary, true), includePageLibraries: this.props.includePageLibraries })))),
this.state.libraryAbsolutePath !== undefined && (React.createElement(controls_1.FileBrowser, { onChange: (filePickerResult) => this._handleSelectionChange(filePickerResult), onOpenFolder: (folder) => this._handleOpenFolder(folder, true), fileBrowserService: this.props.fileBrowserService, libraryName: this.state.libraryTitle, libraryId: this.state.libraryId, folderPath: this.state.libraryPath, accepts: this.props.accepts, context: this.props.context }))),
React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.actionButtonsContainer },
React.createElement("div", { className: SiteFilePickerTab_module_scss_1.default.actionButtons },
React.createElement(react_1.PrimaryButton, { disabled: !this.state.filePickerResult, onClick: () => this._handleSave(), className: SiteFilePickerTab_module_scss_1.default.actionButton }, strings.OpenButtonLabel),
React.createElement(react_1.DefaultButton, { onClick: () => this._handleClose(), className: SiteFilePickerTab_module_scss_1.default.actionButton }, strings.CancelButtonLabel)))));
}
}
exports.default = SiteFilePickerTab;
//# sourceMappingURL=SiteFilePickerTab.js.map