mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor/scope and context (#1960)

Browse Source 
* wip

* Test with Dropdown

* wip

* wip

* Finished removing DropdownRecoilScopeContext

* Fix from PR
This commit is contained in:
Lucas Bordeau
2023-10-11 15:35:47 +02:00
committed by GitHub
parent a342af74d1
commit 22451a68b3
61 changed files with 531 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
front/src/modules/ui/data-table/components/ColumnHeadWithDropdown.tsx
View File

@ -1,4 +1,5 @@
import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
import { DropdownScope } from '@/ui/dropdown/scopes/DropdownScope';
import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
import { ColumnDefinition } from '../types/ColumnDefinition';
@ -20,19 +21,20 @@ export const ColumnHeadWithDropdown = ({
primaryColumnKey,
}: ColumnHeadWithDropdownProps) => {
return (
<DropdownMenu
clickableComponent={<ColumnHead column={column} />}
dropdownId={column.key + '-header'}
dropdownComponents={
<DataTableColumnDropdownMenu
column={column}
isFirstColumn={isFirstColumn}
isLastColumn={isLastColumn}
primaryColumnKey={primaryColumnKey}
/>
}
dropdownHotkeyScope={{ scope: column.key + '-header' }}
dropdownOffset={{ x: 0, y: -8 }}
/>
<DropdownScope dropdownScopeId={column.key + '-header'}>
<DropdownMenu
clickableComponent={<ColumnHead column={column} />}
dropdownComponents={
<DataTableColumnDropdownMenu
column={column}
isFirstColumn={isFirstColumn}
isLastColumn={isLastColumn}
primaryColumnKey={primaryColumnKey}
/>
}
dropdownHotkeyScope={{ scope: column.key + '-header' }}
dropdownOffset={{ x: 0, y: -8 }}
/>
</DropdownScope>
);
};

2
front/src/modules/ui/data-table/components/DataTableColumnDropdownMenu.tsx
View File

@ -26,7 +26,7 @@ export const DataTableColumnDropdownMenu = ({
useTableColumns();
const { closeDropdown } = useDropdown({
dropdownId: ColumnHeadDropdownId,
dropdownScopeId: ColumnHeadDropdownId,
});
const handleColumnMoveLeft = () => {

57
front/src/modules/ui/data-table/components/DataTableHeader.tsx
View File

@ -3,10 +3,8 @@ import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilState } from 'recoil';
import { IconButton } from '@/ui/button/components/IconButton';
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
import { IconPlus } from '@/ui/icon';
import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useTableColumns } from '../hooks/useTableColumns';
@ -177,36 +175,33 @@ export const DataTableHeader = () => {
>
<SelectAllCheckbox />
</th>
<RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
{visibleTableColumns.map((column, index) => (
<StyledColumnHeaderCell
key={column.key}
isResizing={resizedFieldKey === column.key}
columnWidth={Math.max(
tableColumnsByKey[column.key].size +
(resizedFieldKey === column.key ? resizeFieldOffset : 0),
COLUMN_MIN_WIDTH,
)}
>
<StyledColumnHeadContainer>
<ColumnHeadWithDropdown
column={column}
isFirstColumn={index === 1}
isLastColumn={index === visibleTableColumns.length - 1}
primaryColumnKey={primaryColumn.key}
/>
</StyledColumnHeadContainer>
<StyledResizeHandler
className="cursor-col-resize"
role="separator"
onPointerDown={() => {
setResizedFieldKey(column.key);
}}
{visibleTableColumns.map((column, index) => (
<StyledColumnHeaderCell
key={column.key}
isResizing={resizedFieldKey === column.key}
columnWidth={Math.max(
tableColumnsByKey[column.key].size +
(resizedFieldKey === column.key ? resizeFieldOffset : 0),
COLUMN_MIN_WIDTH,
)}
>
<StyledColumnHeadContainer>
<ColumnHeadWithDropdown
column={column}
isFirstColumn={index === 1}
isLastColumn={index === visibleTableColumns.length - 1}
primaryColumnKey={primaryColumn.key}
/>
</StyledColumnHeaderCell>
))}
</RecoilScope>
</StyledColumnHeadContainer>
<StyledResizeHandler
className="cursor-col-resize"
role="separator"
onPointerDown={() => {
setResizedFieldKey(column.key);
}}
/>
</StyledColumnHeaderCell>
))}
<th>
{hiddenTableColumns.length > 0 && (

2
front/src/modules/ui/data-table/options/components/TableOptionsDropdownButton.tsx
View File

@ -4,7 +4,7 @@ import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
export const TableOptionsDropdownButton = () => {
const { isDropdownOpen, toggleDropdown } = useDropdown({
dropdownId: TableOptionsDropdownId,
dropdownScopeId: TableOptionsDropdownId,
});
return (

5
front/src/modules/ui/data-table/options/components/TableOptionsDropdownContent.tsx
View File

@ -22,7 +22,6 @@ import { currentViewScopedSelector } from '@/ui/view-bar/states/selectors/curren
import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
import { useTableColumns } from '../../hooks/useTableColumns';
import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
@ -37,9 +36,7 @@ export const TableOptionsDropdownContent = () => {
const scopeId = useRecoilScopeId(TableRecoilScopeContext);
const { onImport } = useContext(ViewBarContext);
const { closeDropdown } = useDropdown({
dropdownId: TableOptionsDropdownId,
});
const { closeDropdown } = useDropdown();
const [currentMenu, setCurrentMenu] = useState<TableOptionsMenu | undefined>(
undefined,

5
front/src/modules/ui/data-table/options/components/__stories__/TableOptionsDropdown.stories.tsx
View File

@ -1,7 +1,6 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
@ -20,9 +19,7 @@ const meta: Meta<typeof TableOptionsDropdown> = {
ViewBarRecoilScopeContext: TableRecoilScopeContext,
}}
>
<RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
<Story />
</RecoilScope>
<Story />
</ViewBarContext.Provider>
</RecoilScope>
),

36
front/src/modules/ui/data-table/table-header/components/TableHeader.tsx
View File

@ -2,8 +2,6 @@ import { useContext } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useRecoilCallback } from 'recoil';
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { ViewBar } from '@/ui/view-bar/components/ViewBar';
import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
@ -34,23 +32,21 @@ export const TableHeader = () => {
);
return (
<RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
<ViewBarContext.Provider
value={{
...viewBarContextProps,
onCurrentViewSubmit,
onViewSelect: handleViewSelect,
}}
>
<ViewBar
optionsDropdownButton={
<TableOptionsDropdown
customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
/>
}
optionsDropdownKey={TableOptionsDropdownId}
/>
</ViewBarContext.Provider>
</RecoilScope>
<ViewBarContext.Provider
value={{
...viewBarContextProps,
onCurrentViewSubmit,
onViewSelect: handleViewSelect,
}}
>
<ViewBar
optionsDropdownButton={
<TableOptionsDropdown
customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
/>
}
optionsDropdownScopeId={TableOptionsDropdownId}
/>
</ViewBarContext.Provider>
);
};