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