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