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

React stepper component for multiple step forms

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),o=e(t),n=e(require("clsx")),i=require("react-jss"),r=e(require("color"));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}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=r(e);return o.isDark()?o.darken(t).hex():o.lighten(t).hex()},d=i.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=o.createContext({activeStep:0,hideConnectors:!1,nonLinear:!1,connectorStateColors:!1}),f={disabledColor:"#bdbdbd",activeColor:"#ed1d24",completedColor:"#a10308",size:1,style:"solid"},u=i.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=o.createContext({completed:!1,active:!1,disabled:!1,index:0}),m=function(){var e=o.useContext(p),t=e.connectorStateColors,i=e.connectorStyleConfig,r=o.useContext(v),l=r.completed,c=r.active,s=a({},f,i,{stepSize:(null==i?void 0:i.stepSize)||r.stepSize});C(s,"stepSize"),C(s,"size");var d=u(s);return o.createElement("div",{id:"RFS-ConnectorContainer",className:d.ConnectorContainer},o.createElement("span",{id:"RFS-Connector",className:n(d.Connector,{completed:l&&t},{active:c&&t})}))},S=["children","contentClasses"],g=function(e){var t=e.children,i=e.contentClasses,r=l(e,S),a=o.useContext(v),c=a.completed,s=a.disabled,d=a.index;return o.createElement("button",Object.assign({disabled:s},r),o.createElement("span",{className:n(i,{active:!s&&!c},{completed:c})},t||d+1))},b=i.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,n=b({fontSize:e.fontSize,fontWeight:e.fontWeight});return o.createElement("div",{id:"RFS-LabelContainer",className:n.LabelContainer},o.createElement("span",{id:"RFS-Label",className:n.Label},t))},x=["children","label","styleConfig","completed","active","disabled","className","index"],y=function(e){var o=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,y=void 0===b?0:b,z=l(e,x),E=t.useContext(p),N=E.activeStep,B=E.hideConnectors,F=E.nonLinear,j=void 0!==u&&u,k=void 0!==f&&f,L=void 0!==C&&C;N===y?j=void 0===u||u:!F&&N>y&&!u&&!C?k=void 0===f||f:!F&&N<y&&!u&&!f&&(L=void 0===C||C);var R=a({},s,{completed:k&&!L,active:j||!L}),O=d(a({},c,R.size&&!R.circleFontSize&&{circleFontSize:"calc("+R.size+" / 2)"},R));return t.createElement(v.Provider,{value:{completed:k,active:j,disabled:L,index:y,stepSize:s&&s.size||c.size}},0!==y&&("inactive"===B&&(j||k)||!0!==B&&"inactive"!==B)&&t.createElement(m,null),t.createElement("div",{id:"RFS-StepMain",className:O.StepMain},t.createElement(g,Object.assign({id:"RFS-StepButton",className:n(O.StepButton,{active:!L&&!k},{completed:k},S),contentClasses:O.StepButtonContent},z),o||y+1),r&&t.createElement(h,{fontSize:null==s?void 0:s.labelFontSize,fontWeight:null==s?void 0:s.fontWeight},r)))},z=i.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"];exports.Step=y,exports.Stepper=function(e){var t=e.steps,i=e.children,r=e.connectorStateColors,c=void 0!==r&&r,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,x=void 0!==h&&h,N=l(e,E),B=z(),F=o.useMemo((function(){return{activeStep:v,hideConnectors:b,nonLinear:x,connectorStateColors:c&&!x,connectorStyleConfig:S}}),[v,b,x,c,S]),j=t instanceof Array&&t.length>0,k=(j?t:o.Children.toArray(i)).map((function(e,t){if(!j&&!o.isValidElement(e))return null;var n={className:u,styleConfig:m,index:t};return o.createElement("div",{key:t,id:"RFS-StepContainer",className:B.StepContainer},o.isValidElement(e)?o.cloneElement(e,a({},n,e.props)):o.createElement(y,Object.assign({},n,"object"==typeof e?e:{})))}));return o.createElement(p.Provider,{value:F},o.createElement("div",Object.assign({id:"RFS-StepperContainer",className:n(B.StepperContainer,d)},N),k))};
//# sourceMappingURL=react-form-stepper.cjs.production.min.js.map