feat/COMPASS-9798 inline field name editing #136
Conversation
src/mocks/decorators/diagram-editable-interactions.decorator.tsx
Outdated
Show resolved
Hide resolved
paula-stacho
force-pushed
the
COMPASS-9798
branch
from
625b464 to
aedb6b8
Compare
paula-stacho
force-pushed
the
COMPASS-9798
branch
from
97ee430 to
6c91c2a
Compare
|
@Anemy switched to input and updated styles so that there is something to click on even if the name is very short or empty (which we want to prevent but I don't think we can do it here since the error handling is planned in compass) |
paula-stacho
force-pushed
the
COMPASS-9798
branch
from
6c91c2a to
fd01f84
Compare
|
|
||
| export const FieldNameContent = ({ name, isEditable, onChange }: FieldNameProps) => { | ||
| const [isEditing, setIsEditing] = useState(false); | ||
| const [value, setValue] = useState(name); |
There was a problem hiding this comment.
Would name ever change externally? Would we need a useEffect to re-hydrate this state?
There was a problem hiding this comment.
It might actually, we have a sidebar where they can edit too
|
|
||
| useEffect(() => { | ||
| if (isEditing) { | ||
| setTimeout(() => { |
There was a problem hiding this comment.
What's this setTimeout used for? Do we need this?
| setValue(e.target.value); | ||
| }} | ||
| onBlur={handleSubmit} | ||
| onKeyDown={e => { |
There was a problem hiding this comment.
Can we move this and the onDoubleClick into its own function for better readability, like the other components in this repo?
| onBlur?: () => void; | ||
| } | ||
|
|
||
| export const FieldNameContent = ({ name, isEditable, onChange }: FieldNameProps) => { |
There was a problem hiding this comment.
Would it be better to have two seperate components, one which is editable and the other (the current flow) which is not? At the moment we're passing in quite a few (optional) props which require a conditional check, especially in that useEffect. I could see someone accidentally adding in a change which re-renders this whole component too, rather than just the edited component and vice-versa
| onBlur={handleSubmit} | ||
| onKeyDown={e => { | ||
| if (e.key === 'Enter') handleSubmit(); | ||
| if (e.key === 'Escape') setIsEditing(false); |
There was a problem hiding this comment.
To me it's more expected behaviour to reset the field name to it's original value on Escape as opposed to committing the changes.
External Links
Description
If the field is editable, and onFieldNameChange is provided, the field becomes editable on double click.
The style is minimalistic, in line with the inline inputs in Compass CRUD.
Note: I did try LG text input but the customization needed goes beyond what the component supports
Notes for Reviewers
📸 Screenshots/Screencasts
Screen.Recording.2025-09-26.at.13.10.33.mov
Before
After