@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
149 lines • 7.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.OneDriveFilesTab = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
const Breadcrumb_1 = require("@fluentui/react/lib/Breadcrumb");
const controls_1 = require("../controls");
const Button_1 = require("@fluentui/react/lib/Button");
const OneDriveFilesTab_module_scss_1 = tslib_1.__importDefault(require("./OneDriveFilesTab.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
class OneDriveFilesTab extends React.Component {
constructor(props) {
super(props);
/**
* Handles breadcrump item click
*/
this.onBreadcrumpItemClick = (node) => {
let { breadcrumbItems } = this.state;
let breadcrumbClickedItemIndx = 0;
// Site node clicked
if (node.folderData === null) {
this.setState({
libraryAbsolutePath: undefined,
folderPath: undefined,
folderName: undefined
});
}
// Check if it is folder item
else {
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);
}
// 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.oneDriveService.downloadSPFileContent(filePickerResult.spItemUrl, filePickerResult.fileName); };
}
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({
folderPath: folder.serverRelativeUrl,
folderName: folder.name,
libraryAbsolutePath: folder.absoluteUrl,
breadcrumbItems
});
};
this.state = {
filePickerResult: null,
libraryAbsolutePath: undefined,
libraryTitle: strings.DocumentLibraries,
libraryId: '',
folderPath: undefined,
folderName: strings.DocumentLibraries,
breadcrumbItems: []
};
}
componentDidMount() {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const { oneDriveService, } = this.props;
const { folderPath, libraryAbsolutePath, libraryTitle, libraryId } = yield oneDriveService.getOneDriveMetadata();
const oneDriveFolderData = {
isFolder: true,
modified: null,
modifiedFriendly: null,
absoluteUrl: libraryAbsolutePath,
name: libraryTitle,
fileIcon: "",
serverRelativeUrl: folderPath,
spItemUrl: "",
supportsThumbnail: false,
fileType: ""
};
const breadcrumbItems = this.state.breadcrumbItems;
// Add OneDrive folder as a first node
const breadcrumbNode = {
folderData: oneDriveFolderData,
isCurrentItem: true,
text: oneDriveFolderData.name,
key: oneDriveFolderData.absoluteUrl
};
breadcrumbNode.onClick = () => { this.onBreadcrumpItemClick(breadcrumbNode); };
breadcrumbItems.push(breadcrumbNode);
this.setState({
libraryAbsolutePath: libraryAbsolutePath,
folderName: folderPath,
libraryTitle,
libraryId
});
});
}
render() {
const { libraryId, libraryTitle, folderPath, breadcrumbItems, libraryAbsolutePath, filePickerResult } = this.state;
const { oneDriveService, accepts } = this.props;
return (React.createElement("div", { className: OneDriveFilesTab_module_scss_1.default.tabContainer },
React.createElement("div", { className: OneDriveFilesTab_module_scss_1.default.tabHeaderContainer },
React.createElement(Breadcrumb_1.Breadcrumb, { items: breadcrumbItems, className: OneDriveFilesTab_module_scss_1.default.breadcrumbNav })),
React.createElement("div", { className: OneDriveFilesTab_module_scss_1.default.tabFiles }, libraryAbsolutePath !== undefined &&
React.createElement(controls_1.FileBrowser, { onChange: (fpr) => this._handleSelectionChange(fpr), onOpenFolder: (folder) => this._handleOpenFolder(folder, true), fileBrowserService: oneDriveService, libraryName: libraryTitle, libraryId: libraryId, folderPath: folderPath, accepts: accepts, context: this.props.context })),
React.createElement("div", { className: OneDriveFilesTab_module_scss_1.default.actionButtonsContainer },
React.createElement("div", { className: OneDriveFilesTab_module_scss_1.default.actionButtons },
React.createElement(Button_1.PrimaryButton, { disabled: !filePickerResult, onClick: () => this._handleSave(), className: OneDriveFilesTab_module_scss_1.default.actionButton }, strings.OpenButtonLabel),
React.createElement(Button_1.DefaultButton, { onClick: () => this._handleClose(), className: OneDriveFilesTab_module_scss_1.default.actionButton }, strings.CancelButtonLabel)))));
}
}
exports.OneDriveFilesTab = OneDriveFilesTab;
//# sourceMappingURL=OneDriveFilesTab.js.map