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