@wix/design-system
Version:
@wix/design-system
209 lines (207 loc) • 8.44 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _ThemeProviderConsumerBackwardCompatible = require("../ThemeProvider/ThemeProviderConsumerBackwardCompatible");
var _CircularProgressBarSt = require("./CircularProgressBar.st.css.js");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = require("./constants");
var _CircularProgressBarCore = require("./CircularProgressBarCore");
var _ProgressLabel = require("./CircularProgressBarCore/ProgressLabel");
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.js";
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); }
var sizeToSuccessIcon = {
[_constants.Size.tiny]: _wixUiIconsCommon.StatusCompleteFilled,
[_constants.Size.small]: _system.CircleLoaderCheckSmall,
[_constants.Size.medium]: _system.CircleLoaderCheck,
[_constants.Size.large]: _system.CircleLoaderCheck
};
var sizeToErrorIcon = {
[_constants.Size.tiny]: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlertFilled, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 16
}
}),
[_constants.Size.small]: /*#__PURE__*/_react.default.createElement(_system.FormFieldErrorSmall, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 17
}
}),
[_constants.Size.medium]: /*#__PURE__*/_react.default.createElement(_system.FormFieldError, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 18
}
}),
[_constants.Size.large]: /*#__PURE__*/_react.default.createElement(_system.FormFieldError, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 17
}
})
};
// 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 = (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 = _ref => {
var {
size = 'medium',
skin = 'standard',
labelPlacement = 'bottom',
label,
value,
dataHook,
error,
errorMessage,
className,
light
} = _ref,
restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var [dynamicSizesMap, setDynamicSizesMap] = (0, _react.useState)(_constants.sizesMap);
var rootRef = (0, _react.useRef)(null);
(0, _react.useLayoutEffect)(() => {
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 = size => /*#__PURE__*/_react.default.createElement(_ThemeProviderConsumerBackwardCompatible.ThemeProviderConsumerBackwardCompatible, {
defaultIcons: {
CircularProgressBar: sizeToSuccessIcon
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 5
}
}, _ref2 => {
var {
icons
} = _ref2;
var IconToRender = icons.CircularProgressBar[size];
return /*#__PURE__*/_react.default.createElement(IconToRender, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 16
}
});
});
var renderProgressLabel = () => /*#__PURE__*/_react.default.createElement(_ProgressLabel.ProgressLabel, {
size: size,
value: value,
"data-skin": skin,
label: label,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 5
}
});
var renderProgressBar = () => {
return /*#__PURE__*/_react.default.createElement(_CircularProgressBarCore.CircularProgressBarCore, (0, _extends2.default)({
className: (0, _CircularProgressBarSt.st)(_CircularProgressBarSt.classes.progressBar, {
light,
size,
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: void 0,
__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: void 0,
__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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 9
}
}, renderProgressBar()) : renderProgressBar());
};
CircularProgressBar.displayName = 'CircularProgressBar';
CircularProgressBar.propTypes = {
/** Should be true if had failure during the progress */
error: _propTypes.default.bool,
/** Label to display when an error happens */
errorLabel: _propTypes.default.string,
/** Message to display when an error happens */
errorMessage: _propTypes.default.string,
/** Use light theme instead of dark theme */
light: _propTypes.default.bool,
/** Use to display a percentage progress */
showProgressIndication: _propTypes.default.bool,
/** Use to display custom text in the progress bar */
label: _propTypes.default.string,
/** Placement of the label in the progress bar */
labelPlacement: _propTypes.default.oneOf(['bottom', 'center']),
/** Size of the bar */
size: _propTypes.default.string,
/** Skin of the bar */
skin: _propTypes.default.oneOf(['standard', 'premium', 'success']),
/** The number of the percentage progress */
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
dataHook: _propTypes.default.string
};
var _default = exports.default = CircularProgressBar;
//# sourceMappingURL=CircularProgressBar.js.map