@pnp/spfx-controls-react 3.20.0-beta.1098871 → 3.20.0-beta.1140273

package/lib/controls/imagePicker/uploadFiles/RetryUpload.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import strings from "ControlStrings";
+import { Button, Tooltip, } from "@fluentui/react-components";
+import { ArrowClockwiseFilled, ArrowClockwiseRegular, bundleIcon, } from "@fluentui/react-icons";
+import { useUploadFilesStyles } from "./useUploadFilesStyles";
+export var RetryUpload = function (props) {
+    var isShow = props.isShow;
+    var Retry = bundleIcon(ArrowClockwiseFilled, ArrowClockwiseRegular);
+    var styles = useUploadFilesStyles();
+    if (!isShow) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { content: strings.ImagePickerRetryButtonLabel, relationship: "label" },
+            React.createElement("div", { "aria-label": strings.ImagePickerRetryButtonLabel },
+                React.createElement(Button, { icon: React.createElement(Retry, { className: styles.iconRefreshStyle }), size: "small", appearance: "transparent", onClick: function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        props.onRetry();
+                    } })))));
+};
+//# sourceMappingURL=RetryUpload.js.map

package/lib/controls/imagePicker/uploadFiles/RetryUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RetryUpload.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/RetryUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAErC,OAAO,EACL,MAAM,EACN,OAAO,GACR,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,UAAU,GACX,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAO9D,MAAM,CAAC,IAAM,WAAW,GAA+C,UACrE,KAAiD;IAEzC,IAAA,MAAM,GAAK,KAAK,OAAV,CAAW;IAEzB,IAAM,KAAK,GAAG,UAAU,CAAC,oBAAoB,EAAE,qBAAqB,CAAC,CAAC;IACtE,IAAM,MAAM,GAAG,oBAAoB,EAAE,CAAC;IAEtC,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL;QACE,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,CAAC,2BAA2B,EAAE,YAAY,EAAE,OAAO;YAC1E,2CAAiB,OAAO,CAAC,2BAA2B;gBAClD,oBAAC,MAAM,IACL,IAAI,EAAE,oBAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,GAAI,EACnD,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,aAAa,EACxB,OAAO,EAAE,UAAC,CAAC;wBACT,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,KAAK,CAAC,OAAO,EAAE,CAAC;oBAClB,CAAC,GACD,CACE,CACE,CACT,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/imagePicker/uploadFiles/SelectUploadLocation.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface ISelectUploadLocationProps {
+    onSelectedLocation: (location: string) => void;
+}
+export declare const SelectUploadLocation: React.FunctionComponent<ISelectUploadLocationProps>;
+//# sourceMappingURL=SelectUploadLocation.d.ts.map

package/lib/controls/imagePicker/uploadFiles/SelectUploadLocation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectUploadLocation.d.ts","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/SelectUploadLocation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,MAAM,WAAW,0BAA0B;IACzC,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AA2BD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAAC,0BAA0B,CAuBpF,CAAC"}

package/lib/controls/imagePicker/uploadFiles/SelectUploadLocation.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from "react";
+import strings from "ControlStrings";
+import { Body1, Field, makeStyles, Radio, RadioGroup, shorthands, tokens, } from "@fluentui/react-components";
+import { WebAssetRegular } from "@fluentui/react-icons";
+import { EUploadLocations } from "../constants/EUploadLocations";
+var useStyles = makeStyles({
+    root: __assign({ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "start" }, shorthands.gap("5px")),
+    iconStyles: {
+        width: "18px",
+        height: "18px",
+        color: tokens.colorBrandForeground1,
+    },
+});
+var RenderLabel = function () {
+    var styles = useStyles();
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(WebAssetRegular, { className: styles.iconStyles }),
+        React.createElement(Body1, null, strings.ImagePickerUploadLocationLabel)));
+};
+export var SelectUploadLocation = function (props) {
+    var _a = React.useState(EUploadLocations.CurrentSite), value = _a[0], setValue = _a[1];
+    var onSelectedLocation = props.onSelectedLocation;
+    var onChange = React.useCallback(function (data) {
+        setValue(data.value);
+        if (onSelectedLocation) {
+            onSelectedLocation(data.value);
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Field, { label: React.createElement(RenderLabel, null), style: { paddingBottom: 10 } },
+            React.createElement(RadioGroup, { value: value, onChange: function (_, data) { return onChange(data); }, layout: "horizontal" },
+                React.createElement(Radio, { value: EUploadLocations.OneDrive, label: strings.ImagePickerUploadLocationOndriveLabel }),
+                React.createElement(Radio, { value: EUploadLocations.CurrentSite, label: strings.ImagePickerUploadLocationSharePointLabel })))));
+};
+//# sourceMappingURL=SelectUploadLocation.js.map

package/lib/controls/imagePicker/uploadFiles/SelectUploadLocation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectUploadLocation.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/SelectUploadLocation.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAErC,OAAO,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,UAAU,EAEV,UAAU,EACV,MAAM,GACP,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMjE,IAAM,SAAS,GAAG,UAAU,CAAC;IAC3B,IAAI,aACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,OAAO,IACpB,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CACzB;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM,CAAC,qBAAqB;KACpC;CACF,CAAC,CAAC;AAEH,IAAM,WAAW,GAAG;IAClB,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,oBAAC,eAAe,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI;QACjD,oBAAC,KAAK,QAAE,OAAO,CAAC,8BAA8B,CAAS,CACnD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAwD,UACvF,KAA0D;IAEpD,IAAA,KAAoB,KAAK,CAAC,QAAQ,CAAS,gBAAgB,CAAC,WAAW,CAAC,EAAvE,KAAK,QAAA,EAAE,QAAQ,QAAwD,CAAC;IAEvE,IAAA,kBAAkB,GAAK,KAAK,mBAAV,CAAW;IAErC,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,IAA4B;QAC9D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,kBAAkB,EAAE;YACtB,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL;QACE,oBAAC,KAAK,IAAC,KAAK,EAAE,oBAAC,WAAW,OAAG,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE;YACzD,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAC,CAAC,EAAE,IAAI,IAAK,OAAA,QAAQ,CAAC,IAAI,CAAC,EAAd,CAAc,EAAE,MAAM,EAAC,YAAY;gBAClF,oBAAC,KAAK,IAAC,KAAK,EAAE,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC,qCAAqC,GAAI;gBACjG,oBAAC,KAAK,IAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,wCAAwC,GAAI,CAC5F,CACP,CACP,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/imagePicker/uploadFiles/UploadFile.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { IFileExtended } from "../models/IFileExtended";
+import { ISearchImagesResult } from "../models/ISearchImagesResult";
+export interface IUpLoadFileProps {
+    file: IFileExtended;
+    onFileSelected: (file: ISearchImagesResult) => void;
+    selectedFileId: string;
+    uploadLocation: string;
+    onDelete: (fileName: string, driveId: string, libraryId: string, itemId: string) => Promise<boolean>;
+}
+export declare const UpLoadFile: React.FunctionComponent<IUpLoadFileProps>;
+//# sourceMappingURL=UploadFile.d.ts.map

package/lib/controls/imagePicker/uploadFiles/UploadFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile.d.ts","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/UploadFile.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAQpE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,cAAc,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CACtG;AAOD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAgJhE,CAAC"}

package/lib/controls/imagePicker/uploadFiles/UploadFile.js

@@ -0,0 +1,193 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import * as React from "react";
+import { useAtomValue } from "jotai";
+import { Body1Strong, Caption1, Card, CardPreview, Image, } from "@fluentui/react-components";
+import { contextState } from "../atoms/contextState";
+import { UPLOAD_FOLDER_NAME } from "../constants/constants";
+import { useGraphAPI } from "../hooks/useGrapAPI";
+import { useUploadFile } from "../hooks/useUploadFile";
+import { useUtils } from "../hooks/useUtils";
+import { DeleteFile } from "./DeleteFile";
+import { FileError } from "./FileError";
+import { FileProgress } from "./FileProgress";
+import { RetryUpload } from "./RetryUpload";
+import { useUploadFilesStyles } from "./useUploadFilesStyles";
+export var UpLoadFile = function (props) {
+    var file = props.file, onFileSelected = props.onFileSelected, selectedFileId = props.selectedFileId, uploadLocation = props.uploadLocation, onDelete = props.onDelete;
+    var name = file.name, size = file.size, preview = file.preview;
+    var styles = useUploadFilesStyles();
+    var appGlobalState = useAtomValue(contextState);
+    var context = appGlobalState.context;
+    var getSiteAssetsLibrary = useGraphAPI(context).getSiteAssetsLibrary;
+    var _a = React.useState(null), errorInfo = _a[0], setErrorInfo = _a[1];
+    var _b = useUploadFile(context), uploadFile = _b[0], showProgressBar = _b[1], percentComplete = _b[2], isUploadFinished = _b[4];
+    var _c = React.useState({}), fileSearchResult = _c[0], setFileSearchResult = _c[1];
+    var hasErrorOnUpload = React.useMemo(function () {
+        if (errorInfo && errorInfo.origemFunction === "uploadFile") {
+            return true;
+        }
+        return false;
+    }, [errorInfo]);
+    var hasErrorOnDelete = React.useMemo(function () {
+        if (errorInfo && errorInfo.origemFunction === "deleteFile") {
+            return true;
+        }
+        return false;
+    }, [errorInfo]);
+    var _d = React.useState(false), retryUpload = _d[0], setRetryUpload = _d[1];
+    React.useEffect(function () {
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var assetLibraryInfo, libraryId, parentReference, siteId, rs, fileSearchResult_1, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4 /*yield*/, getSiteAssetsLibrary(appGlobalState.context.pageContext.site.absoluteUrl)];
+                    case 1:
+                        assetLibraryInfo = _a.sent();
+                        libraryId = assetLibraryInfo.id, parentReference = assetLibraryInfo.parentReference;
+                        siteId = parentReference.siteId;
+                        return [4 /*yield*/, uploadFile(file, UPLOAD_FOLDER_NAME, siteId, libraryId, uploadLocation)];
+                    case 2:
+                        rs = _a.sent();
+                        fileSearchResult_1 = {
+                            driveId: rs.parentReference.driveId,
+                            title: rs.name,
+                            path: rs.parentReference.path,
+                            filename: rs.name,
+                            siteID: rs.parentReference.siteId,
+                            fileType: rs.file.mimeType,
+                            spWebUrl: rs.webUrl,
+                            id: rs.id,
+                            modifiedBy: rs.lastModifiedBy.user.email,
+                            lastModifiedTime: rs.lastModifiedDateTime,
+                            fileExtension: rs.name.split(".").pop(),
+                            created: "",
+                            author: "",
+                            editorOwsUser: "",
+                            siteTitle: "",
+                            parentLink: "",
+                            listID: "",
+                            listItemID: "",
+                            spSiteURL: "",
+                            webId: "",
+                            uniqueID: "",
+                            defaultEncodingURL: rs.webUrl,
+                        };
+                        setFileSearchResult(fileSearchResult_1);
+                        setRetryUpload(false);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        setErrorInfo({ origemFunction: "uploadFile", error: "Uploaderror" });
+                        setFileSearchResult({});
+                        setRetryUpload(false);
+                        console.error("[UploadFIle, File Upload Error]", error_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); })();
+        return function () {
+            URL.revokeObjectURL(preview);
+        };
+    }, [uploadFile, preview, retryUpload, uploadLocation, appGlobalState.context.pageContext.site.absoluteUrl]);
+    var opacity = React.useMemo(function () { return (!isUploadFinished || hasErrorOnUpload ? 0.5 : 1); }, [
+        isUploadFinished,
+        hasErrorOnUpload,
+    ]);
+    var showDelete = React.useMemo(function () { return isUploadFinished; }, [isUploadFinished]);
+    var showRetry = React.useMemo(function () { return hasErrorOnUpload; }, [hasErrorOnUpload]);
+    var formatBytes = useUtils().formatBytes;
+    var selected = React.useMemo(function () { return selectedFileId === fileSearchResult.id; }, [fileSearchResult, selectedFileId]);
+    var onDeleteFile = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, driveId, siteID, id, name, isDeleted;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = fileSearchResult || {}, driveId = _a.driveId, siteID = _a.siteID, id = _a.id;
+                    name = file.name;
+                    return [4 /*yield*/, onDelete(name, driveId, siteID, id)];
+                case 1:
+                    isDeleted = _b.sent();
+                    return [2 /*return*/, isDeleted];
+            }
+        });
+    }); }, [fileSearchResult, onDelete]);
+    var onRetry = React.useCallback(function () {
+        setRetryUpload(true);
+    }, [fileSearchResult]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Card, { className: styles.card, selected: selected, onClick: function (e) {
+                e.stopPropagation();
+                if (fileSearchResult === null || fileSearchResult === void 0 ? void 0 : fileSearchResult.id) {
+                    onFileSelected(fileSearchResult);
+                }
+            } },
+            React.createElement(CardPreview, null,
+                React.createElement(Image, { style: { height: 120, opacity: opacity, objectPosition: "0px 0px" }, fit: "cover", src: preview, alt: "image " })),
+            React.createElement("div", { className: styles.itemBody },
+                React.createElement(Body1Strong, { className: styles.headerTitle }, name),
+                React.createElement(Caption1, null,
+                    formatBytes(size, 2),
+                    " "),
+                React.createElement(FileProgress, { isShow: showProgressBar, percentageCompleted: percentComplete }),
+                React.createElement(FileError, { isShow: hasErrorOnUpload || hasErrorOnDelete, error: errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.error })),
+            React.createElement("div", { className: styles.bottomContainer },
+                React.createElement(DeleteFile, { isWhow: showDelete, onDeleteFile: function () { return __awaiter(void 0, void 0, void 0, function () {
+                        var isDeleted;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, onDeleteFile()];
+                                case 1:
+                                    isDeleted = _a.sent();
+                                    if (!isDeleted) {
+                                        setErrorInfo({ origemFunction: "deleteFile", error: "Delete Error" });
+                                    }
+                                    else {
+                                        setErrorInfo(null);
+                                    }
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); } }),
+                React.createElement(RetryUpload, { isShow: showRetry, onRetry: onRetry })))));
+};
+//# sourceMappingURL=UploadFile.js.map

package/lib/controls/imagePicker/uploadFiles/UploadFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/UploadFile.tsx"],"names":[],"mappings":"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"}

package/lib/controls/imagePicker/uploadFiles/UploadFiles.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { ISearchImagesResult } from "../models/ISearchImagesResult";
+export interface IUploadFilesProps {
+    onSelectedFile: (files: ISearchImagesResult) => void;
+}
+export declare const UploadFiles: React.FunctionComponent<IUploadFilesProps>;
+//# sourceMappingURL=UploadFiles.d.ts.map

package/lib/controls/imagePicker/uploadFiles/UploadFiles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFiles.d.ts","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/UploadFiles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAKpE,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACtD;AAYD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CA+IlE,CAAC"}

package/lib/controls/imagePicker/uploadFiles/UploadFiles.js

@@ -0,0 +1,187 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from "react";
+import strings from "ControlStrings";
+import { useAtomValue } from "jotai";
+import { useDropzone } from "react-dropzone";
+import { Body1, Caption1, tokens, } from "@fluentui/react-components";
+import { Icon } from "@iconify/react";
+import { contextState } from "../atoms/contextState";
+import { EUploadLocations } from "../constants/EUploadLocations";
+import { useDeleteFile } from "../hooks/useDeleteFile";
+import { SelectUploadLocation } from "./SelectUploadLocation";
+import { UpLoadFile } from "./UploadFile";
+import { useUploadFilesStyles } from "./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"),
+        };
+};
+export 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.CurrentSite), selectedUploadLocation = _d[0], setSelectedUploadLocation = _d[1];
+    var appContext = useAtomValue(contextState);
+    var deleteFile = useDeleteFile(appContext.context)[0];
+    var styles = 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 __spreadArray(__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 __awaiter(void 0, void 0, void 0, function () {
+        var error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    if (!(itemId && driveId && libraryId)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, deleteFile(driveId, libraryId, itemId, selectedUploadLocation)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    setFiles(function (prevFiles) { return prevFiles.filter(function (f) { return f.name !== fileName; }); });
+                    onSelectedFile(null);
+                    return [2 /*return*/, true];
+                case 3:
+                    error_1 = _a.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, { key: file.name, file: file, onFileSelected: onFileSelected, selectedFileId: selectedFileId, uploadLocation: selectedUploadLocation, onDelete: function (filename, driveId, libraryId, itemId) { return __awaiter(void 0, void 0, void 0, function () { return __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 = 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: tokens.colorNeutralBackground3Pressed };
+    }, []);
+    var acceptStyle = React.useMemo(function () {
+        return { borderColor: tokens.colorNeutralBackground3Pressed };
+    }, []);
+    var rejectStyle = React.useMemo(function () {
+        return {
+            borderColor: tokens.colorStatusDangerBackground1,
+        };
+    }, []);
+    var style = React.useMemo(function () { return (__assign(__assign(__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(Caption1, { key: file.name, style: { color: 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, { onSelectedLocation: function (location) { return setSelectedUploadLocation(location); } }),
+            React.createElement("div", __assign({}, getRootProps({ className: styles.baseStyle, style: style })),
+                React.createElement("input", __assign({}, getInputProps())),
+                React.createElement("div", { className: styles.dragContainer },
+                    React.createElement(Icon, { icon: "mage:image-upload", className: styles.dragDropIconStyles }),
+                    isDragAccept && React.createElement(Caption1, null, strings.ImagePickerDragFilesAccpted),
+                    isDragReject && React.createElement(Caption1, null, strings.ImagePickerDragFilesRejected),
+                    !isDragActive && React.createElement(Caption1, null, strings.ImagePickerDragFilesActive),
+                    React.createElement(Body1, null, strings.ImagePickerDragDropText))),
+            React.createElement("div", { className: styles.containerGlobalMarginTop }, hasFilesRejection && fileRejectionItems),
+            React.createElement("div", { className: styles.imagesContainer }, renderFiles))));
+};
+//# sourceMappingURL=UploadFiles.js.map

package/lib/controls/imagePicker/uploadFiles/UploadFiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFiles.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/UploadFiles.tsx"],"names":[],"mappings":"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"}

package/lib/controls/imagePicker/uploadFiles/useUploadFilesStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const useUploadFilesStyles: () => Record<"card" | "selectedImage" | "baseStyle" | "dragContainer" | "imagesContainer" | "itemBody" | "headerTitle" | "bottomContainer" | "deleteStyle" | "iconRefreshStyle" | "dragDropIconStyles" | "containerGlobalMarginTop", string>;
+//# sourceMappingURL=useUploadFilesStyles.d.ts.map

package/lib/controls/imagePicker/uploadFiles/useUploadFilesStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUploadFilesStyles.d.ts","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/useUploadFilesStyles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,8OA8F7B,CAAC"}

package/lib/controls/imagePicker/uploadFiles/useUploadFilesStyles.js

@@ -0,0 +1,50 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { makeStyles, shorthands, tokens, } from "@fluentui/react-components";
+export var useUploadFilesStyles = makeStyles({
+    baseStyle: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, shorthands.flex("1")), { display: "flex", flexDirection: "column", alignItems: "center" }), shorthands.padding("20px")), shorthands.borderWidth("2px")), shorthands.borderRadius("2px")), shorthands.borderColor(tokens.colorNeutralBackground5)), shorthands.borderStyle("dashed")), shorthands.outline("none")), { "&:hover": __assign(__assign({}, shorthands.borderColor(tokens.colorNeutralBackground3Pressed)), { cursor: "pointer" }) }),
+    dragContainer: __assign({ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, shorthands.gap("10px")),
+    imagesContainer: __assign(__assign({ display: "grid", maxHeight: "500px", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%,150px), 1fr))" }, shorthands.gap("10px")), { paddingTop: "15px", paddingBottom: "15px", overflowY: "auto", scrollbarWidth: "thin" }),
+    itemBody: {
+        display: "flex",
+        flexDirection: "column",
+        /*   paddingBottom: "10px", */
+    },
+    headerTitle: __assign(__assign({ display: "-webkit-box", "-webkit-line-clamp": "1", "-webkit-box-orient": "vertical" }, shorthands.overflow("hidden")), { breakWord: "break-all", lineBreak: "anywhere", textAlign: "start", textOverflow: "ellipsis" }),
+    bottomContainer: {
+        justifyContent: "end",
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "row",
+        position: "absolute",
+        bottom: "15px",
+        right: "5px",
+        height: "20px"
+    },
+    card: __assign({ height: "210px" }, shorthands.borderRadius("6px")),
+    deleteStyle: {
+        width: "16px",
+        height: "16px",
+    },
+    iconRefreshStyle: {
+        width: "16px",
+        height: "16px",
+    },
+    selectedImage: __assign(__assign({}, shorthands.border("3px", "solid", tokens.colorBrandBackground)), shorthands.padding("3px")),
+    dragDropIconStyles: {
+        width: "28px", height: "28px", color: tokens.colorBrandBackground
+    },
+    containerGlobalMarginTop: {
+        marginTop: "10px",
+    },
+});
+//# sourceMappingURL=useUploadFilesStyles.js.map

package/lib/controls/imagePicker/uploadFiles/useUploadFilesStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUploadFilesStyles.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/useUploadFilesStyles.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,UAAU,EACV,UAAU,EACV,MAAM,GACP,MAAM,4BAA4B,CAAC;AAEpC,MAAM,CAAC,IAAM,oBAAoB,GAC/B,UAAU,CAAC;IACT,SAAS,uFACJ,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,KACvB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,UAAU,EAAE,QAAQ,KACjB,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,GAC1B,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,GAC7B,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,GAC9B,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,uBAAuB,CAAC,GACtD,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,GAGhC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,KAE7B,SAAS,wBACJ,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,8BAA8B,CAAC,KAChE,MAAM,EAAE,SAAS,MAEpB;IAED,aAAa,aACX,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,IACrB,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAC1B;IAED,eAAe,sBACb,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,OAAO,EAClB,mBAAmB,EAAE,iDAAiD,IACnE,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,KACzB,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,MAAM,GACvB;IAED,QAAQ,EAAE;QACR,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,8BAA8B;KAC/B;IAED,WAAW,sBACT,OAAO,EAAE,aAAa,EACtB,oBAAoB,EAAE,GAAG,EACzB,oBAAoB,EAAE,UAAU,IAC7B,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAChC,SAAS,EAAE,WAAW,EACtB,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,UAAU,GACzB;IAED,eAAe,EAAE;QACf,cAAc,EAAE,KAAK;QACrB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,MAAM;KACf;IAED,IAAI,aACF,MAAM,EAAE,OAAO,IACZ,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAClC;IAED,WAAW,EAAE;QACX,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,gBAAgB,EAAC;QACf,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KAEf;IACD,aAAa,wBACR,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,oBAAoB,CAAC,GAC9D,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAC7B;IACD,kBAAkB,EAAG;QACnB,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,oBAAoB;KAClE;IACD,wBAAwB,EAAE;QACxB,SAAS,EAAE,MAAM;KAClB;CAEF,CAAC,CAAC"}

package/lib/controls/imagePicker/useImagePickerStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const useImagePickerStyles: () => Record<"image" | "grid" | "root" | "toolbarContainer" | "buttonContainer" | "selectedImage" | "stockImagesPicker" | "stockImageContainer" | "renderImageContainer", string>;
+//# sourceMappingURL=useImagePickerStyles.d.ts.map

package/lib/controls/imagePicker/useImagePickerStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePickerStyles.d.ts","sourceRoot":"","sources":["../../../src/controls/imagePicker/useImagePickerStyles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,mLA4E/B,CAAC"}