Fast follow on draggable column re-order (#1667)

This commit is contained in:
Charles Bochet
2023-09-19 18:55:01 -07:00
committed by GitHub
parent acee401371
commit 3bde7bc252
2 changed files with 38 additions and 19 deletions

View File

@ -28,6 +28,7 @@ export const MenuItemLeftContent = ({
<IconGripVertical
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
color={theme.font.color.extraLight}
/>
)}
{LeftIcon && (

View File

@ -57,26 +57,44 @@ export const ViewFieldsVisibilityDropdownSection = <
draggableId={field.key}
index={index}
>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<MenuItem
isDraggable={isDraggable}
key={field.key}
LeftIcon={field.Icon}
iconButtons={[
{
Icon: field.isVisible ? IconMinus : IconPlus,
onClick: () => onVisibilityChange(field),
{(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,',
),
},
]}
text={field.name}
/>
</div>
)}
}}
{...draggableProvided.dragHandleProps}
>
<MenuItem
isDraggable={isDraggable}
key={field.key}
LeftIcon={field.Icon}
iconButtons={[
{
Icon: field.isVisible
? IconMinus
: IconPlus,
onClick: () => onVisibilityChange(field),
},
]}
text={field.name}
/>
</div>
);
}}
</Draggable>
))}
{provided.placeholder}