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