@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.46 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{DragHandle as i}from"@mui/icons-material";import{useTheme as l,Stack as n,Box as r,typographyClasses as o,selectClasses as a}from"@mui/material";import{iconSizeMap as s}from"../../BrandCore/Icon/Icon.js";import{space as m,base as c}from"../../BrandCore/primitiveVariables.js";import"../SelectItem/SelectItem.js";import d from"../Select/Select.js";import p from"./RankItemContainer.js";import f from"./RankItemLabel.js";const g=({label:g="Placeholder",disabled:h,onChange:u,options:x,fullWidth:b,sizing:I="lg"})=>{const j=l(),v=x.map(e=>e.label).indexOf(g);return e(p,{disabled:h,fullWidth:b,sizing:I,children:t(n,{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",sx:{position:"relative",zIndex:1},children:[t(r,{display:"flex",alignItems:"center",sx:{"& svg":{fill:j.custom.palette.icon.secondary}},children:[e(i,{"aria-label":"drag-handle",sx:{width:s.lg,height:s.lg,mr:j.custom.padding.sm}}),e(f,{align:"left",disabled:h,children:g})]}),"lg"===I?e(d,{name:"rank",sizing:"xs",selections:x.map((e,t)=>({label:`${t+1}`,value:`${t}`})),disabled:h,value:`${v}`,onChange:function(e){const t=v,i=Number(e.target.value),l=x;let n=1;const r=l.splice(t,n)[0];n=0,l.splice(i,n,r),u(l)},MenuProps:{anchorOrigin:{vertical:m[400],horizontal:"center"}},sx:{[`&.${a.root}`]:{width:6*c,textAlign:"center"},[`& .${o.root}`]:{width:"fit-content"}}}):void 0]})})};export{g as default};