mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Reafactor/UI input and displays (#1544)

Browse Source 
* WIP

* Text field

* URL

* Finished PhoneInput

* Refactored input sub-folders

* Boolean

* Fix lint

* Fix lint

* Fix useOutsideClick

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-09-12 02:11:20 +02:00
committed by GitHub
parent 509ffddc57
commit a766c60aa5
90 changed files with 618 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
front/src/modules/ui/editable-field/components/EditableField.tsx
View File

@ -83,8 +83,6 @@ type OwnProps = {
isDisplayModeContentEmpty?: boolean;
isDisplayModeFixHeight?: boolean;
disableHoverEffect?: boolean;
onSubmit?: () => void;
onCancel?: () => void;
};
export function EditableField({
@ -99,8 +97,6 @@ export function EditableField({
displayModeContentOnly,
isDisplayModeFixHeight,
disableHoverEffect,
onSubmit,
onCancel,
}: OwnProps) {
const [isHovered, setIsHovered] = useState(false);
@ -115,10 +111,13 @@ export function EditableField({
const { isFieldInEditMode, openEditableField } = useEditableField();
function handleDisplayModeClick() {
openEditableField(customEditHotkeyScope);
if (!displayModeContentOnly) {
openEditableField(customEditHotkeyScope);
}
}
const showEditButton = !isFieldInEditMode && isHovered && useEditButton;
const showEditButton =
!isFieldInEditMode && isHovered && useEditButton && !displayModeContentOnly;
return (
<StyledEditableFieldBaseContainer
@ -137,10 +136,8 @@ export function EditableField({
</StyledLabelAndIconContainer>
<StyledValueContainer>
{isFieldInEditMode && !displayModeContentOnly ? (
<EditableFieldEditMode onSubmit={onSubmit} onCancel={onCancel}>
{editModeContent}
</EditableFieldEditMode>
{isFieldInEditMode ? (
<EditableFieldEditMode>{editModeContent}</EditableFieldEditMode>
) : (
<StyledClickableContainer onClick={handleDisplayModeClick}>
<EditableFieldDisplayMode