@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
106 lines • 6.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var GeneralHelper_1 = require("../../../common/utilities/GeneralHelper");
var Button_1 = require("@fluentui/react/lib/Button");
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var DragDropFiles_1 = require("../../dragDropFiles/DragDropFiles");
var strings = tslib_1.__importStar(require("ControlStrings"));
var MultipleUploadFilePickerTab_module_scss_1 = tslib_1.__importDefault(require("./MultipleUploadFilePickerTab.module.scss"));
var MultipleUploadFilePickerTab = /** @class */ (function (_super) {
tslib_1.__extends(MultipleUploadFilePickerTab, _super);
function MultipleUploadFilePickerTab(props) {
var _this = _super.call(this, props) || this;
_this.displayFileNames = function (filesResult) {
var result = [];
for (var i = 0; i < filesResult.length; i++) {
result.push(React.createElement("div", { key: i.toString(), className: MultipleUploadFilePickerTab_module_scss_1.default.localTabFilename }, filesResult[i].fileName));
}
return result;
};
/**
* Gets called when files are uploaded via drag and drop
*/
_this._handleFileUpload = function (files) {
if (files.length < 1) {
return;
}
else {
var filePickerResultsArray = [];
var _loop_1 = function (i) {
var file = files[i];
var filePickerResult = {
fileAbsoluteUrl: null,
fileName: file.name,
fileSize: file.size,
fileNameWithoutExtension: GeneralHelper_1.GeneralHelper.getFileNameWithoutExtension(file.name),
downloadFileContent: function () { return Promise.resolve(file); }
};
filePickerResultsArray.push(filePickerResult);
};
for (var i = 0; i < files.length; i++) {
_loop_1(i);
}
_this.setState({
filePickerResult: filePickerResultsArray
});
_this.props.onChange(filePickerResultsArray);
}
};
/**
* Gets called when files are uploaded via file explorer
*/
_this._handleFileUploadExplorer = function (event) {
if (!event || event.target.files.length < 1) {
return;
}
else {
var files = [];
for (var i = 0; i < event.target.files.length; i++) {
var file = event.target.files.item(i);
files.push(file);
}
_this._handleFileUpload(files);
}
};
/**
* Saves base64 encoded image back to property pane file picker
*/
_this._handleSave = function () {
_this.props.onSave(_this.state.filePickerResult);
};
/**
* Closes tab without saving
*/
_this._handleClose = function () {
_this.props.onClose();
};
_this.state = {
filePickerResult: undefined
};
return _this;
}
MultipleUploadFilePickerTab.prototype.render = function () {
var _this = this;
var filePickerResult = this.state.filePickerResult;
var acceptedFilesExtensions = this.props.accepts ? this.props.accepts.join(",") : null;
return (React.createElement("div", { className: MultipleUploadFilePickerTab_module_scss_1.default.tabContainer },
React.createElement("div", { className: MultipleUploadFilePickerTab_module_scss_1.default.tabHeaderContainer },
React.createElement("h2", { className: MultipleUploadFilePickerTab_module_scss_1.default.tabHeader }, strings.UploadLinkLabel + " " + strings.OneDriveRootFolderName)),
React.createElement("div", { className: (0, Utilities_1.css)(MultipleUploadFilePickerTab_module_scss_1.default.tab, MultipleUploadFilePickerTab_module_scss_1.default.tabOffset) },
React.createElement(DragDropFiles_1.DragDropFiles, { iconName: "BulkUpload", onDrop: this._handleFileUpload },
React.createElement("div", { className: MultipleUploadFilePickerTab_module_scss_1.default.localTabDragDropFile },
React.createElement("input", { className: MultipleUploadFilePickerTab_module_scss_1.default.localTabInput, type: "file", id: "fileInput", accept: acceptedFilesExtensions, multiple: true, onChange: function (event) { return _this._handleFileUploadExplorer(event); } }),
React.createElement("label", { className: MultipleUploadFilePickerTab_module_scss_1.default.localTabLabel, htmlFor: "fileInput" }, strings.UploadLinkLabel + " " + strings.OneDriveRootFolderName))),
React.createElement("div", null, (filePickerResult) ? this.displayFileNames(filePickerResult) : ""),
this.props.renderCustomMultipleUploadTabContent && this.props.renderCustomMultipleUploadTabContent(this.state.filePickerResult)),
React.createElement("div", { className: MultipleUploadFilePickerTab_module_scss_1.default.actionButtonsContainer },
React.createElement("div", { className: MultipleUploadFilePickerTab_module_scss_1.default.actionButtons },
React.createElement(Button_1.PrimaryButton, { disabled: !filePickerResult, onClick: function () { return _this._handleSave(); }, className: MultipleUploadFilePickerTab_module_scss_1.default.actionButton }, strings.ListItemAttachmentslPlaceHolderButtonLabel + " " + strings.OneDriveRootFolderName),
React.createElement(Button_1.DefaultButton, { onClick: function () { return _this._handleClose(); }, className: MultipleUploadFilePickerTab_module_scss_1.default.actionButton }, strings.CancelButtonLabel)))));
};
return MultipleUploadFilePickerTab;
}(React.Component));
exports.default = MultipleUploadFilePickerTab;
//# sourceMappingURL=MultipleUploadFilePickerTab.js.map