@scaleflex/widget-progress-panel 0.0.1

package/lib/components/ActivityCircularProgress/index.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import Styled from './ActivityCircularProgress.styled';
+import StyledProgressPanel from '../../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var SIZE = 44;
+var ActivityCircularProgress = function ActivityCircularProgress(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$thickness = _ref.thickness,
+    thickness = _ref$thickness === void 0 ? 6 : _ref$thickness,
+    determinate = _ref.determinate,
+    statusTitle = _ref.statusTitle;
+  var circumference = useMemo(function () {
+    return 2 * Math.PI * ((SIZE - thickness) / 2);
+  }, [thickness]);
+  return /*#__PURE__*/_jsx(StyledProgressPanel.ActivityStatus, {
+    "aria-label": statusTitle,
+    title: statusTitle,
+    children: /*#__PURE__*/_jsx(Styled.CircularProgressRoot, {
+      "aria-valuenow": value,
+      determinate: determinate,
+      children: /*#__PURE__*/_jsxs(Styled.CircularProgressSvg, {
+        viewBox: "22 22 44 44",
+        children: [/*#__PURE__*/_jsx(Styled.CircularProgressTrack, {
+          size: SIZE,
+          thickness: thickness
+        }), /*#__PURE__*/_jsx(Styled.CircularProgress, {
+          size: SIZE,
+          thickness: thickness,
+          strokeDasharray: circumference.toFixed(3),
+          strokeDashoffset: ((100 - value) / 100 * circumference).toFixed(3)
+        })]
+      })
+    })
+  });
+};
+export default ActivityCircularProgress;

package/lib/components/ActivityStatus.js

@@ -0,0 +1,51 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { Success, WarningRound } from '@scaleflex/icons';
+import { PC } from '@scaleflex/widget-common';
+import { PROGRESS_PANEL_STATUS } from '@scaleflex/widget-utils/lib/constants';
+import Styled from '../ProgressPanel.styled';
+import ActivityCircularProgress from './ActivityCircularProgress';
+import { jsx as _jsx } from "react/jsx-runtime";
+var activityStatusToComponent = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PROGRESS_PANEL_STATUS.PREPARING, ActivityCircularProgress), PROGRESS_PANEL_STATUS.PROGRESSING, ActivityCircularProgress), PROGRESS_PANEL_STATUS.PAUSED, ActivityCircularProgress), PROGRESS_PANEL_STATUS.DELAYED, function (_ref) {
+  var theme = _ref.theme;
+  return /*#__PURE__*/_jsx(Success, {
+    size: 22,
+    color: theme.palette[PC.Success]
+  });
+}), PROGRESS_PANEL_STATUS.COMPLETE, function (_ref2) {
+  var theme = _ref2.theme;
+  return /*#__PURE__*/_jsx(Success, {
+    size: 22,
+    color: theme.palette[PC.Success]
+  });
+}), PROGRESS_PANEL_STATUS.ERROR, function (_ref3) {
+  var theme = _ref3.theme;
+  return /*#__PURE__*/_jsx(WarningRound, {
+    size: 22,
+    color: theme.palette[PC.Error]
+  });
+});
+var ActivityStatus = function ActivityStatus(_ref4) {
+  var status = _ref4.status,
+    statusTitle = _ref4.statusTitle,
+    percentage = _ref4.percentage,
+    almostCompleted = _ref4.almostCompleted,
+    i18n = _ref4.i18n;
+  var theme = useTheme();
+  var indeterminate = status === PROGRESS_PANEL_STATUS.PREPARING || almostCompleted;
+  var title = statusTitle || status;
+  var ActivityStatusComp = activityStatusToComponent[status];
+  return /*#__PURE__*/_jsx(Styled.ActivityStatus, {
+    title: title,
+    children: ActivityStatusComp && /*#__PURE__*/_jsx(ActivityStatusComp, {
+      theme: theme,
+      value: indeterminate ? 25 : percentage,
+      determinate: !indeterminate,
+      statusTitle: almostCompleted ? i18n('progressPanelAssetProcessingTitle') : title
+    })
+  });
+};
+export default ActivityStatus;

package/lib/components/CancelButton.js

@@ -0,0 +1,34 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Cross } from '@scaleflex/icons';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var CancelButton = function CancelButton(_ref) {
+  var id = _ref.id,
+    i18n = _ref.i18n;
+  var _useCore = useCore(),
+    emit = _useCore.emit;
+  var handleCancel = function handleCancel() {
+    emit('activity-cancel', {
+      id: id
+    });
+  };
+  return /*#__PURE__*/_jsx(Styled.ActionButton, {
+    size: "sm",
+    color: "primary",
+    onClick: handleCancel,
+    "aria-label": i18n('progressPanelProgressActionTitle'),
+    title: i18n('progressPanelProgressActionTitle'),
+    children: function children(iconProps) {
+      return /*#__PURE__*/_jsx(Cross, _objectSpread(_objectSpread({}, iconProps), {}, {
+        size: 12
+      }));
+    }
+  });
+};
+export default CancelButton;

package/lib/components/ProgressPanel.js

@@ -0,0 +1,67 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { VirtualList } from '@scaleflex/widget-common';
+import { EVENTS } from '@scaleflex/widget-utils/lib/constants';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { selectProgressPanelActivitiesIds, selectIsProgressPanelMinimized, selectShowProgressPanel, selectProgressPanelDelayedActivitiesIds } from '../progressPanel.slice';
+import ProgressPanelItem from './ProgressPanelItem';
+import ProgressPanelHeader from './ProgressPanelHeader';
+import Styled from '../ProgressPanel.styled';
+import UploadDelayedNotification from './UploadDelayedNotification';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ProgressPanel = function ProgressPanel(_ref) {
+  var i18n = _ref.i18n,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 9999 : _ref$zIndex,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'fixed' : _ref$position;
+  var _useCore = useCore(),
+    on = _useCore.on,
+    off = _useCore.off;
+  var progressPanelActivitiesIds = useSelector(selectProgressPanelActivitiesIds);
+  var isPanelMinimized = useSelector(selectIsProgressPanelMinimized);
+  var showProgressPanel = useSelector(selectShowProgressPanel);
+  var progressPanelDelayedActivitiesIds = useSelector(selectProgressPanelDelayedActivitiesIds);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var handleOnStyleChange = function handleOnStyleChange(newStyle) {
+    setStyle(newStyle);
+  };
+  useEffect(function () {
+    on(EVENTS.CHANGE_PROGRESS_PANEL_STYLE, handleOnStyleChange);
+    return function () {
+      off(EVENTS.CHANGE_PROGRESS_PANEL_STYLE, handleOnStyleChange);
+    };
+  }, []);
+  return /*#__PURE__*/_jsxs(Styled.ProgressPanelContainer, {
+    className: "filerobot-progressPanel",
+    zIndex: zIndex,
+    show: showProgressPanel,
+    isMinimized: isPanelMinimized,
+    position: position,
+    style: style,
+    children: [/*#__PURE__*/_jsx(ProgressPanelHeader, {
+      i18n: i18n
+    }), progressPanelDelayedActivitiesIds.length > 0 && /*#__PURE__*/_jsx(UploadDelayedNotification, {
+      i18n: i18n
+    }), !isPanelMinimized && /*#__PURE__*/_jsx(Styled.ProgressPanelList, {
+      children: /*#__PURE__*/_jsx(VirtualList, {
+        items: progressPanelActivitiesIds,
+        injectedItemPropName: "activityId",
+        children: /*#__PURE__*/_jsx(ProgressPanelItem, {
+          itemsCount: progressPanelActivitiesIds.length,
+          i18n: i18n
+        })
+      })
+    })]
+  });
+};
+export default ProgressPanel;

package/lib/components/ProgressPanelHeader.js

@@ -0,0 +1,78 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useSelector, useDispatch } from 'react-redux';
+import throttle from 'lodash.throttle';
+import { Cross } from '@scaleflex/icons';
+import prettyETA from '@scaleflex/widget-utils/lib/prettyETA';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { selectProgressPanelInProgressActivitiesIds, selectProgressPanelCompletedActivitiesIds, selectProgressPanelTotalEta, selectIsProgressPanelMinimized, progressPanelMinimized, resetPanel } from '../progressPanel.slice';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ProgressPanelHeader = function ProgressPanelHeader(_ref) {
+  var i18n = _ref.i18n;
+  var dispatch = useDispatch();
+  var _useCore = useCore(),
+    cancelUploads = _useCore.cancelUploads,
+    emit = _useCore.emit;
+  var isPanelMinimized = useSelector(selectIsProgressPanelMinimized);
+  var inProgressActivitiesIds = useSelector(selectProgressPanelInProgressActivitiesIds);
+  var completedActivitiesIds = useSelector(selectProgressPanelCompletedActivitiesIds);
+  var totalEta = useSelector(selectProgressPanelTotalEta);
+  var togglePanel = function togglePanel() {
+    dispatch(progressPanelMinimized(!isPanelMinimized));
+    emit('progressPanel-minimize', !isPanelMinimized);
+  };
+  var closeProgressPanel = function closeProgressPanel() {
+    dispatch(resetPanel());
+    cancelUploads();
+  };
+  var ProgressPanelEta = throttle(function () {
+    return /*#__PURE__*/_jsx(Styled.ProgressPanelEta, {
+      children: i18n('progressPanelEtaLeftText', {
+        time: prettyETA(totalEta)
+      })
+    });
+  }, 500, {
+    leading: true,
+    trailing: true
+  });
+  var isPanelActive = inProgressActivitiesIds.length;
+  var panelItems = isPanelActive ? inProgressActivitiesIds : completedActivitiesIds;
+  return /*#__PURE__*/_jsxs(Styled.ProgressPanelHeader, {
+    isMinimized: isPanelMinimized,
+    children: [/*#__PURE__*/_jsxs(Styled.ProgressPanelInfo, {
+      children: [/*#__PURE__*/_jsx(Styled.ProgressPanelState, {
+        hasTotalEta: !!totalEta,
+        children: "".concat(isPanelActive ? i18n('progressPanelProcessingHeaderLabel') : i18n('progressPanelProcessedHeaderLabel'), "\n          (").concat(panelItems.length, " ").concat(i18n('progressPanelHeaderItemsText', {
+          smart_count: panelItems.length
+        }), ")")
+      }), !!totalEta && /*#__PURE__*/_jsx(ProgressPanelEta, {})]
+    }), /*#__PURE__*/_jsxs(Styled.ProgressPanelActions, {
+      children: [/*#__PURE__*/_jsx(Styled.ProgressPanelIconButton, {
+        onClick: togglePanel,
+        size: "xs",
+        color: "basic",
+        children: function children(iconProps) {
+          return /*#__PURE__*/_jsx(Styled.Arrow, _objectSpread(_objectSpread({}, iconProps), {}, {
+            $isMinimized: isPanelMinimized,
+            size: 12
+          }));
+        }
+      }), !isPanelActive && /*#__PURE__*/_jsx(Styled.ProgressPanelIconButton, {
+        onClick: closeProgressPanel,
+        size: "xs",
+        color: "basic",
+        children: function children(iconProps) {
+          return /*#__PURE__*/_jsx(Cross, _objectSpread(_objectSpread({}, iconProps), {}, {
+            size: 12
+          }));
+        }
+      })]
+    })]
+  });
+};
+export default ProgressPanelHeader;

package/lib/components/ProgressPanelItem.js

@@ -0,0 +1,19 @@
+import { useSelector } from 'react-redux';
+import { selectProgressPanelActivityById } from '../progressPanel.slice';
+import Activity from './Activity';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ProgressPanelItem = function ProgressPanelItem(_ref) {
+  var activityId = _ref.activityId,
+    index = _ref.index,
+    itemsCount = _ref.itemsCount,
+    i18n = _ref.i18n;
+  var activity = useSelector(function (state) {
+    return selectProgressPanelActivityById(state, activityId);
+  });
+  return /*#__PURE__*/_jsx(Activity, {
+    activity: activity,
+    isLastItem: index === itemsCount - 1,
+    i18n: i18n
+  }, activity.id);
+};
+export default ProgressPanelItem;

package/lib/components/RetryButton.js

@@ -0,0 +1,36 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Reload } from '@scaleflex/icons';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var RetryButton = function RetryButton(_ref) {
+  var id = _ref.id,
+    i18n = _ref.i18n;
+  var _useCore = useCore(),
+    emit = _useCore.emit;
+  var handleRetry = function handleRetry() {
+    emit('activity-retry', {
+      id: id
+    });
+  };
+  return /*#__PURE__*/_jsx(Styled.ActionButton, {
+    size: "sm",
+    color: "primary",
+    onClick: function onClick() {
+      return handleRetry();
+    },
+    "aria-label": i18n('progressPanelErrorActionTitle'),
+    title: i18n('progressPanelErrorActionTitle'),
+    children: function children(iconProps) {
+      return /*#__PURE__*/_jsx(Reload, _objectSpread(_objectSpread({}, iconProps), {}, {
+        size: 12
+      }));
+    }
+  });
+};
+export default RetryButton;

package/lib/components/UploadDelayedNotification.js

@@ -0,0 +1,26 @@
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { Info } from '@scaleflex/icons';
+import { PC } from '@scaleflex/widget-common';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var UploadDelayedNotification = function UploadDelayedNotification(_ref) {
+  var _theme$palette, _theme$palette2;
+  var i18n = _ref.i18n;
+  var theme = useTheme();
+  return /*#__PURE__*/_jsx(Styled.NotificationContainer, {
+    children: /*#__PURE__*/_jsx(Styled.ProgressPanelActivityWrapper, {
+      children: /*#__PURE__*/_jsxs(Styled.NotificationWrapper, {
+        children: [/*#__PURE__*/_jsx(Info, {
+          size: 22,
+          color: theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette[PC.Info]
+        }), /*#__PURE__*/_jsx(Styled.NotificationText, {
+          children: i18n('uploadDelayedHint')
+        }), /*#__PURE__*/_jsx(Styled.LoadingIcon, {
+          size: 22,
+          color: theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2[PC.AccentPrimary]
+        })]
+      })
+    })
+  });
+};
+export default UploadDelayedNotification;

package/lib/components/common/ProgressPanelFileIcon.js

@@ -0,0 +1,40 @@
+import { FILE_TYPES_AND_ICONS } from '@scaleflex/widget-utils/lib/constants';
+import getFileExtension from '@scaleflex/widget-utils/lib/getFileExtension';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import mimeTypes from '@scaleflex/widget-utils/lib/mimeTypes';
+import Styled from '../../ProgressPanel.styled';
+import { ACTIVITY_ICONS, PROGRESS_PANEL_FILE_ICONS, PROGRESS_PANEL_FILE_ICON_BY_EXT } from '../../ProgressPanel.constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ProgressPanelFileIcon = function ProgressPanelFileIcon(_ref) {
+  var _mimeTypes$extension;
+  var file = _ref.file,
+    activity = _ref.activity;
+  var theme = useTheme();
+  var _ref2 = activity || {},
+    _ref2$icon = _ref2.icon,
+    icon = _ref2$icon === void 0 ? {} : _ref2$icon;
+  var ActivityIcon = ACTIVITY_ICONS[icon.name];
+  var themePalette = theme === null || theme === void 0 ? void 0 : theme.palette;
+  if (ActivityIcon) {
+    return /*#__PURE__*/_jsx(ActivityIcon, {
+      size: 22,
+      color: themePalette[icon.color]
+    });
+  }
+  var extension = getFileExtension(file || activity);
+  var type = (_mimeTypes$extension = mimeTypes[extension]) === null || _mimeTypes$extension === void 0 ? void 0 : _mimeTypes$extension.split('/')[0];
+  var fileIcon = PROGRESS_PANEL_FILE_ICONS[type] || PROGRESS_PANEL_FILE_ICON_BY_EXT[extension] || {};
+  var Icon = fileIcon.icon;
+  var iconColor = fileIcon.iconColor;
+  if (Icon) {
+    return /*#__PURE__*/_jsx(Icon, {
+      size: 22,
+      color: themePalette[iconColor]
+    });
+  }
+  return /*#__PURE__*/_jsx(Styled.FileIcon, {
+    alt: "icon",
+    src: FILE_TYPES_AND_ICONS[extension] || FILE_TYPES_AND_ICONS._default
+  });
+};
+export default ProgressPanelFileIcon;

package/lib/defaultLocale.js

@@ -0,0 +1,50 @@
+export default {
+  progressPanelProcessingHeaderLabel: 'Processing',
+  progressPanelProcessedHeaderLabel: 'Processed',
+  progressPanelHeaderItemsText: {
+    0: 'item',
+    1: 'items'
+  },
+  progressPanelEtaLeftText: '%{time} left',
+  progressPanelActivityCompleteLabel: 'Uploaded',
+  progressPanelActivityErrorLabel: 'Uploading failed',
+  progressPanelActivityProgressLabel: 'Uploading',
+  progressPanelCompleteActionTitle: 'Show file location',
+  progressPanelVideoActivityCompleteActionTitle: 'Show link',
+  progressPanelErrorActionTitle: 'Retry',
+  progressPanelProgressActionTitle: 'Cancel',
+  progressPanelPauseActionTitle: 'Pause',
+  progressPanelResumeActionTitle: 'Resume',
+  progressPanelAssetProcessingTitle: 'Asset is being processed',
+  uploadDelayedHint: 'It takes few seconds to complete processing, after you can use your uploaded assets.',
+  progressPanelArchiveCompleteLabel: 'Completed archive',
+  progressPanelArchiveFailedLabel: 'Failed archive',
+  progressPanelPreparingArchiveLabel: 'Preparing archive',
+  progressPanelRestoringArchiveActivityLabel: 'Restoring archiving',
+  progressPanelDownloadingArchiveLabel: 'Downloading archive',
+  progressPanelDownloadingActivityLabel: 'Downloading',
+  progressPanelDownloadingActivityErrorLabel: 'Downloading failed',
+  progressPanelDownloadingActivityCompleteLabel: 'Downloaded',
+  progressPanelTranscodeActivityLabel: 'Transcoding',
+  progressPanelRestoringTranscodeActivityLabel: 'Restoring transcoding',
+  progressPanelTranscodedActivityLabel: 'Transcoded',
+  progressPanelTranscodeErrorActivityLabel: 'Transcoding failed',
+  progressPanelCompressActivityLabel: 'Compressing',
+  progressPanelRestoringCompressActivityLabel: 'Restoring compression',
+  progressPanelCompressedActivityLabel: 'Compressed',
+  progressPanelCompressErrorActivityLabel: 'Compressing failed',
+  progressPanelConvertActivityLabel: 'Converting',
+  progressPanelRestoringConvertActivityLabel: 'Restoring conversion',
+  progressPanelConvertedActivityLabel: 'Converted',
+  progressPanelConvertErrorActivityLabel: 'Converting failed',
+  progressPanelPreparingCsvActivityLabel: 'Preparing CSV',
+  progressPanelProcessingCsvActivityLabel: 'Processing CSV',
+  progressPanelProcessingCsvActivityErrorLabel: 'Processing CSV failed',
+  progressPanelProcessedCsvActivityLabel: 'Processed CSV',
+  progressPanelActivityFontProgressLabel: 'Installing font(s)',
+  progressPanelActivityFontCompleteLabel: 'Font installed',
+  progressPanelActivityFontErrorLabel: 'Font already installed',
+  progressPanelPreparingVideoLabel: 'Processing',
+  progressPanelVideoFailedLabel: 'Processing failed',
+  progressPanelVideoCompletedLabel: 'Processed'
+};

package/lib/index.js

@@ -0,0 +1,120 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { createElement } from 'react';
+import { Plugin } from '@scaleflex/widget-core';
+import Translator from '@scaleflex/widget-utils/lib/Translator';
+import { PLUGINS_IDS, EVENTS } from '@scaleflex/widget-utils/lib/constants';
+import progressPanelReducer, { addActivity as _addActivity, selectProgressPanelUploadingActivitiesIds } from './progressPanel.slice';
+import ProgressPanelUI from './components/ProgressPanel';
+import defaultLocale from './defaultLocale';
+import { getSavedActivities } from './utils/locallySavedActivities';
+
+// TODO: find a way to show version of the current plugin
+// why solution below isn't good?
+// first import doesn't work with webpack 5 as it was deprecated
+// second import fixes webpack 5 issue as it was mentioned in their docs
+// but it exposes our package.json to the client and it is mentioned as security rist in mutiple places
+// https://github.com/axelpale/genversion
+// https://stackoverflow.com/questions/64993118/error-should-not-import-the-named-export-version-imported-as-version
+// https://stackoverflow.com/questions/9153571/is-there-a-way-to-get-version-from-package-json-in-nodejs-code/10855054#10855054
+// import { version } from '../package.json'
+// import packageInfo from '../package.json'
+var ProgressPanel = /*#__PURE__*/function (_Plugin) {
+  // static VERSION = packageInfo.version
+
+  function ProgressPanel(filerobot) {
+    var _this;
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, ProgressPanel);
+    _this = _callSuper(this, ProgressPanel, [filerobot, opts]);
+    _defineProperty(_this, "addTarget", function () {
+      return _this.el;
+    });
+    _defineProperty(_this, "render", function (props) {
+      return /*#__PURE__*/createElement(ProgressPanelUI, _objectSpread(_objectSpread({}, props), {}, {
+        i18n: _this.i18n
+      }));
+    });
+    _defineProperty(_this, "loadSavedActivities", function (cbk) {
+      var token = _this.filerobot.opts.container;
+      var savedActivities = getSavedActivities(token);
+      if (Array.isArray(savedActivities) && savedActivities.length > 0 && typeof cbk === 'function') {
+        cbk(savedActivities);
+      }
+    });
+    _defineProperty(_this, "initEvents", function () {
+      _this.filerobot.on(EVENTS.PROGRESS_PANEL_LOAD_SAVED_ACTIVITIES, _this.loadSavedActivities);
+    });
+    _defineProperty(_this, "removeEvents", function () {
+      _this.filerobot.off(EVENTS.PROGRESS_PANEL_LOAD_SAVED_ACTIVITIES, _this.loadSavedActivities);
+    });
+    _this.id = opts.id || PLUGINS_IDS.PROGRESS_PANEL;
+    _this.title = 'ProgressPanel';
+    _this.type = 'progressindicator';
+    _this.defaultLocale = {
+      strings: defaultLocale
+    };
+    _this.i18nInit();
+    _this.opts = _objectSpread({}, opts);
+    _this.addActivity = _this.addActivity.bind(_this);
+    _this.getUploadingActivitiesIds = _this.getUploadingActivitiesIds.bind(_this);
+    return _this;
+  }
+  _inherits(ProgressPanel, _Plugin);
+  return _createClass(ProgressPanel, [{
+    key: "i18nInit",
+    value: function i18nInit() {
+      this.translator = new Translator([this.defaultLocale, this.filerobot.locale, this.opts.locale]);
+      this.i18n = this.translator.translate.bind(this.translator);
+    }
+  }, {
+    key: "getPluginReducer",
+    value: function getPluginReducer() {
+      return progressPanelReducer;
+    }
+  }, {
+    key: "addActivity",
+    value: function addActivity(activity) {
+      return this.dispatch(_addActivity(activity));
+    }
+  }, {
+    key: "getUploadingActivitiesIds",
+    value: function getUploadingActivitiesIds() {
+      return selectProgressPanelUploadingActivitiesIds(this.getGlobalState());
+    }
+  }, {
+    key: "install",
+    value: function install() {
+      var target = this.opts.target || this.filerobot.getPlugin(PLUGINS_IDS.EXPLORER);
+      if (target) {
+        this.mount(target, this);
+      }
+    }
+  }, {
+    key: "onMount",
+    value: function onMount() {
+      this.initEvents();
+    }
+  }, {
+    key: "uninstall",
+    value: function uninstall() {
+      this.unmount();
+      this.removeEvents();
+    }
+  }]);
+}(Plugin);
+export { ProgressPanel as default };