admin/twenty
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 && (