@uppy/status-bar - npm Package Compare versions

Comparing version 3.0.0-beta.1 to 3.0.0-beta.2

CHANGELOG.md

 # @uppy/status-bar
 
+## 3.0.0-beta.2
+
+Released: 2022-08-03
+Included in: Uppy v3.0.0-beta.4
+
+- @uppy/status-bar: rename internal modules (Antoine du Hamel / #3929)
+
 ## 2.2.1
@@ -4,0 +11,0 @@

lib/index.js

@@ -1,1 +0,1 @@
-export { default } from "./_StatusBar.js";
+export { default } from "./StatusBar.js";

lib/StatusBar.js

@@ -1,220 +0,214 @@
-// TODO: rename this file to StatusBarUI>jsx on the next major.
-import { h } from 'preact';
-import classNames from 'classnames';
+import { UIPlugin } from '@uppy/core';
+import getSpeed from '@uppy/utils/lib/getSpeed';
+import getBytesRemaining from '@uppy/utils/lib/getBytesRemaining';
+import getTextDirection from '@uppy/utils/lib/getTextDirection';
 import statusBarStates from './StatusBarStates.js';
-import calculateProcessingProgress from './calculateProcessingProgress.js';
-import { UploadBtn, RetryBtn, CancelBtn, PauseResumeButton, DoneBtn, ProgressBarProcessing, ProgressBarError, ProgressBarUploading, ProgressBarComplete } from "./Components.js";
-const {
-  STATE_ERROR,
-  STATE_WAITING,
-  STATE_PREPROCESSING,
-  STATE_UPLOADING,
-  STATE_POSTPROCESSING,
-  STATE_COMPLETE
-} = statusBarStates; // TODO: rename the function to StatusBarUI on the next major.
+import StatusBarUI from "./StatusBarUI.js";
+const packageJson = {
+  "version": "3.0.0-beta.2"
+};
+import locale from './locale.js';
 
-export default function StatusBar(props) {
-  const {
-    newFiles,
-    allowNewUpload,
-    isUploadInProgress,
-    isAllPaused,
-    resumableUploads,
-    error,
-    hideUploadButton,
-    hidePauseResumeButton,
-    hideCancelButton,
-    hideRetryButton,
-    recoveredState,
-    uploadState,
-    totalProgress,
-    files,
-    supportsUploadProgress,
-    hideAfterFinish,
-    isSomeGhost,
-    doneButtonHandler,
-    isUploadStarted,
-    i18n,
-    startUpload,
-    uppy,
-    isAllComplete,
-    showProgressDetails,
-    numUploads,
-    complete,
-    totalSize,
-    totalETA,
-    totalUploadedSize
-  } = props;
+function getTotalSpeed(files) {
+  let totalSpeed = 0;
+  files.forEach(file => {
+    totalSpeed += getSpeed(file.progress);
+  });
+  return totalSpeed;
+}
 
-  function getProgressValue() {
-    switch (uploadState) {
-      case STATE_POSTPROCESSING:
-      case STATE_PREPROCESSING:
-        {
-          const progress = calculateProcessingProgress(files);
+function getTotalETA(files) {
+  const totalSpeed = getTotalSpeed(files);
 
-          if (progress.mode === 'determinate') {
-            return progress.value * 100;
-          }
+  if (totalSpeed === 0) {
+    return 0;
+  }
 
-          return totalProgress;
-        }
+  const totalBytesRemaining = files.reduce((total, file) => {
+    return total + getBytesRemaining(file.progress);
+  }, 0);
+  return Math.round(totalBytesRemaining / totalSpeed * 10) / 10;
+}
 
-      case STATE_ERROR:
-        {
-          return null;
-        }
+function getUploadingState(error, isAllComplete, recoveredState, files) {
+  if (error && !isAllComplete) {
+    return statusBarStates.STATE_ERROR;
+  }
 
-      case STATE_UPLOADING:
-        {
-          if (!supportsUploadProgress) {
-            return null;
-          }
+  if (isAllComplete) {
+    return statusBarStates.STATE_COMPLETE;
+  }
 
-          return totalProgress;
-        }
+  if (recoveredState) {
+    return statusBarStates.STATE_WAITING;
+  }
 
-      default:
-        return totalProgress;
+  let state = statusBarStates.STATE_WAITING;
+  const fileIDs = Object.keys(files);
+
+  for (let i = 0; i < fileIDs.length; i++) {
+    const {
+      progress
+    } = files[fileIDs[i]]; // If ANY files are being uploaded right now, show the uploading state.
+
+    if (progress.uploadStarted && !progress.uploadComplete) {
+      return statusBarStates.STATE_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 !== statusBarStates.STATE_UPLOADING) {
+      state = statusBarStates.STATE_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 !== statusBarStates.STATE_UPLOADING && state !== statusBarStates.STATE_PREPROCESSING) {
+      state = statusBarStates.STATE_POSTPROCESSING;
     }
   }
 
-  function getIsIndeterminate() {
-    switch (uploadState) {
-      case STATE_POSTPROCESSING:
-      case STATE_PREPROCESSING:
-        {
-          const {
-            mode
-          } = calculateProcessingProgress(files);
-          return mode === 'indeterminate';
-        }
+  return state;
+}
+/**
+ * StatusBar: renders a status bar with upload/pause/resume/cancel/retry buttons,
+ * progress percentage and time remaining.
+ */
 
-      case STATE_UPLOADING:
-        {
-          if (!supportsUploadProgress) {
-            return true;
-          }
 
-          return false;
-        }
+export default class StatusBar extends UIPlugin {
+  constructor(uppy, opts) {
+    super(uppy, opts);
 
-      default:
-        return false;
-    }
+    this.startUpload = () => {
+      const {
+        recoveredState
+      } = this.uppy.getState();
+
+      if (recoveredState) {
+        this.uppy.emit('restore-confirmed');
+        return undefined;
+      }
+
+      return this.uppy.upload().catch(() => {// Error logged in Core
+      });
+    };
+
+    this.id = this.opts.id || 'StatusBar';
+    this.title = 'StatusBar';
+    this.type = 'progressindicator';
+    this.defaultLocale = locale; // set default options, must be kept in sync with @uppy/react/src/StatusBar.js
+
+    const defaultOptions = {
+      target: 'body',
+      hideUploadButton: false,
+      hideRetryButton: false,
+      hidePauseResumeButton: false,
+      hideCancelButton: false,
+      showProgressDetails: false,
+      hideAfterFinish: true,
+      doneButtonHandler: null
+    };
+    this.opts = { ...defaultOptions,
+      ...opts
+    };
+    this.i18nInit();
+    this.render = this.render.bind(this);
+    this.install = this.install.bind(this);
   }
 
-  function getIsHidden() {
-    if (recoveredState) {
-      return false;
-    }
+  render(state) {
+    const {
+      capabilities,
+      files,
+      allowNewUpload,
+      totalProgress,
+      error,
+      recoveredState
+    } = state;
+    const {
+      newFiles,
+      startedFiles,
+      completeFiles,
+      inProgressNotPausedFiles,
+      isUploadStarted,
+      isAllComplete,
+      isAllErrored,
+      isAllPaused,
+      isUploadInProgress,
+      isSomeGhost
+    } = this.uppy.getObjectOfFilesPerState(); // If some state was recovered, we want to show Upload button/counter
+    // for all the files, because in this case it’s not an Upload button,
+    // but “Confirm Restore Button”
 
-    switch (uploadState) {
-      case STATE_WAITING:
-        return hideUploadButton || newFiles === 0;
+    const newFilesOrRecovered = recoveredState ? Object.values(files) : newFiles;
+    const totalETA = getTotalETA(inProgressNotPausedFiles);
+    const resumableUploads = !!capabilities.resumableUploads;
+    const supportsUploadProgress = capabilities.uploadProgress !== false;
+    let totalSize = 0;
+    let totalUploadedSize = 0;
+    startedFiles.forEach(file => {
+      totalSize += file.progress.bytesTotal || 0;
+      totalUploadedSize += file.progress.bytesUploaded || 0;
+    });
+    return StatusBarUI({
+      error,
+      uploadState: getUploadingState(error, isAllComplete, recoveredState, state.files || {}),
+      allowNewUpload,
+      totalProgress,
+      totalSize,
+      totalUploadedSize,
+      isAllComplete: false,
+      isAllPaused,
+      isAllErrored,
+      isUploadStarted,
+      isUploadInProgress,
+      isSomeGhost,
+      recoveredState,
+      complete: completeFiles.length,
+      newFiles: newFilesOrRecovered.length,
+      numUploads: startedFiles.length,
+      totalETA,
+      files,
+      i18n: this.i18n,
+      uppy: this.uppy,
+      startUpload: this.startUpload,
+      doneButtonHandler: this.opts.doneButtonHandler,
+      resumableUploads,
+      supportsUploadProgress,
+      showProgressDetails: this.opts.showProgressDetails,
+      hideUploadButton: this.opts.hideUploadButton,
+      hideRetryButton: this.opts.hideRetryButton,
+      hidePauseResumeButton: this.opts.hidePauseResumeButton,
+      hideCancelButton: this.opts.hideCancelButton,
+      hideAfterFinish: this.opts.hideAfterFinish,
+      isTargetDOMEl: this.isTargetDOMEl
+    });
+  }
 
-      case STATE_COMPLETE:
-        return hideAfterFinish;
+  onMount() {
+    // Set the text direction if the page has not defined one.
+    const element = this.el;
+    const direction = getTextDirection(element);
 
-      default:
-        return false;
+    if (!direction) {
+      element.dir = 'ltr';
     }
   }
 
-  const progressValue = getProgressValue();
-  const isHidden = getIsHidden();
-  const width = progressValue != null ? progressValue : 100;
-  const showUploadBtn = !error && newFiles && !isUploadInProgress && !isAllPaused && allowNewUpload && !hideUploadButton;
-  const showCancelBtn = !hideCancelButton && uploadState !== STATE_WAITING && uploadState !== STATE_COMPLETE;
-  const showPauseResumeBtn = resumableUploads && !hidePauseResumeButton && uploadState === STATE_UPLOADING;
-  const showRetryBtn = error && !isAllComplete && !hideRetryButton;
-  const showDoneBtn = doneButtonHandler && uploadState === STATE_COMPLETE;
-  const progressClassNames = classNames('uppy-StatusBar-progress', {
-    'is-indeterminate': getIsIndeterminate()
-  });
-  const statusBarClassNames = classNames('uppy-StatusBar', `is-${uploadState}`, {
-    'has-ghosts': isSomeGhost
-  });
-  return h("div", {
-    className: statusBarClassNames,
-    "aria-hidden": isHidden
-  }, h("div", {
-    className: progressClassNames,
-    style: {
-      width: `${width}%`
-    },
-    role: "progressbar",
-    "aria-label": `${width}%`,
-    "aria-valuetext": `${width}%`,
-    "aria-valuemin": "0",
-    "aria-valuemax": "100",
-    "aria-valuenow": progressValue
-  }), (() => {
-    switch (uploadState) {
-      case STATE_PREPROCESSING:
-      case STATE_POSTPROCESSING:
-        return h(ProgressBarProcessing, {
-          progress: calculateProcessingProgress(files)
-        });
+  install() {
+    const {
+      target
+    } = this.opts;
 
-      case STATE_COMPLETE:
-        return h(ProgressBarComplete, {
-          i18n: i18n
-        });
+    if (target) {
+      this.mount(target, this);
+    }
+  }
 
-      case STATE_ERROR:
-        return h(ProgressBarError, {
-          error: error,
-          i18n: i18n,
-          numUploads: numUploads,
-          complete: complete
-        });
+  uninstall() {
+    this.unmount();
+  }
 
-      case STATE_UPLOADING:
-        return h(ProgressBarUploading, {
-          i18n: i18n,
-          supportsUploadProgress: supportsUploadProgress,
-          totalProgress: totalProgress,
-          showProgressDetails: showProgressDetails,
-          isUploadStarted: isUploadStarted,
-          isAllComplete: isAllComplete,
-          isAllPaused: isAllPaused,
-          newFiles: newFiles,
-          numUploads: numUploads,
-          complete: complete,
-          totalUploadedSize: totalUploadedSize,
-          totalSize: totalSize,
-          totalETA: totalETA,
-          startUpload: startUpload
-        });
-
-      default:
-        return null;
-    }
-  })(), h("div", {
-    className: "uppy-StatusBar-actions"
-  }, recoveredState || showUploadBtn ? h(UploadBtn, {
-    newFiles: newFiles,
-    isUploadStarted: isUploadStarted,
-    recoveredState: recoveredState,
-    i18n: i18n,
-    isSomeGhost: isSomeGhost,
-    startUpload: startUpload,
-    uploadState: uploadState
-  }) : null, showRetryBtn ? h(RetryBtn, {
-    i18n: i18n,
-    uppy: uppy
-  }) : null, showPauseResumeBtn ? h(PauseResumeButton, {
-    isAllPaused: isAllPaused,
-    i18n: i18n,
-    isAllComplete: isAllComplete,
-    resumableUploads: resumableUploads,
-    uppy: uppy
-  }) : null, showCancelBtn ? h(CancelBtn, {
-    i18n: i18n,
-    uppy: uppy
-  }) : null, showDoneBtn ? h(DoneBtn, {
-    i18n: i18n,
-    doneButtonHandler: doneButtonHandler
-  }) : null));
-}
+}
+StatusBar.VERSION = packageJson.version;

package.json

 {
   "name": "@uppy/status-bar",
   "description": "A progress bar for Uppy, with many bells and whistles.",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "license": "MIT",
@@ -37,5 +37,5 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "@uppy/core": "^3.0.0-beta.1"
+    "@uppy/core": "^3.0.0-beta.3"
   },
   "stableVersion": "2.2.1"
 }

src/index.js

@@ -1,1 +0,1 @@
-export { default } from './_StatusBar.jsx'
+export { default } from './StatusBar.jsx'

src/StatusBar.jsx

@@ -1,241 +0,220 @@
-// TODO: rename this file to StatusBarUI>jsx on the next major.
-import { h } from 'preact'
-import classNames from 'classnames'
+import { UIPlugin } from '@uppy/core'
+import getSpeed from '@uppy/utils/lib/getSpeed'
+import getBytesRemaining from '@uppy/utils/lib/getBytesRemaining'
+import getTextDirection from '@uppy/utils/lib/getTextDirection'
 import statusBarStates from './StatusBarStates.js'
-import calculateProcessingProgress from './calculateProcessingProgress.js'
+import StatusBarUI from './StatusBarUI.jsx'
 
-import {
-  UploadBtn,
-  RetryBtn,
-  CancelBtn,
-  PauseResumeButton,
-  DoneBtn,
-  ProgressBarProcessing,
-  ProgressBarError,
-  ProgressBarUploading,
-  ProgressBarComplete,
-} from './Components.jsx'
+import packageJson from '../package.json'
+import locale from './locale.js'
 
-const {
-  STATE_ERROR,
-  STATE_WAITING,
-  STATE_PREPROCESSING,
-  STATE_UPLOADING,
-  STATE_POSTPROCESSING,
-  STATE_COMPLETE,
-} = statusBarStates
+function getTotalSpeed (files) {
+  let totalSpeed = 0
+  files.forEach((file) => {
+    totalSpeed += getSpeed(file.progress)
+  })
+  return totalSpeed
+}
 
-// TODO: rename the function to StatusBarUI on the next major.
-export default function StatusBar (props) {
-  const {
-    newFiles,
-    allowNewUpload,
-    isUploadInProgress,
-    isAllPaused,
-    resumableUploads,
-    error,
-    hideUploadButton,
-    hidePauseResumeButton,
-    hideCancelButton,
-    hideRetryButton,
-    recoveredState,
-    uploadState,
-    totalProgress,
-    files,
-    supportsUploadProgress,
-    hideAfterFinish,
-    isSomeGhost,
-    doneButtonHandler,
-    isUploadStarted,
-    i18n,
-    startUpload,
-    uppy,
-    isAllComplete,
-    showProgressDetails,
-    numUploads,
-    complete,
-    totalSize,
-    totalETA,
-    totalUploadedSize,
-  } = props
+function getTotalETA (files) {
+  const totalSpeed = getTotalSpeed(files)
+  if (totalSpeed === 0) {
+    return 0
+  }
 
-  function getProgressValue () {
-    switch (uploadState) {
-      case STATE_POSTPROCESSING:
-      case STATE_PREPROCESSING: {
-        const progress = calculateProcessingProgress(files)
+  const totalBytesRemaining = files.reduce((total, file) => {
+    return total + getBytesRemaining(file.progress)
+  }, 0)
 
-        if (progress.mode === 'determinate') {
-          return progress.value * 100
-        }
-        return totalProgress
-      }
-      case STATE_ERROR: {
-        return null
-      }
-      case STATE_UPLOADING: {
-        if (!supportsUploadProgress) {
-          return null
-        }
-        return totalProgress
-      }
-      default:
-        return totalProgress
-    }
+  return Math.round((totalBytesRemaining / totalSpeed) * 10) / 10
+}
+
+function getUploadingState (error, isAllComplete, recoveredState, files) {
+  if (error && !isAllComplete) {
+    return statusBarStates.STATE_ERROR
   }
 
-  function getIsIndeterminate () {
-    switch (uploadState) {
-      case STATE_POSTPROCESSING:
-      case STATE_PREPROCESSING: {
-        const { mode } = calculateProcessingProgress(files)
-        return mode === 'indeterminate'
-      }
-      case STATE_UPLOADING: {
-        if (!supportsUploadProgress) {
-          return true
-        }
-        return false
-      }
-      default:
-        return false
-    }
+  if (isAllComplete) {
+    return statusBarStates.STATE_COMPLETE
   }
 
-  function getIsHidden () {
-    if (recoveredState) {
-      return false
-    }
+  if (recoveredState) {
+    return statusBarStates.STATE_WAITING
+  }
 
-    switch (uploadState) {
-      case STATE_WAITING:
-        return hideUploadButton || newFiles === 0
-      case STATE_COMPLETE:
-        return hideAfterFinish
-      default:
-        return false
+  let state = statusBarStates.STATE_WAITING
+  const fileIDs = Object.keys(files)
+  for (let i = 0; i < fileIDs.length; i++) {
+    const { progress } = files[fileIDs[i]]
+    // If ANY files are being uploaded right now, show the uploading state.
+    if (progress.uploadStarted && !progress.uploadComplete) {
+      return statusBarStates.STATE_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 !== statusBarStates.STATE_UPLOADING) {
+      state = statusBarStates.STATE_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 !== statusBarStates.STATE_UPLOADING
+      && state !== statusBarStates.STATE_PREPROCESSING
+    ) {
+      state = statusBarStates.STATE_POSTPROCESSING
+    }
   }
+  return state
+}
 
-  const progressValue = getProgressValue()
+/**
+ * StatusBar: renders a status bar with upload/pause/resume/cancel/retry buttons,
+ * progress percentage and time remaining.
+ */
+export default class StatusBar extends UIPlugin {
+  static VERSION = packageJson.version
 
-  const isHidden = getIsHidden()
+  constructor (uppy, opts) {
+    super(uppy, opts)
+    this.id = this.opts.id || 'StatusBar'
+    this.title = 'StatusBar'
+    this.type = 'progressindicator'
 
-  const width = progressValue ?? 100
+    this.defaultLocale = locale
 
-  const showUploadBtn = !error
-    && newFiles
-    && !isUploadInProgress
-    && !isAllPaused
-    && allowNewUpload
-    && !hideUploadButton
+    // set default options, must be kept in sync with @uppy/react/src/StatusBar.js
+    const defaultOptions = {
+      target: 'body',
+      hideUploadButton: false,
+      hideRetryButton: false,
+      hidePauseResumeButton: false,
+      hideCancelButton: false,
+      showProgressDetails: false,
+      hideAfterFinish: true,
+      doneButtonHandler: null,
+    }
 
-  const showCancelBtn = !hideCancelButton
-    && uploadState !== STATE_WAITING
-    && uploadState !== STATE_COMPLETE
+    this.opts = { ...defaultOptions, ...opts }
 
-  const showPauseResumeBtn = resumableUploads
-    && !hidePauseResumeButton
-    && uploadState === STATE_UPLOADING
+    this.i18nInit()
 
-  const showRetryBtn = error && !isAllComplete && !hideRetryButton
+    this.render = this.render.bind(this)
+    this.install = this.install.bind(this)
+  }
 
-  const showDoneBtn = doneButtonHandler && uploadState === STATE_COMPLETE
+  startUpload = () => {
+    const { recoveredState } = this.uppy.getState()
 
-  const progressClassNames = classNames('uppy-StatusBar-progress', {
-    'is-indeterminate': getIsIndeterminate(),
-  })
+    if (recoveredState) {
+      this.uppy.emit('restore-confirmed')
+      return undefined
+    }
 
-  const statusBarClassNames = classNames(
-    'uppy-StatusBar',
-    `is-${uploadState}`,
-    { 'has-ghosts': isSomeGhost },
-  )
+    return this.uppy.upload().catch(() => {
+      // Error logged in Core
+    })
+  }
 
-  return (
-    <div className={statusBarClassNames} aria-hidden={isHidden}>
-      <div
-        className={progressClassNames}
-        style={{ width: `${width}%` }}
-        role="progressbar"
-        aria-label={`${width}%`}
-        aria-valuetext={`${width}%`}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow={progressValue}
-      />
+  render (state) {
+    const {
+      capabilities,
+      files,
+      allowNewUpload,
+      totalProgress,
+      error,
+      recoveredState,
+    } = state
 
-      {(() => {
-        switch (uploadState) {
-          case STATE_PREPROCESSING:
-          case STATE_POSTPROCESSING:
-            return <ProgressBarProcessing progress={calculateProcessingProgress(files)} />
-          case STATE_COMPLETE:
-            return <ProgressBarComplete i18n={i18n} />
-          case STATE_ERROR:
-            return (
-              <ProgressBarError
-                error={error}
-                i18n={i18n}
-                numUploads={numUploads}
-                complete={complete}
-              />
-            )
-          case STATE_UPLOADING:
-            return (
-              <ProgressBarUploading
-                i18n={i18n}
-                supportsUploadProgress={supportsUploadProgress}
-                totalProgress={totalProgress}
-                showProgressDetails={showProgressDetails}
-                isUploadStarted={isUploadStarted}
-                isAllComplete={isAllComplete}
-                isAllPaused={isAllPaused}
-                newFiles={newFiles}
-                numUploads={numUploads}
-                complete={complete}
-                totalUploadedSize={totalUploadedSize}
-                totalSize={totalSize}
-                totalETA={totalETA}
-                startUpload={startUpload}
-              />
-            )
-          default:
-            return null
-        }
-      })()}
+    const {
+      newFiles,
+      startedFiles,
+      completeFiles,
+      inProgressNotPausedFiles,
 
-      <div className="uppy-StatusBar-actions">
-        {recoveredState || showUploadBtn ? (
-          <UploadBtn
-            newFiles={newFiles}
-            isUploadStarted={isUploadStarted}
-            recoveredState={recoveredState}
-            i18n={i18n}
-            isSomeGhost={isSomeGhost}
-            startUpload={startUpload}
-            uploadState={uploadState}
-          />
-        ) : null}
+      isUploadStarted,
+      isAllComplete,
+      isAllErrored,
+      isAllPaused,
+      isUploadInProgress,
+      isSomeGhost,
+    } = this.uppy.getObjectOfFilesPerState()
 
-        {showRetryBtn ? <RetryBtn i18n={i18n} uppy={uppy} /> : null}
+    // If some state was recovered, we want to show Upload button/counter
+    // for all the files, because in this case it’s not an Upload button,
+    // but “Confirm Restore Button”
+    const newFilesOrRecovered = recoveredState
+      ? Object.values(files)
+      : newFiles
+    const totalETA = getTotalETA(inProgressNotPausedFiles)
+    const resumableUploads = !!capabilities.resumableUploads
+    const supportsUploadProgress = capabilities.uploadProgress !== false
 
-        {showPauseResumeBtn ? (
-          <PauseResumeButton
-            isAllPaused={isAllPaused}
-            i18n={i18n}
-            isAllComplete={isAllComplete}
-            resumableUploads={resumableUploads}
-            uppy={uppy}
-          />
-        ) : null}
+    let totalSize = 0
+    let totalUploadedSize = 0
 
-        {showCancelBtn ? <CancelBtn i18n={i18n} uppy={uppy} /> : null}
+    startedFiles.forEach((file) => {
+      totalSize += file.progress.bytesTotal || 0
+      totalUploadedSize += file.progress.bytesUploaded || 0
+    })
 
-        {showDoneBtn ? (
-          <DoneBtn i18n={i18n} doneButtonHandler={doneButtonHandler} />
-        ) : null}
-      </div>
-    </div>
-  )
+    return StatusBarUI({
+      error,
+      uploadState: getUploadingState(
+        error,
+        isAllComplete,
+        recoveredState,
+        state.files || {},
+      ),
+      allowNewUpload,
+      totalProgress,
+      totalSize,
+      totalUploadedSize,
+      isAllComplete: false,
+      isAllPaused,
+      isAllErrored,
+      isUploadStarted,
+      isUploadInProgress,
+      isSomeGhost,
+      recoveredState,
+      complete: completeFiles.length,
+      newFiles: newFilesOrRecovered.length,
+      numUploads: startedFiles.length,
+      totalETA,
+      files,
+      i18n: this.i18n,
+      uppy: this.uppy,
+      startUpload: this.startUpload,
+      doneButtonHandler: this.opts.doneButtonHandler,
+      resumableUploads,
+      supportsUploadProgress,
+      showProgressDetails: this.opts.showProgressDetails,
+      hideUploadButton: this.opts.hideUploadButton,
+      hideRetryButton: this.opts.hideRetryButton,
+      hidePauseResumeButton: this.opts.hidePauseResumeButton,
+      hideCancelButton: this.opts.hideCancelButton,
+      hideAfterFinish: this.opts.hideAfterFinish,
+      isTargetDOMEl: this.isTargetDOMEl,
+    })
+  }
+
+  onMount () {
+    // Set the text direction if the page has not defined one.
+    const element = this.el
+    const direction = getTextDirection(element)
+    if (!direction) {
+      element.dir = 'ltr'
+    }
+  }
+
+  install () {
+    const { target } = this.opts
+    if (target) {
+      this.mount(target, this)
+    }
+  }
+
+  uninstall () {
+    this.unmount()
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

155165

decreased by-0.16%

Lines of code

2478

decreased by-0.16%

No dependency changes