react-stepper-component-with-svg/lib/react_stepper_component.js

simple react stepper component with svg

module.exports=function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t){e.exports=require("react")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=l(r(0)),n=l(r(2));function l(e){return e&&e.__esModule?e:{default:e}}t.default=function(e){var t,r,l,c,u,i,a=e.stepperData,f=e.onClickCallback,s=196*(a.steps.length-1)+62;return o.default.createElement("svg",{viewBox:"0 0 "+s+" 65"},(t=22,r=39,l=201,c=17,u=2,i=Object.fromEntries(Object.entries(a).filter((function(e){return"steps"!==e[0]}))),a.steps.map((function(e,s){var d=s!==a.steps.length-1,p=0===s?0:196,x={x:t+=p,y:22,r1:17,r2:14},y={x1:r+=p,y1:22,x2:l+=p,y2:22},m={x:c+=p,y:28},b={x:u+=p,y:60};return o.default.createElement(n.default,{key:Math.random(1,999999),configs:i,isLastElement:d,circleProps:x,counterProps:m,labelProps:b,lineProps:y,step:e,index:s,onClickCallback:f})}))),"Sorry, your browser does not support inline SVG.")}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,n=r(0),l=(o=n)&&o.__esModule?o:{default:o};t.default=function(e){var t=e.configs,r=e.step,o=e.index,n=e.circleProps,c=e.lineProps,u=e.labelProps,i=e.counterProps,a=e.isLastElement,f=e.onClickCallback,s=t.outerCircleBorderColor?t.outerCircleBorderColor:"#ccc",d=t.innerCircleBorderColor?t.innerCircleBorderColor:"#ccc",p=t.counterTextColor?t.counterTextColor:"#000",x=t.labelTextColor?t.labelTextColor:"#000",y=t.completedIndicatorColor?t.completedIndicatorColor:"#ccc",m=t.completedTextColor?t.completedTextColor:"#ccc",b=t.connectorColor?t.connectorColor:"#ccc",C=t.completedLabelColor?t.completedLabelColor:"#fff",v=t.activeIndicator?t.activeIndicator:"#000";return l.default.createElement("g",{style:{cursor:"pointer"},onClick:function(){return f(o)}},l.default.createElement("circle",{cx:n.x,cy:n.y,r:n.r1,stroke:o<t.currentStep?y:o===t.currentStep?v:s,strokeWidth:"1",fill:"none"}),l.default.createElement("circle",{cx:n.x,cy:n.y,r:n.r2,stroke:o<t.currentStep?y:o===t.currentStep?v:d,strokeWidth:"1",fill:o<t.currentStep?y:"none"}),a&&l.default.createElement("line",{x1:c.x1,y1:c.y1,x2:c.x2,y2:c.y2,stroke:o<t.currentStep?y:b,strokeWidth:"1"}),o<t.currentStep&&l.default.createElement("text",{x:i.x-2,y:i.y,fill:m},"✓"),o>t.currentStep&&l.default.createElement("text",{x:i.x,y:i.y,fill:p},o+1),o===t.currentStep&&l.default.createElement("text",{x:i.x,y:i.y,fill:v},o+1),l.default.createElement("text",{x:u.x,y:u.y,fill:o<t.currentStep?C:o===t.currentStep?v:x},r.title))}}]);