react-step-progress-bar/index.js

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

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