@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 7.53 kB
JavaScript
import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{useTheme as r}from"@mui/material";import i from"@mui/material/Box";import a from"@mui/material/Stack";import{mergeSx as p}from"merge-sx";import{useState as l,useRef as s,useEffect as m,useCallback as n,useMemo as d}from"react";import"../../../../../utils/formValidation/misc.js";import"../../../../BrandCore/Icon/Icon.js";import"../../../../BrandCore/primitiveVariables.js";import"../../../../WebCore/utils/typography.util.js";import"../../../../WebCore/AnnualController/AnnualController.js";import"../../../../WebCore/SelectItem/SelectItem.js";import"../../../../WebCore/Accordion/Accordion.js";import"../../../../WebCore/Animations/FadeIn.js";import b from"../../../../WebCore/Typography/Typography.js";import"@mui/icons-material";import"../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js";import"../../../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js";import"../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js";import"../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js";import"../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.js";import"../../../../WebCore/Badge/Badge.js";import"../../../../WebCore/Breadcrumb/Breadcrumb.js";import"../../../../WebCore/Button/Button.js";import"../../../../WebCore/ButtonBase/ButtonBase.js";import"../../../../WebCore/ButtonTabGroup/_partials/ActiveIndicator.js";import"../../../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js";import"../../../../WebCore/ButtonTabGroup/_partials/TabButton.js";import c from"../../../../WebCore/Checkbox/Checkbox.js";import"../../../../WebCore/Checkbox/StyledCheckbox.js";import"../../../../WebCore/InputFieldBase/InputFieldBase.js";import"../../../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"../../../../WebCore/InputLabelBase/StyledInputLabelBase.js";import"../../../../WebCore/Differential/DifferentialContainer.js";import"../../../../WebCore/Differential/DifferentialRadio.js";import"../../../../WebCore/DropdownMenu/StyledMenu.js";import"../../../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js";import"../../../../WebCore/FormGenerator/FormGenerator.js";import"../../../../WebCore/GridOverlay/GridOverlay.js";import"html-react-parser";import"../../../../WebCore/IconButton/IconButton.js";import"../../../../WebCore/IconButtonBase/IconButtonBase.js";import"../../../../WebCore/IconButtonGroup/IconButtonGroup.js";import"../../../../WebCore/Image/Image.js";import"../../../../WebCore/KbdGroup/Kbd.js";import"../../../../WebCore/KbdGroup/KbdGroup.js";import"../../../../WebCore/KeyValueLabel/KeyValueLabel.js";import"../../../../WebCore/Label/Label.js";import"../../../../WebCore/Likert/LikertContainer.js";import"../../../../WebCore/Likert/LikertLabel.js";import"../../../../WebCore/Likert/LikertRadio.js";import"../../../../WebCore/Link/StyledLink.js";import"@lottiefiles/dotlottie-react";import"../../../../WebCore/LoopsAiButton/LoopsAiButton.js";import"markdown-to-jsx";import"material-ui-popup-state/hooks";import"../../../../WebCore/Surface/Surface.js";import"../../../../WebCore/Menu/MenuItem.js";import"../../../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js";import"../../../../WebCore/ModalLayout/_partials/ModalContentWrapper.js";import"../../../../WebCore/NavigationButton/NavigationButton.js";import"../../../../WebCore/Nudge/NudgeButton.js";import"../../../../WebCore/NumberField/NumberField.js";import"../../../../BrandCore/colorRamps.js";import"../../../../BrandCore/semanticColor.js";import"../../../../BrandCore/types.js";import"../../../../BrandCore/typography.js";import"../../../../WebCore/Progress/Progress.js";import C from"../../../../WebCore/Tooltip/Tooltip.js";import"../../../../WebCore/Pill/StyledPill.js";import"../../../../WebCore/ProgressBar/ProgressBar.js";import"../../../../WebCore/Radio/StyledRadio.js";import"../../../../WebCore/Select/StyledSelect.js";import"../../../../WebCore/RankItem/RankItemContainer.js";import"../../../../WebCore/RankItem/RankItemLabel.js";import"../../../../WebCore/SortableList/SortableList.js";import"../../../../WebCore/SortableList/components/SortableItem/SortableItem.js";import"../../../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js";import"@tiptap/extension-placeholder";import"@tiptap/starter-kit";import"mui-tiptap";import"../../../../WebCore/RichTextField/StyledRichTextEditor.js";import u from"../../../../WebCore/Skeleton/Skeleton.js";import"../../../../WebCore/Slider/StyledSlider.js";import"../../../../WebCore/StarRating/StarRating.js";import"../../../../WebCore/Switch/StyledSwitch.js";import"../../../../WebCore/Textarea/Textarea.js";import"../../../../WebCore/TrialCard/TrialCardContainers.js";import"../../../../WebCore/TrialCard/TrialPill.js";import"../../../../WebCore/UserMenu/UserMenuButton.js";import"../../../../WebCore/VideoModal/VideoModal.js";import{heightBasedOnPercentage as h}from"../../utils/heightBasedOnPercentage.js";import{VeticalBarWrapper as j,VerticalBarValue as W,VerticalBar as x,VerticalBarActions as B,VerticalBarLabel as g}from"../StyledComponents.js";const S=({percentage:S,label:y,checked:k,totalBars:f,tooltipContent:L,hideTopValueSection:I,hideTopAmountValueSection:v,hideTopPercentageValueSection:A,hideLabel:T,hideCheckbox:w,hidePercentageSymbol:F,disableTooltip:R,animateBar:M,slotProps:P,tickInterval:G,amount:V,onChange:_,maxDataValue:N,disabled:D,loading:K,value:O,id:H,className:E,graphMaxHeight:q,responsive:U})=>{const z=r(),[$,J]=l(0),Q=s(null);m(()=>{const e=h(S,G,N,q,{hideLabel:T,hideCheckbox:w,hideTopValueSection:I}),o=M?$:e,t=performance.now(),r=i=>{const a=i-t,p=Math.min(a/250,1);J(o+(e-o)*(p*(2-p))),p<1&&requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[O]);const X=n(()=>{!D&&_&&_(H,!k)},[D,_,k]),Y=d(()=>f>6,[f]);return e(C,{message:L||null,disableHoverListener:R||!L,followCursor:!0,slotProps:{wrapper:{sx:{height:"fill-available",width:1,minWidth:0,...P?.tooltip?.slotProps?.wrapper?.sx}}},children:o(j,{maxHeight:q,disabled:D,...P?.barWrapper,id:H,className:E,onClick:X,responsive:U,children:[!I&&e(W,{...P?.value,children:K?e(u,{width:25,height:25,sx:{mb:1/3}}):o(a,{children:[!A&&e(i,{sx:{height:Y?18:20},children:o(b,{variation:Y?"xxs":"sm",component:"p",monospaced:!0,disabled:D||!k,align:"center",noWrap:!0,weight:"bold",sx:{...Y&&{fontSize:10,lineHeight:"12px"},minWidth:0,px:.2},children:[S,!F&&e(i,{component:"span",children:"%"})]})}),!v&&e(i,{sx:{height:Y?18:20},children:e(b,{variation:f>5?"xxs":"sm",component:"p",monospaced:!0,secondary:!0,disabled:D||!k,align:"center",sx:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",width:"100%",minWidth:0,px:.2,height:22},children:V})})]})}),K?e(u,{width:"fill-available",height:$}):e(x,{checked:k,value:$,maxHeight:q,disabled:D,sx:p(P?.bar?.sx||{},{backgroundColor:D||!k?z.custom.palette.interaction.disabled:P?.bar?.sx?.backgroundColor||z.custom.palette.purple[500]})}),o(B,{children:[!T&&e(g,{...P?.label,children:K?e(u,{width:20,height:20}):e(b,{variation:"xs",component:"p",weight:"bold",sx:{color:e=>D||!k?e.custom.palette.text.disabled:e.custom.palette.text.primary},children:y})}),!w&&e(t,{children:K?e(u,{width:24,height:24,sx:{borderRadius:.5}}):e(c,{id:`${H}-checkbox`,variant:"secondary",checked:!D&&k,disabled:D,checkboxLabel:void 0,inputRef:Q,onChange:X,...P?.checkbox,sx:p({mr:0,mt:1},P?.checkbox?.sx)})})]})]})})};export{S as default};