@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.92 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 c from"../Typography/Typography.js";import d from"./components/ExpandCollapseButton/ExpandCollapseButton.js";import p 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,backgroundColorOverride:f,dimmed:g,sizing:b="sm",slotProps:w,...y})=>{const v=s(),B=i(null),[C,k]=n(!1),j=l(C),z=()=>{if(!B.current)return;const{scrollHeight:o,clientHeight:e}=B.current;k(o>e)};return a(()=>{if(B.current){z();new ResizeObserver(z).observe(B.current)}return()=>{}},[y.children]),o(r,{sx:{position:"relative"},id:"ExpandableTypography",children:[e(c,{ref:B,component:"p",clamp:2,sx:{color:x||g?v.custom.palette.text.disabled:v.custom.palette.text.primary},...y}),void 0!==t&&C&&o(u,{className:"ExpandableTypography__show-more-container",children:[e(p,{...w?.gradientBox,sizing:b}),e(r,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:f??v.custom.palette.surface.default,boxShadow:m(f??v.custom.palette.surface.default),...w?.showMoreButton?.sx},children:e(d,{sizing:b,disabled:x,onClick:x?void 0:t,...w?.showMoreButton,children:"More"})})]}),void 0!==h&&j&&!C&&o(u,{children:[e(p,{...w?.gradientBox,sx:w?.gradientBox?.sx,sizing:b}),e(r,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:f??v.custom.palette.surface.default,boxShadow:m(f??v.custom.palette.surface.default),...w?.showLessButton?.sx},children:e(d,{sizing:b,onClick:x?void 0:h,...w?.showLessButton,sx:w?.showLessButton?.sx,children:"Less"})})]})]})};export{h as default};