react-step-progress-bar/index.mjs

A library to create stunning progress bars and steps in React.

import{Children as t,createElement as e,cloneElement as r,Component as n}from"react";import o from"invariant";import{Transition as a}from"react-transition-group";var i={scale:{entering:{transform:"translateX(-50%) scale(1.5)"},entered:{transform:"translateX(-50%) scale(1)"},exiting:{transform:"translateX(-50%) scale(1.5)"},exited:{transform:"translateX(-50%) scale(1)"}},rotate:{entering:{transform:"translateX(-50%) rotate(360deg)"},entered:{transform:"translateX(-50%) rotate(0deg)"},exiting:{transform:"translateX(-50%) rotate(0deg)"},exited:{transform:"translateX(-50%) rotate(360deg)"}},skew:{entering:{transform:"translateX(-50%) skewX(20deg)"},entered:{transform:"translateX(-50%) skewX(0deg)"},exiting:{transform:"translateX(-50%) skewX(20deg)"},exited:{transform:"translateX(-50%) skewX(0deg)"}}};function s(t){return(t>100||t<0||"number"!=typeof t)&&console.warn("[react-step-progress-bar]: The value passed to percent or position needs to be a number between 0 and 100 (passed value: "+t+")."),Math.min(100,Math.max(t,0))}var l=function(t){function r(){t.apply(this,arguments)}return t&&(r.__proto__=t),(r.prototype=Object.create(t&&t.prototype)).constructor=r,r.prototype.render=function(){var t=this.props,r=t.accomplished,n=t.index,l=t.children,p=t.transition;void 0===p&&(p=null);var d=t.transitionDuration;void 0===d&&(d=300);var c=s(t.position),u={left:c+"%",transitionDuration:d+"ms"};return e(a,{in:r,timeout:d},function(t){return p&&(o(null!=i[p],p+" is not listed in the built-in transitions."),u=Object.assign({},u,i[p][t])),e("div",{className:"RSPBstep",style:u},l({accomplished:r,position:c,transitionState:t,index:n}))})},r}(n),p=function(n){function a(){n.apply(this,arguments)}return n&&(a.__proto__=n),(a.prototype=Object.create(n&&n.prototype)).constructor=a,a.prototype.render=function(){var n=this.props,a=n.percent,i=n.children,l=n.stepPositions;void 0===l&&(l=[]);var p=n.unfilledBackground;void 0===p&&(p=null);var d=n.filledBackground;void 0===d&&(d=null);var c=n.width;void 0===c&&(c=null);var u=n.height;void 0===u&&(u=null);var m=n.hasStepZero;void 0===m&&(m=!0);var f=n.text;void 0===f&&(f=null),o(!(l.length>0&&l.length!==t.count(i)),"When specifying a stepPositions props, the number of children must match the length of the positions array.");var g=s(a);return e("div",{className:"RSPBprogressBar",style:{background:p,width:c,height:u}},t.map(i,function(e,n){var o=l.length>0?l[n]:function(t,e,r){return r?100/(t-1)*e:100/t*(e+1)}(t.count(i),n,m);return r(e,{accomplished:o<=g,position:o,index:n})}),f?e("div",{className:"RSPBprogressBarText"},f):null,e("div",{className:"RSPBprogression",style:{background:d,width:g+"%"}}))},a}(n);export{p as ProgressBar,l as Step};
//# sourceMappingURL=index.mjs.map