@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.94 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),s=require("@mui/material"),o=require("react"),r=require("../../../utils/usePrevious.js"),t=require("../Typography/Typography.js"),i=require("./components/ExpandCollapseButton/ExpandCollapseButton.js"),n=require("./components/GradientShim/GradientShim.js"),a=require("./helpers/shimUtils.js");const l=s.styled(s.Box)(()=>({position:"absolute",bottom:0,right:0,display:"flex",alignItems:"center",overflow:"hidden"}));module.exports=({onShowMoreClick:u,onShowLessClick:c,disabled:d,backgroundColorOverride:x,dimmed:p,sizing:h="sm",slotProps:m,...g})=>{const b=s.useTheme(),f=o.useRef(null),[j,y]=o.useState(!1),w=r.usePrevious(j),B=()=>{if(!f.current)return;const{scrollHeight:e,clientHeight:s}=f.current;y(e>s)};return o.useEffect(()=>{if(f.current){B();new ResizeObserver(B).observe(f.current)}return()=>{}},[g.children]),e.jsxs(s.Box,{sx:{position:"relative"},id:"ExpandableTypography",children:[e.jsx(t,{ref:f,component:"p",clamp:2,sx:{color:d||p?b.custom.palette.text.disabled:b.custom.palette.text.primary},...g}),void 0!==u&&j&&e.jsxs(l,{className:"ExpandableTypography__show-more-container",children:[e.jsx(n,{...m?.gradientBox,sizing:h}),e.jsx(s.Box,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:x??b.custom.palette.surface.default,boxShadow:a.createShimGradient(x??b.custom.palette.surface.default),...m?.showMoreButton?.sx},children:e.jsx(i,{sizing:h,disabled:d,onClick:d?void 0:u,...m?.showMoreButton,children:"More"})})]}),void 0!==c&&w&&!j&&e.jsxs(l,{children:[e.jsx(n,{...m?.gradientBox,sx:m?.gradientBox?.sx,sizing:h}),e.jsx(s.Box,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:x??b.custom.palette.surface.default,boxShadow:a.createShimGradient(x??b.custom.palette.surface.default),...m?.showLessButton?.sx},children:e.jsx(i,{sizing:h,onClick:d?void 0:c,...m?.showLessButton,sx:m?.showLessButton?.sx,children:"Less"})})]})]})};