@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.08 kB
JavaScript
;var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("react"),s=require("../InputLabel/InputLabel.js"),a=require("../RankItem/RankItem.js"),i=require("../SortableList/SortableList.js"),l=require("../SortableList/components/SortableItem/SortableItem.js");require("../SortableList/components/SortableOverlay/SortableOverlay.js");module.exports=({labelTop:o,labelBottom:n,disabled:u,fullWidth:c=!1,options:d,onChange:m,value:b,internalChange:x})=>{const p=t.useTheme(),[h,j]=r.useState(b||d);function S(e){j(e),m(e.map(({id:e})=>e)),x&&x()}return e.jsxs(t.Stack,{gap:p.custom.margin.sm,textAlign:"center",sx:{width:c?"100%":"auto"},children:[o&&e.jsx(s,{disabled:u,sx:{color:p.custom.palette.text.secondary},children:o}),e.jsx(i,{onChange:function(e){j(e),m(e.map(({id:e})=>e)),x&&x()},items:h,direction:"vertical",renderItem:({...t})=>e.jsx(l.SortableItem,{id:t.id,children:e.jsx(a,{onChange:S,...t,options:h,disabled:u,selections:t.selections,fullWidth:c})})}),n&&e.jsx(s,{disabled:u,sx:{color:p.custom.palette.text.secondary},children:n})]})};