From b045686d2b304f6b181f0b235dd7ebfaea3097c5 Mon Sep 17 00:00:00 2001 From: Paul Schreiber <paul@techmatters.org> Date: Thu, 30 Nov 2023 18:06:56 -0500 Subject: [PATCH] fix: middle-truncate editable text field --- src/common/components/EditableText.js | 13 ++++++++++++- src/sharedData/components/SharedDataEntryBase.js | 6 +++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/common/components/EditableText.js b/src/common/components/EditableText.js index d11cf6eeb..f02a24ab4 100644 --- a/src/common/components/EditableText.js +++ b/src/common/components/EditableText.js @@ -27,6 +27,8 @@ import { Typography, } from '@mui/material'; +import MiddleEllipsis from 'common/components/MiddleEllipsis'; + const EditableText = props => { const { t } = useTranslation(); const { @@ -36,6 +38,7 @@ const EditableText = props => { processing, addMessage, viewProps, + truncateLongNames, onSave, isEditing, setIsEditing, @@ -133,6 +136,14 @@ const EditableText = props => { ); } + const textValue = truncateLongNames ? ( + <MiddleEllipsis> + <Typography component="span">{value}</Typography> + </MiddleEllipsis> + ) : ( + value + ); + return ( <Typography component={Stack} @@ -154,7 +165,7 @@ const EditableText = props => { ...(viewProps?.sx || {}), }} > - {value || <Link href="#">+ {addMessage}</Link>} + {textValue || <Link href="#">+ {addMessage}</Link>} {isHovering && <EditIcon sx={{ color: 'blue.dark' }} />} </Typography> ); diff --git a/src/sharedData/components/SharedDataEntryBase.js b/src/sharedData/components/SharedDataEntryBase.js index 998119a40..e0984fbc2 100644 --- a/src/sharedData/components/SharedDataEntryBase.js +++ b/src/sharedData/components/SharedDataEntryBase.js @@ -157,11 +157,15 @@ const SharedDataEntryBase = props => { id={`name-${dataEntry.id}`} label={t('sharedData.name_update')} value={dataEntry.name} + truncateLongNames={true} onSave={onUpdateName} processing={processing} isEditing={isEditingName} setIsEditing={setIsEditingName} - viewProps={{ color: 'black', sx: { flexGrow: 1 } }} + viewProps={{ + color: 'black', + sx: { flexGrow: 1, overflow: 'hidden' }, + }} /> </Restricted> </Grid>