UNPKG

@wix/design-system

Version:

@wix/design-system

174 lines (173 loc) 8 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports.isFullProgress = exports.convertToPercentageString = exports.CircularProgressBarCore = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var React = _interopRequireWildcard(require("react")); var _CircularProgressBar = require("../CircularProgressBar.classes"); var _Arc = require("./Arc"); var _constants = require("./constants"); var _propsUtils = require("../../utils/propsUtils"); var _constants2 = require("../constants"); var _excluded = ["value", "size", "labelPlacement"]; var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/CircularProgressBar/CircularProgressBarCore/CircularProgressBarCore.tsx"; 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); } 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) { (0, _defineProperty2.default)(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; } var FULL_PROGRESS = 100; var NO_PROGRESS = 0; var VIEWBOX_SIZE = 54; var resolveIndicationElement = props => { var wrapped = (dataHook, children) => /*#__PURE__*/React.createElement("div", { key: dataHook, "data-hook": dataHook, className: _CircularProgressBar.classes.statusIndicator(), __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 46, columnNumber: 5 } }, children); if (props.error && props.errorIcon) { return wrapped(_constants.dataHooks.errorIcon, props.errorIcon); } if (props.value === FULL_PROGRESS && props.successIcon) { return wrapped(_constants.dataHooks.successIcon, props.successIcon); } if (props.labelPlacement === 'center' && (props.shouldShowProgressIndication || props.label) && props.renderProgressLabel) { return wrapped(props.label ? _constants.dataHooks.label : _constants.dataHooks.progressIndicator, props.renderProgressLabel()); } return null; }; var normalizeValue = value => { return typeof value === 'number' ? value : parseInt(value, 10) ? parseInt(value, 10) : NO_PROGRESS; }; var normalizeSize = size => { var intSize = typeof size === 'number' ? size : parseInt(size, 10); return intSize && intSize > 0 ? intSize : VIEWBOX_SIZE; }; var convertToPercentageString = value => { return "".concat(Math.floor(value), "%"); }; exports.convertToPercentageString = convertToPercentageString; var isFullProgress = exports.isFullProgress = function isFullProgress() { var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : NO_PROGRESS; return normalizeValue(value) >= FULL_PROGRESS; }; var renderArcs = props => { var value = props.value, size = props.size; var normalizedSize = normalizeSize(size || VIEWBOX_SIZE); var normalizedValue = normalizeValue(value || NO_PROGRESS); var strokeWidth = size === _constants2.sizesMap.tiny ? 3 : 4; return /*#__PURE__*/React.createElement("div", { className: _CircularProgressBar.classes.arcsContainer(), style: { width: "".concat(normalizedSize, "px"), height: "".concat(normalizedSize, "px") }, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 106, columnNumber: 5 } }, resolveIndicationElement(props), /*#__PURE__*/React.createElement(_Arc.Arc, { "data-hook": _constants.dataHooks.progressArcBackground, value: FULL_PROGRESS, className: _CircularProgressBar.classes.backArc(), strokeWidth: strokeWidth, size: normalizedSize, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 111, columnNumber: 7 } }), /*#__PURE__*/React.createElement(_Arc.Arc, { "data-hook": _constants.dataHooks.progressArcForeground, value: normalizedValue, className: _CircularProgressBar.classes.foreArc(), strokeWidth: strokeWidth, size: normalizedSize, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 118, columnNumber: 7 } })); }; var normalizeProps = props => { var value = normalizeValue(props.value || NO_PROGRESS); if (value >= FULL_PROGRESS) { return _objectSpread(_objectSpread({}, props), {}, { value: FULL_PROGRESS }); } if (value < NO_PROGRESS) { return _objectSpread(_objectSpread({}, props), {}, { value: NO_PROGRESS }); } return _objectSpread(_objectSpread({}, props), {}, { value }); }; var CircularProgressBarCore = _ref => { var _ref$value = _ref.value, value = _ref$value === void 0 ? NO_PROGRESS : _ref$value, _ref$size = _ref.size, size = _ref$size === void 0 ? VIEWBOX_SIZE : _ref$size, _ref$labelPlacement = _ref.labelPlacement, labelPlacement = _ref$labelPlacement === void 0 ? 'bottom' : _ref$labelPlacement, propsWithNoDefaults = (0, _objectWithoutProperties2.default)(_ref, _excluded); var props = _objectSpread({ value, size, labelPlacement }, propsWithNoDefaults); var label = props.label, error = props.error, showProgressIndication = props.showProgressIndication; var _props = normalizeProps(props); var displayValue = error && _props.errorLabel ? _props.errorLabel : convertToPercentageString(_props.value); var shouldShowProgressIndication = Boolean(showProgressIndication && !label); return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({ className: _CircularProgressBar.classes.progressBar({}, _props.className), "data-error": error }, (0, _propsUtils.filterDataProps)(props), { __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 168, columnNumber: 5 } }), renderArcs(_objectSpread(_objectSpread({}, _props), {}, { shouldShowProgressIndication })), label && labelPlacement === 'bottom' && /*#__PURE__*/React.createElement("div", { "data-hook": _constants.dataHooks.label, className: _CircularProgressBar.classes.label(), __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 175, columnNumber: 9 } }, label), shouldShowProgressIndication && labelPlacement === 'bottom' && /*#__PURE__*/React.createElement("div", { "data-hook": _constants.dataHooks.progressIndicator, className: _CircularProgressBar.classes.progressIndicator(), __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 180, columnNumber: 9 } }, displayValue)); }; exports.CircularProgressBarCore = CircularProgressBarCore; CircularProgressBarCore.displayName = 'CircularProgressBarCore'; //# sourceMappingURL=CircularProgressBarCore.js.map