beta-parity-react/ui/Spinner/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.Spinner=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","variant","color","size"];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",lg:"large",xl:"extra-large"};var Spinner=exports.Spinner=_react["default"].forwardRef(function(_ref,ref){var className=_ref.className,_ref$variant=_ref.variant,variant=_ref$variant===void 0?"circular":_ref$variant,_ref$color=_ref.color,color=_ref$color===void 0?"neutral":_ref$color,_ref$size=_ref.size,size=_ref$size===void 0?"md":_ref$size,props=_objectWithoutProperties(_ref,_excluded);return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:(0,_classnames["default"])("spinner",variant,className,color,size&&sizeMap[size]),ref:ref},props),{},{children:generateSpinner(variant,color)}))});Spinner.displayName="Spinner";var colorTokens={neutral:{interactive:"var(--par-color-stroke-spinner-interactive-neutral)",inactive:"var(--par-color-stroke-spinner-inactive)"},accent:{interactive:"var(--par-color-stroke-spinner-interactive-accent)",inactive:"var(--par-color-stroke-spinner-inactive)"}};var generateSpinner=function generateSpinner(variant,color){var theme=colorTokens[color];if(variant==="circular"){return(0,_jsxRuntime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 36 36",fill:"none",children:[(0,_jsxRuntime.jsx)("path",{d:"M34 18C34 20.1012 33.5861 22.1817 32.7821 24.1229C31.978 26.0641 30.7994 27.828 29.3137 29.3137C27.828 30.7994 26.0641 31.978 24.1229 32.7821C22.1817 33.5861 20.1011 34 18 34C15.8988 34 13.8183 33.5861 11.8771 32.7821C9.93585 31.978 8.17203 30.7994 6.68629 29.3137C5.20055 27.828 4.022 26.0641 3.21793 24.1229C2.41385 22.1817 2 20.1011 2 18C2 15.8988 2.41385 13.8183 3.21793 11.8771C4.022 9.93586 5.20055 8.17203 6.68629 6.68629C8.17203 5.20055 9.93586 4.022 11.8771 3.21793C13.8183 2.41385 15.8989 2 18 2C20.1012 2 22.1817 2.41385 24.1229 3.21793C26.0641 4.02201 27.828 5.20056 29.3137 6.68629C30.7994 8.17203 31.978 9.93586 32.7821 11.8771C33.5861 13.8183 34 15.8989 34 18L34 18Z",stroke:theme.inactive,strokeWidth:"4"}),(0,_jsxRuntime.jsx)("path",{d:"M34 18C34 20.525 33.4024 23.0141 32.2561 25.2638C31.1098 27.5136 29.4473 29.4601 27.4046 30.9443",stroke:theme.interactive,strokeWidth:"4",strokeLinecap:"round"})]})}if(variant==="dotted"){return(0,_jsxRuntime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"none",children:[(0,_jsxRuntime.jsx)("circle",{cx:16,cy:"2.66667",r:"2.66667",transform:"rotate(180 16 2.66667)",fill:theme.inactive,style:{animationDelay:"0s"}}),(0,_jsxRuntime.jsx)("circle",{cx:"6.5719",cy:"6.57194",r:"2.66667",transform:"rotate(-45 6.5719 6.57194)",fill:theme.inactive,style:{animationDelay:"0.875s"}}),(0,_jsxRuntime.jsx)("circle",{cx:"2.66671",cy:16,r:"2.66667",transform:"rotate(180 2.66671 16)",fill:theme.inactive,style:{animationDelay:"0.75s"}}),(0,_jsxRuntime.jsx)("circle",{cx:"6.5719",cy:"25.4281",r:"2.66667",transform:"rotate(-135 6.5719 25.4281)",fill:theme.inactive,style:{animationDelay:"0.625s"}}),(0,_jsxRuntime.jsx)("circle",{cx:16,cy:"29.3333",r:"2.66667",transform:"rotate(180 16 29.3333)",fill:theme.inactive,style:{animationDelay:"0.5s"}}),(0,_jsxRuntime.jsx)("circle",{cx:"25.4281",cy:"25.4281",r:"2.66667",transform:"rotate(-45 25.4281 25.4281)",fill:theme.inactive,style:{animationDelay:"0.375s"}}),(0,_jsxRuntime.jsx)("circle",{cx:"29.3333",cy:16,r:"2.66667",transform:"rotate(180 29.3333 16)",fill:theme.inactive,style:{animationDelay:"0.25s"}}),(0,_jsxRuntime.jsx)("circle",{cx:"25.4281",cy:"6.5719",r:"2.66667",transform:"rotate(-135 25.4281 6.5719)",fill:theme.inactive,style:{animationDelay:"0.125s"}})]})}if(variant==="sunburst"){return(0,_jsxRuntime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"none",children:[(0,_jsxRuntime.jsx)("rect",{x:"14.6667",width:"2.6",height:8,rx:"1.3",fill:theme.inactive,style:{animationDelay:"0s"}}),(0,_jsxRuntime.jsx)("rect",{x:"3.74341",y:"5.62907",width:"2.6",height:8,rx:"1.3",transform:"rotate(-45 3.74341 5.62907)",fill:theme.inactive,style:{animationDelay:"0.875s"}}),(0,_jsxRuntime.jsx)("rect",{y:"17.3333",width:"2.6",height:8,rx:"1.3",transform:"rotate(-90 0 17.3333)",fill:theme.inactive,style:{animationDelay:"0.75s"}}),(0,_jsxRuntime.jsx)("rect",{x:"5.62915",y:"28.2565",width:"2.6",height:8,rx:"1.3",transform:"rotate(-135 5.62915 28.2565)",fill:theme.inactive,style:{animationDelay:"0.625s"}}),(0,_jsxRuntime.jsx)("rect",{x:"14.6667",y:24,width:"2.6",height:8,rx:"1.3",fill:theme.inactive,style:{animationDelay:"0.5s"}}),(0,_jsxRuntime.jsx)("rect",{x:"20.7141",y:"22.5997",width:"2.6",height:8,rx:"1.3",transform:"rotate(-45 20.7141 22.5997)",fill:theme.inactive,style:{animationDelay:"0.375s"}}),(0,_jsxRuntime.jsx)("rect",{x:24,y:"17.3333",width:"2.6",height:8,rx:"1.3",transform:"rotate(-90 24 17.3333)",fill:theme.inactive,style:{animationDelay:"0.25s"}}),(0,_jsxRuntime.jsx)("rect",{x:"22.5996",y:"11.2859",width:"2.6",height:8,rx:"1.3",transform:"rotate(-135 22.5996 11.2859)",fill:theme.inactive,style:{animationDelay:"0.125s"}})]})}};