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