@wix/design-system/dist/cjs/CircularProgressBar/CircularProgressBar.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _system = require("@wix/wix-ui-icons-common/system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _CircularProgressBarSt = require("./CircularProgressBar.st.css.js");
var _constants = require("./constants");
var _CircularProgressBarCore = require("./CircularProgressBarCore");
var _ProgressLabel = require("./CircularProgressBarCore/ProgressLabel");
var _WixDesignSystemIconThemeProvider = require("../WixDesignSystemIconThemeProvider");
var _excluded = ["size", "skin", "labelPlacement", "label", "value", "dataHook", "error", "errorMessage", "className", "light"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/CircularProgressBar/CircularProgressBar.jsx",
  _this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// This is a workaround for tokens to work with JS based solution, it has drawbacks:
// 1. it's not reactive (if token changes, UI won't update)
// 2. it's checking for css vars loaded on body only
var extractSizeFromCSSVariable = function extractSizeFromCSSVariable(variableName, element, fallback) {
  var cssValue = getComputedStyle(element).getPropertyValue(variableName).trim();
  if (cssValue) {
    var numericValue = parseFloat(cssValue);
    return !isNaN(numericValue) ? numericValue : fallback;
  }
  return fallback;
};
var CircularProgressBar = function CircularProgressBar(_ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    _ref$skin = _ref.skin,
    skin = _ref$skin === void 0 ? 'standard' : _ref$skin,
    _ref$labelPlacement = _ref.labelPlacement,
    labelPlacement = _ref$labelPlacement === void 0 ? 'bottom' : _ref$labelPlacement,
    label = _ref.label,
    value = _ref.value,
    dataHook = _ref.dataHook,
    error = _ref.error,
    errorMessage = _ref.errorMessage,
    className = _ref.className,
    light = _ref.light,
    restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('CircularProgressBar', {
    StatusCompleteFilled: _wixUiIconsCommon.StatusCompleteFilled,
    CircleLoaderCheckSmall: _system.CircleLoaderCheckSmall,
    CircleLoaderCheck: _system.CircleLoaderCheck,
    StatusAlertFilled: _wixUiIconsCommon.StatusAlertFilled,
    FormFieldErrorSmall: _system.FormFieldErrorSmall,
    FormFieldError: _system.FormFieldError
  });
  var sizeToSuccessIcon = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants.Size.tiny, icons.StatusCompleteFilled), _constants.Size.small, icons.CircleLoaderCheckSmall), _constants.Size.medium, icons.CircleLoaderCheck), _constants.Size.large, icons.CircleLoaderCheck);
  var sizeToErrorIcon = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants.Size.tiny, /*#__PURE__*/_react["default"].createElement(icons.StatusAlertFilled, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 18
    }
  })), _constants.Size.small, /*#__PURE__*/_react["default"].createElement(icons.FormFieldErrorSmall, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 66,
      columnNumber: 19
    }
  })), _constants.Size.medium, /*#__PURE__*/_react["default"].createElement(icons.FormFieldError, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67,
      columnNumber: 20
    }
  })), _constants.Size.large, /*#__PURE__*/_react["default"].createElement(icons.FormFieldError, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 68,
      columnNumber: 19
    }
  }));
  var _useState = (0, _react.useState)(_constants.sizesMap),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    dynamicSizesMap = _useState2[0],
    setDynamicSizesMap = _useState2[1];
  var rootRef = (0, _react.useRef)(null);
  (0, _react.useLayoutEffect)(function () {
    var newSizesMap = {
      tiny: extractSizeFromCSSVariable('--wds-circular-progress-bar-size-tiny', rootRef.current, _constants.sizesMap.tiny),
      small: extractSizeFromCSSVariable('--wds-circular-progress-bar-size-small', rootRef.current, _constants.sizesMap.small),
      medium: extractSizeFromCSSVariable('--wds-circular-progress-bar-size-medium', rootRef.current, _constants.sizesMap.medium),
      large: extractSizeFromCSSVariable('--wds-circular-progress-bar-size-large', rootRef.current, _constants.sizesMap.large)
    };
    setDynamicSizesMap(newSizesMap);
  }, []);
  var renderSuccessIcon = function renderSuccessIcon(size) {
    var IconToRender = sizeToSuccessIcon[size];
    return /*#__PURE__*/_react["default"].createElement(IconToRender, {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 103,
        columnNumber: 12
      }
    });
  };
  var renderProgressLabel = function renderProgressLabel() {
    return /*#__PURE__*/_react["default"].createElement(_ProgressLabel.ProgressLabel, {
      size: size,
      value: value,
      "data-skin": skin,
      label: label,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 107,
        columnNumber: 5
      }
    });
  };
  var renderProgressBar = function renderProgressBar() {
    return /*#__PURE__*/_react["default"].createElement(_CircularProgressBarCore.CircularProgressBarCore, (0, _extends2["default"])({
      className: (0, _CircularProgressBarSt.st)(_CircularProgressBarSt.classes.progressBar, {
        light: light,
        size: size,
        skin: skin
      })
    }, restProps, {
      value: value,
      label: label,
      error: error,
      errorMessage: errorMessage,
      labelPlacement: labelPlacement,
      "data-hook": _constants.dataHooks.circularProgressBar,
      size: dynamicSizesMap[size],
      "data-size": size,
      "data-skin": skin,
      successIcon: renderSuccessIcon(size),
      errorIcon: sizeToErrorIcon[size],
      renderProgressLabel: renderProgressLabel,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 112,
        columnNumber: 7
      }
    }));
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    ref: rootRef,
    "data-hook": dataHook,
    className: (0, _CircularProgressBarSt.st)(_CircularProgressBarSt.classes.root, className),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 132,
      columnNumber: 5
    }
  }, error && errorMessage ? /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    className: _CircularProgressBarSt.classes.tooltip,
    content: errorMessage,
    dataHook: _constants.dataHooks.tooltip,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 138,
      columnNumber: 9
    }
  }, renderProgressBar()) : renderProgressBar());
};
CircularProgressBar.displayName = 'CircularProgressBar';
var _default = exports["default"] = CircularProgressBar;