@useloops/design-system/dist/systems/Platform/GraphBar/GraphBar.js

The official React based Loops design system

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