@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.67 kB
JavaScript
import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{FormGroup as t,Box as i}from"@mui/material";import n from"../FormControlLabel/FormControlLabel.js";import r from"../Checkbox/StyledCheckbox.js";import a from"../TextField/TextField.js";const u=({sizing:u,options:c,other:s,internalChange:d,value:m,inputRef:h,onChange:p})=>{const f=s?.name||"other-option",b=`${f}-value-`,g=e=>`${b}${e}`,x=s?.enabled,C=m?.includes(f)&&x,v=m?.find(e=>e.includes(b));if(!m)return e("div",{});const k=(e,l)=>{let o=m.includes(e)?m.filter(l=>l!==e):l?[e]:[...new Set(m),e];if(l||(o=o.filter(e=>!c.find(l=>l?.exclusive&&e===l.value))),s?.enabled){!m.includes(f)||e!==f||(o=o.filter(e=>!e.includes(b)))}p(o),d&&d()};return l(o,{children:[l(t,{sx:{display:"flex",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:hover":{"& .MuiCheckbox-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},children:[c?c.map((l,o)=>{const t=l.value;return e(n,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:"default"!==u?.5:0}},onChange:()=>k(t,l.exclusive),checked:m.includes(t),control:e(r,{sizing:u}),label:l.label},t)}):null,x&&e(n,{inputRef:h,onChange:()=>k(f),label:s?.label||"Other",checked:m.includes(f),control:e(r,{sizing:u})},f)]}),C&&e(i,{sx:{mt:1},children:e(a,{fullWidth:!0,autoFocus:!0,defaultValue:v?v.replace(b,""):"",placeholder:s?.placeholder,onChange:e=>{const l=m.find(e=>e.includes(b)),o=(l?m.map(l=>l.includes(b)?g(e.target.value):l):[...m,g(e.target.value)]).filter(e=>e!==b);p(o),d&&d()},required:!0})})]})};export{u as default};