1+ import { h } from '@stencil/core' ;
2+ import { DataTestIdsEnum } from 'constants/dataTestIds.enum' ;
3+ import { ELLIPSIS } from 'constants/htmlStrings' ;
4+ import { safeWindow } from 'constants/window.constants' ;
5+
6+ import styles from './trim.styles'
7+
8+ interface TrimPropsType {
9+ dataTestId ?: string ;
10+ class ?: string ;
11+ text : string ;
12+ }
13+
14+ export function Trim ( {
15+ dataTestId = DataTestIdsEnum . trim ,
16+ class : className ,
17+ text
18+ } : TrimPropsType ) {
19+ let fullWidthUntrimmedElementReference : HTMLDivElement ;
20+ let trimElementReference : HTMLDivElement ;
21+ let resizeObserver : ResizeObserver ;
22+ let currentTrimFontSize = '1rem' ;
23+ let trimFullElement : HTMLDivElement ;
24+ let trimWrapperElement : HTMLDivElement ;
25+
26+ const handleTrimElementReference = ( element : HTMLDivElement ) => {
27+ if ( element ) {
28+ trimElementReference = element ;
29+ setupResizeObserver ( ) ;
30+ requestAnimationFrame ( checkOverflow ) ;
31+ }
32+ }
33+
34+ const handleFullWidthTrimElementReference = ( element : HTMLDivElement ) => {
35+ if ( element ) {
36+ fullWidthUntrimmedElementReference = element ;
37+ }
38+ }
39+
40+ const handleTrimFullRef = ( element : HTMLDivElement ) => {
41+ if ( element ) {
42+ trimFullElement = element ;
43+ }
44+ } ;
45+
46+ const handleTrimWrapperRef = ( element : HTMLDivElement ) => {
47+ if ( element ) {
48+ trimWrapperElement = element ;
49+ }
50+ } ;
51+
52+ const setupResizeObserver = ( ) => {
53+ if ( resizeObserver ) {
54+ resizeObserver . disconnect ( ) ;
55+ }
56+
57+ resizeObserver = new ResizeObserver ( ( ) => {
58+ checkOverflow ( ) ;
59+ } ) ;
60+
61+ if ( trimElementReference ) {
62+ resizeObserver . observe ( trimElementReference ) ;
63+ }
64+ }
65+
66+ const checkOverflow = ( ) => {
67+ if ( ! fullWidthUntrimmedElementReference || ! trimElementReference || ! trimFullElement || ! trimWrapperElement ) {
68+ return ;
69+ }
70+
71+ const hiddenFullWidthElementWidth = fullWidthUntrimmedElementReference . scrollWidth ;
72+ const trimmedElementWidth = trimElementReference . clientWidth ;
73+ const isTrimElementOverflowing = hiddenFullWidthElementWidth > trimmedElementWidth ;
74+
75+ if ( safeWindow ) {
76+ currentTrimFontSize = safeWindow . getComputedStyle ( trimElementReference ) . fontSize ;
77+ }
78+
79+ const getIdentifierClass = ( classes : string ) => classes . split ( ' ' ) [ 0 ] ;
80+
81+ const trimLeftSelector = `.${ getIdentifierClass ( styles . trimLeft ) } ;
82+ const trimRightSelector = `.${ getIdentifierClass ( styles . trimRight ) } ;
83+
84+ const trimLeftElement = trimElementReference . querySelector ( trimLeftSelector ) as HTMLElement ;
85+ const trimRightElement = trimElementReference . querySelector ( trimRightSelector ) as HTMLElement ;
86+ if ( trimLeftElement ) {
87+ trimLeftElement . style . fontSize = currentTrimFontSize ;
88+ }
89+
90+ if ( trimRightElement ) {
91+ trimRightElement . style . fontSize = currentTrimFontSize ;
92+ }
93+
94+ const trimFullVisibleClasses = styles . trimFullVisible . split ( / \s + / ) ;
95+ const trimWrapperVisibleClasses = styles . trimWrapperVisible . split ( / \s + / ) ;
96+
97+ if ( isTrimElementOverflowing ) {
98+ trimFullElement . classList . remove ( ...trimFullVisibleClasses ) ;
99+ trimWrapperElement . classList . add ( ...trimWrapperVisibleClasses ) ;
100+ } else {
101+ trimFullElement . classList . add ( ...trimFullVisibleClasses ) ;
102+ trimWrapperElement . classList . remove ( ...trimWrapperVisibleClasses ) ;
103+ }
104+ } ;
105+
106+ const middleTextIndex = Math . floor ( text . length / 2 ) ;
107+ const leftHandText = text . slice ( 0 , middleTextIndex ) ;
108+ const rightHandText = text . slice ( middleTextIndex ) ;
109+
110+ return (
111+ < div
112+ data-testid = { dataTestId }
113+ ref = { handleTrimElementReference }
114+ class = { { [ styles . trim ] : true , [ className ] : Boolean ( className ) } }
115+ >
116+ < div
117+ data-testid = { DataTestIdsEnum . trimFullAddress }
118+ ref = { el => {
119+ handleFullWidthTrimElementReference ( el ) ;
120+ handleTrimFullRef ( el ) ;
121+ } }
122+ class = { styles . trimFull }
123+ >
124+ { text }
125+ </ div >
126+
127+ < div ref = { handleTrimWrapperRef } class = { styles . trimWrapper } >
128+ < div class = { styles . trimLeftWrapper } >
129+ < div class = { styles . trimLeft } style = { { fontSize : currentTrimFontSize } } >
130+ { leftHandText }
131+ </ div >
132+ </ div >
133+
134+ < div class = { styles . trimEllipsisWrapper } >
135+ < div class = { styles . trimEllipsis } > { ELLIPSIS } </ div >
136+ </ div >
137+
138+ < div class = { styles . trimRightWrapper } style = { { direction : 'rtl' } } >
139+ < div class = { styles . trimRight } style = { { fontSize : currentTrimFontSize } } >
140+ { rightHandText }
141+ </ div >
142+ </ div >
143+ </ div >
144+ </ div >
145+ ) ;
146+ }
0 commit comments