beta-parity-react/ui/Progress/index.js

Beta Parity React Components

"use strict";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)}Object.defineProperty(exports,"__esModule",{value:true});exports.Progress=void 0;var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));require("./variables.css");require("./index.css");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["className","title","helperText","kind","value","color","state","size","numeral"],_excluded2=["kind"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}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(obj,key,value){key=_toPropertyKey(key);if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}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)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}}return target}var sizeMap={sm:"small",md:"medium"};var sizeHeightMap={sm:64,md:120};var sizeStrokeWidthMap={sm:6,md:12};var Progress=exports.Progress=_react["default"].forwardRef(function(_ref,ref){var className=_ref.className,title=_ref.title,helperText=_ref.helperText,_ref$kind=_ref.kind,kind=_ref$kind===void 0?"bar":_ref$kind,_ref$value=_ref.value,value=_ref$value===void 0?0:_ref$value,_ref$color=_ref.color,color=_ref$color===void 0?"neutral":_ref$color,_ref$state=_ref.state,state=_ref$state===void 0?"active":_ref$state,_ref$size=_ref.size,size=_ref$size===void 0?"sm":_ref$size,_ref$numeral=_ref.numeral,numeral=_ref$numeral===void 0?false:_ref$numeral,props=_objectWithoutProperties(_ref,_excluded);var clampedValue=Math.min(100,Math.max(1,value!==null&&value!==void 0?value:1));var isCircle=kind==="circle";var isActive=state==="active";var stateIcon=state==="success"?(0,_jsxRuntime.jsx)(ProgressIcon,{kind:"affirmative"}):(0,_jsxRuntime.jsx)(ProgressIcon,{kind:"adverse"});var isHasIcon=!isCircle&&!isActive&&numeral;var renderProgress=function renderProgress(){if(isCircle){var r=sizeHeightMap[size]/2;var strokeWidth=sizeStrokeWidthMap[size];var actualR=r-strokeWidth/2;var circumference=2*Math.PI*actualR;var dashOffset=circumference-circumference*clampedValue/100;return(0,_jsxRuntime.jsxs)("svg",{width:sizeHeightMap[size],height:sizeHeightMap[size],viewBox:"0 0 ".concat(sizeHeightMap[size]," ").concat(sizeHeightMap[size]),children:[(0,_jsxRuntime.jsx)("circle",{className:"progress-track",cx:r,cy:r,r:actualR,strokeWidth:strokeWidth,fill:"none"}),(0,_jsxRuntime.jsx)("circle",{className:"progress-thumb",cx:r,cy:r,r:actualR,strokeWidth:strokeWidth,fill:"none",strokeDasharray:circumference,strokeDashoffset:dashOffset,strokeLinecap:"round",transform:"rotate(-90 ".concat(r," ").concat(r,")")}),(0,_jsxRuntime.jsx)("text",{className:"progress-title",textAnchor:"middle",dominantBaseline:"middle",x:r,y:r,children:"".concat(clampedValue,"%")})]})}return(0,_jsxRuntime.jsx)("div",{className:"progress-track",children:(0,_jsxRuntime.jsx)("div",{className:"progress-thumb",style:{width:"".concat(clampedValue,"%")}})})};var accessibilityProps={role:"progressbar","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":clampedValue};return(0,_jsxRuntime.jsxs)("div",_objectSpread(_objectSpread(_objectSpread({ref:ref,className:(0,_classnames["default"])("progress",kind,color,state,className,_defineProperty({},sizeMap[size],isCircle))},accessibilityProps),props),{},{children:[!isCircle&&(0,_jsxRuntime.jsxs)("div",{className:"progress-title-wrapper",children:[(0,_jsxRuntime.jsx)("span",{className:"progress-title",children:title}),(0,_jsxRuntime.jsxs)("span",{className:"progress-numeral",children:[isHasIcon&&stateIcon," ",numeral?"".concat(value,"%"):""]})]}),renderProgress(),(0,_jsxRuntime.jsx)("span",{className:"progress-helper-text",children:helperText})]}))});Progress.displayName="Progress";var ProgressIcon=_react["default"].forwardRef(function(_ref2,ref){var _ref2$kind=_ref2.kind,kind=_ref2$kind===void 0?"affirmative":_ref2$kind,props=_objectWithoutProperties(_ref2,_excluded2);switch(kind){case"affirmative":return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:"progress-icon",ref:ref},props),{},{children:(0,_jsxRuntime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,viewBox:"0 0 20 20",fill:"none",children:[(0,_jsxRuntime.jsx)("path",{d:"M10 18.3333C14.5833 18.3333 18.3333 14.5833 18.3333 9.99996C18.3333 5.41663 14.5833 1.66663 10 1.66663C5.41667 1.66663 1.66667 5.41663 1.66667 9.99996C1.66667 14.5833 5.41667 18.3333 10 18.3333Z",fill:"var(--par-color-text-helper-affirmative)",stroke:"var(--par-color-text-helper-affirmative)",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"}),(0,_jsxRuntime.jsx)("path",{d:"M6.45833 10.0001L8.81667 12.3584L13.5417 7.64172",stroke:"var(--par-color-text-primary-inverse)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}));case"adverse":return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:"progress-icon",ref:ref},props),{},{children:(0,_jsxRuntime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,viewBox:"0 0 20 20",fill:"none",children:[(0,_jsxRuntime.jsx)("path",{d:"M9.93333 18.3334C14.5167 18.3334 18.2667 14.5834 18.2667 10.0001C18.2667 5.41675 14.5167 1.66675 9.93333 1.66675C5.35 1.66675 1.6 5.41675 1.6 10.0001C1.6 14.5834 5.35 18.3334 9.93333 18.3334Z",fill:"var(--par-color-text-helper-adverse)",stroke:"var(--par-color-text-helper-adverse)",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"}),(0,_jsxRuntime.jsx)("path",{d:"M6.6 10H13.2667",stroke:"var(--par-color-text-primary-inverse)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}));default:return null}});ProgressIcon.displayName="ProgressIcon";