react-form-stepper/dist/react-form-stepper.umd.production.min.js

React stepper component for multiple step forms

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("clsx"),require("react-jss"),require("color")):"function"==typeof define&&define.amd?define(["exports","react","clsx","react-jss","color"],t):t((e=e||self)["react-form-stepper"]={},e.React,e.clsx,e.reactJss,e.Color)}(this,(function(e,t,o,n,i){"use strict";var r="default"in t?t.default:t;function a(){return(a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var o,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)t.indexOf(o=r[n])>=0||(i[o]=e[o]);return i}o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o,i=i&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i;var c={activeBgColor:"#ed1d24",activeTextColor:"#ffffff",completedBgColor:"#a10308",completedTextColor:"#ffffff",inactiveBgColor:"#e0e0e0",inactiveTextColor:"#ffffff",size:"2em",circleFontSize:"1rem",borderRadius:"50%"},s=function(e,t){var o=i(e);return o.isDark()?o.darken(t).hex():o.lighten(t).hex()},d=n.createUseStyles({StepMain:{display:"flex",flexDirection:"column",alignItems:"center"},StepButton:function(e){return{border:"none",margin:0,padding:0,cursor:"pointer",borderRadius:e.borderRadius,backgroundColor:e.inactiveBgColor,width:e.size,height:e.size,fontSize:"1em",display:"flex",alignItems:"center",justifyContent:"center","&.active":{backgroundColor:e.activeBgColor,"&:hover":{backgroundColor:s(e.activeBgColor,.15)},"&:active":{backgroundColor:s(e.activeBgColor,.2)}},"&.completed":{backgroundColor:e.completedBgColor,"&:hover":{backgroundColor:s(e.completedBgColor,.15)},"&:active":{backgroundColor:s(e.completedBgColor,.2)}}}},StepButtonContent:function(e){return{color:e.inactiveTextColor,fontSize:e.circleFontSize,fontVariantNumeric:"tabular-nums","&.active":{color:e.activeTextColor},"&.completed":{color:e.completedTextColor}}}}),p=r.createContext({activeStep:0,hideConnectors:!1,nonLinear:!1,connectorStateColors:!1}),f={disabledColor:"#bdbdbd",activeColor:"#ed1d24",completedColor:"#a10308",size:1,style:"solid"},u=n.createUseStyles({ConnectorContainer:function(e){return{top:"calc(("+e.stepSize+" - "+e.size+") / 2)",left:"calc(-50% + "+e.stepSize+" - 8px)",right:"calc(50% + "+e.stepSize+" - 8px)",position:"absolute"}},Connector:function(e){return{borderTopStyle:e.style,borderTopWidth:e.size,borderColor:e.disabledColor,display:"block","&.completed":{borderColor:e.completedColor},"&.active":{borderColor:e.activeColor}}}}),C=function(e,t){"number"==typeof e[t]&&(e[t]=e[t]+"px")},v=r.createContext({completed:!1,active:!1,disabled:!1,index:0}),m=function(){var e=r.useContext(p),t=e.connectorStateColors,n=e.connectorStyleConfig,i=r.useContext(v),l=i.completed,c=i.active,s=a({},f,n,{stepSize:(null==n?void 0:n.stepSize)||i.stepSize});C(s,"stepSize"),C(s,"size");var d=u(s);return r.createElement("div",{id:"RFS-ConnectorContainer",className:d.ConnectorContainer},r.createElement("span",{id:"RFS-Connector",className:o(d.Connector,{completed:l&&t},{active:c&&t})}))},S=["children","contentClasses"],g=function(e){var t=e.children,n=e.contentClasses,i=l(e,S),a=r.useContext(v),c=a.completed,s=a.disabled,d=a.index;return r.createElement("button",Object.assign({disabled:s},i),r.createElement("span",{className:o(n,{active:!s&&!c},{completed:c})},t||d+1))},b=n.createUseStyles({LabelContainer:function(e){return{width:"100%",fontSize:e.fontSize||"0.875rem",fontWeight:400,lineHeight:1.4}},Label:function(e){return{display:"block",marginTop:16,textAlign:"center",fontWeight:e.fontWeight||500}}}),h=function(e){var t=e.children,o=b({fontSize:e.fontSize,fontWeight:e.fontWeight});return r.createElement("div",{id:"RFS-LabelContainer",className:o.LabelContainer},r.createElement("span",{id:"RFS-Label",className:o.Label},t))},y=["children","label","styleConfig","completed","active","disabled","className","index"],x=function(e){var n=e.children,i=e.label,r=void 0===i?"":i,s=e.styleConfig,f=e.completed,u=e.active,C=e.disabled,S=e.className,b=e.index,x=void 0===b?0:b,z=l(e,y),E=t.useContext(p),N=E.activeStep,j=E.hideConnectors,B=E.nonLinear,O=void 0!==u&&u,F=void 0!==f&&f,k=void 0!==C&&C;N===x?O=void 0===u||u:!B&&N>x&&!u&&!C?F=void 0===f||f:!B&&N<x&&!u&&!f&&(k=void 0===C||C);var R=a({},s,{completed:F&&!k,active:O||!k}),L=d(a({},c,R.size&&!R.circleFontSize&&{circleFontSize:"calc("+R.size+" / 2)"},R));return t.createElement(v.Provider,{value:{completed:F,active:O,disabled:k,index:x,stepSize:s&&s.size||c.size}},0!==x&&("inactive"===j&&(O||F)||!0!==j&&"inactive"!==j)&&t.createElement(m,null),t.createElement("div",{id:"RFS-StepMain",className:L.StepMain},t.createElement(g,Object.assign({id:"RFS-StepButton",className:o(L.StepButton,{active:!k&&!F},{completed:F},S),contentClasses:L.StepButtonContent},z),n||x+1),r&&t.createElement(h,{fontSize:null==s?void 0:s.labelFontSize,fontWeight:null==s?void 0:s.fontWeight},r)))},z=n.createUseStyles({StepperContainer:{display:"flex",alignItems:"flex-start",flexDirection:"row",padding:24,fontFamily:"Arial, Helvetica, sans-serif"},StepContainer:{flex:1,position:"relative",paddingLeft:8,paddingRight:8}}),E=["steps","children","connectorStateColors","className","stepClassName","activeStep","styleConfig","connectorStyleConfig","hideConnectors","nonLinear"];e.Step=x,e.Stepper=function(e){var t=e.steps,n=e.children,i=e.connectorStateColors,c=void 0!==i&&i,s=e.className,d=void 0===s?"":s,f=e.stepClassName,u=void 0===f?"":f,C=e.activeStep,v=void 0===C?0:C,m=e.styleConfig,S=e.connectorStyleConfig,g=e.hideConnectors,b=void 0!==g&&g,h=e.nonLinear,y=void 0!==h&&h,N=l(e,E),j=z(),B=r.useMemo((function(){return{activeStep:v,hideConnectors:b,nonLinear:y,connectorStateColors:c&&!y,connectorStyleConfig:S}}),[v,b,y,c,S]),O=t instanceof Array&&t.length>0,F=(O?t:r.Children.toArray(n)).map((function(e,t){if(!O&&!r.isValidElement(e))return null;var o={className:u,styleConfig:m,index:t};return r.createElement("div",{key:t,id:"RFS-StepContainer",className:j.StepContainer},r.isValidElement(e)?r.cloneElement(e,a({},o,e.props)):r.createElement(x,Object.assign({},o,"object"==typeof e?e:{})))}));return r.createElement(p.Provider,{value:B},r.createElement("div",Object.assign({id:"RFS-StepperContainer",className:o(j.StepperContainer,d)},N),F))},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=react-form-stepper.umd.production.min.js.map