@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.63 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),a=require("react"),l=require("../../BrandCore/primitiveVariables.js"),o=require("../FormControlLabel/FormControlLabel.js"),t=require("../Radio/Radio.js"),i=require("../TextField/TextField.js");module.exports=({options:u,onChange:n,other:s,value:c,internalChange:d,...h})=>{const p=s?.enabled,g="other-option",m=`${g}-value-`,[x,b]=a.useState(c),[f,j]=a.useState(!1),v=a.useRef(null);a.useEffect(()=>{!f&&x?.includes(m)?j(!0):f&&j(!1)},[x]);return a.useEffect(()=>{v.current&&Array.from(v.current.getElementsByTagName("label")).forEach(e=>{if(e.clientHeight>4*l.base){const r=e.querySelector(".MuiTypography-root");r&&(r.style.marginTop=l.base/2+"px")}})},[v.current]),e.jsxs(e.Fragment,{children:[e.jsxs(r.RadioGroup,{...h,value:x,ref:v,sx:{"& .MuiRadio-root":{alignSelf:"baseline"},"& .MuiTypography-root":{alignSelf:"center"},display:"flex",alignSelf:"baseline",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:hover":{"& .MuiRadio-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},onChange:(e,r)=>{n&&n(r),b(r),d&&d()},children:[u?u.map((r,a)=>e.jsx(o,{sx:{"& .MuiButtonBase-root.MuiRadio-root":{alignSelf:"baseline"}},...r,control:e.jsx(t,{})},a)):null,p&&e.jsx(o,{label:s?.label||"Other",value:m,control:e.jsx(t,{checked:x?.includes(m)})},g)]}),f&&e.jsx(r.Box,{sx:{mt:1},children:e.jsx(i,{fullWidth:!0,autoFocus:!0,placeholder:s?.placeholder,defaultValue:x?.replace(m,""),onChange:e=>{var r;n&&n((r=e.target.value,`${m}${r}`)),d&&d()},required:!0})})]})};