@filerobot/status-bar - npm Package Compare versions

Comparing version 3.0.0-alpha.0 to 3.0.0-alpha.2

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log
 
-# [3.0.0-alpha.0](https://code.scaleflex.cloud/filerobot/uploader/compare/v2.13.3...v3.0.0-alpha.0) (2023-07-06)
+# [3.0.0-alpha.2](https://code.scaleflex.cloud/filerobot/uploader/compare/v3.0.0-alpha.1...v3.0.0-alpha.2) (2023-08-15)
 
@@ -15,3 +15,15 @@ **Note:** Version bump only for package @filerobot/status-bar
 
+# [3.0.0-alpha.1](https://code.scaleflex.cloud/filerobot/uploader/compare/v2.13.4...v3.0.0-alpha.1) (2023-08-15)
 
+
+### Bug Fixes
+
+* Activate collection on change view mode  / Download statusbar - [FRA-1841] ([6a31675](https://code.scaleflex.cloud/filerobot/uploader/commits/6a316756c2512777d44c38e629a0345a1baef330))
+* problem with status bar z-index in opened modals (collections/labels) FRA-2366 ([04de9be](https://code.scaleflex.cloud/filerobot/uploader/commits/04de9be09731314f98a0dbf4597def13f4883bf7))
+* Statusbar - [FRA-1841] ([dbfa949](https://code.scaleflex.cloud/filerobot/uploader/commits/dbfa94944bd509053523733835a6966756ad6e77))
+
+
+
+
+
 ## [2.13.3](https://code.scaleflex.cloud/filerobot/uploader/compare/v2.13.2...v2.13.3) (2023-07-06)
@@ -18,0 +30,0 @@

lib/index.js

@@ -7,4 +7,2 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -22,5 +20,6 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 import Translator from '@filerobot/utils/lib/Translator';
-import { STATUS_BAR_STATES } from '@filerobot/utils/lib/constants';
+import { PLUGINS_IDS } from '@filerobot/utils/lib/constants';
 import StatusBarUI from './StatusBar';
 import defaultLocale from './defaultLocale';
+
 // TODO: find a way to show version of the current plugin
@@ -56,9 +55,3 @@ // why solution below isn't good?
     });
-    _defineProperty(_assertThisInitialized(_this), "resetDownloadState", function () {
-      _this.filerobot.setState({
-        downloadStatus: null,
-        isDownloading: false
-      });
-    });
-    _this.id = _this.opts.id || 'StatusBar';
+    _this.id = PLUGINS_IDS.STATUS_BAR;
     _this.title = 'StatusBar';
@@ -79,4 +72,4 @@ _this.type = 'progressindicator';
     };
+    _this.i18nInit();
     _this.opts = _objectSpread(_objectSpread({}, defaultOptions), opts);
-    _this.i18nInit();
     _this.render = _this.render.bind(_assertThisInitialized(_this));
@@ -87,8 +80,2 @@ _this.install = _this.install.bind(_assertThisInitialized(_this));
   _createClass(StatusBar, [{
-    key: "setOptions",
-    value: function setOptions(newOpts) {
-      _get(_getPrototypeOf(StatusBar.prototype), "setOptions", this).call(this, newOpts);
-      this.i18nInit();
-    }
-  }, {
     key: "i18nInit",
@@ -98,91 +85,13 @@ value: function i18nInit() {
       this.i18n = this.translator.translate.bind(this.translator);
-      this.setPluginState(); // so that UI re-renders and we see the updated locale
     }
   }, {
-    key: "getBarState",
-    value: function getBarState(isAllErrored, isAllComplete, isUploadInProgress, downloadStatus, files) {
-      if (isAllErrored) {
-        return STATUS_BAR_STATES.ERROR;
-      }
-      if (isAllComplete) {
-        return STATUS_BAR_STATES.COMPLETE;
-      }
-      var fileIDs = Object.keys(files);
-      // this condition means the status bar state is in downloading not uploading so no need to continue the rest.
-      if (downloadStatus && fileIDs.length === 0) {
-        return downloadStatus;
-      }
-      var state = STATUS_BAR_STATES.WAITING;
-      for (var i = 0; i < fileIDs.length; i++) {
-        var file = files[fileIDs[i]];
-        var progress = file.progress;
-        // If ANY files are being uploaded right now, show the uploading state.
-        if (progress.uploadStarted && !progress.uploadComplete && !file.error) {
-          return STATUS_BAR_STATES.UPLOADING;
-        }
-        // If files are being preprocessed AND postprocessed at this time, we show the
-        // preprocess state. If any files are being uploaded we show uploading.
-        if (progress.preprocess && state !== STATUS_BAR_STATES.UPLOADING) {
-          state = STATUS_BAR_STATES.PREPROCESSING;
-        }
-        // If NO files are being preprocessed or uploaded right now, but some files are
-        // being postprocessed, show the postprocess state.
-        if (progress.postprocess && state !== STATUS_BAR_STATES.UPLOADING && state !== STATUS_BAR_STATES.PREPROCESSING) {
-          state = STATUS_BAR_STATES.POSTPROCESSING;
-        }
-        // If the file has some uploading error and other files are completed, uploading or processing then show hybrid state.
-        if (file.error) {
-          state = STATUS_BAR_STATES.HYBRID;
-        }
-      }
-      return state;
-    }
-  }, {
     key: "render",
-    value: function render(state) {
-      var _this$filerobot$getUp = this.filerobot.getUploadProperties(),
-        files = _this$filerobot$getUp.files,
-        newFiles = _this$filerobot$getUp.newFiles,
-        totalETA = _this$filerobot$getUp.totalETA,
-        isUploadStarted = _this$filerobot$getUp.isUploadStarted,
-        isAllComplete = _this$filerobot$getUp.isAllComplete,
-        isAllErrored = _this$filerobot$getUp.isAllErrored,
-        isAllPaused = _this$filerobot$getUp.isAllPaused,
-        isUploadInProgress = _this$filerobot$getUp.isUploadInProgress,
-        resumableUploads = _this$filerobot$getUp.resumableUploads,
-        supportsUploadProgress = _this$filerobot$getUp.supportsUploadProgress,
-        totalSize = _this$filerobot$getUp.totalSize,
-        totalUploadedSize = _this$filerobot$getUp.totalUploadedSize,
-        startedFiles = _this$filerobot$getUp.startedFiles,
-        completeFiles = _this$filerobot$getUp.completeFiles,
-        allowNewUpload = _this$filerobot$getUp.allowNewUpload,
-        error = _this$filerobot$getUp.error,
-        totalProgress = _this$filerobot$getUp.totalProgress;
-      var _this$filerobot$getDo = this.filerobot.getDownloadProperties(),
-        totalDownloadETA = _this$filerobot$getDo.totalDownloadETA;
-      return StatusBarUI({
-        pluginVariant: state.pluginVariant,
-        currentSelection: state.currentSelection,
-        actionBarPosition: state.actionBarPosition,
-        error: error,
-        downloadError: state.downloadError,
-        barState: this.getBarState(isAllErrored, isAllComplete, isUploadInProgress, state.downloadStatus, state.files || {}),
-        allowNewUpload: allowNewUpload,
-        totalProgress: totalProgress,
-        totalSize: totalSize,
-        totalUploadedSize: totalUploadedSize,
-        isAllComplete: isAllComplete,
-        isAllPaused: isAllPaused,
-        isAllErrored: isAllErrored,
-        isUploadStarted: isUploadStarted,
-        isUploadInProgress: isUploadInProgress,
-        complete: completeFiles.length,
-        newFiles: newFiles.length,
-        numUploads: startedFiles.length,
-        compressedPercent: state.compressedPercent,
-        downloaded: state.downloaded,
-        total: state.total,
-        totalETA: totalETA,
-        totalDownloadETA: totalDownloadETA,
-        files: files,
+    value:
+    // !TODO: keep reducing those after migrating downloads slice
+    function render(props) {
+      // !TODO: Differentiate the props depending on the variant download/uploading from the used place.
+      return StatusBarUI(_objectSpread(_objectSpread({}, props), {}, {
+        downloadError: props.downloadError,
+        compressedPercent: props.compressedPercent,
+        downloaded: props.downloaded,
         i18n: this.i18n,
@@ -196,13 +105,10 @@ info: this.filerobot.info,
         startUpload: this.startUpload,
-        resumableUploads: resumableUploads,
-        supportsUploadProgress: supportsUploadProgress,
         showProgressDetails: this.opts.showProgressDetails,
-        hideUploadButton: this.opts.hideUploadButton || state.downloadStatus,
-        // download state would hide those buttons for now
-        hideRetryButton: this.opts.hideRetryButton || state.downloadStatus,
-        hidePauseResumeButton: this.opts.hidePauseResumeButton && state.downloadStatus,
+        hideUploadButton: this.opts.hideUploadButton || props.downloadStatus,
+        // download props would hide those buttons for now
+        hideRetryButton: this.opts.hideRetryButton || props.downloadStatus,
+        hidePauseResumeButton: this.opts.hidePauseResumeButton && props.downloadStatus,
         hideCancelButton: this.opts.hideCancelButton,
-        isTargetDOMEl: this.isTargetDOMEl,
-        resetDownloadState: this.resetDownloadState
-      });
+        isTargetDomEl: this.isTargetDomEl
+      }));
     }
@@ -209,0 +115,0 @@ }, {

lib/StatusBar.js

@@ -19,44 +19,27 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 import { Warning, Success, Loading } from '@scaleflex/icons';
-import { COLORS, STATUS_BAR_STATES, ACTION_BAR_POSITIONS } from '@filerobot/utils/lib/constants';
-import { useExplorerContext } from '@filerobot/explorer/lib/hooks';
+import { COLORS, STATUS_BAR_STATES } from '@filerobot/utils/lib/constants';
 import { CrossButton, Button as SfxButton } from '@scaleflex/ui/core';
-import Styled from './statusBar.styled';
+import Styled from './StatusBar.styled';
+import { calculateProcessingProgress } from './StatusBar.utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function calculateProcessingProgress(files) {
-  // Collect pre or postprocessing progress states.
-  var progresses = [];
-  Object.keys(files).forEach(function (fileID) {
-    var progress = files[fileID].progress;
-    if (progress.preprocess) {
-      progresses.push(progress.preprocess);
-    }
-    if (progress.postprocess) {
-      progresses.push(progress.postprocess);
-    }
-  });
-
-  // In the future we should probably do this differently. For now we'll take the
-  // mode and message from the first file…
-  var _progresses$ = progresses[0],
-    mode = _progresses$.mode,
-    message = _progresses$.message;
-  var value = progresses.filter(isDeterminate).reduce(function (total, progress, index, all) {
-    return total + progress.value / all.length;
-  }, 0);
-  function isDeterminate(progress) {
-    return progress.mode === 'determinate';
-  }
-  return {
-    mode: mode,
-    message: message,
-    value: value
-  };
-}
 export default (function (props) {
-  var barState = props.barState;
-  var variant = props.pluginVariant;
-  var currentSelection = props.currentSelection;
-  var actionBarPosition = props.actionBarPosition;
-  var isBottomActionBar = actionBarPosition === ACTION_BAR_POSITIONS.BOTTOM;
+  var barState = props.barState,
+    newFilesCount = props.newFilesCount,
+    allowUploadProgress = props.allowUploadProgress,
+    floaty = props.floaty,
+    totalProgress = props.totalProgress,
+    files = props.files,
+    info = props.info,
+    isActionBarOpen = props.isActionBarOpen,
+    isBottomActionBar = props.isBottomActionBar,
+    i18n = props.i18n,
+    cancelAll = props.cancelAll,
+    compressedPercent = props.compressedPercent,
+    downloaded = props.downloaded,
+    total = props.total,
+    numUploads = props.numUploads,
+    completedUploadsCount = props.completedUploadsCount,
+    isDownloading = props.isDownloading,
+    actionBarZIndex = props.actionBarZIndex;
   var _useState = useState(false),
@@ -66,53 +49,33 @@ _useState2 = _slicedToArray(_useState, 2),
     setIsHidden = _useState2[1];
-  var floaty = useExplorerContext(function (_ref) {
-    var floaty = _ref.floaty;
-    return floaty;
-  });
-  var selectedLabels = useExplorerContext(function (_ref2) {
-    var selectedLabels = _ref2.selectedLabels;
-    return selectedLabels;
-  });
-  var isActionBarOpen = (currentSelection === null || currentSelection === void 0 ? void 0 : currentSelection.length) > 0 || (selectedLabels === null || selectedLabels === void 0 ? void 0 : selectedLabels.length) > 0;
-
-  // const {
-  //   resumableUploads,
-  //   error,
-  //   hidePauseResumeButton,
-  //   hideCancelButton,
-  //   hideRetryButton
-  // } = props
-
-  var progressValue = props.totalProgress;
+  var progressValue = totalProgress;
   var progressMode;
   var progressBarContent;
   if (barState === STATUS_BAR_STATES.PREPROCESSING || barState === STATUS_BAR_STATES.POSTPROCESSING) {
-    var progress = calculateProcessingProgress(props.files);
+    var progress = calculateProcessingProgress(files);
     progressMode = progress.mode;
-    if (progressMode === 'determinate') {
-      progressValue = progress.value * 100;
-    }
-    progressBarContent = ProgressBarProcessing(progress);
+    if (progressMode === 'determinate') progressValue = progress.value * 100;
+    progressBarContent = /*#__PURE__*/_jsx(ProgressBarProcessing, _objectSpread({}, progress));
   } else if (barState === STATUS_BAR_STATES.COMPLETE) {
-    progressBarContent = ProgressBarComplete(props);
+    progressBarContent = /*#__PURE__*/_jsx(ProgressBarComplete, _objectSpread({}, props));
   } else if (barState === STATUS_BAR_STATES.UPLOADING) {
-    if (!props.supportsUploadProgress) {
+    if (!allowUploadProgress) {
       progressMode = 'indeterminate';
       progressValue = null;
     }
-    progressBarContent = ProgressBarUploading(props);
+    progressBarContent = /*#__PURE__*/_jsx(ProgressBarUploading, _objectSpread({}, props));
   } else if (barState === STATUS_BAR_STATES.ERROR) {
     progressValue = undefined;
-    progressBarContent = ProgressBarError(props);
+    progressBarContent = /*#__PURE__*/_jsx(ProgressBarError, _objectSpread({}, props));
   } else if (barState === STATUS_BAR_STATES.HYBRID) {
-    if (!props.supportsUploadProgress) {
+    if (!allowUploadProgress) {
       progressMode = 'indeterminate';
       progressValue = null;
     }
-    progressBarContent = ProgressBarError(props);
+    progressBarContent = /*#__PURE__*/_jsx(ProgressBarError, _objectSpread({}, props));
   } else if (barState === STATUS_BAR_STATES.COMPRESSING) {
-    progressValue = props.compressedPercent;
-    progressBarContent = ProgressBarCompressing(props);
+    progressValue = compressedPercent;
+    progressBarContent = /*#__PURE__*/_jsx(ProgressBarCompressing, _objectSpread({}, props));
   } else if (barState === STATUS_BAR_STATES.DOWNLOADING) {
     // (|| 1) in case props.total is 0 so we are avoiding NaN value.
-    progressValue = Math.floor(props.downloaded / (props.total || 1) * 100);
+    progressValue = Math.floor(downloaded / (total || 1) * 100);
     progressBarContent = ProgressBarDownloading(_objectSpread(_objectSpread({}, props), {}, {
@@ -123,27 +86,14 @@ totalPercent: progressValue
   var width = typeof progressValue === 'number' ? progressValue : 100;
-
-  // TODO: Maybe used in download status bar
-  // const showCancelBtn = !hideCancelButton &&
-  //   barState !== STATUS_BAR_STATES.WAITING &&
-  //   barState !== STATUS_BAR_STATES.COMPLETE
-  // const showPauseResumeBtn = resumableUploads && !hidePauseResumeButton &&
-  //   barState === STATUS_BAR_STATES.UPLOADING
-
-  // const showRetryBtn = error && !hideRetryButton
-
-  // We are using useEffect for avoiding re-rendering
-  // so we would only hit this only once when changing from state to another.
   useEffect(function () {
     if (barState === STATUS_BAR_STATES.COMPLETE) {
-      props.info(props.i18n('statusBarCompletedInfo'), 'success', 3000);
+      info(i18n('statusBarCompletedInfo'), 'success', 3000);
       setTimeout(function () {
         setIsHidden(true);
-        props.resetDownloadState();
       }, 4000);
     } else {
-      setIsHidden(barState === STATUS_BAR_STATES.WAITING || barState === STATUS_BAR_STATES.WAITING && !props.newFiles > 0);
+      setIsHidden(!barState || barState === STATUS_BAR_STATES.WAITING || barState === STATUS_BAR_STATES.WAITING && !newFilesCount > 0);
     }
   }, [barState]);
   var closeStatesBar = function closeStatesBar() {
-    props.cancelAll();
+    cancelAll();
     setIsHidden(true);
@@ -154,10 +104,13 @@ };
   };
+  var showCrossButton = barState === STATUS_BAR_STATES.ERROR || barState === STATUS_BAR_STATES.COMPLETE;
+  var showCancelButton = barState === STATUS_BAR_STATES.DOWNLOADING;
   if (barState === STATUS_BAR_STATES.HYBRID) {
-    var uploadedPercentange = parseInt(props.complete / props.numUploads * 100);
+    var uploadedPercentange = parseInt(completedUploadsCount / numUploads * 100);
     styles.background = "linear-gradient(\n      90deg,\n      ".concat(COLORS.LIGHT.SUCCESS, " ").concat(uploadedPercentange, "%,\n      ").concat(COLORS.LIGHT.ERROR, " ").concat(uploadedPercentange, "%\n    )");
   }
   return /*#__PURE__*/_jsxs(Styled.StatusBarContainer, {
+    zIndex: actionBarZIndex,
     className: "filerobot-StatusBar",
     isHidden: isHidden,
-    variant: variant,
+    isDownloading: isDownloading,
     isActionBarOpen: isActionBarOpen,
@@ -178,7 +131,7 @@ floaty: floaty,
       children: [progressBarContent, /*#__PURE__*/_jsxs(Styled.CloseButton, {
-        children: [barState === STATUS_BAR_STATES.DOWNLOADING && /*#__PURE__*/_jsx(SfxButton, {
+        children: [showCancelButton && /*#__PURE__*/_jsx(SfxButton, {
           color: "link-basic-secondary",
-          onClick: props.cancelAll,
-          children: props.i18n('mutualizedCancelButtonLabel')
-        }), (barState === STATUS_BAR_STATES.ERROR || barState === STATUS_BAR_STATES.COMPLETE) && /*#__PURE__*/_jsx(CrossButton, {
+          onClick: cancelAll,
+          children: i18n('mutualizedCancelButtonLabel')
+        }), showCrossButton && /*#__PURE__*/_jsx(CrossButton, {
           onClick: closeStatesBar,
@@ -191,10 +144,13 @@ size: "md"
 });
-var ProgressBarProcessing = function ProgressBarProcessing(props) {
+var ProgressBarProcessing = function ProgressBarProcessing(_ref) {
+  var mode = _ref.mode,
+    message = _ref.message,
+    value = _ref.value;
   return /*#__PURE__*/_jsxs("div", {
     className: "filerobot-StatusBar-content",
-    children: [/*#__PURE__*/_jsxs(Styled.LoadingIcon, {
-      children: [" ", /*#__PURE__*/_jsx(Loading, {
+    children: [/*#__PURE__*/_jsx(Styled.LoadingIcon, {
+      children: /*#__PURE__*/_jsx(Loading, {
         size: 22
-      })]
-    }), props.mode === 'determinate' ? "".concat(Math.round(props.value * 100), "% \xB7 ") : '', props.message]
+      })
+    }), mode === 'determinate' ? "".concat(Math.round(value * 100), "% \xB7 ") : '', message]
   });
@@ -205,4 +161,12 @@ };
 };
-var ProgressDetails = function ProgressDetails(props) {
-  var ifShowFilesUploadedOfTotal = props.numUploads > 1;
+var ProgressDetails = function ProgressDetails(_ref2) {
+  var i18n = _ref2.i18n,
+    numUploads = _ref2.numUploads,
+    completedUploadsCount = _ref2.completedUploadsCount,
+    totalUploadedSize = _ref2.totalUploadedSize,
+    totalSize = _ref2.totalSize,
+    hideEta = _ref2.hideEta,
+    totalEta = _ref2.totalEta,
+    total = _ref2.total;
+  var ifShowFilesUploadedOfTotal = numUploads > 1;
   return /*#__PURE__*/_jsxs(Styled.ProgressDetailsWrapper, {
@@ -212,13 +176,13 @@ className: "filerobot-StatusBar-statusSecondary",
       className: "filerobot-StatusBar-additionalInfo",
-      children: props.i18n('statusBarFilesUploadedOfTotalText', {
-        complete: props.complete,
-        smart_count: props.numUploads
+      children: i18n('statusBarFilesUploadedOfTotalText', {
+        complete: completedUploadsCount,
+        smart_count: numUploads
       })
     }), /*#__PURE__*/_jsxs(Styled.ProgressAdditionalInfo, {
       className: "filerobot-StatusBar-additionalInfo",
-      children: [ifShowFilesUploadedOfTotal && renderDot(), props.totalSize <= 0 ? '100%' : props.i18n('statusBarDataUploadedOfTotalText', {
-        complete: prettierBytes(props.totalUploadedSize),
-        total: prettierBytes(props.totalSize)
-      }), !props.hideETA && renderDot(), !props.hideETA && props.i18n('statusBarXTimeLeftText', {
-        time: prettyETA(props.totalETA)
+      children: [ifShowFilesUploadedOfTotal && renderDot(), !total || totalSize <= 0 ? '100%' : i18n('statusBarDataUploadedOfTotalText', {
+        complete: prettierBytes(totalUploadedSize || 0),
+        total: prettierBytes(totalSize || 0)
+      }), !hideEta && renderDot(), !hideEta && i18n('statusBarXTimeLeftText', {
+        time: prettyETA(totalEta)
       })]
@@ -228,12 +192,19 @@ })]
 };
-var UnknownProgressDetails = function UnknownProgressDetails(props) {
+var UnknownProgressDetails = function UnknownProgressDetails(_ref3) {
+  var i18n = _ref3.i18n,
+    completedUploadsCount = _ref3.completedUploadsCount,
+    numUploads = _ref3.numUploads;
   return /*#__PURE__*/_jsx(Styled.ProgressDetailsWrapper, {
     className: "filerobot-StatusBar-statusSecondary",
-    children: props.i18n('statusBarFilesUploadedOfTotalText', {
-      complete: props.complete,
-      smart_count: props.numUploads
+    children: i18n('statusBarFilesUploadedOfTotalText', {
+      complete: completedUploadsCount,
+      smart_count: numUploads
     })
   });
 };
-var UploadNewlyAddedFiles = function UploadNewlyAddedFiles(props) {
+var UploadNewlyAddedFiles = function UploadNewlyAddedFiles(_ref4) {
+  var i18n = _ref4.i18n,
+    newFilesCount = _ref4.newFilesCount,
+    startUpload = _ref4.startUpload,
+    hideUploadButton = _ref4.hideUploadButton;
   return /*#__PURE__*/_jsxs("div", {
@@ -243,13 +214,13 @@ className: "filerobot-StatusBar-statusSecondary",
       className: "filerobot-StatusBar-statusSecondaryHint",
-      children: props.i18n('statusBarXMoreFilesAddedText', {
-        smart_count: props.newFiles
+      children: i18n('statusBarXMoreFilesAddedText', {
+        smart_count: newFilesCount
       })
-    }), !props.hideUploadButton && /*#__PURE__*/_jsx(Button, {
+    }), !hideUploadButton && /*#__PURE__*/_jsx(Button, {
       classes: "filerobot-StatusBar-actionBtn",
-      "aria-label": props.i18n('statusBarUploadXFilesLabel', {
-        smart_count: props.newFiles
+      "aria-label": i18n('statusBarUploadXFilesLabel', {
+        smart_count: newFilesCount
       }),
-      onClick: props.startUpload,
+      onClick: startUpload,
       size: "small",
-      children: props.i18n('mutualizedUploadLabel')
+      children: i18n('mutualizedUploadLabel')
     })]
@@ -263,7 +234,13 @@ });
 var ProgressBarUploading = function ProgressBarUploading(props) {
-  if (!props.isUploadStarted || props.isAllComplete) {
-    return null;
-  }
-  var title = props.isAllPaused ? props.i18n('statusBarPausedTitle') : props.i18n('statusBarUploadingTitle');
-  var showUploadNewlyAddedFiles = props.newFiles && props.isUploadStarted;
+  var isUploadStarted = props.isUploadStarted,
+    isAllUploadsCompleted = props.isAllUploadsCompleted,
+    showProgressDetails = props.showProgressDetails,
+    i18n = props.i18n,
+    isAllPaused = props.isAllPaused,
+    allowUploadProgress = props.allowUploadProgress,
+    totalProgress = props.totalProgress,
+    newFilesCount = props.newFilesCount;
+  if (!isUploadStarted || isAllUploadsCompleted) return null;
+  var title = isAllPaused ? i18n('statusBarPausedTitle') : i18n('statusBarUploadingTitle');
+  var showUploadNewlyAddedFiles = newFilesCount && isUploadStarted;
   return /*#__PURE__*/_jsxs(Styled.StatusBarContent, {
@@ -273,3 +250,3 @@ className: "filerobot-StatusBar-content",
     title: title,
-    children: [!props.isAllPaused && /*#__PURE__*/_jsxs(Styled.LoadingIcon, {
+    children: [!isAllPaused && /*#__PURE__*/_jsxs(Styled.LoadingIcon, {
       children: [" ", /*#__PURE__*/_jsx(Loading, {
@@ -282,4 +259,4 @@ size: 22
         className: "filerobot-StatusBar-statusPrimary",
-        children: props.supportsUploadProgress ? "".concat(title, ": ").concat(props.totalProgress, "%") : title
-      }), !props.isAllPaused && !showUploadNewlyAddedFiles && props.showProgressDetails ? props.supportsUploadProgress ? /*#__PURE__*/_jsx(ThrottledProgressDetails, _objectSpread({}, props)) : /*#__PURE__*/_jsx(UnknownProgressDetails, _objectSpread({}, props)) : null, showUploadNewlyAddedFiles ? /*#__PURE__*/_jsx(UploadNewlyAddedFiles, _objectSpread({}, props)) : null]
+        children: allowUploadProgress ? "".concat(title, ": ").concat(totalProgress, "%") : title
+      }), !isAllPaused && !showUploadNewlyAddedFiles && showProgressDetails ? allowUploadProgress ? /*#__PURE__*/_jsx(ThrottledProgressDetails, _objectSpread({}, props)) : /*#__PURE__*/_jsx(UnknownProgressDetails, _objectSpread({}, props)) : null, showUploadNewlyAddedFiles ? /*#__PURE__*/_jsx(UploadNewlyAddedFiles, _objectSpread({}, props)) : null]
     })]
@@ -289,3 +266,4 @@ });
 var ProgressBarComplete = function ProgressBarComplete(props) {
-  var title = props.i18n('statusBarCompletedInfo');
+  var i18n = props.i18n;
+  var title = i18n('statusBarCompletedInfo');
   return /*#__PURE__*/_jsxs(Styled.StatusBarContent, {
@@ -301,3 +279,3 @@ className: "filerobot-StatusBar-content",
       }), /*#__PURE__*/_jsx(ThrottledProgressDetails, _objectSpread(_objectSpread({}, props), {}, {
-        hideETA: true
+        hideEta: true
       }))]
@@ -307,7 +285,7 @@ })]
 };
-var ProgressBarError = function ProgressBarError(_ref3) {
-  var i18n = _ref3.i18n,
-    complete = _ref3.complete,
-    numUploads = _ref3.numUploads,
-    pluginVariant = _ref3.pluginVariant;
+var ProgressBarError = function ProgressBarError(_ref5) {
+  var i18n = _ref5.i18n,
+    complete = _ref5.complete,
+    numUploads = _ref5.numUploads,
+    isDownloading = _ref5.isDownloading;
   return /*#__PURE__*/_jsxs(Styled.StatusBarContent, {
@@ -322,8 +300,8 @@ className: "filerobot-StatusBar-content",
         className: "filerobot-StatusBar-statusPrimary",
-        children: pluginVariant === 'downloading' ? i18n('statusbarFailedToDonwnloadTittle') : i18n('statusBarSomeFileFailedToUploadTitle', {
+        children: isDownloading ? i18n('statusbarFailedToDonwnloadTittle') : i18n('statusBarSomeFileFailedToUploadTitle', {
           smart_count: numUploads
         })
-      }), pluginVariant !== 'downloading' && /*#__PURE__*/_jsx(UnknownProgressDetails, {
+      }), !isDownloading && /*#__PURE__*/_jsx(UnknownProgressDetails, {
         i18n: i18n,
-        complete: complete,
+        completedUploadsCount: complete,
         numUploads: numUploads
@@ -334,5 +312,5 @@ })]
 };
-var ProgressBarCompressing = function ProgressBarCompressing(_ref4) {
-  var i18n = _ref4.i18n,
-    compressedPercent = _ref4.compressedPercent;
+var ProgressBarCompressing = function ProgressBarCompressing(_ref6) {
+  var i18n = _ref6.i18n,
+    compressedPercent = _ref6.compressedPercent;
   return /*#__PURE__*/_jsxs(Styled.StatusBarContent, {
@@ -357,7 +335,12 @@ className: "filerobot-StatusBar-content",
 };
-var ProgressBarDownloading = function ProgressBarDownloading(props) {
+var ProgressBarDownloading = function ProgressBarDownloading(_ref7) {
+  var i18n = _ref7.i18n,
+    totalPercent = _ref7.totalPercent,
+    downloaded = _ref7.downloaded,
+    total = _ref7.total,
+    totalDownloadETA = _ref7.totalDownloadETA;
   return /*#__PURE__*/_jsxs(Styled.StatusBarContent, {
     className: "filerobot-StatusBar-content",
     role: "status",
-    title: props.i18n('statusBarCompressingTitle'),
+    title: i18n('statusBarCompressingTitle'),
     children: [/*#__PURE__*/_jsxs(Styled.LoadingIcon, {
@@ -371,12 +354,12 @@ children: [" ", /*#__PURE__*/_jsx(Loading, {
         className: "filerobot-StatusBar-statusPrimary",
-        children: props.i18n('statusBarDownloadingText', {
-          percent: props.totalPercent || 0
+        children: i18n('statusBarDownloadingText', {
+          percent: totalPercent || 0
         })
       }), /*#__PURE__*/_jsxs(Styled.ProgressDetailsWrapper, {
         className: "filerobot-StatusBar-statusSecondary",
-        children: [props.i18n('statusBarDownloadedOfTotalText', {
-          completed: prettierBytes(props.downloaded),
-          total: prettierBytes(props.total)
-        }), renderDot(), props.i18n('statusBarXTimeLeftText', {
-          time: prettyETA(props.totalDownloadETA)
+        children: [i18n('statusBarDownloadedOfTotalText', {
+          completed: prettierBytes(downloaded),
+          total: prettierBytes(total)
+        }), !!totalDownloadETA && renderDot(), !!totalDownloadETA && i18n('statusBarXTimeLeftText', {
+          time: prettyETA(totalDownloadETA)
         })]
@@ -383,0 +366,0 @@ })]

package.json

 {
   "name": "@filerobot/status-bar",
   "description": "A progress bar for Filerobot, with many bells and whistles.",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.2",
   "license": "MIT",
@@ -18,5 +18,5 @@ "main": "lib/index.js",
   "dependencies": {
-    "@filerobot/common": "^3.0.0-alpha.0",
-    "@filerobot/icons": "^3.0.0-alpha.0",
-    "@filerobot/utils": "^3.0.0-alpha.0",
+    "@filerobot/common": "^3.0.0-alpha.2",
+    "@filerobot/icons": "^3.0.0-alpha.2",
+    "@filerobot/utils": "^3.0.0-alpha.2",
     "@transloadit/prettier-bytes": "0.1.0",
@@ -27,11 +27,11 @@ "classnames": "^2.2.6",
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "peerDependencies": {
     "@filerobot/core": "^2.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
-  "gitHead": "4cf5cc5b5bdff34f518878a6496cb79c37b53521"
+  "gitHead": "80f15db983d831bcab94fb8f7288069db17d53d7"
 }

README.md

@@ -36,3 +36,3 @@ # `@filerobot/status-bar`
 
-> If you are using [`@filerobot/explorer`](../@filerobot/explorer/#filerobotexplorer) pluign you don't need to manually import this plugin as it is being imported automatically there with its styles and the default id `Explorer:StatusBar` Unless the Explorer id is changed then it would be respected.
+> If you are using [`@filerobot/explorer`](../@filerobot/explorer/#filerobotexplorer) pluign you don't need to manually import this plugin as it is being imported automatically there with its styles and the default id `StatusBar`.
 
@@ -39,0 +39,0 @@ ### Plugin's styles

types/index.d.ts

@@ -0,0 +0,0 @@ import Filerobot = require('@filerobot/core')

No alert changes

Improved metrics

Number of package files

11

10%

Worsened metrics

Total package byte prevSize

62630

-6.86%

Lines of code

674

-10.13%

Dependency changes

• - Removed

  react@18.3.1
  (transitive)

• - Removed

  react-dom@18.3.1
  (transitive)

• - Removed

  scheduler@0.23.2
  (transitive)

• Updated

  @filerobot/common@^3.0.0-alpha.2

• Updated

  @filerobot/icons@^3.0.0-alpha.2

• Updated

  @filerobot/utils@^3.0.0-alpha.2