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

Revert "Refacto/abstract inplace input" (#535)

Browse Source 
Revert "Refacto/abstract inplace input (#530)"

This reverts commit c847bca293.
This commit is contained in:
Charles Bochet
2023-07-07 18:10:51 -07:00
committed by GitHub
parent 94ca61c887
commit 611cda1f41
19 changed files with 138 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,26 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
import { InplaceInput } from '../inplace-input/InplaceInput';
import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
import { useEditableCell } from './hooks/useCloseEditableCell';
import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
import { useSetSoftFocusOnCurrentCell } from './hooks/useSetSoftFocusOnCurrentCell';
import { isEditModeScopedState } from './states/isEditModeScopedState';
import { EditableCellDisplayMode } from './EditableCellDisplayMode';
import { EditableCellEditMode } from './EditableCellEditMode';
import { EditableCellSoftFocusMode } from './EditableCellSoftFocusMode';
export const CellBaseContainer = styled.div`
align-items: center;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 32px;
position: relative;
user-select: none;
width: 100%;
`;
type OwnProps = {
editModeContent: ReactElement;
@ -18,16 +35,43 @@ export function EditableCell({
editModeContent,
nonEditModeContent,
}: OwnProps) {
const [isEditMode] = useRecoilScopedState(isEditModeScopedState);
const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
const { closeEditableCell, openEditableCell } = useEditableCell();
// TODO: we might have silent problematic behavior because of the setTimeout in openEditableCell, investigate
// Maybe we could build a switchEditableCell to handle the case where we go from one cell to another.
// See https://github.com/twentyhq/twenty/issues/446
function handleOnClick() {
openEditableCell();
setSoftFocusOnCurrentCell();
}
function handleOnOutsideClick() {
closeEditableCell();
}
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
return (
<InplaceInput
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
editModeContent={editModeContent}
nonEditModeContent={nonEditModeContent}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
hasSoftFocus={!!hasSoftFocus}
/>
<CellBaseContainer onClick={handleOnClick}>
{isEditMode ? (
<EditableCellEditMode
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
onOutsideClick={handleOnOutsideClick}
>
{editModeContent}
</EditableCellEditMode>
) : hasSoftFocus ? (
<EditableCellSoftFocusMode>
{nonEditModeContent}
</EditableCellSoftFocusMode>
) : (
<EditableCellDisplayMode>{nonEditModeContent}</EditableCellDisplayMode>
)}
</CellBaseContainer>
);
}

23
front/src/modules/ui/components/inplace-input/InplaceInputDisplayMode.tsx → front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx
View File

@ -1,10 +1,12 @@
import styled from '@emotion/styled';
import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
type Props = {
softFocus: boolean;
};
export const InplaceInputNormalModeOuterContainer = styled.div<Props>`
export const EditableCellNormalModeOuterContainer = styled.div<Props>`
align-items: center;
display: flex;
height: 100%;
@ -22,7 +24,7 @@ export const InplaceInputNormalModeOuterContainer = styled.div<Props>`
: ''}
`;
export const InplaceInputNormalModeInnerContainer = styled.div`
export const EditableCellNormalModeInnerContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
@ -30,17 +32,16 @@ export const InplaceInputNormalModeInnerContainer = styled.div`
width: 100%;
`;
export function InplaceInputDisplayMode({
export function EditableCellDisplayMode({
children,
hasSoftFocus,
}: React.PropsWithChildren & {
hasSoftFocus: boolean;
}) {
}: React.PropsWithChildren<unknown>) {
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
return (
<InplaceInputNormalModeOuterContainer softFocus={hasSoftFocus}>
<InplaceInputNormalModeInnerContainer>
<EditableCellNormalModeOuterContainer softFocus={hasSoftFocus}>
<EditableCellNormalModeInnerContainer>
{children}
</InplaceInputNormalModeInnerContainer>
</InplaceInputNormalModeOuterContainer>
</EditableCellNormalModeInnerContainer>
</EditableCellNormalModeOuterContainer>
);
}

30
front/src/modules/ui/components/inplace-input/InplaceInputEditMode.tsx → front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx
View File

@ -6,9 +6,9 @@ import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsid
import { useMoveSoftFocus } from '@/ui/tables/hooks/useMoveSoftFocus';
import { overlayBackground } from '@/ui/themes/effects';
import { useInplaceInput } from './hooks/useCloseInplaceInput';
import { useEditableCell } from './hooks/useCloseEditableCell';
export const InplaceInputEditModeContainer = styled.div<OwnProps>`
export const EditableCellEditModeContainer = styled.div<OwnProps>`
align-items: center;
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
@ -34,7 +34,7 @@ type OwnProps = {
onOutsideClick?: () => void;
};
export function InplaceInputEditMode({
export function EditableCellEditMode({
editModeHorizontalAlign,
editModeVerticalPosition,
children,
@ -42,7 +42,7 @@ export function InplaceInputEditMode({
}: OwnProps) {
const wrapperRef = useRef(null);
const { closeInplaceInput } = useInplaceInput();
const { closeEditableCell } = useEditableCell();
const { moveRight, moveLeft, moveDown } = useMoveSoftFocus();
useListenClickOutsideArrayOfRef([wrapperRef], () => {
@ -52,7 +52,7 @@ export function InplaceInputEditMode({
useHotkeys(
'enter',
() => {
closeInplaceInput();
closeEditableCell();
moveDown();
},
{
@ -60,26 +60,26 @@ export function InplaceInputEditMode({
enableOnFormTags: true,
preventDefault: true,
},
[closeInplaceInput],
[closeEditableCell],
);
useHotkeys(
'esc',
() => {
closeInplaceInput();
closeEditableCell();
},
{
enableOnContentEditable: true,
enableOnFormTags: true,
preventDefault: true,
},
[closeInplaceInput],
[closeEditableCell],
);
useHotkeys(
'tab',
() => {
closeInplaceInput();
closeEditableCell();
moveRight();
},
{
@ -87,13 +87,13 @@ export function InplaceInputEditMode({
enableOnFormTags: true,
preventDefault: true,
},
[closeInplaceInput, moveRight],
[closeEditableCell, moveRight],
);
useHotkeys(
'shift+tab',
() => {
closeInplaceInput();
closeEditableCell();
moveLeft();
},
{
@ -101,17 +101,17 @@ export function InplaceInputEditMode({
enableOnFormTags: true,
preventDefault: true,
},
[closeInplaceInput, moveRight],
[closeEditableCell, moveRight],
);
return (
<InplaceInputEditModeContainer
data-testid="inplace-input-edit-mode-container"
<EditableCellEditModeContainer
data-testid="editable-cell-edit-mode-container"
ref={wrapperRef}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
>
{children}
</InplaceInputEditModeContainer>
</EditableCellEditModeContainer>
);
}

18
front/src/modules/ui/components/inplace-input/InplaceInputSoftFocusMode.tsx → front/src/modules/ui/components/editable-cell/EditableCellSoftFocusMode.tsx
View File

@ -5,13 +5,13 @@ import { useRecoilState } from 'recoil';
import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
import { isNonTextWritingKey } from '@/utils/hotkeys/isNonTextWritingKey';
import { useInplaceInput } from './hooks/useCloseInplaceInput';
import { InplaceInputDisplayMode } from './InplaceInputDisplayMode';
import { useEditableCell } from './hooks/useCloseEditableCell';
import { EditableCellDisplayMode } from './EditableCellDisplayMode';
export function InplaceInputSoftFocusMode({
export function EditableCellSoftFocusMode({
children,
}: React.PropsWithChildren<unknown>) {
const { closeInplaceInput, openInplaceInput } = useInplaceInput();
const { closeEditableCell, openEditableCell } = useEditableCell();
const [captureHotkeyTypeInFocus] = useRecoilState(
captureHotkeyTypeInFocusState,
);
@ -19,14 +19,14 @@ export function InplaceInputSoftFocusMode({
useHotkeys(
'enter',
() => {
openInplaceInput();
openEditableCell();
},
{
enableOnContentEditable: true,
enableOnFormTags: true,
preventDefault: true,
},
[closeInplaceInput],
[closeEditableCell],
);
useHotkeys(
@ -44,7 +44,7 @@ export function InplaceInputSoftFocusMode({
if (captureHotkeyTypeInFocus) {
return;
}
openInplaceInput();
openEditableCell();
},
{
enableOnContentEditable: true,
@ -53,7 +53,5 @@ export function InplaceInputSoftFocusMode({
},
);
return (
<InplaceInputDisplayMode hasSoftFocus>{children}</InplaceInputDisplayMode>
);
return <EditableCellDisplayMode>{children}</EditableCellDisplayMode>;
}

19
front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx Normal file
View File

@ -0,0 +1,19 @@
import styled from '@emotion/styled';
export const HoverableMenuItem = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.primary};
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 100%;
position: relative;
transition: background 0.1s ease;
user-select: none;
width: 100%;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
}
`;

11
front/src/modules/ui/components/inplace-input/hooks/useCloseInplaceInput.ts → front/src/modules/ui/components/editable-cell/hooks/useCloseEditableCell.ts
View File

@ -1,15 +1,14 @@
import { useRecoilCallback } from 'recoil';
import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
// TODO: Remove dependancy to table
import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
import { isEditModeScopedState } from '../states/isEditModeScopedState';
export function useInplaceInput() {
export function useEditableCell() {
const [, setIsEditMode] = useRecoilScopedState(isEditModeScopedState);
const closeInplaceInput = useRecoilCallback(
const closeEditableCell = useRecoilCallback(
({ set }) =>
async () => {
setIsEditMode(false);
@ -21,7 +20,7 @@ export function useInplaceInput() {
[setIsEditMode],
);
const openInplaceInput = useRecoilCallback(
const openEditableCell = useRecoilCallback(
({ snapshot, set }) =>
() => {
const isSomeInputInEditMode = snapshot
@ -38,7 +37,7 @@ export function useInplaceInput() {
);
return {
closeInplaceInput,
openInplaceInput,
closeEditableCell,
openEditableCell,
};
}

0
front/src/modules/ui/components/inplace-input/states/isCreateModeScopedState.ts → front/src/modules/ui/components/editable-cell/states/isCreateModeScopedState.ts
View File

0
front/src/modules/ui/components/inplace-input/states/isEditModeScopedState.ts → front/src/modules/ui/components/editable-cell/states/isEditModeScopedState.ts
View File

14
front/src/modules/ui/components/inplace-input/types/InplaceTextInput.tsx → front/src/modules/ui/components/editable-cell/types/EditableText.tsx
View File

@ -3,15 +3,13 @@ import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/themes/effects';
import { InplaceInput } from '../InplaceInput';
import { EditableCell } from '../EditableCell';
type OwnProps = {
placeholder?: string;
content: string;
changeHandler: (updated: string) => void;
editModeHorizontalAlign?: 'left' | 'right';
setSoftFocusOnCurrentInplaceInput?: () => void;
hasSoftFocus?: boolean;
};
// TODO: refactor
@ -28,19 +26,17 @@ const StyledNoEditText = styled.div`
width: 100%;
`;
export function InplaceTextInput({
export function EditableText({
content,
placeholder,
changeHandler,
editModeHorizontalAlign,
setSoftFocusOnCurrentInplaceInput,
hasSoftFocus,
}: OwnProps) {
const inputRef = useRef<HTMLInputElement>(null);
const [inputValue, setInputValue] = useState(content);
return (
<InplaceInput
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<StyledInplaceInput
@ -54,9 +50,7 @@ export function InplaceTextInput({
}}
/>
}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
hasSoftFocus={hasSoftFocus}
nonEditModeContent={<StyledNoEditText>{inputValue}</StyledNoEditText>}
></InplaceInput>
></EditableCell>
);
}

30
front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx
View File

@ -1,30 +0,0 @@
import { InplaceTextInput } from '../../inplace-input/types/InplaceTextInput';
import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
type OwnProps = {
placeholder?: string;
content: string;
changeHandler: (updated: string) => void;
editModeHorizontalAlign?: 'left' | 'right';
};
export function EditableTextCell({
editModeHorizontalAlign = 'left',
content,
changeHandler,
placeholder,
}: OwnProps) {
const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
return (
<InplaceTextInput
editModeHorizontalAlign={editModeHorizontalAlign}
content={content}
changeHandler={changeHandler}
placeholder={placeholder}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
hasSoftFocus={hasSoftFocus}
/>
);
}

76
front/src/modules/ui/components/inplace-input/InplaceInput.tsx
View File

@ -1,76 +0,0 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
import { useInplaceInput } from './hooks/useCloseInplaceInput';
import { isEditModeScopedState } from './states/isEditModeScopedState';
import { InplaceInputDisplayMode } from './InplaceInputDisplayMode';
import { InplaceInputEditMode } from './InplaceInputEditMode';
import { InplaceInputSoftFocusMode } from './InplaceInputSoftFocusMode';
export const InplaceInputBaseContainer = styled.div`
align-items: center;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 32px;
position: relative;
user-select: none;
width: 100%;
`;
type OwnProps = {
editModeContent: ReactElement;
nonEditModeContent: ReactElement;
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
setSoftFocusOnCurrentInplaceInput?: () => void;
hasSoftFocus?: boolean;
};
export function InplaceInput({
editModeHorizontalAlign = 'left',
editModeVerticalPosition = 'over',
editModeContent,
nonEditModeContent,
setSoftFocusOnCurrentInplaceInput,
hasSoftFocus,
}: OwnProps) {
const [isEditMode] = useRecoilScopedState(isEditModeScopedState);
const { closeInplaceInput, openInplaceInput } = useInplaceInput();
// TODO: we might have silent problematic behavior because of the setTimeout in openInplaceInput, investigate
// Maybe we could build a switchInplaceInput to handle the case where we go from one InplaceInput to another.
// See https://github.com/twentyhq/twenty/issues/446
function handleOnClick() {
openInplaceInput();
setSoftFocusOnCurrentInplaceInput && setSoftFocusOnCurrentInplaceInput();
}
function handleOnOutsideClick() {
closeInplaceInput();
}
return (
<InplaceInputBaseContainer onClick={handleOnClick}>
{isEditMode ? (
<InplaceInputEditMode
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
onOutsideClick={handleOnOutsideClick}
>
{editModeContent}
</InplaceInputEditMode>
) : hasSoftFocus ? (
<InplaceInputSoftFocusMode>
{nonEditModeContent}
</InplaceInputSoftFocusMode>
) : (
<InplaceInputDisplayMode hasSoftFocus={!!hasSoftFocus}>
{nonEditModeContent}
</InplaceInputDisplayMode>
)}
</InplaceInputBaseContainer>
);
}