admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor Editable Cell (#191)

Browse Source
This commit is contained in:
Charles Bochet
2023-06-04 22:47:49 +02:00
committed by GitHub
parent 7b858fd7c9
commit d3684b34c5
23 changed files with 123 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
front/src/modules/ui/components/editable-cell/EditableCell.tsx
View File

@ -1,12 +1,23 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
import { CellBaseContainer } from './CellBaseContainer';
import { CellNormalModeContainer } from './CellNormalModeContainer';
import { EditableCellDisplayMode } from './EditableCellDisplayMode';
import { EditableCellEditMode } from './EditableCellEditMode';
export const CellBaseContainer = styled.div`
position: relative;
box-sizing: border-box;
height: 32px;
display: flex;
align-items: center;
width: 100%;
cursor: pointer;
user-select: none;
`;
type OwnProps = {
editModeContent: ReactElement;
nonEditModeContent: ReactElement;
@ -42,16 +53,15 @@ export function EditableCell({
<CellBaseContainer onClick={handleOnClick}>
{isEditMode ? (
<EditableCellEditMode
editModeContent={editModeContent}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
isEditMode={isEditMode}
onOutsideClick={onOutsideClick}
/>
>
{editModeContent}
</EditableCellEditMode>
) : (
<CellNormalModeContainer>
<>{nonEditModeContent}</>
</CellNormalModeContainer>
<EditableCellDisplayMode>{nonEditModeContent}</EditableCellDisplayMode>
)}
</CellBaseContainer>
);