@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 6.27 kB
JavaScript
import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{useTheme as r}from"@mui/material";import{mergeSx as i}from"merge-sx";import{useState as a,useRef as s,useEffect as l,useCallback as p}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/Accordion/Accordion.js";import m from"../../../../WebCore/Typography/Typography.js";import"../../../../WebCore/Badge/Badge.js";import"../../../../WebCore/Breadcrumb/Breadcrumb.js";import"../../../../WebCore/Button/Button.js";import"../../../../WebCore/ButtonBase/ButtonBase.js";import n from"../../../../WebCore/Checkbox/Checkbox.js";import"../../../../WebCore/Checkbox/StyledCheckbox.js";import"../../../../WebCore/InputFieldBase/InputFieldBase.js";import"../../../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"@mui/icons-material";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/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 b from"../../../../WebCore/Tooltip/Tooltip.js";import"../../../../WebCore/Pill/StyledPill.js";import"../../../../WebCore/ProgressBar/ProgressBar.js";import"../../../../WebCore/Radio/StyledRadio.js";import"../../../../WebCore/utils/autocomplete.styles.js";import"../../../../WebCore/Select/AutocompleteListbox.js";import"../../../../WebCore/Select/StyledAutocomplete.js";import"../../../../WebCore/Select/SelectItem.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 d 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 c}from"../../utils/heightBasedOnPercentage.js";import{VeticalBarWrapper as C,VerticalBarValue as u,VerticalBar as j,VerticalBarActions as h,VerticalBarLabel as W}from"../StyledComponents.js";const x=({percentage:x,label:g,checked:B,toolTipContent:S,hideValue:y,hideLabel:k,hideCheckbox:f,disableTooltip:L,animateBar:I,slotProps:v,tickInterval:w,onChange:T,maxDataValue:A,disabled:M,loading:R,value:P,id:F,className:N,graphMaxHeight:V,responsive:D})=>{r();const[G,O]=a(0),H=s(null);l(()=>{const e=c(x,w,A,V,{hideLabel:k,hideCheckbox:f,hideValue:y}),o=I?G:e,t=performance.now(),r=i=>{const a=i-t,s=Math.min(a/250,1);O(o+(e-o)*(s*(2-s))),s<1&&requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[P]);const E=p(()=>{!M&&T&&T(F,!B)},[M,T,B]);return e(b,{message:S||null,disableHoverListener:L||!S,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{height:"fill-available",width:1,minWidth:0,...v?.tooltip?.slotProps?.wrapper?.sx}}},children:o(C,{maxHeight:V,disabled:M,...v?.barWrapper,id:F,className:N,onClick:E,responsive:D,children:[!y&&e(u,{...v?.value,children:R?e(d,{width:20,height:18}):e(m,{variation:"xxs",component:"p",monospaced:!0,sx:{fontSize:"10px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",width:"100%",textAlign:"center",minWidth:0,color:e=>M||!B?e.custom.palette.text.disabled:e.custom.palette.text.secondary},children:`${Math.round(x)}%`})}),R?e(d,{width:"fill-available",height:G}):e(j,{checked:B,value:G,maxHeight:V,disabled:M,...v?.bar}),o(h,{children:[!k&&e(W,{...v?.label,children:R?e(d,{width:20,height:20}):e(m,{variation:"xs",component:"p",weight:"bold",sx:{color:e=>M||!B?e.custom.palette.text.disabled:e.custom.palette.text.primary},children:g})}),!f&&e(t,{children:R?e(d,{width:24,height:24,sx:{borderRadius:.5}}):e(n,{id:`${F}-checkbox`,variant:"secondary",checked:!M&&B,disabled:M,checkboxLabel:void 0,inputRef:H,onChange:E,...v?.checkbox,sx:i({mr:0,mt:1},v?.checkbox?.sx)})})]})]})})};export{x as default};