cozy-ui 121.1.2 → 121.3.0

package/transpiled/react/UploadQueue/index.js

@@ -6,7 +6,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -14,9 +13,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import LinearProgress from '@material-ui/core/LinearProgress';
 import cx from 'classnames';
-import React, { Component, useState } from 'react';
-import { useIntervalWhen } from 'rooks';
-import { splitFilename } from 'cozy-client/dist/models/file';
+import React, { Component } from 'react';
+import Item from "cozy-ui/transpiled/react/UploadQueue/Item";
 var localeEn = {
   header: "Uploading %{smart_count} photo to %{app} |||| Uploading %{smart_count} photos to %{app}",
   header_mobile: "Uploading %{done} of %{smart_count}",
@@ -67,19 +65,9 @@ var styles = {
   "spin": "styles__spin___3GZIp",
   "shake": "styles__shake___u1Pks"
 };
-import Icon from "cozy-ui/transpiled/react/Icon";
-import CheckIcon from "cozy-ui/transpiled/react/Icons/Check";
-import CrossIcon from "cozy-ui/transpiled/react/Icons/Cross";
-import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
-import Spinner from "cozy-ui/transpiled/react/Spinner";
-import Typography from "cozy-ui/transpiled/react/Typography";
 import List from "cozy-ui/transpiled/react/List";
-import ListItem from "cozy-ui/transpiled/react/ListItem";
-import ListItemText from "cozy-ui/transpiled/react/ListItemText";
-import ListItemIcon from "cozy-ui/transpiled/react/ListItemIcon";
-import { Img } from "cozy-ui/transpiled/react/deprecated/Media";
+import Typography from "cozy-ui/transpiled/react/Typography";
 import Button from "cozy-ui/transpiled/react/deprecated/Button";
-import { translate, useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 import { formatLocallyDistanceToNow } from "cozy-ui/transpiled/react/providers/I18n/format";
 import withLocales from "cozy-ui/transpiled/react/providers/I18n/withLocales";
 import { withStyles } from "cozy-ui/transpiled/react/styles";
@@ -112,167 +100,15 @@ export var uploadStatus = {
   DONE_STATUSES: DONE_STATUSES,
   ERROR_STATUSES: ERROR_STATUSES
 };
-var Pending = translate()(function (props) {
-  return /*#__PURE__*/React.createElement(Typography, {
-    variant: "subtitle1",
-    color: "primary"
-  }, props.t('item.pending'));
-});
 export var formatRemainingTime = function formatRemainingTime(durationInSec) {
   var later = Date.now() + durationInSec * 1000;
   return formatLocallyDistanceToNow(later);
-}; // https://date-fns.org/v2.28.0/docs/formatDistanceToNow
-
-var numberOfReferencesForPluralForm = function numberOfReferencesForPluralForm(durationInSec) {
-  return durationInSec < 90 || durationInSec > 2670 && durationInSec < 5370 ? 1 : 2;
-};
-
-var RemainingTime = function RemainingTime(_ref) {
-  var durationInSec = _ref.durationInSec;
-
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
-
-  return /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    className: cx(styles['upload-queue__progress-caption'], 'u-ellipsis')
-  }, t('item.remainingTime', {
-    time: formatRemainingTime(durationInSec),
-    smart_count: numberOfReferencesForPluralForm(durationInSec)
-  }));
 };
-
-var FileLinearProgress = withStyles(function (theme) {
-  return {
-    root: {
-      borderRadius: theme.shape.borderRadius
-    },
-    colorPrimary: {
-      backgroundColor: theme.palette.background.default
-    },
-    barColorPrimary: {
-      backgroundColor: 'var(--emerald)'
-    }
-  };
-})(LinearProgress);
 var QueueLinearProgress = withStyles({
   root: {
     height: '2px'
   }
 })(LinearProgress);
-
-var FileUploadProgress = function FileUploadProgress(_ref2) {
-  var progressProps = _ref2.progress;
-
-  var _useState = useState(progressProps),
-      _useState2 = _slicedToArray(_useState, 2),
-      progress = _useState2[0],
-      setProgress = _useState2[1];
-
-  useIntervalWhen(function () {
-    setProgress(progressProps);
-  }, 1000, true, true);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles['upload-queue__upload-progress']
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "u-flex-grow-1 u-pr-1"
-  }, /*#__PURE__*/React.createElement(FileLinearProgress, {
-    variant: "determinate",
-    value: progress.loaded / progress.total * 100
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "u-flex-shrink"
-  }, progress.remainingTime ? /*#__PURE__*/React.createElement(RemainingTime, {
-    durationInSec: progress.remainingTime
-  }) : null));
-};
-
-var Item = translate()(function (_ref3) {
-  var _cx;
-
-  var file = _ref3.file,
-      status = _ref3.status,
-      isDirectory = _ref3.isDirectory,
-      progress = _ref3.progress,
-      getMimeTypeIcon = _ref3.getMimeTypeIcon;
-  var CANCEL = uploadStatus.CANCEL,
-      LOADING = uploadStatus.LOADING,
-      DONE_STATUSES = uploadStatus.DONE_STATUSES,
-      ERROR_STATUSES = uploadStatus.ERROR_STATUSES;
-
-  var _splitFilename = splitFilename(file),
-      filename = _splitFilename.filename,
-      extension = _splitFilename.extension;
-
-  var statusIcon;
-  var done = false;
-  var error = false;
-  /**
-   * Status came from the Upload Queue, but sometimes we're using
-   * manual upload without using the Upload Queue system but we're still
-   * using the UI component. When this is the case, the file handles on
-   * his own its status.
-   */
-
-  var statusToUse = file.status ? file.status : status;
-
-  if (statusToUse === LOADING) {
-    statusIcon = !progress ? /*#__PURE__*/React.createElement(Spinner, {
-      className: "u-ml-half",
-      color: "var(--primaryColor)"
-    }) : null;
-  } else if (statusToUse === CANCEL) {
-    statusIcon = /*#__PURE__*/React.createElement(Icon, {
-      className: "u-ml-half",
-      icon: CrossIcon,
-      color: "var(--errorColor)"
-    });
-  } else if (ERROR_STATUSES.includes(statusToUse)) {
-    error = true;
-    statusIcon = /*#__PURE__*/React.createElement(Icon, {
-      className: "u-ml-half",
-      icon: WarningIcon,
-      color: "var(--errorColor)"
-    });
-  } else if (DONE_STATUSES.includes(statusToUse)) {
-    done = true;
-    statusIcon = /*#__PURE__*/React.createElement(Icon, {
-      className: "u-ml-half",
-      icon: CheckIcon,
-      color: "var(--successColor)"
-    });
-  } else if (statusToUse === PENDING) {
-    statusIcon = /*#__PURE__*/React.createElement(Pending, null);
-  }
-
-  return /*#__PURE__*/React.createElement(ListItem, {
-    divider: true,
-    "data-testid": "upload-queue-item",
-    className: cx('u-ph-1', (_cx = {}, _defineProperty(_cx, styles['upload-queue-item--done'], done), _defineProperty(_cx, styles['upload-queue-item--error'], error), _cx))
-  }, getMimeTypeIcon ? /*#__PURE__*/React.createElement(ListItemIcon, {
-    className: "u-ta-center"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: getMimeTypeIcon(isDirectory, file.name, file.type),
-    size: 32,
-    className: "u-mr-1"
-  })) : null, /*#__PURE__*/React.createElement(ListItemText, {
-    disableTypography: true
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "upload-queue-item-name",
-    className: "u-ellipsis"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body1",
-    className: "u-ellipsis"
-  }, filename, extension && /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    variant: "body1",
-    color: "textSecondary",
-    className: "u-dib"
-  }, extension))), progress ? /*#__PURE__*/React.createElement(FileUploadProgress, {
-    progress: progress
-  }) : null), /*#__PURE__*/React.createElement(Img, {
-    className: styles['item-status']
-  }, statusIcon));
-});
 export var UploadQueue = /*#__PURE__*/function (_Component) {
   _inherits(UploadQueue, _Component);
 
@@ -307,7 +143,7 @@ export var UploadQueue = /*#__PURE__*/function (_Component) {
   _createClass(UploadQueue, [{
     key: "render",
     value: function render() {
-      var _cx2;
+      var _cx;
 
       var _this$props = this.props,
           t = _this$props.t,
@@ -321,7 +157,7 @@ export var UploadQueue = /*#__PURE__*/function (_Component) {
       var collapsed = this.state.collapsed;
       return /*#__PURE__*/React.createElement("div", {
         "data-testid": "upload-queue",
-        className: cx(styles['upload-queue'], (_cx2 = {}, _defineProperty(_cx2, styles['upload-queue--visible'], queue.length !== 0), _defineProperty(_cx2, styles['upload-queue--collapsed'], collapsed), _defineProperty(_cx2, styles['upload-queue--popover'], popover), _cx2))
+        className: cx(styles['upload-queue'], (_cx = {}, _defineProperty(_cx, styles['upload-queue--visible'], queue.length !== 0), _defineProperty(_cx, styles['upload-queue--collapsed'], collapsed), _defineProperty(_cx, styles['upload-queue--popover'], popover), _cx))
       }, /*#__PURE__*/React.createElement("h4", {
         className: styles['upload-queue-header'],
         onDoubleClick: this.toggleCollapsed

package/transpiled/react/UploadQueue/useStatusIcon.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { uploadStatus } from "cozy-ui/transpiled/react/UploadQueue/index";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import CheckIcon from "cozy-ui/transpiled/react/Icons/Check";
+import CheckCircleIcon from "cozy-ui/transpiled/react/Icons/CheckCircle";
+import CrossIcon from "cozy-ui/transpiled/react/Icons/Cross";
+import CrossCircleIcon from "cozy-ui/transpiled/react/Icons/CrossCircle";
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
+import Spinner from "cozy-ui/transpiled/react/Spinner";
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
+export var useStatusIcon = function useStatusIcon(statusToUse, progress) {
+  var CANCEL = uploadStatus.CANCEL,
+      LOADING = uploadStatus.LOADING,
+      DONE_STATUSES = uploadStatus.DONE_STATUSES,
+      ERROR_STATUSES = uploadStatus.ERROR_STATUSES,
+      PENDING = uploadStatus.PENDING;
+  var SuccessIcon = isTwakeTheme() ? CheckCircleIcon : CheckIcon;
+  var ErrorIcon = isTwakeTheme() ? CrossCircleIcon : CrossIcon;
+  var statusIcon;
+
+  if (statusToUse === LOADING) {
+    statusIcon = !progress ? /*#__PURE__*/React.createElement(Spinner, {
+      color: "var(--primaryColor)"
+    }) : null;
+  } else if (statusToUse === CANCEL) {
+    statusIcon = /*#__PURE__*/React.createElement(Icon, {
+      icon: ErrorIcon,
+      color: "var(--errorColor)"
+    });
+  } else if (ERROR_STATUSES.includes(statusToUse)) {
+    statusIcon = /*#__PURE__*/React.createElement(Icon, {
+      icon: WarningIcon,
+      color: "var(--errorColor)"
+    });
+  } else if (DONE_STATUSES.includes(statusToUse)) {
+    statusIcon = /*#__PURE__*/React.createElement(Icon, {
+      icon: SuccessIcon,
+      color: "var(--successColor)"
+    });
+  } else if (statusToUse === PENDING) {
+    statusIcon = null;
+  }
+
+  return statusIcon;
+};