diff --git a/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx b/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx index cae334ded..e844934c7 100644 --- a/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx +++ b/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx @@ -4,7 +4,7 @@ import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFiltere import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState'; import { EntityForSelect } from '@/relation-picker/types/EntityForSelect'; import { Entity } from '@/relation-picker/types/EntityTypeForSelect'; -import { useEditableCell } from '@/ui/components/editable-cell/hooks/useCloseEditableCell'; +import { useInplaceInput } from '@/ui/components/inplace-input/hooks/useCloseInplaceInput'; import { Company, User, @@ -28,7 +28,7 @@ export function CompanyAccountOwnerPicker({ company }: OwnProps) { ); const [updateCompany] = useUpdateCompanyMutation(); - const { closeEditableCell } = useEditableCell(); + const { closeInplaceInput } = useInplaceInput(); const companies = useFilteredSearchEntityQuery({ queryHook: useSearchUserQuery, @@ -52,7 +52,7 @@ export function CompanyAccountOwnerPicker({ company }: OwnProps) { }, }); - closeEditableCell(); + closeInplaceInput(); } return ( diff --git a/front/src/modules/people/components/PeopleCompanyCell.tsx b/front/src/modules/people/components/PeopleCompanyCell.tsx index 6b34efba7..7a53f13e2 100644 --- a/front/src/modules/people/components/PeopleCompanyCell.tsx +++ b/front/src/modules/people/components/PeopleCompanyCell.tsx @@ -1,7 +1,7 @@ import CompanyChip from '@/companies/components/CompanyChip'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { EditableCell } from '@/ui/components/editable-cell/EditableCell'; -import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState'; +import { isCreateModeScopedState } from '@/ui/components/inplace-input/states/isCreateModeScopedState'; import { getLogoUrlFromDomainName } from '@/utils/utils'; import { Company, Person } from '~/generated/graphql'; diff --git a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx b/front/src/modules/people/components/PeopleCompanyCreateCell.tsx index c66863b0d..b0c2ac617 100644 --- a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx +++ b/front/src/modules/people/components/PeopleCompanyCreateCell.tsx @@ -4,7 +4,7 @@ import { v4 } from 'uuid'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState'; -import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState'; +import { isCreateModeScopedState } from '@/ui/components/inplace-input/states/isCreateModeScopedState'; import { DoubleTextInput } from '@/ui/components/inputs/DoubleTextInput'; import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef'; import { logError } from '@/utils/logs/logError'; diff --git a/front/src/modules/people/components/PeopleCompanyPicker.tsx b/front/src/modules/people/components/PeopleCompanyPicker.tsx index 8d659702f..04774db28 100644 --- a/front/src/modules/people/components/PeopleCompanyPicker.tsx +++ b/front/src/modules/people/components/PeopleCompanyPicker.tsx @@ -2,8 +2,8 @@ import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState' import { SingleEntitySelect } from '@/relation-picker/components/SingleEntitySelect'; import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery'; import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState'; -import { useEditableCell } from '@/ui/components/editable-cell/hooks/useCloseEditableCell'; -import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState'; +import { useInplaceInput } from '@/ui/components/inplace-input/hooks/useCloseInplaceInput'; +import { isCreateModeScopedState } from '@/ui/components/inplace-input/states/isCreateModeScopedState'; import { getLogoUrlFromDomainName } from '@/utils/utils'; import { CommentableType, @@ -25,7 +25,7 @@ export function PeopleCompanyPicker({ people }: OwnProps) { ); const [updatePeople] = useUpdatePeopleMutation(); - const { closeEditableCell } = useEditableCell(); + const { closeInplaceInput } = useInplaceInput(); const companies = useFilteredSearchEntityQuery({ queryHook: useSearchCompanyQuery, @@ -50,7 +50,7 @@ export function PeopleCompanyPicker({ people }: OwnProps) { }, }); - closeEditableCell(); + closeInplaceInput(); } function handleCreate() { diff --git a/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx b/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx index 903a9e579..06c2f4944 100644 --- a/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx +++ b/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx @@ -4,7 +4,7 @@ import { IconCurrencyDollar } from '@tabler/icons-react'; import { RecoilScope } from '@/recoil-scope/components/RecoilScope'; import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate'; -import { EditableText } from '@/ui/components/editable-cell/types/EditableText'; +import { InplaceTextInput } from '@/ui/components/inplace-input/types/InplaceTextInput'; import { CellContext } from '@/ui/tables/states/CellContext'; import { RowContext } from '@/ui/tables/states/RowContext'; @@ -113,7 +113,7 @@ export function CompanyBoardCard({ - diff --git a/front/src/modules/ui/components/editable-cell/EditableCell.tsx b/front/src/modules/ui/components/editable-cell/EditableCell.tsx index 15152a501..dc21dcd62 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCell.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCell.tsx @@ -1,26 +1,9 @@ import { ReactElement } from 'react'; -import styled from '@emotion/styled'; -import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; +import { InplaceInput } from '../inplace-input/InplaceInput'; -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; @@ -35,43 +18,16 @@ 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 ( - - {isEditMode ? ( - - {editModeContent} - - ) : hasSoftFocus ? ( - - {nonEditModeContent} - - ) : ( - {nonEditModeContent} - )} - + ); } diff --git a/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx b/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx deleted file mode 100644 index b753f80d8..000000000 --- a/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx +++ /dev/null @@ -1,19 +0,0 @@ -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}; - } -`; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx new file mode 100644 index 000000000..138be06a3 --- /dev/null +++ b/front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx @@ -0,0 +1,30 @@ +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 ( + + ); +} diff --git a/front/src/modules/ui/components/inplace-input/InplaceInput.tsx b/front/src/modules/ui/components/inplace-input/InplaceInput.tsx new file mode 100644 index 000000000..812c2c7e4 --- /dev/null +++ b/front/src/modules/ui/components/inplace-input/InplaceInput.tsx @@ -0,0 +1,76 @@ +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 ( + + {isEditMode ? ( + + {editModeContent} + + ) : hasSoftFocus ? ( + + {nonEditModeContent} + + ) : ( + + {nonEditModeContent} + + )} + + ); +} diff --git a/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx b/front/src/modules/ui/components/inplace-input/InplaceInputDisplayMode.tsx similarity index 55% rename from front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx rename to front/src/modules/ui/components/inplace-input/InplaceInputDisplayMode.tsx index fe9a3e0d9..f1c2510cb 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx +++ b/front/src/modules/ui/components/inplace-input/InplaceInputDisplayMode.tsx @@ -1,12 +1,10 @@ import styled from '@emotion/styled'; -import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell'; - type Props = { softFocus: boolean; }; -export const EditableCellNormalModeOuterContainer = styled.div` +export const InplaceInputNormalModeOuterContainer = styled.div` align-items: center; display: flex; height: 100%; @@ -24,7 +22,7 @@ export const EditableCellNormalModeOuterContainer = styled.div` : ''} `; -export const EditableCellNormalModeInnerContainer = styled.div` +export const InplaceInputNormalModeInnerContainer = styled.div` align-items: center; display: flex; height: 100%; @@ -32,16 +30,17 @@ export const EditableCellNormalModeInnerContainer = styled.div` width: 100%; `; -export function EditableCellDisplayMode({ +export function InplaceInputDisplayMode({ children, -}: React.PropsWithChildren) { - const hasSoftFocus = useIsSoftFocusOnCurrentCell(); - + hasSoftFocus, +}: React.PropsWithChildren & { + hasSoftFocus: boolean; +}) { return ( - - + + {children} - - + + ); } diff --git a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx b/front/src/modules/ui/components/inplace-input/InplaceInputEditMode.tsx similarity index 79% rename from front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx rename to front/src/modules/ui/components/inplace-input/InplaceInputEditMode.tsx index 79249bbe1..a28dd2efc 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx +++ b/front/src/modules/ui/components/inplace-input/InplaceInputEditMode.tsx @@ -6,9 +6,9 @@ import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsid import { useMoveSoftFocus } from '@/ui/tables/hooks/useMoveSoftFocus'; import { overlayBackground } from '@/ui/themes/effects'; -import { useEditableCell } from './hooks/useCloseEditableCell'; +import { useInplaceInput } from './hooks/useCloseInplaceInput'; -export const EditableCellEditModeContainer = styled.div` +export const InplaceInputEditModeContainer = styled.div` 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 EditableCellEditMode({ +export function InplaceInputEditMode({ editModeHorizontalAlign, editModeVerticalPosition, children, @@ -42,7 +42,7 @@ export function EditableCellEditMode({ }: OwnProps) { const wrapperRef = useRef(null); - const { closeEditableCell } = useEditableCell(); + const { closeInplaceInput } = useInplaceInput(); const { moveRight, moveLeft, moveDown } = useMoveSoftFocus(); useListenClickOutsideArrayOfRef([wrapperRef], () => { @@ -52,7 +52,7 @@ export function EditableCellEditMode({ useHotkeys( 'enter', () => { - closeEditableCell(); + closeInplaceInput(); moveDown(); }, { @@ -60,26 +60,26 @@ export function EditableCellEditMode({ enableOnFormTags: true, preventDefault: true, }, - [closeEditableCell], + [closeInplaceInput], ); useHotkeys( 'esc', () => { - closeEditableCell(); + closeInplaceInput(); }, { enableOnContentEditable: true, enableOnFormTags: true, preventDefault: true, }, - [closeEditableCell], + [closeInplaceInput], ); useHotkeys( 'tab', () => { - closeEditableCell(); + closeInplaceInput(); moveRight(); }, { @@ -87,13 +87,13 @@ export function EditableCellEditMode({ enableOnFormTags: true, preventDefault: true, }, - [closeEditableCell, moveRight], + [closeInplaceInput, moveRight], ); useHotkeys( 'shift+tab', () => { - closeEditableCell(); + closeInplaceInput(); moveLeft(); }, { @@ -101,17 +101,17 @@ export function EditableCellEditMode({ enableOnFormTags: true, preventDefault: true, }, - [closeEditableCell, moveRight], + [closeInplaceInput, moveRight], ); return ( - {children} - + ); } diff --git a/front/src/modules/ui/components/editable-cell/EditableCellSoftFocusMode.tsx b/front/src/modules/ui/components/inplace-input/InplaceInputSoftFocusMode.tsx similarity index 71% rename from front/src/modules/ui/components/editable-cell/EditableCellSoftFocusMode.tsx rename to front/src/modules/ui/components/inplace-input/InplaceInputSoftFocusMode.tsx index d67da443a..02681d204 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellSoftFocusMode.tsx +++ b/front/src/modules/ui/components/inplace-input/InplaceInputSoftFocusMode.tsx @@ -5,13 +5,13 @@ import { useRecoilState } from 'recoil'; import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState'; import { isNonTextWritingKey } from '@/utils/hotkeys/isNonTextWritingKey'; -import { useEditableCell } from './hooks/useCloseEditableCell'; -import { EditableCellDisplayMode } from './EditableCellDisplayMode'; +import { useInplaceInput } from './hooks/useCloseInplaceInput'; +import { InplaceInputDisplayMode } from './InplaceInputDisplayMode'; -export function EditableCellSoftFocusMode({ +export function InplaceInputSoftFocusMode({ children, }: React.PropsWithChildren) { - const { closeEditableCell, openEditableCell } = useEditableCell(); + const { closeInplaceInput, openInplaceInput } = useInplaceInput(); const [captureHotkeyTypeInFocus] = useRecoilState( captureHotkeyTypeInFocusState, ); @@ -19,14 +19,14 @@ export function EditableCellSoftFocusMode({ useHotkeys( 'enter', () => { - openEditableCell(); + openInplaceInput(); }, { enableOnContentEditable: true, enableOnFormTags: true, preventDefault: true, }, - [closeEditableCell], + [closeInplaceInput], ); useHotkeys( @@ -44,7 +44,7 @@ export function EditableCellSoftFocusMode({ if (captureHotkeyTypeInFocus) { return; } - openEditableCell(); + openInplaceInput(); }, { enableOnContentEditable: true, @@ -53,5 +53,7 @@ export function EditableCellSoftFocusMode({ }, ); - return {children}; + return ( + {children} + ); } diff --git a/front/src/modules/ui/components/editable-cell/hooks/useCloseEditableCell.ts b/front/src/modules/ui/components/inplace-input/hooks/useCloseInplaceInput.ts similarity index 81% rename from front/src/modules/ui/components/editable-cell/hooks/useCloseEditableCell.ts rename to front/src/modules/ui/components/inplace-input/hooks/useCloseInplaceInput.ts index c2cc3b4e8..534800bed 100644 --- a/front/src/modules/ui/components/editable-cell/hooks/useCloseEditableCell.ts +++ b/front/src/modules/ui/components/inplace-input/hooks/useCloseInplaceInput.ts @@ -1,14 +1,15 @@ 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 useEditableCell() { +export function useInplaceInput() { const [, setIsEditMode] = useRecoilScopedState(isEditModeScopedState); - const closeEditableCell = useRecoilCallback( + const closeInplaceInput = useRecoilCallback( ({ set }) => async () => { setIsEditMode(false); @@ -20,7 +21,7 @@ export function useEditableCell() { [setIsEditMode], ); - const openEditableCell = useRecoilCallback( + const openInplaceInput = useRecoilCallback( ({ snapshot, set }) => () => { const isSomeInputInEditMode = snapshot @@ -37,7 +38,7 @@ export function useEditableCell() { ); return { - closeEditableCell, - openEditableCell, + closeInplaceInput, + openInplaceInput, }; } diff --git a/front/src/modules/ui/components/editable-cell/states/isCreateModeScopedState.ts b/front/src/modules/ui/components/inplace-input/states/isCreateModeScopedState.ts similarity index 100% rename from front/src/modules/ui/components/editable-cell/states/isCreateModeScopedState.ts rename to front/src/modules/ui/components/inplace-input/states/isCreateModeScopedState.ts diff --git a/front/src/modules/ui/components/editable-cell/states/isEditModeScopedState.ts b/front/src/modules/ui/components/inplace-input/states/isEditModeScopedState.ts similarity index 100% rename from front/src/modules/ui/components/editable-cell/states/isEditModeScopedState.ts rename to front/src/modules/ui/components/inplace-input/states/isEditModeScopedState.ts diff --git a/front/src/modules/ui/components/editable-cell/types/EditableText.tsx b/front/src/modules/ui/components/inplace-input/types/InplaceTextInput.tsx similarity index 77% rename from front/src/modules/ui/components/editable-cell/types/EditableText.tsx rename to front/src/modules/ui/components/inplace-input/types/InplaceTextInput.tsx index aeea86426..48553e4fc 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableText.tsx +++ b/front/src/modules/ui/components/inplace-input/types/InplaceTextInput.tsx @@ -3,13 +3,15 @@ import styled from '@emotion/styled'; import { textInputStyle } from '@/ui/themes/effects'; -import { EditableCell } from '../EditableCell'; +import { InplaceInput } from '../InplaceInput'; type OwnProps = { placeholder?: string; content: string; changeHandler: (updated: string) => void; editModeHorizontalAlign?: 'left' | 'right'; + setSoftFocusOnCurrentInplaceInput?: () => void; + hasSoftFocus?: boolean; }; // TODO: refactor @@ -26,17 +28,19 @@ const StyledNoEditText = styled.div` width: 100%; `; -export function EditableText({ +export function InplaceTextInput({ content, placeholder, changeHandler, editModeHorizontalAlign, + setSoftFocusOnCurrentInplaceInput, + hasSoftFocus, }: OwnProps) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(content); return ( - } + setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput} + hasSoftFocus={hasSoftFocus} nonEditModeContent={{inputValue}} - > + > ); } diff --git a/front/src/pages/companies/companies-columns.tsx b/front/src/pages/companies/companies-columns.tsx index 1374e8e03..d5536df8d 100644 --- a/front/src/pages/companies/companies-columns.tsx +++ b/front/src/pages/companies/companies-columns.tsx @@ -4,7 +4,7 @@ import { createColumnHelper } from '@tanstack/react-table'; import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell'; import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell'; import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate'; -import { EditableText } from '@/ui/components/editable-cell/types/EditableText'; +import { EditableTextCell } from '@/ui/components/editable-cell/types/EditableTextCell'; import { ColumnHead } from '@/ui/components/table/ColumnHead'; import { IconBuildingSkyscraper, @@ -44,7 +44,7 @@ export const useCompaniesColumns = () => { } /> ), cell: (props) => ( - { @@ -66,7 +66,7 @@ export const useCompaniesColumns = () => { } /> ), cell: (props) => ( - { @@ -89,7 +89,7 @@ export const useCompaniesColumns = () => { } /> ), cell: (props) => ( - { diff --git a/front/src/pages/people/__stories__/People.inputs.stories.tsx b/front/src/pages/people/__stories__/People.inputs.stories.tsx index 7355c3a6e..0356f6c01 100644 --- a/front/src/pages/people/__stories__/People.inputs.stories.tsx +++ b/front/src/pages/people/__stories__/People.inputs.stories.tsx @@ -39,13 +39,13 @@ export const InteractWithManyRows: Story = { ); expect( - canvas.queryByTestId('editable-cell-edit-mode-container'), + canvas.queryByTestId('inplace-input-edit-mode-container'), ).toBeNull(); await userEvent.click(firstRowEmailCell); expect( - canvas.queryByTestId('editable-cell-edit-mode-container'), + canvas.queryByTestId('inplace-input-edit-mode-container'), ).toBeInTheDocument(); await userEvent.click(secondRowEmailCell); @@ -57,7 +57,7 @@ export const InteractWithManyRows: Story = { ); expect( - canvas.queryByTestId('editable-cell-edit-mode-container'), + canvas.queryByTestId('inplace-input-edit-mode-container'), ).toBeNull(); await userEvent.click(secondRowEmailCellFocused); @@ -65,7 +65,7 @@ export const InteractWithManyRows: Story = { await sleep(25); expect( - canvas.queryByTestId('editable-cell-edit-mode-container'), + canvas.queryByTestId('inplace-input-edit-mode-container'), ).toBeInTheDocument(); }, parameters: { diff --git a/front/src/pages/people/people-columns.tsx b/front/src/pages/people/people-columns.tsx index 3c9ee46c6..a69bb885e 100644 --- a/front/src/pages/people/people-columns.tsx +++ b/front/src/pages/people/people-columns.tsx @@ -5,7 +5,7 @@ import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullNa import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell'; import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate'; import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone'; -import { EditableText } from '@/ui/components/editable-cell/types/EditableText'; +import { EditableTextCell } from '@/ui/components/editable-cell/types/EditableTextCell'; import { ColumnHead } from '@/ui/components/table/ColumnHead'; import { IconBuildingSkyscraper, @@ -55,7 +55,7 @@ export const usePeopleColumns = () => { } /> ), cell: (props) => ( - { @@ -137,7 +137,7 @@ export const usePeopleColumns = () => { } /> ), cell: (props) => ( -