@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
216 lines • 12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilePicker = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@fluentui/react");
// Localization
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const LinkFilePickerTab_1 = tslib_1.__importDefault(require("./LinkFilePickerTab/LinkFilePickerTab"));
const UploadFilePickerTab_1 = tslib_1.__importDefault(require("./UploadFilePickerTab/UploadFilePickerTab"));
const SiteFilePickerTab_1 = tslib_1.__importDefault(require("./SiteFilePickerTab/SiteFilePickerTab"));
const WebSearchTab_1 = tslib_1.__importDefault(require("./WebSearchTab/WebSearchTab"));
const RecentFilesTab_1 = tslib_1.__importDefault(require("./RecentFilesTab/RecentFilesTab"));
const FilePicker_module_scss_1 = tslib_1.__importDefault(require("./FilePicker.module.scss"));
const FileBrowserService_1 = require("../../../services/FileBrowserService");
const OneDriveFilesTab_1 = require("./OneDriveFilesTab");
const OneDriveService_1 = require("../../../services/OneDriveService");
const OrgAssetsService_1 = require("../../../services/OrgAssetsService");
const FilePicker_types_1 = require("./FilePicker.types");
const FilesSearchService_1 = require("../../../services/FilesSearchService");
const StockImagesTab_1 = require("./StockImagesTab");
class FilePicker extends React.Component {
constructor(props) {
super(props);
/**
* Renders the panel header
*/
this._renderHeader = () => {
return (React.createElement("div", { className: 'ms-Panel-header' },
React.createElement("p", { className: (0, react_1.css)('ms-Panel-headerText', FilePicker_module_scss_1.default.header), role: 'heading' }, strings.FilePickerHeader)));
};
/**
* Open the panel
*/
this._handleOpenPanel = () => {
this.setState({
panelOpen: true,
selectedTab: this.props.defaultSelectedTab
? this.props.defaultSelectedTab
: FilePicker_types_1.FilePickerTabType.RecentTab,
});
};
/**
* Closes the panel
*/
this._handleClosePanel = () => {
this.props.onCancel();
this.setState({
panelOpen: false,
});
};
/**
* On save action
*/
this._handleSave = (filePickerResult) => {
this.props.onSave(filePickerResult);
this.setState({
panelOpen: false,
});
};
/**
* Changes the selected tab when a link is selected
*/
this._handleLinkClick = (ev, item) => {
this.setState({ selectedTab: item.key });
};
/**
* Prepares navigation panel options
*/
this._getNavPanelOptions = () => {
const addUrl = this.props.storeLastActiveTab !== false;
const links = [];
if (!this.props.hideRecentTab) {
links.push({
name: strings.RecentLinkLabel,
url: addUrl ? '#recent' : undefined,
icon: 'Recent',
key: FilePicker_types_1.FilePickerTabType.RecentTab,
});
}
if (!this.props.hideStockImages) {
links.push({
name: strings.StockImagesLinkLabel,
url: addUrl ? '#stockImages' : undefined,
key: FilePicker_types_1.FilePickerTabType.StockImagesTab,
icon: 'ImageSearch',
});
}
if (this.props.bingAPIKey && !this.props.hideWebSearchTab) {
links.push({
name: strings.WebSearchLinkLabel,
url: addUrl ? '#search' : undefined,
key: FilePicker_types_1.FilePickerTabType.WebSearchTab,
icon: 'Search',
});
}
if (!this.props.hideOrganisationalAssetTab &&
this.state.organisationAssetsEnabled) {
links.push({
name: 'Your organisation',
url: addUrl ? '#orgAssets' : undefined,
icon: 'FabricFolderConfirm',
key: FilePicker_types_1.FilePickerTabType.OrganisationalAssetTab,
});
}
if (!this.props.hideOneDriveTab) {
links.push({
name: 'OneDrive',
url: addUrl ? '#onedrive' : undefined,
key: FilePicker_types_1.FilePickerTabType.OneDriveTab,
icon: 'OneDriveLogo',
});
}
if (!this.props.hideSiteFilesTab) {
links.push({
name: strings.SiteLinkLabel,
url: addUrl ? '#globe' : undefined,
key: FilePicker_types_1.FilePickerTabType.SiteFilesTab,
icon: 'Globe',
});
}
if (!this.props.hideLocalUploadTab) {
links.push({
name: strings.UploadLinkLabel,
url: addUrl ? '#upload' : undefined,
key: FilePicker_types_1.FilePickerTabType.LocalUploadTab,
icon: 'System',
});
}
if (!this.props.hideLinkUploadTab) {
links.push({
name: strings.FromLinkLinkLabel,
url: addUrl ? '#link' : undefined,
key: FilePicker_types_1.FilePickerTabType.LinkUploadTab,
icon: 'Link',
});
}
const groups = [{ links }];
return groups;
};
// Initialize file browser services
this.fileBrowserService = new FileBrowserService_1.FileBrowserService(props.context, this.props.itemsCountQueryLimit);
this.oneDriveService = new OneDriveService_1.OneDriveService(props.context, this.props.itemsCountQueryLimit);
this.orgAssetsService = new OrgAssetsService_1.OrgAssetsService(props.context, this.props.itemsCountQueryLimit);
this.fileSearchService = new FilesSearchService_1.FilesSearchService(props.context, this.props.bingAPIKey);
this.state = {
panelOpen: false,
selectedTab: this.props.defaultSelectedTab
? this.props.defaultSelectedTab
: FilePicker_types_1.FilePickerTabType.RecentTab,
organisationAssetsEnabled: false,
showFullNav: true,
};
}
componentDidMount() {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
// Load information about Organisation Assets Library
let orgAssetsEnabled = false;
if (!this.props.hideOrganisationalAssetTab) {
const orgAssetsLibraries = yield this.orgAssetsService.getSiteMediaLibraries();
orgAssetsEnabled = orgAssetsLibraries ? true : false;
}
this.setState({
organisationAssetsEnabled: orgAssetsEnabled,
});
});
}
render() {
// If no acceptable file type was passed, and we're expecting images, set the default image filter
const accepts = this.props.accepts;
const buttonClassName = this.props.buttonClassName
? this.props.buttonClassName
: '';
const panelClassName = this.props.panelClassName
? this.props.panelClassName
: '';
const linkTabProps = {
accepts: accepts,
context: this.props.context,
onClose: () => this._handleClosePanel(),
onSave: (value) => {
this._handleSave(value);
},
};
const buttonProps = {
text: this.props.buttonLabel,
disabled: this.props.disabled,
onClick: this._handleOpenPanel,
className: `pnp__file-picker__button ${buttonClassName}`,
};
return (React.createElement("div", { className: `pnp__file-picker` },
this.props.label && (React.createElement(react_1.Label, { required: this.props.required }, this.props.label)),
this.props.buttonIcon ? (React.createElement(react_1.ActionButton, Object.assign({ iconProps: { iconName: this.props.buttonIcon } }, buttonProps))) : (React.createElement(react_1.PrimaryButton, Object.assign({}, buttonProps))),
React.createElement(react_1.Panel, { isOpen: this.state.panelOpen, isBlocking: true, hasCloseButton: true, className: `pnp__file-picker__panel ${FilePicker_module_scss_1.default.filePicker} ${panelClassName}`, onDismiss: this._handleClosePanel, type: react_1.PanelType.extraLarge, isFooterAtBottom: true, onRenderNavigation: () => {
return undefined;
}, headerText: strings.FilePickerHeader, isLightDismiss: true, onRenderHeader: () => this._renderHeader() },
React.createElement("div", { className: FilePicker_module_scss_1.default.nav },
React.createElement(react_1.Nav, { groups: this._getNavPanelOptions(), selectedKey: this.state.selectedTab, onLinkClick: (ev, item) => this._handleLinkClick(ev, item) })),
React.createElement("div", { className: FilePicker_module_scss_1.default.tabsContainer },
this.state.selectedTab === FilePicker_types_1.FilePickerTabType.LinkUploadTab && (React.createElement(LinkFilePickerTab_1.default, Object.assign({ fileSearchService: this.fileSearchService, allowExternalLinks: this.props.allowExternalLinks, checkIfFileExists: this.props.checkIfFileExists !== false }, linkTabProps))),
this.state.selectedTab === FilePicker_types_1.FilePickerTabType.StockImagesTab && (React.createElement(StockImagesTab_1.StockImages, Object.assign({ language: this.props.context.pageContext.cultureInfo.currentCultureName, fileSearchService: this.fileSearchService }, linkTabProps))),
this.state.selectedTab === FilePicker_types_1.FilePickerTabType.LocalUploadTab && (React.createElement(UploadFilePickerTab_1.default, Object.assign({}, linkTabProps))),
this.state.selectedTab === FilePicker_types_1.FilePickerTabType.SiteFilesTab && (React.createElement(SiteFilePickerTab_1.default, Object.assign({ fileBrowserService: this.fileBrowserService, includePageLibraries: this.props.includePageLibraries }, linkTabProps))),
this.state.selectedTab ===
FilePicker_types_1.FilePickerTabType.OrganisationalAssetTab && (React.createElement(SiteFilePickerTab_1.default, Object.assign({ breadcrumbFirstNode: {
isCurrentItem: true,
text: strings.OrgAssetsTabLabel,
key: FilePicker_types_1.FilePickerTabType.OrganisationalAssetTab,
}, fileBrowserService: this.orgAssetsService }, linkTabProps))),
this.state.selectedTab === FilePicker_types_1.FilePickerTabType.WebSearchTab && (React.createElement(WebSearchTab_1.default, Object.assign({ bingSearchService: this.fileSearchService }, linkTabProps))),
this.state.selectedTab === FilePicker_types_1.FilePickerTabType.OneDriveTab && (React.createElement(OneDriveFilesTab_1.OneDriveFilesTab, Object.assign({ oneDriveService: this.oneDriveService }, linkTabProps))),
this.state.selectedTab === FilePicker_types_1.FilePickerTabType.RecentTab && (React.createElement(RecentFilesTab_1.default, Object.assign({ fileSearchService: this.fileSearchService }, linkTabProps)))))));
}
}
exports.FilePicker = FilePicker;
//# sourceMappingURL=FilePicker.js.map