vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use span to properly truncate text inside button

Browse Source
This commit is contained in:
karishmas6
2024-08-21 22:32:04 +05:30
parent 947a3d734b
commit 0078b869df
1 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/organisms/BrowserWindow.tsx
View File

@@ -234,35 +234,45 @@ export const BrowserWindow = () => {
return (
<div onClick={handleClick}>
{
getText === true || getList === true ? (
<GenericModal
isOpen={showAttributeModal}
onClose={() => { }}
canBeClosed={false}
>
<div>
<h2>Select Attribute</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
{attributeOptions.map((option) => (
<Button
variant="outlined"
size="medium"
key={option.value}
onClick={() => handleAttributeSelection(option.value)}
style={{
justifyContent: 'flex-start', whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
>
{option.label}
</Button>
))}
</div>
</div>
</GenericModal>
) : null
}
getText === true || getList === true ? (
<GenericModal
isOpen={showAttributeModal}
onClose={() => { }}
canBeClosed={false}
>
<div>
<h2>Select Attribute</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
{attributeOptions.map((option) => (
<Button
variant="outlined"
size="medium"
key={option.value}
onClick={() => handleAttributeSelection(option.value)}
style={{
justifyContent: 'flex-start',
maxWidth: '200px',
overflow: 'hidden',
padding: '5px 10px',
}}
>
<span style={{
display: 'block',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '100%'
}}>
{option.label}
</span>
</Button>
))}
</div>
</div>
</GenericModal>
) : null
}
{((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
<Highlighter