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