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

feat: persist table columns on change (#1697)

Browse Source 
* feat: persist table columns on change

Closes #1580

* fix: fix drag-and-select on Table Options dropdown toggle
This commit is contained in:
Thaïs
2023-09-21 22:15:57 +02:00
committed by GitHub
parent 189bf4a627
commit ab0cdbf960
15 changed files with 149 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx
View File

@ -1,10 +1,11 @@
import { useResetRecoilState } from 'recoil';
import { useRecoilState, useResetRecoilState } from 'recoil';
import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
import { isDraggingAndSelectingState } from '../../states/isDraggingAndSelectingState';
import { TableOptionsDropdownButton } from './TableOptionsDropdownButton';
import { TableOptionsDropdownContent } from './TableOptionsDropdownContent';
@ -18,6 +19,14 @@ export const TableOptionsDropdown = ({
}: TableOptionsDropdownProps) => {
const resetViewEditMode = useResetRecoilState(viewEditModeState);
const [, setIsDraggingAndSelecting] = useRecoilState(
isDraggingAndSelectingState,
);
const handleClose = () => setIsDraggingAndSelecting(true);
const handleOpen = () => setIsDraggingAndSelecting(false);
return (
<DropdownButton
buttonComponents={<TableOptionsDropdownButton />}
@ -25,6 +34,8 @@ export const TableOptionsDropdown = ({
dropdownId={TableOptionsDropdownId}
dropdownComponents={<TableOptionsDropdownContent />}
onClickOutside={resetViewEditMode}
onClose={handleClose}
onOpen={handleOpen}
/>
);
};

13
front/src/modules/ui/table/options/components/TableOptionsDropdownButton.tsx
View File

@ -1,27 +1,16 @@
import { useRecoilState } from 'recoil';
import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
import { TableOptionsDropdownId } from '@/ui/table/constants/TableOptionsDropdownId';
import { isDraggingAndSelectingState } from '@/ui/table/states/isDraggingAndSelectingState';
export const TableOptionsDropdownButton = () => {
const [, setIsDraggingAndSelecting] = useRecoilState(
isDraggingAndSelectingState,
);
const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
dropdownId: TableOptionsDropdownId,
});
const toggleDropdown = () => {
setIsDraggingAndSelecting(false);
toggleDropdownButton();
};
return (
<StyledHeaderDropdownButton
isUnfolded={isDropdownButtonOpen}
onClick={toggleDropdown}
onClick={toggleDropdownButton}
>
Options
</StyledHeaderDropdownButton>