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

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useEffect } from "react";
import { ConvertToSizeUnits, ConvertFileSizeToDisplay, ConvertSecondsToETATime, ConvertNumberToPrecision } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import HUDIcon from "./HUDIcon.js";
var styles = {
  container: {
    fontFamily: "Arial, sans-serif",
    borderRadius: "5px",
    background: "#222",
    color: "#fff",
    width: "500px",
    padding: "10px 20px",
    marginBottom: "20px"
  },
  header: {
    fontSize: "18px",
    marginBottom: "10px"
  },
  body: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
  },
  progressBarContainer: {
    flexGrow: 1,
    borderRadius: "5px",
    background: "#333",
    height: "10px",
    margin: "0 10px"
  },
  completionContainer: {
    position: "relative",
    display: "flex",
    justifyContent: "center",
    width: "calc(100%)",
    marginBottom: "0.69rem"
  },
  completionMessage: {
    fontSize: "14px",
    color: "#4CAF50"
  },
  completionIcon: {
    height: "1.69rem",
    width: "1.69rem"
  },
  statsContainer: {
    display: "flex",
    flexDirection: "row",
    justfiyContent: "center",
    alignItems: "center",
    width: "calc(91.69%)"
  },
  operationLabel: {
    fontSize: "12px"
  },
  progressBar: {
    transition: "all 0.1s ease",
    borderRadius: "5px",
    background: "#F5A623",
    height: "100%"
  },
  percentage: {
    fontSize: "14px",
    minWidth: "50px"
  },
  controls: {
    display: "flex",
    gap: "10px"
  },
  icon: {
    cursor: "pointer",
    fontSize: "16px",
    color: "#fff"
  },
  currentSize: {
    position: "relative",
    display: "flex",
    fontSize: "12px",
    borderRadius: "0.269rem",
    background: "rgba(37.69, 47.69, 47.69, 1)",
    color: "#bbb",
    padding: "2.69px",
    marginRight: "5px",
    marginTop: "5px"
  },
  totalSize: {
    position: "relative",
    display: "flex",
    fontSize: "12px",
    borderRadius: "0.269rem",
    background: "rgba(47.69, 57.69, 57.69, 1)",
    color: "#bbb",
    padding: "2.69px",
    marginRight: "5px",
    marginTop: "5px"
  },
  dps: {
    position: "relative",
    display: "flex",
    fontSize: "12px",
    borderRadius: "0.269rem",
    background: "rgba(37.69, 37.69, 37.69, 1)",
    color: "#bbb",
    padding: "2.69px",
    marginRight: "5px",
    marginTop: "5px"
  },
  eta: {
    position: "relative",
    display: "flex",
    fontSize: "12px",
    borderRadius: "0.269rem",
    background: "rgba(37.69, 37.69, 37.69, 1)",
    color: "#bbb",
    padding: "2.69px",
    marginTop: "5px"
  }
};
function HUDOperationProgress(_ref) {
  var _ref$operationProgres = _ref.operationProgressContainerConfigurationSettings,
    operationProgressContainerConfigurationSettings = _ref$operationProgres === void 0 ? {} : _ref$operationProgres,
    _ref$completionMessag = _ref.completionMessageLabelConfigurationSettings,
    completionMessageLabelConfigurationSettings = _ref$completionMessag === void 0 ? {} : _ref$completionMessag,
    _ref$progressBarConta = _ref.progressBarContainerConfigurationSettings,
    progressBarContainerConfigurationSettings = _ref$progressBarConta === void 0 ? {} : _ref$progressBarConta,
    _ref$dataPerSecondLab = _ref.dataPerSecondLabelConfigurationSettings,
    dataPerSecondLabelConfigurationSettings = _ref$dataPerSecondLab === void 0 ? {} : _ref$dataPerSecondLab,
    _ref$controlsContaine = _ref.controlsContainerConfigurationSettings,
    controlsContainerConfigurationSettings = _ref$controlsContaine === void 0 ? {} : _ref$controlsContaine,
    _ref$statsContainerCo = _ref.statsContainerConfigurationSettings,
    statsContainerConfigurationSettings = _ref$statsContainerCo === void 0 ? {} : _ref$statsContainerCo,
    _ref$cancelButtonConf = _ref.cancelButtonConfigurationSettings,
    cancelButtonConfigurationSettings = _ref$cancelButtonConf === void 0 ? {} : _ref$cancelButtonConf,
    _ref$pauseButtonConfi = _ref.pauseButtonConfigurationSettings,
    pauseButtonConfigurationSettings = _ref$pauseButtonConfi === void 0 ? {} : _ref$pauseButtonConfi,
    _ref$playButtonConfig = _ref.playButtonConfigurationSettings,
    playButtonConfigurationSettings = _ref$playButtonConfig === void 0 ? {} : _ref$playButtonConfig,
    _ref$operationProgres2 = _ref.operationProgressBarConfigurationSettings,
    operationProgressBarConfigurationSettings = _ref$operationProgres2 === void 0 ? {} : _ref$operationProgres2,
    _ref$completionContai = _ref.completionContainerConfigurationSettings,
    completionContainerConfigurationSettings = _ref$completionContai === void 0 ? {} : _ref$completionContai,
    _ref$currentSizeLabel = _ref.currentSizeLabelConfigurationSettings,
    currentSizeLabelConfigurationSettings = _ref$currentSizeLabel === void 0 ? {} : _ref$currentSizeLabel,
    _ref$percentageLabelC = _ref.percentageLabelConfigurationSettings,
    percentageLabelConfigurationSettings = _ref$percentageLabelC === void 0 ? {} : _ref$percentageLabelC,
    _ref$totalSizeLabelCo = _ref.totalSizeLabelConfigurationSettings,
    totalSizeLabelConfigurationSettings = _ref$totalSizeLabelCo === void 0 ? {} : _ref$totalSizeLabelCo,
    _ref$operationLabelCo = _ref.operationLabelConfigurationSettings,
    operationLabelConfigurationSettings = _ref$operationLabelCo === void 0 ? {} : _ref$operationLabelCo,
    _ref$completionIconCo = _ref.completionIconConfigurationSettings,
    completionIconConfigurationSettings = _ref$completionIconCo === void 0 ? {} : _ref$completionIconCo,
    _ref$progressBarConfi = _ref.progressBarConfigurationSettings,
    progressBarConfigurationSettings = _ref$progressBarConfi === void 0 ? {} : _ref$progressBarConfi,
    _ref$etaLabelConfigur = _ref.etaLabelConfigurationSettings,
    etaLabelConfigurationSettings = _ref$etaLabelConfigur === void 0 ? {} : _ref$etaLabelConfigur,
    _ref$titleConfigurati = _ref.titleConfigurationSettings,
    titleConfigurationSettings = _ref$titleConfigurati === void 0 ? {} : _ref$titleConfigurati,
    _ref$operationProgres3 = _ref.operationProgressContainerConfigurations,
    operationProgressContainerConfigurations = _ref$operationProgres3 === void 0 ? {} : _ref$operationProgres3,
    _ref$completionMessag2 = _ref.completionMessageLabelConfigurations,
    completionMessageLabelConfigurations = _ref$completionMessag2 === void 0 ? {} : _ref$completionMessag2,
    _ref$progressBarConta2 = _ref.progressBarContainerConfigurations,
    progressBarContainerConfigurations = _ref$progressBarConta2 === void 0 ? {} : _ref$progressBarConta2,
    _ref$operationProgres4 = _ref.operationProgressBarConfigurations,
    operationProgressBarConfigurations = _ref$operationProgres4 === void 0 ? {} : _ref$operationProgres4,
    _ref$completionContai2 = _ref.completionContainerConfigurations,
    completionContainerConfigurations = _ref$completionContai2 === void 0 ? {} : _ref$completionContai2,
    _ref$dataPerSecondLab2 = _ref.dataPerSecondLabelConfigurations,
    dataPerSecondLabelConfigurations = _ref$dataPerSecondLab2 === void 0 ? {} : _ref$dataPerSecondLab2,
    _ref$controlsContaine2 = _ref.controlsContainerConfigurations,
    controlsContainerConfigurations = _ref$controlsContaine2 === void 0 ? {} : _ref$controlsContaine2,
    _ref$currentSizeLabel2 = _ref.currentSizeLabelConfigurations,
    currentSizeLabelConfigurations = _ref$currentSizeLabel2 === void 0 ? {} : _ref$currentSizeLabel2,
    _ref$percentageLabelC2 = _ref.percentageLabelConfigurations,
    percentageLabelConfigurations = _ref$percentageLabelC2 === void 0 ? {} : _ref$percentageLabelC2,
    _ref$totalSizeLabelCo2 = _ref.totalSizeLabelConfigurations,
    totalSizeLabelConfigurations = _ref$totalSizeLabelCo2 === void 0 ? {} : _ref$totalSizeLabelCo2,
    _ref$completionIconCo2 = _ref.completionIconConfigurations,
    completionIconConfigurations = _ref$completionIconCo2 === void 0 ? {} : _ref$completionIconCo2,
    _ref$operationLabelCo2 = _ref.operationLabelConfigurations,
    operationLabelConfigurations = _ref$operationLabelCo2 === void 0 ? {} : _ref$operationLabelCo2,
    _ref$statsContainerCo2 = _ref.statsContainerConfigurations,
    statsContainerConfigurations = _ref$statsContainerCo2 === void 0 ? {} : _ref$statsContainerCo2,
    _ref$cancelButtonConf2 = _ref.cancelButtonConfigurations,
    cancelButtonConfigurations = _ref$cancelButtonConf2 === void 0 ? {} : _ref$cancelButtonConf2,
    _ref$pauseButtonConfi2 = _ref.pauseButtonConfigurations,
    pauseButtonConfigurations = _ref$pauseButtonConfi2 === void 0 ? {} : _ref$pauseButtonConfi2,
    _ref$progressBarConfi2 = _ref.progressBarConfigurations,
    progressBarConfigurations = _ref$progressBarConfi2 === void 0 ? {} : _ref$progressBarConfi2,
    _ref$playButtonConfig2 = _ref.playButtonConfigurations,
    playButtonConfigurations = _ref$playButtonConfig2 === void 0 ? {} : _ref$playButtonConfig2,
    _ref$etaLabelConfigur2 = _ref.etaLabelConfigurations,
    etaLabelConfigurations = _ref$etaLabelConfigur2 === void 0 ? {} : _ref$etaLabelConfigur2,
    _ref$titleConfigurati2 = _ref.titleConfigurations,
    titleConfigurations = _ref$titleConfigurati2 === void 0 ? {} : _ref$titleConfigurati2,
    _ref$operationData = _ref.operationData,
    operationData = _ref$operationData === void 0 ? {
      current: 0,
      total: 0
    } : _ref$operationData,
    _ref$completionConten = _ref.completionContent,
    completionContent = _ref$completionConten === void 0 ? null : _ref$completionConten,
    _ref$completionMessag3 = _ref.completionMessage,
    completionMessage = _ref$completionMessag3 === void 0 ? "" : _ref$completionMessag3,
    _ref$showControls = _ref.showControls,
    showControls = _ref$showControls === void 0 ? true : _ref$showControls,
    _ref$progressPrecisio = _ref.progressPrecisionType,
    progressPrecisionType = _ref$progressPrecisio === void 0 ? "trim" : _ref$progressPrecisio,
    _ref$progressDecimals = _ref.progressDecimals,
    progressDecimals = _ref$progressDecimals === void 0 ? 2 : _ref$progressDecimals,
    progressBarColor = _ref.progressBarColor,
    operationType = _ref.operationType,
    children = _ref.children,
    progress = _ref.progress,
    onComplete = _ref.onComplete,
    onCancel = _ref.onCancel,
    onPause = _ref.onPause,
    title = _ref.title,
    speed = _ref.speed;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    currentDPS = _useState2[0],
    setCurrentDPS = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    completed = _useState4[0],
    setCompleted = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    paused = _useState6[0],
    setPaused = _useState6[1];
  var _useState7 = useState(null),
    _useState8 = _slicedToArray(_useState7, 2),
    eta = _useState8[0],
    setEta = _useState8[1];
  var handlePauseResume = function handlePauseResume() {
    setPaused(!paused);
    if (onPause) {
      onPause(!paused);
    }
  };
  var handleCancel = function handleCancel() {
    if (onCancel) {
      onCancel();
    }
  };
  useEffect(function () {
    if (progress >= 100) {
      setCompleted(true);
      setEta("Completed!");
      if (onComplete) {
        onComplete();
      }
    } else if (speed && progress < 100 && !paused) {
      var estimatedTimeInSeconds = (operationData.total - operationData.current) / (speed || 1);
      var speedData = ConvertToSizeUnits(speed);
      setEta("".concat(ConvertSecondsToETATime(estimatedTimeInSeconds), " remaining"));
      setCurrentDPS("".concat(speedData.current, " ").concat(speedData.unit, "/s"));
    } else if (paused) {
      setEta("Paused");
    } else {
      setEta(null);
    }
  }, [speed, progress, paused, operationData]);
  return /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.container), operationProgressContainerConfigurationSettings)
  }, operationProgressContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.header), titleConfigurationSettings)
  }, titleConfigurations), /*#__PURE__*/React.createElement("span", null, title)), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.body), operationProgressBarConfigurationSettings)
  }, operationProgressBarConfigurations), !completed && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
    style: _objectSpread(_objectSpread({}, styles.operationLabel), operationLabelConfigurationSettings)
  }, operationLabelConfigurations), paused ? "PAUSED" : operationType.toUpperCase()), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.progressBarContainer), progressBarContainerConfigurationSettings)
  }, progressBarContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.progressBar), {}, {
      width: "".concat(progress, "%"),
      backgroundColor: progressBarColor || "#F5A623"
    }, progressBarConfigurationSettings)
  }, progressBarConfigurations)))), completed ? /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.completionContainer), completionContainerConfigurationSettings)
  }, completionContainerConfigurations), completionContent ? completionContent : /*#__PURE__*/React.createElement("span", _extends({
    style: _objectSpread(_objectSpread({}, styles.completionMessage), completionMessageLabelConfigurationSettings)
  }, completionMessageLabelConfigurations), /*#__PURE__*/React.createElement(HUDIcon, _extends({
    iconConfigurationSettings: _objectSpread(_objectSpread({}, styles.completionIcon), completionIconConfigurationSettings),
    name: "fa-check-circle"
  }, completionIconConfigurations)), completionMessage)) : /*#__PURE__*/React.createElement("span", _extends({
    style: _objectSpread(_objectSpread({}, styles.percentage), percentageLabelConfigurationSettings)
  }, percentageLabelConfigurations), "".concat(ConvertNumberToPrecision(progress, progressDecimals, progressPrecisionType), "%")), !completed && showControls && /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.controls), controlsContainerConfigurationSettings)
  }, controlsContainerConfigurations), paused ? /*#__PURE__*/React.createElement(HUDIcon, _extends({
    name: "play",
    onClick: handlePauseResume,
    iconConfigurationSettings: _objectSpread(_objectSpread({}, styles.icon), playButtonConfigurationSettings)
  }, playButtonConfigurations)) : /*#__PURE__*/React.createElement(HUDIcon, _extends({
    name: "pause",
    onClick: handlePauseResume,
    iconConfigurationSettings: _objectSpread(_objectSpread({}, styles.icon), pauseButtonConfigurationSettings)
  }, pauseButtonConfigurations)), /*#__PURE__*/React.createElement(HUDIcon, _extends({
    name: "cancel",
    onClick: handleCancel,
    iconConfigurationSettings: _objectSpread(_objectSpread({}, styles.icon), cancelButtonConfigurationSettings)
  }, cancelButtonConfigurations)))), /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.statsContainer), statsContainerConfigurationSettings)
  }, statsContainerConfigurations), operationData && operationData.total && /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.totalSize), totalSizeLabelConfigurationSettings)
  }, totalSizeLabelConfigurations), ConvertFileSizeToDisplay(operationData.total)), operationData && operationData.current && /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.currentSize), currentSizeLabelConfigurationSettings)
  }, currentSizeLabelConfigurations), ConvertFileSizeToDisplay(operationData.current)), currentDPS && /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.dps), dataPerSecondLabelConfigurationSettings)
  }, dataPerSecondLabelConfigurations), currentDPS), eta && /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, styles.eta), etaLabelConfigurationSettings)
  }, etaLabelConfigurations), eta)), completed && children && /*#__PURE__*/React.createElement("div", null, children));
}
;
export default HUDOperationProgress;