@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
136 lines • 7.98 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UploadFiles = void 0;
var tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-explicit-any */
var React = tslib_1.__importStar(require("react"));
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var jotai_1 = require("jotai");
var react_dropzone_1 = require("react-dropzone");
var react_components_1 = require("@fluentui/react-components");
var react_1 = require("@iconify/react");
var contextState_1 = require("../atoms/contextState");
var EUploadLocations_1 = require("../constants/EUploadLocations");
var useDeleteFile_1 = require("../hooks/useDeleteFile");
var SelectUploadLocation_1 = require("./SelectUploadLocation");
var UploadFile_1 = require("./UploadFile");
var useUploadFilesStyles_1 = require("./useUploadFilesStyles");
var validateFileTypes = function (file) {
var acceptedFiles = ["image/gif", "image/jpeg", "image/png", "image/svg+xml", "image/webp"];
return acceptedFiles.includes(file.type)
? null
: {
code: "file-invalid-type",
message: "file type ".concat(file.type, " is not supported"),
};
};
var UploadFiles = function (props) {
var _a = React.useState([]), files = _a[0], setFiles = _a[1];
var onSelectedFile = props.onSelectedFile;
var _b = React.useState([]), renderFiles = _b[0], setRenderFiles = _b[1];
var _c = React.useState(""), selectedFileId = _c[0], setSelectedFileId = _c[1];
var _d = React.useState(EUploadLocations_1.EUploadLocations.CurrentSite), selectedUploadLocation = _d[0], setSelectedUploadLocation = _d[1];
var appContext = (0, jotai_1.useAtomValue)(contextState_1.contextState);
var deleteFile = (0, useDeleteFile_1.useDeleteFile)(appContext.context)[0];
var styles = (0, useUploadFilesStyles_1.useUploadFilesStyles)();
React.useEffect(function () {
onSelectedFile(null);
}, []);
var onDrop = React.useCallback(function (acceptedFiles) {
var newFiles = acceptedFiles.map(function (file) {
return Object.assign(file, {
preview: URL.createObjectURL(file),
});
});
setFiles(function (prevFiles) { return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevFiles, true), newFiles, true); });
}, []);
var onFileSelected = React.useCallback(function (file) {
setSelectedFileId(file.id);
onSelectedFile(file);
}, [onSelectedFile]);
var onDelete = React.useCallback(function (fileName, driveId, libraryId, itemId) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_b.trys.push([0, 3, , 4]);
if (!(itemId && driveId && libraryId)) return [3 /*break*/, 2];
return [4 /*yield*/, deleteFile(driveId, libraryId, itemId, selectedUploadLocation)];
case 1:
_b.sent();
_b.label = 2;
case 2:
setFiles(function (prevFiles) { return prevFiles.filter(function (f) { return f.name !== fileName; }); });
onSelectedFile(null);
return [2 /*return*/, true];
case 3:
_a = _b.sent();
return [2 /*return*/, false];
case 4: return [2 /*return*/];
}
});
}); }, [onSelectedFile]);
React.useEffect(function () {
var filesControl = [];
for (var _i = 0, files_1 = files; _i < files_1.length; _i++) {
var file = files_1[_i];
filesControl.push(React.createElement(UploadFile_1.UpLoadFile, { key: file.name, file: file, onFileSelected: onFileSelected, selectedFileId: selectedFileId, uploadLocation: selectedUploadLocation, onDelete: function (filename, driveId, libraryId, itemId) { return tslib_1.__awaiter(void 0, void 0, void 0, function () { return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, onDelete(filename, driveId, libraryId, itemId)];
case 1: return [2 /*return*/, _a.sent()];
}
}); }); } }));
}
setRenderFiles(filesControl);
return function () {
files.forEach(function (file) { return URL.revokeObjectURL(file.preview); });
};
}, [files, onFileSelected]);
var _e = (0, react_dropzone_1.useDropzone)({
accept: {
"image/*": [".gif", ".jpg", ".jpeg", ".png", ".svg", ".webp"],
},
onDrop: onDrop,
maxFiles: 10,
validator: validateFileTypes,
}), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, isFocused = _e.isFocused, isDragAccept = _e.isDragAccept, isDragReject = _e.isDragReject, isDragActive = _e.isDragActive, fileRejections = _e.fileRejections;
var focusedStyle = React.useMemo(function () {
return { borderColor: react_components_1.tokens.colorNeutralBackground3Pressed };
}, []);
var acceptStyle = React.useMemo(function () {
return { borderColor: react_components_1.tokens.colorNeutralBackground3Pressed };
}, []);
var rejectStyle = React.useMemo(function () {
return {
borderColor: react_components_1.tokens.colorStatusDangerBackground1,
};
}, []);
var style = React.useMemo(function () { return (tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (isFocused ? focusedStyle : {})), (isDragAccept ? acceptStyle : {})), (isDragReject ? rejectStyle : {}))); }, [isFocused, isDragAccept, isDragReject]);
var hasFilesRejection = React.useMemo(function () {
return fileRejections.length > 0;
}, [fileRejections]);
var fileRejectionItems = React.useMemo(function () {
return fileRejections.map(function (_a) {
var file = _a.file, errors = _a.errors;
return (React.createElement(react_components_1.Caption1, { key: file.name, style: { color: react_components_1.tokens.colorStatusDangerForeground1 } },
file.name,
" - ",
errors.map(function (e) { return e.message; }).join(", ")));
});
}, [fileRejections]);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.containerGlobalMarginTop },
React.createElement(SelectUploadLocation_1.SelectUploadLocation, { onSelectedLocation: function (location) { return setSelectedUploadLocation(location); } }),
React.createElement("div", tslib_1.__assign({}, getRootProps({ className: styles.baseStyle, style: style })),
React.createElement("input", tslib_1.__assign({}, getInputProps())),
React.createElement("div", { className: styles.dragContainer },
React.createElement(react_1.Icon, { icon: "mage:image-upload", className: styles.dragDropIconStyles }),
isDragAccept && React.createElement(react_components_1.Caption1, null, ControlStrings_1.default.ImagePickerDragFilesAccpted),
isDragReject && React.createElement(react_components_1.Caption1, null, ControlStrings_1.default.ImagePickerDragFilesRejected),
!isDragActive && React.createElement(react_components_1.Caption1, null, ControlStrings_1.default.ImagePickerDragFilesActive),
React.createElement(react_components_1.Body1, null, ControlStrings_1.default.ImagePickerDragDropText))),
React.createElement("div", { className: styles.containerGlobalMarginTop }, hasFilesRejection && fileRejectionItems),
React.createElement("div", { className: styles.imagesContainer }, renderFiles))));
};
exports.UploadFiles = UploadFiles;
//# sourceMappingURL=UploadFiles.js.map