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