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

37
front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx
View File

@ -1,7 +1,6 @@
import { useRef } from 'react';
import styled from '@emotion/styled';
import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
import { overlayBackground } from '@/ui/theme/constants/effects';
const StyledEditableFieldEditModeContainer = styled.div<OwnProps>`
align-items: center;
@ -14,28 +13,28 @@ const StyledEditableFieldEditModeContainer = styled.div<OwnProps>`
z-index: 10;
`;
const StyledEditableFieldInput = styled.div`
align-items: center;
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
margin-left: -1px;
min-height: 32px;
width: inherit;
${overlayBackground}
z-index: 10;
`;
type OwnProps = {
children: React.ReactNode;
onOutsideClick?: () => void;
onCancel?: () => void;
onSubmit?: () => void;
};
export function EditableFieldEditMode({
children,
onCancel,
onSubmit,
}: OwnProps) {
const wrapperRef = useRef(null);
useRegisterCloseFieldHandlers(wrapperRef, onSubmit, onCancel);
export function EditableFieldEditMode({ children }: OwnProps) {
return (
<StyledEditableFieldEditModeContainer
data-testid="editable-field-edit-mode-container"
ref={wrapperRef}
>
{children}
<StyledEditableFieldEditModeContainer data-testid="editable-field-edit-mode-container">
<StyledEditableFieldInput>{children}</StyledEditableFieldInput>
</StyledEditableFieldEditModeContainer>
);
}