fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: raw slider for deals on mobile

Browse Source
This commit is contained in:
AlexSserb
2025-08-10 19:29:02 +04:00
parent 54cf883a3c
commit 7815f99fa4
12 changed files with 271 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/dnd/FunnelDnd/FunnelDnd.tsx
View File

@ -12,12 +12,15 @@ import {
horizontalListSortingStrategy,
SortableContext,
} from "@dnd-kit/sortable";
import { isMobile } from "react-device-detect";
import Slider from "react-slick";
import { Group } from "@mantine/core";
import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton";
import useDndSensors from "@/app/deals/hooks/useSensors";
import SortableItem from "@/components/dnd/SortableItem";
import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn";
import FunnelOverlay from "@/components/dnd/FunnelDnd/FunnelOverlay";
import { BaseDraggable } from "@/components/dnd/types/types";
import FunnelColumn from "./FunnelColumn";
import FunnelOverlay from "./FunnelOverlay";
import SortableItem from "../SortableItem";
type Props<TContainer, TItem> = {
containers: TContainer[];
@ -36,7 +39,7 @@ type Props<TContainer, TItem> = {
getItemsByContainer: (container: TContainer, items: TItem[]) => TItem[];
activeContainer: TContainer | null;
activeItem: TItem | null;
disabled?: boolean;
disabledColumns?: boolean;
};
const FunnelDnd = <
@ -56,10 +59,77 @@ const FunnelDnd = <
getItemsByContainer,
activeContainer,
activeItem,
disabled = false,
disabledColumns = false,
}: Props<TContainer, TItem>) => {
const sensors = useDndSensors();
const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
draggable: !activeItem && !activeContainer,
swipe: !activeItem && !activeContainer,
arrows: false,
};
const renderContainers = () =>
containers.map(container => {
const containerItems = getItemsByContainer(container, items);
const containerId = getContainerId(container);
return (
<SortableItem
key={containerId}
id={containerId}
disabled={disabledColumns}
renderItem={() =>
renderContainer(
container,
<FunnelColumn
id={containerId}
items={containerItems}
renderItem={renderItem}
/>
)
}
/>
);
});
const renderBody = () => (
<>
{isMobile ? (
<Slider {...settings}>
{renderContainers()}
<CreateStatusButton />
</Slider>
) : (
renderContainers()
)}
<FunnelOverlay
activeContainer={activeContainer}
activeItem={activeItem}
renderContainer={container => {
const containerItems = getItemsByContainer(
container,
items
);
const containerId = getContainerId(container);
return renderContainerOverlay(
container,
<FunnelColumn
id={containerId}
items={containerItems}
renderItem={renderItem}
/>
);
}}
renderItem={renderItemOverlay}
/>
</>
);
return (
<DndContext
sensors={sensors}
@ -70,56 +140,16 @@ const FunnelDnd = <
<SortableContext
items={containers.map(getContainerId)}
strategy={horizontalListSortingStrategy}>
<Group
gap="xs"
wrap="nowrap"
align="start">
{containers.map(container => {
const containerItems = getItemsByContainer(
container,
items
);
const containerId = getContainerId(container);
return (
<SortableItem
key={containerId}
id={containerId}
disabled={disabled}
renderItem={() =>
renderContainer(
container,
<FunnelColumn
id={containerId}
items={containerItems}
renderItem={renderItem}
/>
)
}
/>
);
})}
<FunnelOverlay
activeContainer={activeContainer}
activeItem={activeItem}
renderContainer={container => {
const containerItems = getItemsByContainer(
container,
items
);
const containerId = getContainerId(container);
return renderContainerOverlay(
container,
<FunnelColumn
id={containerId}
items={containerItems}
renderItem={renderItem}
disabled={disabled}
/>
);
}}
renderItem={renderItemOverlay}
/>
</Group>
{isMobile ? (
renderBody()
) : (
<Group
gap="xs"
wrap="nowrap"
align="start">
{renderBody()}
</Group>
)}
</SortableContext>
</DndContext>
);