@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/FileBucket.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import _regeneratorRuntime from "@babel/runtime/regenerator";
/*

     Created by Hassan Steven Compton.
     
     March 7, 2024.

*/
import React from "react";
import { useState, useEffect, useRef } from "react";
import { HUDUniversalHUDUtilityManager, Delay, ContainsBlacklistedCharacters, ConvertNumberToMoneyFormat, ConvertFileSizeToDisplay, ConvertFileToBase64 } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import HUDProgressBar from "./HUDProgressBar.js";
import FilePreview from "./FilePreview.js";
import HUDTyper from "./HUDTyper.js";
function FileBucket(fileBucketConfigurationSettings) {
  var bucketContainerConfigurationSettings = fileBucketConfigurationSettings.bucketContainerConfigurationSettings,
    bucketConfigurationSettings = fileBucketConfigurationSettings.bucketConfigurationSettings,
    bucketHeaderDividerConfigurationSettings = fileBucketConfigurationSettings.bucketHeaderDividerConfigurationSettings,
    bucketActionTabBarConfigurationSettings = fileBucketConfigurationSettings.bucketActionTabBarConfigurationSettings,
    bucketActionBarConfigurationSettings = fileBucketConfigurationSettings.bucketActionBarConfigurationSettings,
    bucketMinimizeButtonConfigurationSettings = fileBucketConfigurationSettings.bucketMinimizeButtonConfigurationSettings,
    bucketDeleteButtonConfigurationSettings = fileBucketConfigurationSettings.bucketDeleteButtonConfigurationSettings,
    bucketCategoryLabelConfigurationSettings = fileBucketConfigurationSettings.bucketCategoryLabelConfigurationSettings,
    bucketNameLabelConfigurationSettings = fileBucketConfigurationSettings.bucketNameLabelConfigurationSettings,
    fileUploadProgressPercentageLabelConfigurationSettings = fileBucketConfigurationSettings.fileUploadProgressPercentageLabelConfigurationSettings,
    fileUploadProgressBarBackgroundConfigurationSettings = fileBucketConfigurationSettings.fileUploadProgressBarBackgroundConfigurationSettings,
    fileUploadProgressBarConfigurationSettings = fileBucketConfigurationSettings.fileUploadProgressBarConfigurationSettings,
    fileSearchResultLabelConfigurationSettings = fileBucketConfigurationSettings.fileSearchResultLabelConfigurationSettings,
    fileSearchInputConfigurationSettings = fileBucketConfigurationSettings.fileSearchInputConfigurationSettings,
    fileDescriptionConfigurationSettings = fileBucketConfigurationSettings.fileDescriptionConfigurationSettings,
    fileInputConfigurationSettings = fileBucketConfigurationSettings.fileInputConfigurationSettings,
    fileListConfigurationSettings = fileBucketConfigurationSettings.fileListConfigurationSettings,
    fileItemConfigurationSettings = fileBucketConfigurationSettings.fileItemConfigurationSettings,
    deleteButtonConfigurationSettings = fileBucketConfigurationSettings.deleteButtonConfigurationSettings,
    uploadButtonConfigurationSettings = fileBucketConfigurationSettings.uploadButtonConfigurationSettings,
    previewContainerConfigurationSettings = fileBucketConfigurationSettings.previewContainerConfigurationSettings,
    previewConfigurationSettings = fileBucketConfigurationSettings.previewConfigurationSettings,
    previewFileInfoConfigurationSettings = fileBucketConfigurationSettings.previewFileInfoConfigurationSettings,
    previewFileNameConfigurationSettings = fileBucketConfigurationSettings.previewFileNameConfigurationSettings,
    previewUnsupportedFileConfigurationSettings = fileBucketConfigurationSettings.previewUnsupportedFileConfigurationSettings,
    previewDownloadLinkConfigurationSettings = fileBucketConfigurationSettings.previewDownloadLinkConfigurationSettings,
    setFileBucketHovered = fileBucketConfigurationSettings.setFileBucketHovered,
    fileBucketHovered = fileBucketConfigurationSettings.fileBucketHovered,
    setUploadingFiles = fileBucketConfigurationSettings.setUploadingFiles,
    uploadingFiles = fileBucketConfigurationSettings.uploadingFiles,
    setFileBuckets = fileBucketConfigurationSettings.setFileBuckets,
    fileBuckets = fileBucketConfigurationSettings.fileBuckets,
    signedUser = fileBucketConfigurationSettings.signedUser,
    _fileBucketConfigurat = fileBucketConfigurationSettings.dataAccessGateway,
    dataAccessGateway = _fileBucketConfigurat === void 0 ? "dataP" : _fileBucketConfigurat,
    _fileBucketConfigurat2 = fileBucketConfigurationSettings.dataAccessName,
    dataAccessName = _fileBucketConfigurat2 === void 0 ? "data" : _fileBucketConfigurat2,
    _fileBucketConfigurat3 = fileBucketConfigurationSettings.dataAccessP,
    dataAccessP = _fileBucketConfigurat3 === void 0 ? 8969 : _fileBucketConfigurat3,
    _fileBucketConfigurat4 = fileBucketConfigurationSettings.utilizeBuiltInFileExtractor,
    utilizeBuiltInFileExtractor = _fileBucketConfigurat4 === void 0 ? true : _fileBucketConfigurat4,
    directFileDownloadAction = fileBucketConfigurationSettings.directFileDownloadAction,
    deleteBucketAction = fileBucketConfigurationSettings.deleteBucketAction,
    deleteFilesAction = fileBucketConfigurationSettings.deleteFilesAction,
    uploadFilesAction = fileBucketConfigurationSettings.uploadFilesAction,
    getFilesAction = fileBucketConfigurationSettings.getFilesAction,
    _fileBucketConfigurat5 = fileBucketConfigurationSettings.clearFilesOnMinimize,
    clearFilesOnMinimize = _fileBucketConfigurat5 === void 0 ? false : _fileBucketConfigurat5,
    _fileBucketConfigurat6 = fileBucketConfigurationSettings.loadFilesSeparately,
    loadFilesSeparately = _fileBucketConfigurat6 === void 0 ? false : _fileBucketConfigurat6,
    _fileBucketConfigurat7 = fileBucketConfigurationSettings.loadBucketMinimized,
    loadBucketMinimized = _fileBucketConfigurat7 === void 0 ? false : _fileBucketConfigurat7,
    _fileBucketConfigurat8 = fileBucketConfigurationSettings.totalFilesSize,
    totalFilesSize = _fileBucketConfigurat8 === void 0 ? 0 : _fileBucketConfigurat8,
    _fileBucketConfigurat9 = fileBucketConfigurationSettings.totalFiles,
    totalFiles = _fileBucketConfigurat9 === void 0 ? 0 : _fileBucketConfigurat9,
    currentBucketCategories = fileBucketConfigurationSettings.currentBucketCategories,
    _fileBucketConfigurat10 = fileBucketConfigurationSettings.currentFiles,
    currentFiles = _fileBucketConfigurat10 === void 0 ? [] : _fileBucketConfigurat10,
    currentBucket = fileBucketConfigurationSettings.currentBucket,
    _fileBucketConfigurat11 = fileBucketConfigurationSettings.getBucketFilesActionID,
    getBucketFilesActionID = _fileBucketConfigurat11 === void 0 ? "getBucketFiles" : _fileBucketConfigurat11,
    _fileBucketConfigurat12 = fileBucketConfigurationSettings.bucketType,
    bucketType = _fileBucketConfigurat12 === void 0 ? "Storage" : _fileBucketConfigurat12,
    _fileBucketConfigurat13 = fileBucketConfigurationSettings.bucketName,
    bucketName = _fileBucketConfigurat13 === void 0 ? "" : _fileBucketConfigurat13,
    bucketIndex = fileBucketConfigurationSettings.bucketIndex;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    processingCreateBucketAction = _useState2[0],
    setProcessingCreateBucketAction = _useState2[1];
  var _useState3 = useState(""),
    _useState4 = _slicedToArray(_useState3, 2),
    bucketProcessIndicatorTitle = _useState4[0],
    setBucketProcessIndicatorTitle = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    bucketCategoryInputFocus = _useState6[0],
    setBucketCategoryInputFocus = _useState6[1];
  var _useState7 = useState(""),
    _useState8 = _slicedToArray(_useState7, 2),
    bucketCategoryInputValue = _useState8[0],
    setBucketCategoryInputValue = _useState8[1];
  var _useState9 = useState(false),
    _useState10 = _slicedToArray(_useState9, 2),
    bucketNameInputFocus = _useState10[0],
    setBucketNameInputFocus = _useState10[1];
  var _useState11 = useState(""),
    _useState12 = _slicedToArray(_useState11, 2),
    bucketNameInputValue = _useState12[0],
    setBucketNameInputValue = _useState12[1];
  var _useState13 = useState(false),
    _useState14 = _slicedToArray(_useState13, 2),
    minimizeButtonHover = _useState14[0],
    setMinimizeButtonHover = _useState14[1];
  var _useState15 = useState(loadBucketMinimized),
    _useState16 = _slicedToArray(_useState15, 2),
    bucketMinimized = _useState16[0],
    setBucketMinimized = _useState16[1];
  var _useState17 = useState(false),
    _useState18 = _slicedToArray(_useState17, 2),
    deleteButtonHover = _useState18[0],
    setDeleteButtonHover = _useState18[1];
  var _useState19 = useState(false),
    _useState20 = _slicedToArray(_useState19, 2),
    uploadButtonHover = _useState20[0],
    setUploadButtonHover = _useState20[1];
  var _useState21 = useState({}),
    _useState22 = _slicedToArray(_useState21, 2),
    uploadFilesPercentage = _useState22[0],
    setUploadFilesPercentage = _useState22[1];
  var _useState23 = useState(false),
    _useState24 = _slicedToArray(_useState23, 2),
    fileSearchInputFocus = _useState24[0],
    setFileSearchInputFocus = _useState24[1];
  var _useState25 = useState(""),
    _useState26 = _slicedToArray(_useState25, 2),
    fileSearchInputValue = _useState26[0],
    setFileSearchInputValue = _useState26[1];
  var _useState27 = useState(0),
    _useState28 = _slicedToArray(_useState27, 2),
    totalFileSize = _useState28[0],
    setTotalFileSize = _useState28[1];
  var _useState29 = useState(null),
    _useState30 = _slicedToArray(_useState29, 2),
    bucketCategoryIndex = _useState30[0],
    setBucketCategoryIndex = _useState30[1];
  var _useState31 = useState([]),
    _useState32 = _slicedToArray(_useState31, 2),
    bucketCategories = _useState32[0],
    setBucketCategories = _useState32[1];
  var _useState33 = useState([]),
    _useState34 = _slicedToArray(_useState33, 2),
    selectedFiles = _useState34[0],
    setSelectedFiles = _useState34[1];
  var _useState35 = useState([]),
    _useState36 = _slicedToArray(_useState35, 2),
    currentBucketFiles = _useState36[0],
    setCurrentBucketFiles = _useState36[1];
  var _useState37 = useState([]),
    _useState38 = _slicedToArray(_useState37, 2),
    files = _useState38[0],
    setFiles = _useState38[1];
  var addFileInputRef = useRef(null);
  var handleBucketCategoryInputInFocusUpdate = function handleBucketCategoryInputInFocusUpdate(e) {
    setBucketCategoryInputFocus(true);
  };
  var handleBucketCategoryInputBlurUpdate = function handleBucketCategoryInputBlurUpdate(e) {
    setBucketCategoryInputFocus(false);
  };
  var handleBucketCategoryInputUpdate = function handleBucketCategoryInputUpdate(e) {
    if (!ContainsBlacklistedCharacters(e.target.value)) {
      setBucketCategories(currentBucketCategories.filter(function (bucketCategory) {
        return bucketCategory.includes(e.target.value);
      }));
      setBucketCategoryInputValue(e.target.value);
    }
  };
  var handleBucketNameInputInFocusUpdate = function handleBucketNameInputInFocusUpdate(e) {
    setBucketNameInputFocus(true);
  };
  var handleBucketNameInputBlurUpdate = function handleBucketNameInputBlurUpdate(e) {
    setBucketNameInputFocus(false);
  };
  var handleBucketNameInputUpdate = function handleBucketNameInputUpdate(e) {
    if (!ContainsBlacklistedCharacters(e.target.value, " ")) {
      setBucketNameInputValue(e.target.value);
    }
  };
  var handleFileSearchInputInFocusUpdate = function handleFileSearchInputInFocusUpdate(e) {
    e.preventDefault();
    setFileSearchInputFocus(true);
    return;
  };
  var handleFileSearchInputBlurUpdate = function handleFileSearchInputBlurUpdate(e) {
    e.preventDefault();
    setFileSearchInputFocus(false);
    return;
  };
  var handleAddedFileSearchInputUpdate = function handleAddedFileSearchInputUpdate(e) {
    e.preventDefault();
    var inputValue = e.target.value;
    setFileSearchInputValue(inputValue);
    setCurrentBucketFiles(selectedFiles.filter(function (file) {
      return file.name.includes(inputValue);
    }));
    return;
  };
  var handleFileSearchInputUpdate = function handleFileSearchInputUpdate(e) {
    e.preventDefault();
    var inputValue = e.target.value;
    setFileSearchInputValue(inputValue);
    setCurrentBucketFiles(files.filter(function (file) {
      return file.name.includes(inputValue) || file.dateCreated.includes(inputValue);
    }));
    return;
  };
  var handleBucketFiles = function handleBucketFiles() {
    if (!loadFilesSeparately && files.length > 0) {
      return;
    }
    if (getFilesAction) {
      getFilesAction(currentBucket);
    }
    if (!utilizeBuiltInFileExtractor) {
      return;
    }
    var hudDataNetworkAccess = HUDUniversalHUDUtilityManager.GetHUDNetworkAccess(dataAccessP, dataAccessName, dataAccessGateway, function () {
      var hudDataNetworkGetBucketFilesUpdate = setTimeout(function () {
        var hudNetworkGetBucketFilesAction = {
          userID: signedUser.userID,
          username: signedUser.username,
          access: signedUser.accessLevel,
          action: getBucketFilesActionID,
          sentData: currentBucket
        };
        HUDUniversalHUDUtilityManager.SendDataThroughHUDNetwork(hudDataNetworkAccess, hudNetworkGetBucketFilesAction);
        return;
      }, 100);
      return function () {
        return clearInterval(hudDataNetworkGetBucketFilesUpdate);
      };
    });
    hudDataNetworkAccess.onmessage = function (event) {
      var dataEventData = JSON.parse(event.data);
      var eventReceivers = {
        "gotBucketFiles": function gotBucketFiles() {
          if (dataEventData.data === null || dataEventData.data.length <= 0) {
            return;
          }
          var bucketFiles = [].concat(_toConsumableArray(selectedFiles), _toConsumableArray(dataEventData.data));
          bucketFiles.reverse();
          setCurrentBucketFiles(bucketFiles);
          setFiles(bucketFiles);
          return function () {};
        }
      };
      if (eventReceivers[dataEventData.type]) {
        eventReceivers[dataEventData.type]();
      }
    };
    return function () {
      hudDataNetworkAccess.close();
    };
  };
  var addFiles = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
      var timer;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            setBucketProcessIndicatorTitle(event.target.files.length > 1 ? "Adding files..." : event.target.files.length === 1 ? "Adding file..." : "");
            _context.next = 3;
            return processFiles(event.target.files);
          case 3:
            setBucketProcessIndicatorTitle(event.target.files.length > 1 ? "Added files!" : event.target.files.length === 1 ? "Added file!" : "");
            clearFileInput();
            timer = setTimeout(function () {
              setBucketProcessIndicatorTitle("");
            }, 1269);
            return _context.abrupt("return", function () {
              clearInterval(timer);
            });
          case 7:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function addFiles(_x) {
      return _ref.apply(this, arguments);
    };
  }();
  var processFiles = function processFiles(files) {
    return new Promise(function (resolve, reject) {
      var fileReaders = [];
      var fileList = [];
      Array.from(files).forEach(function (file) {
        var reader = new FileReader();
        reader.onload = /*#__PURE__*/function () {
          var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
            var base64String;
            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
              while (1) switch (_context2.prev = _context2.next) {
                case 0:
                  _context2.next = 2;
                  return ConvertFileToBase64(file);
                case 2:
                  base64String = _context2.sent;
                  if (!(base64String === null)) {
                    _context2.next = 5;
                    break;
                  }
                  return _context2.abrupt("return");
                case 5:
                  fileList.push({
                    id: Date.now() + "_" + file.name,
                    name: file.name,
                    data: base64String,
                    status: "Added",
                    size: file.size,
                    type: file.type
                  });
                  setTotalFileSize(totalFileSize + file.size);
                  if (fileList.length === files.length) {
                    setCurrentBucketFiles(function (prevFiles) {
                      return [].concat(fileList, _toConsumableArray(prevFiles));
                    });
                    setSelectedFiles(function (prevFiles) {
                      return [].concat(fileList, _toConsumableArray(prevFiles));
                    });
                    setFiles(function (prevFiles) {
                      return [].concat(fileList, _toConsumableArray(prevFiles));
                    });
                    resolve(true);
                  }
                case 8:
                case "end":
                  return _context2.stop();
              }
            }, _callee2);
          }));
          return function (_x2) {
            return _ref2.apply(this, arguments);
          };
        }();
        fileReaders.push(reader);
        reader.readAsArrayBuffer(file);
      });
      return;
    });
  };
  var clearFileInput = function clearFileInput() {
    var addFileInput = addFileInputRef.current;
    if (addFileInput) {
      addFileInput.value = "";
      return;
    }
    return;
  };
  var deleteBucket = function deleteBucket(iD, fileBucketID, fileBucketCategory) {
    fileBuckets[bucketIndex] = null;
    var currentFileBuckets = fileBuckets.filter(function (fileBucket) {
      return fileBucket !== null;
    });
    setFileBuckets(currentFileBuckets);
    if (deleteBucketAction !== undefined) {
      deleteBucketAction(iD, fileBucketID, fileBucketCategory);
      return;
    }
    return;
  };
  var deleteFile = function deleteFile(id, fileStatus, fileBucketID, fileBucketCategory) {
    var currentFile = files.filter(function (file) {
      return file.id === id;
    });
    setCurrentBucketFiles(function (prevFiles) {
      return prevFiles.filter(function (file) {
        return file.id !== id;
      });
    });
    setSelectedFiles(function (prevFiles) {
      return prevFiles.filter(function (file) {
        return file.id !== id;
      });
    });
    setFiles(function (prevFiles) {
      return prevFiles.filter(function (file) {
        return file.id !== id;
      });
    });
    if (currentFile && currentFile[0]) {
      var currentBucketSize = totalFileSize - parseInt(currentFile[0].size);
      setTotalFileSize(currentBucketSize > 0 ? currentBucketSize : 0);
    }
    if (fileStatus.trim() === "Uploaded" && deleteFilesAction !== undefined) {
      deleteFilesAction(id, fileBucketID, fileBucketCategory);
      return;
    }
    return;
  };
  var styles = {
    bucketContainer: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "column",
      boxShadow: "-3px -3px 1px 1px rgba(0, 0, 0, 0.69)",
      height: bucketMinimized ? "23.69rem" : "auto",
      width: "auto"
    }, bucketContainerConfigurationSettings),
    bucketActionTabBar: _objectSpread({
      position: "relative",
      display: "flex",
      marginBottom: "1rem"
    }, bucketActionTabBarConfigurationSettings),
    bucketActionBar: _objectSpread({
      position: "relative",
      display: "flex",
      marginBottom: "1rem"
    }, bucketActionBarConfigurationSettings),
    bucketDeleteButton: _objectSpread({
      cursor: "pointer",
      borderRadius: "0.569rem",
      background: deleteButtonHover ? "#cc0e00" : "#dc3545",
      transition: "scale 0.369s ease, background 0.69s ease-in",
      scale: deleteButtonHover ? "1.169" : "1",
      fontSize: "0.869rem",
      color: "white",
      border: 'none',
      width: "auto",
      padding: "0.569rem 1rem"
    }, bucketDeleteButtonConfigurationSettings),
    bucketCategoryLabel: _objectSpread({
      position: "relative",
      display: "flex",
      fontWeight: "469",
      fontFamily: "GR",
      fontStyle: "italic",
      fontSize: "0.969rem",
      marginBottom: "1.69rem"
    }, bucketCategoryLabelConfigurationSettings),
    bucketNameLabel: _objectSpread({
      position: "relative",
      display: "flex",
      fontWeight: "869",
      fontFamily: "ModeNine",
      fontSize: "1.69rem",
      marginBottom: "1rem"
    }, bucketNameLabelConfigurationSettings),
    bucket: _objectSpread({
      padding: "1.269rem",
      boxShadow: files.length <= 0 ? "inset 0 0 7px rgba(0, 0, 0, 0.269)" : "0 0 10px rgba(0, 0, 0, 0.269)",
      border: files.length <= 0 ? "0.269rem dashed #1a1313" : "0.269rem dashed #cc0e00",
      transition: "background 0.869s ease-in",
      background: deleteButtonHover ? "#dc3545" : files.length > 0 ? "transparent" : "rgba(47, 47, 47, 0.169)",
      borderRadius: "0.569rem",
      marginBottom: "1rem",
      marginTop: "1.269rem"
    }, bucketConfigurationSettings),
    fileInput: _objectSpread({
      marginBottom: "0.69rem",
      marginTop: "1rem",
      border: "none"
    }, fileInputConfigurationSettings),
    fileList: _objectSpread({
      listStyleType: "none",
      height: files.length <= 0 ? "5rem" : files.length === 1 ? "27rem" : files.length > 1 ? "37rem" : "auto",
      overflowY: "auto",
      padding: 0
    }, fileListConfigurationSettings),
    fileItem: _objectSpread({
      marginBottom: "0.569rem",
      padding: "1rem",
      transition: "background 0.869s ease-in",
      background: "#f8f9fa",
      borderRadius: "0.569rem",
      display: "flex",
      justifyContent: "flex-end",
      alignItems: "center"
    }, fileItemConfigurationSettings),
    minimizeButton: _objectSpread({
      position: "relative",
      userSelect: "none",
      cursor: "pointer",
      transition: "scale 0.269s ease-in, background 0.469s ease-in",
      scale: minimizeButtonHover ? "1.169" : "1",
      background: minimizeButtonHover ? "rgba(187.69, 187.69, 187.69, 1)" : "transparent",
      color: "white",
      border: 'none',
      borderRadius: "0.569rem",
      padding: "0.569rem 1rem"
    }, bucketMinimizeButtonConfigurationSettings),
    deleteButton: _objectSpread({
      position: "relative",
      cursor: "pointer",
      background: "#dc3545",
      color: "white",
      border: 'none',
      borderRadius: "0.569rem",
      padding: "0.569rem 1rem",
      marginLeft: "2.69rem"
    }, deleteButtonConfigurationSettings),
    uploadButton: _objectSpread({
      cursor: "pointer",
      transition: "background 1.269s ease, scale 0.869s ease",
      background: uploadButtonHover ? "#99c40a" : "#1a1313",
      scale: uploadButtonHover ? "1.169" : "1",
      pointerEvents: uploadingFiles === bucketIndex ? "none" : null,
      color: "white",
      border: 'none',
      borderRadius: "0.569rem",
      padding: "0.569rem 1rem",
      marginLeft: "0rem",
      marginTop: "1rem"
    }, uploadButtonConfigurationSettings)
  };
  useEffect(function () {
    if (files.length <= 0 && currentFiles.length > 0) {
      setBucketProcessIndicatorTitle(currentFiles.length > 1 ? "Loading files..." : currentFiles.length === 1 ? "Loading file..." : "");
      setCurrentBucketFiles(_toConsumableArray(currentFiles));
      setFiles(_toConsumableArray(currentFiles));
      files.reverse();
      var fileSize = 0;
      currentFiles.map( /*#__PURE__*/function () {
        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(currentFile, index) {
          return _regeneratorRuntime.wrap(function _callee3$(_context3) {
            while (1) switch (_context3.prev = _context3.next) {
              case 0:
                fileSize += parseInt(currentFile.size);
                if (!(index === currentFiles.length - 1)) {
                  _context3.next = 7;
                  break;
                }
                setTotalFileSize(fileSize);
                setBucketProcessIndicatorTitle(currentFiles.length > 1 ? "Loaded files!" : currentFiles.length === 1 ? "Loaded file!" : "");
                _context3.next = 6;
                return Delay(1269);
              case 6:
                setBucketProcessIndicatorTitle("");
              case 7:
              case "end":
                return _context3.stop();
            }
          }, _callee3);
        }));
        return function (_x3, _x4) {
          return _ref3.apply(this, arguments);
        };
      }());
    }
  }, [currentFiles]);
  useEffect(function () {
    if (currentBucketCategories !== undefined) {
      setBucketCategories(currentBucketCategories);
    }
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    style: styles.bucketContainer,
    onMouseLeave: function onMouseLeave() {
      setFileBucketHovered(null);
      return;
    },
    onMouseEnter: function onMouseEnter() {
      setFileBucketHovered(bucketIndex);
      return;
    }
  }, bucketType === "Storage" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    style: styles.bucketActionBar
  }, /*#__PURE__*/React.createElement("div", {
    style: styles.bucketDeleteButton,
    onMouseLeave: function onMouseLeave() {
      setDeleteButtonHover(false);
      return;
    },
    onMouseEnter: function onMouseEnter() {
      setDeleteButtonHover(true);
      return;
    },
    onClick: function onClick() {
      deleteBucket(fileBuckets[bucketIndex].iD, fileBuckets[bucketIndex].fileBucketID, fileBuckets[bucketIndex].fileBucketCategory);
      return;
    }
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 1
  }, "Delete"))), /*#__PURE__*/React.createElement("label", {
    style: styles.bucketNameLabel
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 1
  }, bucketName)), /*#__PURE__*/React.createElement("label", {
    style: styles.bucketCategoryLabel
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 1
  }, "Category | ".concat(currentBucket.fileBucketCategory))), /*#__PURE__*/React.createElement("div", {
    style: styles.bucketActionBar
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, styles.bucketActionBar), {}, {
      justifyContent: "flex-start",
      width: "calc(87.69%)",
      marginBottom: "0rem"
    })
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: styles.minimizeButton,
    onMouseLeave: function onMouseLeave() {
      setMinimizeButtonHover(false);
      return;
    },
    onMouseEnter: function onMouseEnter() {
      setMinimizeButtonHover(true);
      return;
    },
    onClick: function onClick() {
      setBucketMinimized(!bucketMinimized);
      if (bucketMinimized === true) {
        handleBucketFiles();
        return;
      }
      if (clearFilesOnMinimize) {
        setCurrentBucketFiles(_toConsumableArray(selectedFiles));
        setFiles(_toConsumableArray(selectedFiles));
        return;
      }
      return;
    }
  }, /*#__PURE__*/React.createElement("svg", {
    width: "15",
    height: "15",
    viewBox: "0 0 24 24",
    fill: "white"
  }, /*#__PURE__*/React.createElement("path", {
    d: bucketMinimized ? "M6 15l6-6 6 6" : "M6 15l6 6 6-6",
    fill: "none",
    stroke: "black",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round"
  }))), minimizeButtonHover ? /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      display: "flex",
      fontWeight: "569",
      fontFamily: "GR",
      fontSize: "0.869rem",
      color: "rgba(0, 0, 0, 0.269)",
      marginTop: "0.69rem"
    }
  }, bucketMinimized ? "Maximize" : "Collapse") : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "relative",
      display: "flex",
      background: "rgba(69, 69, 69, 0.269)",
      borderRadius: "1rem",
      height: "0.069rem",
      width: "calc(100%)",
      marginBottom: "1.69rem",
      marginTop: "0.269rem"
    }, bucketHeaderDividerConfigurationSettings)
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      display: "flex",
      fontWeight: "569",
      fontFamily: "GR",
      fontSize: "1.169rem",
      color: "rgba(0, 0, 0, 0.69)",
      marginBottom: "0.69rem"
    }
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 1
  }, "Files | ".concat(ConvertNumberToMoneyFormat(files.length > 0 ? files.length : totalFiles)))), /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      display: "flex",
      fontWeight: "569",
      fontFamily: "ModeNine",
      color: "rgba(0, 0, 0, 0.69)"
    }
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 1
  }, "Size | ".concat(ConvertFileSizeToDisplay(totalFileSize > 0 ? totalFileSize : totalFilesSize)))), /*#__PURE__*/React.createElement("input", {
    ref: addFileInputRef,
    type: "file",
    multiple: true,
    onChange: addFiles,
    style: styles.fileInput
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      display: "flex",
      fontWeight: "569",
      fontFamily: "GR",
      color: "rgba(0, 0, 0, 0.69)"
    }
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 1
  }, bucketProcessIndicatorTitle)), selectedFiles.length > 0 ? /*#__PURE__*/React.createElement("div", {
    style: styles.bucketActionTabBar
  }, /*#__PURE__*/React.createElement("div", {
    style: styles.uploadButton,
    onMouseLeave: function onMouseLeave() {
      setUploadButtonHover(false);
      return;
    },
    onMouseEnter: function onMouseEnter() {
      setUploadButtonHover(true);
      return;
    },
    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
        while (1) switch (_context5.prev = _context5.next) {
          case 0:
            setUploadingFiles(bucketIndex);
            if (!(uploadFilesAction !== undefined)) {
              _context5.next = 6;
              break;
            }
            _context5.next = 4;
            return uploadFilesAction(selectedFiles, bucketIndex, null, currentBucket, /*#__PURE__*/function () {
              var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(uploadProgress, fileID, fileIndex) {
                return _regeneratorRuntime.wrap(function _callee4$(_context4) {
                  while (1) switch (_context4.prev = _context4.next) {
                    case 0:
                      setUploadFilesPercentage(function (prevProgress) {
                        return _objectSpread(_objectSpread({}, prevProgress), {}, _defineProperty({}, fileID, uploadProgress));
                      });
                      selectedFiles[fileIndex].uploadProgress = uploadProgress;
                      if (!(uploadProgress >= 100)) {
                        _context4.next = 8;
                        break;
                      }
                      _context4.next = 5;
                      return Delay(869);
                    case 5:
                      delete uploadFilesPercentage[fileID];
                      setUploadFilesPercentage(uploadFilesPercentage);
                      delete selectedFiles[fileIndex].uploadProgress;
                    case 8:
                      return _context4.abrupt("return");
                    case 9:
                    case "end":
                      return _context4.stop();
                  }
                }, _callee4);
              }));
              return function (_x5, _x6, _x7) {
                return _ref5.apply(this, arguments);
              };
            }(), function (updatedFiles) {
              if (updatedFiles === null || updatedFiles === undefined || updatedFiles.length <= 0 || updatedFiles[0] === null) {
                return;
              }
              var timer = setTimeout(function () {
                setSelectedFiles([]);
                var inFiles = new Set(updatedFiles.map(function (file) {
                  return file.id;
                }));
                setCurrentBucketFiles([].concat(_toConsumableArray(updatedFiles), _toConsumableArray(files.filter(function (file) {
                  return !inFiles.has(file.id);
                }))));
                setFiles([].concat(_toConsumableArray(updatedFiles), _toConsumableArray(files.filter(function (file) {
                  return !inFiles.has(file.id);
                }))));
              }, 369);
              return function () {
                clearInterval(timer);
              };
            });
          case 4:
            clearFileInput();
            return _context5.abrupt("return");
          case 6:
            return _context5.abrupt("return");
          case 7:
          case "end":
            return _context5.stop();
        }
      }, _callee5);
    }))
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 1
  }, uploadingFiles === bucketIndex ? "Uploading..." : "Upload"))) : /*#__PURE__*/React.createElement(React.Fragment, null), bucketMinimized === false && files.length > 0 ? /*#__PURE__*/React.createElement("input", {
    type: "text",
    placeholder: "Search for file...",
    onFocus: handleFileSearchInputInFocusUpdate,
    onBlur: handleFileSearchInputBlurUpdate,
    onChange: handleFileSearchInputUpdate,
    value: fileSearchInputValue,
    style: _objectSpread({
      position: "relative",
      background: "rgba(217, 217, 217, 0.25)",
      borderRadius: "1rem",
      border: "1px black solid",
      outline: "none",
      boxShadow: fileSearchInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
      scale: fileSearchInputFocus ? "1.069" : "1",
      transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, margin-left 0.269s ease-in-out",
      width: "87.69%",
      height: "1.69rem",
      fontSize: "1.169rem",
      paddingLeft: "0.69rem",
      marginBottom: "1rem",
      marginRight: "0.269rem",
      marginLeft: fileSearchInputValue.trim() !== "" && currentFiles.length <= 0 ? "0rem" : fileSearchInputFocus ? "2rem" : "0rem"
    }, fileSearchInputConfigurationSettings)
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), !bucketMinimized && selectedFiles.length > 0 ? /*#__PURE__*/React.createElement("div", {
    style: styles.bucket
  }, /*#__PURE__*/React.createElement("ul", {
    style: styles.fileList
  }, files.map(function (file) {
    return /*#__PURE__*/React.createElement("li", {
      key: file.id,
      style: _objectSpread(_objectSpread({}, styles.fileItem), {}, {
        background: uploadingFiles === bucketIndex && selectedFiles.some(function (selectedFile) {
          return selectedFile.id === file.id;
        }) ? "rgba(144, 238, 144, 0.869)" : "#f8f9fa"
      })
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        display: "flex",
        flexDirection: "column"
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        display: "flex",
        flexDirection: "row"
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        display: "flex"
      }
    }, file.name), uploadingFiles === bucketIndex && selectedFiles.some(function (selectedFile) {
      return selectedFile.id === file.id;
    }) === true ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement("div", {
      style: styles.deleteButton,
      onClick: function onClick() {
        return deleteFile(file.id, file.status, currentBucket.fileBucketID, currentBucket.fileBucketCategory);
      }
    }, "Delete")), /*#__PURE__*/React.createElement("div", {
      style: _objectSpread({
        position: "relative",
        display: "flex",
        fontWeight: "569",
        fontFamily: "ModeNine",
        color: "rgba(0, 0, 0, 0.569)",
        marginTop: "0.469rem"
      }, fileDescriptionConfigurationSettings)
    }, /*#__PURE__*/React.createElement(HUDTyper, {
      speed: 1
    }, uploadingFiles === bucketIndex && selectedFiles.some(function (selectedFile) {
      return selectedFile.id === file.id;
    }) === true ? "Uploading... ".concat(ConvertFileSizeToDisplay(file.size)) : "".concat(file.status, " | ").concat(ConvertFileSizeToDisplay(file.size), " | ").concat(file.dateCreated ? file.dateCreated : GRUniversalHUDUtilityManager.ConvertUTCDateToDateDisplay(Date.now(), true)))), uploadFilesPercentage && uploadFilesPercentage[file.id] !== undefined && uploadFilesPercentage[file.id] !== null ? /*#__PURE__*/React.createElement(HUDProgressBar, {
      progressPercentageLabelConfigurationSettings: fileUploadProgressPercentageLabelConfigurationSettings,
      progressBarBackgroundConfigurationSettings: fileUploadProgressBarBackgroundConfigurationSettings,
      progressBarConfigurationSettings: fileUploadProgressBarConfigurationSettings,
      currentPercentage: uploadFilesPercentage[file.id]
    }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(FilePreview, {
      previewContainerConfigurationSettings: previewContainerConfigurationSettings,
      previewConfigurationSettings: previewConfigurationSettings,
      fileInfoConfigurationSettings: previewFileInfoConfigurationSettings,
      fileNameConfigurationSettings: previewFileNameConfigurationSettings,
      unsupportedFileConfigurationSettings: previewUnsupportedFileConfigurationSettings,
      downloadLinkConfigurationSettings: previewDownloadLinkConfigurationSettings,
      directDownloadAction: directFileDownloadAction,
      bucket: currentBucket,
      file: file
    })));
  }))) : !bucketMinimized && currentBucketFiles.length > 0 ? /*#__PURE__*/React.createElement("div", {
    style: styles.bucket
  }, /*#__PURE__*/React.createElement("ul", {
    style: styles.fileList
  }, currentBucketFiles.map(function (file) {
    return /*#__PURE__*/React.createElement("li", {
      key: file.id,
      style: _objectSpread(_objectSpread({}, styles.fileItem), {}, {
        background: uploadingFiles === bucketIndex && selectedFiles.some(function (selectedFile) {
          return selectedFile.id === file.id;
        }) ? "rgba(144, 238, 144, 0.869)" : "#f8f9fa"
      })
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        display: "flex",
        flexDirection: "column"
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        display: "flex",
        flexDirection: "row"
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        display: "flex"
      }
    }, file.name), uploadingFiles === bucketIndex && selectedFiles.some(function (selectedFile) {
      return selectedFile.id === file.id;
    }) === true ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement("div", {
      style: styles.deleteButton,
      onClick: function onClick() {
        return deleteFile(file.id, file.status, currentBucket.fileBucketID, currentBucket.fileBucketCategory);
      }
    }, "Delete")), /*#__PURE__*/React.createElement("div", {
      style: _objectSpread({
        position: "relative",
        display: "flex",
        fontWeight: "569",
        fontFamily: "ModeNine",
        color: "rgba(0, 0, 0, 0.569)",
        marginTop: "0.469rem"
      }, fileDescriptionConfigurationSettings)
    }, /*#__PURE__*/React.createElement(HUDTyper, {
      speed: 1
    }, uploadingFiles === bucketIndex && selectedFiles.some(function (selectedFile) {
      return selectedFile.id === file.id;
    }) === true ? "Uploading... ".concat(ConvertFileSizeToDisplay(file.size)) : "".concat(file.status, " | ").concat(ConvertFileSizeToDisplay(file.size), " | ").concat(file.dateCreated ? file.dateCreated : GRUniversalHUDUtilityManager.ConvertUTCDateToDateDisplay(Date.now(), true)))), uploadFilesPercentage && uploadFilesPercentage[file.id] !== undefined && uploadFilesPercentage[file.id] !== null ? /*#__PURE__*/React.createElement(HUDProgressBar, {
      progressPercentageLabelConfigurationSettings: fileUploadProgressPercentageLabelConfigurationSettings,
      progressBarBackgroundConfigurationSettings: fileUploadProgressBarBackgroundConfigurationSettings,
      progressBarConfigurationSettings: fileUploadProgressBarConfigurationSettings,
      currentPercentage: uploadFilesPercentage[file.id]
    }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(FilePreview, {
      previewContainerConfigurationSettings: previewContainerConfigurationSettings,
      previewConfigurationSettings: previewConfigurationSettings,
      fileInfoConfigurationSettings: previewFileInfoConfigurationSettings,
      fileNameConfigurationSettings: previewFileNameConfigurationSettings,
      unsupportedFileConfigurationSettings: previewUnsupportedFileConfigurationSettings,
      downloadLinkConfigurationSettings: previewDownloadLinkConfigurationSettings,
      directDownloadAction: directFileDownloadAction,
      bucket: currentBucket,
      file: file
    })));
  }))) : fileSearchInputValue.trim() !== "" && currentBucketFiles.length <= 0 ? /*#__PURE__*/React.createElement("div", {
    style: styles.bucket
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "relative",
      display: "flex",
      fontWeight: "569",
      fontFamily: "GR",
      fontSize: "1.269rem",
      color: "rgba(0, 0, 0, 1)",
      marginTop: "0.469rem"
    }, fileSearchResultLabelConfigurationSettings)
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 1
  }, "No files match your search."))) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, bucketCategoryInputValue.trim() !== "" && bucketCategories.length > 0 ? /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      display: "flex",
      flexDirection: "row"
    }
  }, bucketCategories.map(function (bucketCategory, index) {
    return /*#__PURE__*/React.createElement("div", {
      className: "invisa-scroller",
      key: bucketCategory,
      style: {
        position: "relative",
        display: "flex",
        flexDirection: "row",
        overflowX: "auto",
        transition: "scale 0.69s ease",
        scale: bucketCategoryIndex === index ? "1.0269" : "1",
        cursor: "pointer",
        height: "1.169rem",
        marginBottom: "1rem"
      },
      onMouseLeave: function onMouseLeave() {
        setBucketCategoryIndex(null);
        return;
      },
      onMouseEnter: function onMouseEnter() {
        setBucketCategoryIndex(index);
        return;
      },
      onClick: function onClick() {
        setBucketCategoryInputValue(bucketCategory);
        return;
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        display: "flex",
        transition: "background 0.69s ease",
        background: bucketCategoryIndex === index ? "rgba(27, 27, 27, 0.69)" : "rgba(169, 169, 169, 0.69)",
        height: "calc(100%)",
        width: "0.069rem",
        marginLeft: "0.269rem"
      }
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        display: "flex",
        fontWeight: "569",
        fontFamily: "GR",
        transition: "color 0.69s ease",
        color: bucketCategoryIndex === index ? "rgba(27, 27, 27, 0.69)" : "rgba(169, 169, 169, 0.69)",
        userSelect: "none",
        marginRight: "0.369rem",
        marginLeft: "0.369rem"
      }
    }, /*#__PURE__*/React.createElement(HUDTyper, {
      speed: 1
    }, bucketCategory)), /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        display: "flex",
        transition: "background 0.69s ease",
        background: bucketCategoryIndex === index ? "rgba(27, 27, 27, 0.69)" : "rgba(169, 169, 169, 0.69)",
        height: "calc(100%)",
        width: "0.069rem",
        marginRight: "0.269rem"
      }
    }));
  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("input", {
    type: "text",
    placeholder: "Bucket Category...",
    onFocus: handleBucketCategoryInputInFocusUpdate,
    onBlur: handleBucketCategoryInputBlurUpdate,
    onChange: handleBucketCategoryInputUpdate,
    value: bucketCategoryInputValue,
    style: {
      background: "rgba(217, 217, 217, 0.25)",
      borderRadius: "1rem",
      border: processingCreateBucketAction ? "0px black solid" : "1px black solid",
      outline: "none",
      boxShadow: bucketCategoryInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
      scale: bucketCategoryInputFocus ? "1.169" : "1",
      transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out",
      pointerEvents: processingCreateBucketAction ? "none" : null,
      width: "77.69%",
      height: processingCreateBucketAction ? "0rem" : "2rem",
      fontSize: "1.269rem",
      paddingLeft: "0.69rem",
      marginLeft: "1rem"
    }
  }), /*#__PURE__*/React.createElement("input", {
    type: "text",
    placeholder: "Bucket Name...",
    onFocus: handleBucketNameInputInFocusUpdate,
    onBlur: handleBucketNameInputBlurUpdate,
    onChange: handleBucketNameInputUpdate,
    value: bucketNameInputValue,
    style: {
      background: "rgba(217, 217, 217, 0.25)",
      borderRadius: "1rem",
      border: processingCreateBucketAction ? "0px black solid" : "1px black solid",
      outline: "none",
      boxShadow: bucketCategoryInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
      scale: bucketCategoryInputFocus ? "1.169" : "1",
      transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out",
      pointerEvents: processingCreateBucketAction ? "none" : null,
      width: "77.69%",
      height: processingCreateBucketAction ? "0rem" : "2rem",
      fontSize: "1.269rem",
      paddingLeft: "0.69rem",
      marginLeft: "1rem",
      marginTop: "1rem"
    }
  }), /*#__PURE__*/React.createElement("input", {
    ref: addFileInputRef,
    type: "file",
    multiple: true,
    onChange: addFiles,
    style: styles.fileInput
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative",
      display: "flex",
      fontWeight: "569",
      fontFamily: "GR",
      color: "rgba(0, 0, 0, 0.69)"
    }
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 1
  }, bucketProcessIndicatorTitle)), bucketCategoryInputValue.trim() !== "" && bucketNameInputValue.trim() !== "" && selectedFiles.length > 0 ? /*#__PURE__*/React.createElement("div", {
    style: styles.bucketActionTabBar
  }, /*#__PURE__*/React.createElement("div", {
    style: styles.uploadButton,
    onMouseLeave: function onMouseLeave() {
      setUploadButtonHover(false);
      return;
    },
    onMouseEnter: function onMouseEnter() {
      setUploadButtonHover(true);
      return;
    },
    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
      var addedFiles, createdBucket;
      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
        while (1) switch (_context7.prev = _context7.next) {
          case 0:
            setUploadingFiles(bucketIndex);
            if (!(uploadFilesAction !== undefined)) {
              _context7.next = 9;
              break;
            }
            addedFiles = selectedFiles;
            createdBucket = {
              fileBucketCategory: bucketCategoryInputValue.trim(),
              fileBucketName: bucketNameInputValue.trim(),
              fileBucketID: bucketNameInputValue.trim().replace(/\s/g, "") + "_" + +HUDUniversalHUDUtilityManager.GenerateUTCDateDouble()
            };
            _context7.next = 6;
            return uploadFilesAction(addedFiles, bucketIndex, createdBucket, currentBucket, /*#__PURE__*/function () {
              var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(uploadProgress, fileID, fileIndex) {
                return _regeneratorRuntime.wrap(function _callee6$(_context6) {
                  while (1) switch (_context6.prev = _context6.next) {
                    case 0:
                      setUploadFilesPercentage(function (prevProgress) {
                        return _objectSpread(_objectSpread({}, prevProgress), {}, _defineProperty({},