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

refacto clickoutside componentv2 (#11644)

Browse Source 
Switch to ComponentV2

Friday morning refacto & chill with @charles

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Guillim
2025-04-18 17:48:30 +02:00
committed by GitHub
parent cf5649a1df
commit 8512904c0a
25 changed files with 151 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
View File

@ -153,7 +153,6 @@ export const ObjectOptionsDropdownMenuContent = () => {
</div>
{currentView?.key === 'INDEX' && (
<AppTooltip
// eslint-disable-next-line
anchorSelect={`#delete-view-menu-item`}
content={t`Not available on Default View`}
noArrow

10
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx
View File

@ -17,8 +17,8 @@ import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useState } from 'react';
import { useDebouncedCallback } from 'use-debounce';
import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
import { useDebouncedCallback } from 'use-debounce';
const StyledDropdownMenuIconAndNameContainer = styled.div`
align-items: center;
@ -52,11 +52,13 @@ const StyledMainText = styled.div`
max-width: 100%;
`;
type ObjectOptionsDropdownMenuViewNameProps = {
currentView: View;
};
export const ObjectOptionsDropdownMenuViewName = ({
currentView,
}: {
currentView: View;
}) => {
}: ObjectOptionsDropdownMenuViewNameProps) => {
const [viewPickerSelectedIcon, setViewPickerSelectedIcon] =
useRecoilComponentStateV2(viewPickerSelectedIconComponentState);

6
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
View File

@ -62,7 +62,7 @@ export const RecordBoard = () => {
useContext(RecordBoardContext);
const boardRef = useRef<HTMLDivElement>(null);
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
RECORD_BOARD_CLICK_OUTSIDE_LISTENER_ID,
);
@ -73,11 +73,11 @@ export const RecordBoard = () => {
const handleDragSelectionStart = () => {
closeDropdown(actionMenuId);
toggleClickOutsideListener(false);
toggleClickOutside(false);
};
const handleDragSelectionEnd = () => {
toggleClickOutsideListener(true);
toggleClickOutside(true);
};
const visibleRecordGroupIds = useRecoilComponentFamilyValueV2(

1
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx
View File

@ -24,6 +24,7 @@ const StyledNewButtonContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(4)};
`;
// eslint-disable-next-line @nx/workspace-no-hardcoded-colors
const StyledSkeletonCardContainer = styled.div`
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.background.quaternary};

5
packages/twenty-front/src/modules/object-record/record-table/__stories__/RecordTable.stories.tsx
View File

@ -62,6 +62,11 @@ export const HeaderMenuOpen: Story = {
};
export const ScrolledLeft: Story = {
parameters: {
container: {
width: 1000,
},
},
play: async () => {
const canvas = within(document.body);
await canvas.findByText('Linkedin');

6
packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View File

@ -20,7 +20,7 @@ export const RecordTable = () => {
const tableBodyRef = useRef<HTMLTableElement>(null);
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
);
@ -57,11 +57,11 @@ export const RecordTable = () => {
const handleDragSelectionStart = () => {
resetTableRowSelection();
toggleClickOutsideListener(false);
toggleClickOutside(false);
};
const handleDragSelectionEnd = () => {
toggleClickOutsideListener(true);
toggleClickOutside(true);
};
return (

6
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellInGroup.ts
View File

@ -15,7 +15,7 @@ export const useCloseRecordTableCellInGroup = () => {
const setHotkeyScope = useSetHotkeyScope();
const { setDragSelectionStartEnabled } = useDragSelect();
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
FOCUS_CLICK_OUTSIDE_LISTENER_ID,
);
@ -24,7 +24,7 @@ export const useCloseRecordTableCellInGroup = () => {
const closeTableCellInGroup = useRecoilCallback(
() => () => {
toggleClickOutsideListener(true);
toggleClickOutside(true);
setDragSelectionStartEnabled(true);
closeCurrentTableCellInEditMode();
setHotkeyScope(TableHotkeyScope.TableFocus);
@ -33,7 +33,7 @@ export const useCloseRecordTableCellInGroup = () => {
closeCurrentTableCellInEditMode,
setDragSelectionStartEnabled,
setHotkeyScope,
toggleClickOutsideListener,
toggleClickOutside,
],
);

6
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellNoGroup.ts
View File

@ -15,7 +15,7 @@ export const useCloseRecordTableCellNoGroup = () => {
const { setDragSelectionStartEnabled } = useDragSelect();
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
FOCUS_CLICK_OUTSIDE_LISTENER_ID,
);
@ -23,7 +23,7 @@ export const useCloseRecordTableCellNoGroup = () => {
useCloseCurrentTableCellInEditMode(recordTableId);
const closeTableCellNoGroup = useCallback(() => {
toggleClickOutsideListener(true);
toggleClickOutside(true);
setDragSelectionStartEnabled(true);
closeCurrentTableCellInEditMode();
setHotkeyScope(TableHotkeyScope.TableFocus);
@ -31,7 +31,7 @@ export const useCloseRecordTableCellNoGroup = () => {
closeCurrentTableCellInEditMode,
setDragSelectionStartEnabled,
setHotkeyScope,
toggleClickOutsideListener,
toggleClickOutside,
]);
return {

22
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts
View File

@ -24,7 +24,9 @@ import { recordTableCellEditModePositionComponentState } from '@/object-record/r
import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { useNavigate } from 'react-router-dom';
@ -46,9 +48,11 @@ export type OpenTableCellArgs = {
};
export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
const { getClickOutsideListenerIsActivatedState } =
useClickOustideListenerStates(RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID);
const clickOutsideListenerIsActivatedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsActivatedComponentState,
RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
);
const { indexIdentifierUrl } = useRecordIndexContextOrThrow();
const setCurrentTableCellInEditModePosition = useSetRecoilComponentStateV2(
recordTableCellEditModePositionComponentState,
@ -58,7 +62,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
const { setDragSelectionStartEnabled } = useDragSelect();
const leaveTableFocus = useLeaveTableFocus(tableScopeId);
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
FOCUS_CLICK_OUTSIDE_LISTENER_ID,
);
@ -94,7 +98,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
return;
}
set(getClickOutsideListenerIsActivatedState, false);
set(clickOutsideListenerIsActivatedState, false);
const isFirstColumnCell = cellPosition.column === 0;
@ -163,7 +167,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
),
});
toggleClickOutsideListener(false);
toggleClickOutside(false);
setActiveDropdownFocusIdAndMemorizePrevious(
getDropdownFocusIdForRecordField(
@ -174,12 +178,12 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
);
},
[
getClickOutsideListenerIsActivatedState,
clickOutsideListenerIsActivatedState,
setDragSelectionStartEnabled,
openFieldInput,
setCurrentTableCellInEditModePosition,
initDraftValue,
toggleClickOutsideListener,
toggleClickOutside,
setActiveDropdownFocusIdAndMemorizePrevious,
leaveTableFocus,
navigate,