@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.67 kB
JavaScript
;var e=require("react/jsx-runtime"),l=require("@mui/material"),r=require("../FormControlLabel/FormControlLabel.js"),t=require("../Checkbox/StyledCheckbox.js"),i=require("../TextField/TextField.js");module.exports=({sizing:n,options:o,other:u,internalChange:a,value:s,inputRef:c,onChange:d})=>{const h=u?.name||"other-option",x=`${h}-value-`,m=e=>`${x}${e}`,p=u?.enabled,b=s?.includes(h)&&p,g=s?.find(e=>e.includes(x));if(!s)return e.jsx("div",{});const f=(e,l)=>{let r=s.includes(e)?s.filter(l=>l!==e):l?[e]:[...new Set(s),e];if(l||(r=r.filter(e=>!o.find(l=>l?.exclusive&&e===l.value))),u?.enabled){!s.includes(h)||e!==h||(r=r.filter(e=>!e.includes(x)))}d(r),a&&a()};return e.jsxs(e.Fragment,{children:[e.jsxs(l.FormGroup,{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:[o?o.map((l,i)=>{const o=l.value;return e.jsx(r,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:"default"!==n?.5:0}},onChange:()=>f(o,l.exclusive),checked:s.includes(o),control:e.jsx(t,{sizing:n}),label:l.label},o)}):null,p&&e.jsx(r,{inputRef:c,onChange:()=>f(h),label:u?.label||"Other",checked:s.includes(h),control:e.jsx(t,{sizing:n})},h)]}),b&&e.jsx(l.Box,{sx:{mt:1},children:e.jsx(i,{fullWidth:!0,autoFocus:!0,defaultValue:g?g.replace(x,""):"",placeholder:u?.placeholder,onChange:e=>{const l=s.find(e=>e.includes(x)),r=(l?s.map(l=>l.includes(x)?m(e.target.value):l):[...s,m(e.target.value)]).filter(e=>e!==x);d(r),a&&a()},required:!0})})]})};