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

Chore: Improve dropdown draggable list (#1738)

Browse Source 
* draggable menu item component

* Menu item isDragged prop removed

* Droppable list component

* Draggablee item component

* Drag and drop use refactor

* lint fix

* isDragDisabled check on DraggableItem

* revert changes on non visibility items

* MenuItemDraggable stroybook

* DraggableItem storybook

* lint fix

* lint fix

* BoardColumnMenu css fix

* showGrip prop addition

* isDragged css fix
This commit is contained in:
Aditya Pimpalkar
2023-10-04 14:56:25 +01:00
committed by GitHub
parent 1e402aca5f
commit 93a01c7292
11 changed files with 368 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
View File

@ -1,21 +1,20 @@
import styled from '@emotion/styled';
import {
DragDropContext,
Draggable,
Droppable,
DropResult,
OnDragEndResponder,
ResponderProvided,
} from '@hello-pangea/dnd';
import { DraggableItem } from '@/ui/draggable-list/components/DraggableItem';
import { DroppableList } from '@/ui/draggable-list/components/DroppableList';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
import { IconMinus, IconPlus } from '@/ui/icon';
import { MenuItem } from '@/ui/menu-item/components/MenuItem';
import { MenuItemDraggable } from '@/ui/menu-item/components/MenuItemDraggable';
import { ViewFieldForVisibility } from '../types/ViewFieldForVisibility';
type OwnProps = {
type ViewFieldsVisibilityDropdownSectionProps = {
fields: ViewFieldForVisibility[];
onVisibilityChange: (field: ViewFieldForVisibility) => void;
title: string;
@ -23,17 +22,13 @@ type OwnProps = {
onDragEnd?: OnDragEndResponder;
};
const StyledDropdownMenuItemWrapper = styled.div`
width: 100%;
`;
export const ViewFieldsVisibilityDropdownSection = ({
fields,
onVisibilityChange,
title,
isDraggable,
onDragEnd,
}: OwnProps) => {
}: ViewFieldsVisibilityDropdownSectionProps) => {
const handleOnDrag = (result: DropResult, provided: ResponderProvided) => {
onDragEnd?.(result, provided);
};
@ -54,57 +49,31 @@ export const ViewFieldsVisibilityDropdownSection = ({
<StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
<StyledDropdownMenuItemsContainer>
{isDraggable && (
<DragDropContext onDragEnd={handleOnDrag}>
<StyledDropdownMenuItemWrapper>
<Droppable droppableId="droppable">
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{fields.map((field, index) => (
<Draggable
<DroppableList
droppableId="droppable"
onDragEnd={handleOnDrag}
draggableItems={
<>
{fields.map((field, index) => (
<DraggableItem
key={field.key}
draggableId={field.key}
index={index}
isDragDisabled={index === 0}
itemComponent={
<MenuItemDraggable
key={field.key}
draggableId={field.key}
index={index}
LeftIcon={field.Icon}
iconButtons={getIconButtons(index, field)}
text={field.name}
isDragDisabled={index === 0}
>
{(draggableProvided) => {
const draggableStyle =
draggableProvided.draggableProps.style;
return (
<div
ref={draggableProvided.innerRef}
{...{
...draggableProvided.draggableProps,
style: {
...draggableStyle,
left: 'auto',
top: 'auto',
transform: draggableStyle?.transform?.replace(
/\(-?\d+px,/,
'(0,',
),
},
}}
{...draggableProvided.dragHandleProps}
>
<MenuItem
isDraggable={index !== 0 && isDraggable}
key={field.key}
LeftIcon={field.Icon}
iconButtons={getIconButtons(index, field)}
text={field.name}
/>
</div>
);
}}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</StyledDropdownMenuItemWrapper>
</DragDropContext>
/>
}
/>
))}
</>
}
/>
)}
{!isDraggable &&
fields.map((field) => (