@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
2 lines (1 loc) • 4.03 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),v=require("react"),d=require("../../Stepper-CXHfLPtA.cjs"),o=require("../../Box-DR3n_po_.cjs"),u=require("../../Typography-CSTmKyr8.cjs"),a=require("../../Button-DyJV5llI.cjs"),p=["Paramètres","Créer un groupe","Validation"],k=x=>{const[t,r]=v.useState(0),[l,h]=v.useState(new Set),c=n=>n===1,m=n=>l.has(n),g=()=>{let n=l;m(t)&&(n=new Set(n.values()),n.delete(t)),r(i=>i+1),h(n)},j=()=>{r(n=>n-1)},S=()=>{if(!c(t))throw new Error("You can't skip a step that isn't optional.");r(n=>n+1),h(n=>{const i=new Set(n.values());return i.add(t),i})},y=()=>{r(0)};return e.jsxs(o.Box,{sx:{width:"100%"},children:[e.jsx(d.Stepper,{activeStep:t,...x,children:p.map((n,i)=>{const f={},s={};return c(i)&&(s.optional=e.jsx(u.Typography,{variant:"caption",children:"Optionnel"})),m(i)&&(f.completed=!1),e.jsx(d.Step,{...f,children:e.jsx(d.StepLabel,{...s,children:n})},n)})}),t===p.length?e.jsxs(e.Fragment,{children:[e.jsx(u.Typography,{sx:{mt:2,mb:1},children:"Toutes les étapes sont complétées - vous avez terminé"}),e.jsxs(o.Box,{sx:{display:"flex",flexDirection:"row",pt:2},children:[e.jsx(o.Box,{sx:{flex:"1 1 auto"}}),e.jsx(a.Button,{onClick:y,children:"Réinitialiser"})]})]}):e.jsxs(e.Fragment,{children:[e.jsxs(u.Typography,{sx:{mt:2,mb:1},children:["Étape ",t+1]}),e.jsxs(o.Box,{sx:{display:"flex",flexDirection:"row",pt:2},children:[e.jsx(a.Button,{color:"inherit",disabled:t===0,onClick:j,sx:{mr:1},children:"Précédent"}),e.jsx(o.Box,{sx:{flex:"1 1 auto"}}),c(t)&&e.jsx(a.Button,{color:"inherit",onClick:S,sx:{mr:1},children:"Passer"}),e.jsx(a.Button,{onClick:g,children:t===p.length-1?"Terminer":"Suivant"})]})]})]})},L=x=>{const[t,r]=v.useState(0),[l,h]=v.useState({}),c=()=>p.length,m=()=>Object.keys(l).length,g=()=>t===c()-1,j=()=>m()===c(),S=()=>{const s=g()&&!j()?p.findIndex((B,b)=>!(b in l)):t+1;r(s)},y=()=>{r(s=>s-1)},n=s=>()=>{r(s)},i=()=>{h({...l,[t]:!0}),S()},f=()=>{r(0),h({})};return e.jsxs(o.Box,{sx:{width:"100%"},children:[e.jsx(d.Stepper,{nonLinear:!0,activeStep:t,children:p.map((s,B)=>e.jsx(d.Step,{completed:l[B],children:e.jsx(d.StepButton,{color:"inherit",onClick:n(B),children:s})},s))}),e.jsx("div",{children:j()?e.jsxs(e.Fragment,{children:[e.jsx(u.Typography,{sx:{mt:2,mb:1},children:"Toutes les étapes sont complétées - vous avez terminé"}),e.jsxs(o.Box,{sx:{display:"flex",flexDirection:"row",pt:2},children:[e.jsx(o.Box,{sx:{flex:"1 1 auto"}}),e.jsx(a.Button,{onClick:f,children:"Réinitialiser"})]})]}):e.jsxs(e.Fragment,{children:[e.jsxs(u.Typography,{sx:{mt:2,mb:1,py:1},children:["Étape ",t+1]}),e.jsxs(o.Box,{sx:{display:"flex",flexDirection:"row",pt:2},children:[e.jsx(a.Button,{color:"inherit",disabled:t===0,onClick:y,sx:{mr:1},children:"Précédent"}),e.jsx(o.Box,{sx:{flex:"1 1 auto"}}),e.jsx(a.Button,{onClick:S,sx:{mr:1},children:"Suivant"}),t!==p.length&&(l[t]?e.jsxs(u.Typography,{variant:"caption",sx:{display:"inline-block"},children:["Étape ",t+1," déjà complétée"]}):e.jsx(a.Button,{onClick:i,children:m()===c()-1?"Terminer":"Compléter l'étape"}))]})]})})]})},C={title:"Components/Stepper",component:d.Stepper,parameters:{docs:{description:{component:"Les steppers transmettent les progrès par le biais d'étapes numérotées. Ils permettent d'obtenir un flux de travail semblable à celui d'un assistant."}}},argTypes:{alternativeLabel:{control:"boolean",description:"Positionne le label de l'étape sous l'icône"},nonLinear:{control:"boolean",description:"Si cette option est activée, le stepper n'aidera pas à contrôler les étapes d'un flux linéaire"},orientation:{control:"radio",options:["horizontal","vertical"],description:"Orientation du composant"}}},w={render:x=>e.jsx(k,{...x}),args:{alternativeLabel:!1,nonLinear:!1,orientation:"horizontal"}},T={render:x=>e.jsx(L,{...x}),args:{alternativeLabel:!1,nonLinear:!0,orientation:"horizontal"}};exports.Linear=w;exports.NonLinear=T;exports.default=C;