@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 3.2 kB
JavaScript
import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useTheme as o,ListItem as i,ListItemIcon as a,Stack as n,Box as l,ListItemText as s,formControlLabelClasses as m}from"@mui/material";import c from"@number-flow/react";import{mergeSx as p}from"merge-sx";import{useState as d,useRef as h,useEffect as x,useCallback as g}from"react";import u from"../../WebCore/Checkbox/Checkbox.js";import"../../WebCore/Checkbox/StyledCheckbox.js";import y from"../../WebCore/Tooltip/Tooltip.js";import b from"../../WebCore/Typography/Typography.js";import f from"./_partials/StyledLinearProgress/StyledLinearProgress.js";import C from"./_partials/StyledListItemButton/StyledLisItemButton.js";import k from"./_partials/UnitText/UnitText.js";const T=({id:T,label:v,value:j=0,relativePercentage:w,respondentCount:B,tooltipContent:I,icon:P,hideIcon:S=!1,hideCheckbox:W=!1,hideUnitColumn1:F=!1,hideUnitColumn2:L=!1,animated:U=!0,checked:A=!1,disabled:_=!1,onChange:q,percentageSymbol:D=!1,compact:R,slotProps:$={}})=>{const M=o(),[z,E]=d(0),G=h(null),H=$.icon;x(()=>{const e=z,t=w||j,r=performance.now(),o=i=>{const a=i-r,n=Math.min(a/250,1);E(e+(t-e)*(n*(2-n))),n<1&&requestAnimationFrame(o)},i=requestAnimationFrame(o);return()=>cancelAnimationFrame(i)},[w,j]);const J=g(()=>{!_&&q&&q(!A)},[_,q,A]),K=F&&L,N=null!=j,O=null!=B;return e(i,{disablePadding:!0,sx:{mb:M.spacing(M.custom.margin.xs)},...$?.listItem,children:e(y,{message:I||v,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{width:"100%"}}},...$.tooltip,children:t(C,{id:T,role:void 0,onClick:J,dense:!0,disabled:_,sx:{display:"flex"},children:[!S&&P&&e(a,{...H,sx:p({minWidth:0,mr:M.custom.margin.xs,color:M.custom.palette.text.primary},H?.sx),children:P}),t(n,{direction:"row",width:1,gap:R?M.custom.margin.sm:M.custom.margin.md,alignItems:"center",children:[t(l,{sx:{display:"flex",position:"relative",width:"fill-available"},children:[!_&&e(f,{variant:"determinate",value:z,checked:A,...$.graphBar}),e(s,{disableTypography:!0,primary:e(b,{...$.graphBarTypography,component:"p",variation:"xs",noWrap:!0,sx:p($.graphBarTypography?.sx,{color:(()=>{if(!A||_)return M.custom.palette.text.disabled;return("object"==typeof $.graphBarTypography?.sx&&null!==$.graphBarTypography?.sx&&"color"in $.graphBarTypography.sx?$.graphBarTypography.sx.color:void 0)||M.palette.text.primary})()}),children:v}),sx:{my:0,position:"absolute",display:"flex",alignItems:"center",inset:0,ml:1}})]}),!K&&t(l,{display:"flex",justifyContent:"space-between",alignItems:"center",gap:M.custom.margin.xs,children:[!F&&e(k,{weight:"bold",color:M.palette.text.primary,disabled:_,checked:A,...$?.unitText1,children:N?t(r,{children:[e(c,{value:j,animated:U,...D&&{format:{minimumFractionDigits:1,maximumFractionDigits:1}}}),""+(D?"%":"")]}):"-"}),!L&&e(k,{color:M.palette.text.secondary,disabled:_,checked:A,...$?.unitText2,children:O?e(c,{value:B,animated:U}):"-"})]}),!W&&e(l,{display:"flex",justifyContent:"space-between",alignItems:"center",children:e(u,{id:`${T}-checkbox`,variant:"secondary",checked:!_&&A,disabled:_,...$.checkbox,checkboxLabel:void 0,inputRef:G,sx:p($.checkbox?.sx,{[`&.${m.root}`]:{marginRight:0}})})})]})]})})})};export{T as default};