@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.77 kB
JavaScript
import{jsxs as e,Fragment as o,jsx as r}from"react/jsx-runtime";import{RadioGroup as l,Box as a}from"@mui/material";import{useState as t,useRef as i,useEffect as n}from"react";import{base as u}from"../../BrandCore/primitiveVariables.js";import s from"../FormControlLabel/FormControlLabel.js";import c from"../Radio/Radio.js";import"../Radio/StyledRadio.js";import m from"../TextField/TextField.js";const p=({options:p,onChange:d,other:g,value:h,internalChange:f,sizing:b="lg",inputRef:v,noneOfTheseOption:y,...x})=>{const C=g?.enabled,R="other-option",M=`${R}-value-`,[T,j]=t(h),[S,F]=t(!1),k=i(null);n(()=>{!S&&T?.includes(M)?F(!0):S&&F(!1)},[T]);return n(()=>{k.current&&Array.from(k.current.getElementsByTagName("label")).forEach(e=>{if(e.clientHeight>4*u){const o=e.querySelector(".MuiTypography-root");o&&(o.style.marginTop=u/2+"px")}})},[k.current]),e(o,{children:[e(l,{...x,value:T,ref:k,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,o)=>{d&&d(o),j(o),f&&f()},children:[p?p.map((e,o)=>r(s,{sx:{"& .MuiButtonBase-root.MuiRadio-root":{alignSelf:"baseline"}},...e,control:r(c,{sizing:b})},o)):null,C&&r(s,{label:g?.label||"Other",value:M,control:r(c,{sizing:b,checked:T?.includes(M)})},R),y&&r(s,{...y,control:r(c,{sizing:b})},y.value)]}),S&&r(a,{sx:{mt:1},children:r(m,{fullWidth:!0,autoFocus:!0,placeholder:g?.placeholder,defaultValue:T?.replace(M,""),onChange:e=>{var o;d&&d((o=e.target.value,`${M}${o}`)),f&&f()},required:!0})})]})};export{p as default};