react-stepper-component-simple/dist/cjs/index.js

React stepper component with mobile and desktop config.

"use strict";var e=require("react/jsx-runtime"),t=require("react");!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".step-title-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 12px;\r\n}\r\n\r\n.step-item-title {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 12px;\r\n    cursor: pointer;\r\n}\r\n\r\n.step-item-title .number {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: 100%;\r\n}\r\n\r\n.step-item-content {\r\n    display: none;\r\n}\r\n\r\n.step-item-content.active {\r\n    display: block;\r\n}\r\n\r\n.stepper-container .actions {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-top: 1rem;\r\n}\r\n\r\n.stepper-container .actions button {\r\n    cursor: pointer;\r\n}\r\n\r\n.prev {\r\n    filter: grayscale(1);\r\n}");exports.StepperComponent=n=>{const[r,i]=t.useState(0),[s,o]=t.useState(!1),c=t.useMemo((()=>`\n            .step-item-title:not(:first-child)::before {\n                content: "";\n                min-width: 100px;\n                height: 2px;\n                background-color: #e5e7eb;\n            }\n\n            .step-item-title.active:not(:first-child)::before {\n                background-color: ${[n.stepNumberBackgroundColour]};\n            }\n\n            .step-item-title .number {\n                width: ${n.stepNumberWidth};\n                height: ${n.stepNumberHeigth};\n            }\n\n            .step-item-title:not(.active) .number {\n                background-color: unset;\n                border: solid 1px ${n.stepNumberBackgroundColour};\n                color: ${n.stepNumberBackgroundColour};\n            }\n\n            .step-item-title.active .number {\n                background-color: ${n.stepNumberBackgroundColour};\n                color: ${n.stepNumberTextColour};\n            }\n\n            @media screen and (min-width: ${n.mobileBreakpoint}px) {\n                .step-title-wrapper {\n                    flex-direction: ${n.stepTitleDirectionDesktop};\n                }\n                ${"column"===n.stepTitleDirectionDesktop&&"\n                    .step-item-title:not(:first-child)::before {\n                        content: unset;\n                    }\n                "}   \n            }\n\n            @media screen and (max-width: ${n.mobileBreakpoint}px) {\n                .step-title-wrapper {\n                    flex-direction: ${n.stepTitleDirectionMobile};\n                }\n                ${"column"===n.stepTitleDirectionMobile&&"\n                    .step-item-title:not(:first-child)::before {\n                        content: unset;\n                    }\n                "}    \n            }\n                \n            `),[]);t.useEffect((()=>{o(!0)}),[c]);const l=n.children.map(((t,n)=>e.jsxs("div",{className:r==n?"step-item-title active":"step-item-title",onClick:()=>i(n),children:[e.jsx("span",{className:"number",children:n+1}),e.jsx("span",{className:"title",children:t.props.header})]},t.props.header+"-"+n))),p=n.children.map(((t,n)=>e.jsx("div",{className:r==n?"step-item-content active":"step-item-content",children:t.props.children},t.props.header+""+n)));return e.jsxs(e.Fragment,{children:[s&&e.jsx("style",{children:c}),e.jsxs("div",{className:"stepper-container",children:[e.jsx("div",{className:"step-title-wrapper",children:l}),e.jsxs("div",{className:"step-content-wrapper",style:n.contentWrapperStyles,children:[p,e.jsxs("div",{className:"actions",children:[0!==r?e.jsx("button",{className:"prev",onClick:()=>i(r-1),style:n.buttonStyles,children:"Prev"}):e.jsx("div",{}),r!==n.children.length-1&&e.jsx("button",{className:"next",onClick:()=>i(r+1),style:n.buttonStyles,children:"Next"})]})]})]})]})},exports.StepperItemComponent=t=>e.jsx(e.Fragment,{children:t.children});
//# sourceMappingURL=index.js.map