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

feat: scrolling of dnd during dragging, visible overlay for mobile

Browse Source
This commit is contained in:
AlexSserb
2025-08-12 19:15:11 +04:00
parent 5144c83e93
commit 1a98facd72
7 changed files with 31 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -34,10 +34,8 @@
"react-dom": "19.1.0",
"react-imask": "^7.6.1",
"react-redux": "^9.2.0",
"react-slick": "^0.31.0",
"redux-persist": "^6.0.0",
"sharp": "^0.34.3",
"slick-carousel": "^1.8.1",
"zod": "^4.0.14"
},
"devDependencies": {

2
src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css
View File

@ -4,6 +4,6 @@
width: 15vw;
@media (max-width: 48em) {
width: auto;
width: 90vw;
}
}

2
src/app/layout.tsx
View File

@ -1,7 +1,5 @@
import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { ReactNode } from "react";
import {
ColorSchemeScript,

14
src/components/dnd/FunnelDnd/FunnelDnd.module.css Normal file
View File

@ -0,0 +1,14 @@
.overlay {
cursor: grabbing;
border-radius: 10px;
@media (max-width: 48em) {
@mixin dark {
box-shadow: 2px 2px 15px 1px var(--mantine-color-dark-6);
}
@mixin light {
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
}
}
}

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

@ -12,8 +12,7 @@ import {
horizontalListSortingStrategy,
SortableContext,
} from "@dnd-kit/sortable";
import Slider from "react-slick";
import { Group } from "@mantine/core";
import { Group, ScrollArea } from "@mantine/core";
import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton";
import useDndSensors from "@/app/deals/hooks/useSensors";
import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn";
@ -64,18 +63,6 @@ const FunnelDnd = <
const sensors = useDndSensors();
const isMobile = useIsMobile();
const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1.1,
slidesToScroll: 1,
draggable: !activeItem && !activeContainer,
swipe: !activeItem && !activeContainer,
arrows: false,
swipeToSlide: true,
};
const renderContainers = () =>
containers.map(container => {
const containerItems = getItemsByContainer(container, items);
@ -102,10 +89,18 @@ const FunnelDnd = <
const renderBody = () => (
<>
{isMobile ? (
<Slider {...settings}>
{renderContainers()}
<CreateStatusButton />
</Slider>
<ScrollArea type={"never"}>
<Group
style={{
gap: 0,
display: "flex",
flexWrap: "nowrap",
alignItems: "start",
}}>
{renderContainers()}
<CreateStatusButton />
</Group>
</ScrollArea>
) : (
renderContainers()
)}

3
src/components/dnd/FunnelDnd/FunnelOverlay.tsx
View File

@ -1,5 +1,6 @@
import React, { ReactNode } from "react";
import { defaultDropAnimation, DragOverlay } from "@dnd-kit/core";
import styles from "@/components/dnd/FunnelDnd/FunnelDnd.module.css";
type Props<TContainer, TItem> = {
activeContainer: TContainer | null;
@ -16,7 +17,7 @@ const FunnelOverlay = <TContainer, TItem>({
}: Props<TContainer, TItem>) => {
return (
<DragOverlay dropAnimation={defaultDropAnimation}>
<div style={{ cursor: "grabbing" }}>
<div className={styles.overlay}>
{activeItem
? renderItem(activeItem)
: activeContainer

51
yarn.lock
View File

@ -5778,7 +5778,7 @@ __metadata:
languageName: node
linkType: hard
"classnames@npm:^2.2.5, classnames@npm:^2.5.1":
"classnames@npm:^2.5.1":
version: 2.5.1
resolution: "classnames@npm:2.5.1"
checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
@ -6156,10 +6156,8 @@ __metadata:
react-dom: "npm:19.1.0"
react-imask: "npm:^7.6.1"
react-redux: "npm:^9.2.0"
react-slick: "npm:^0.31.0"
redux-persist: "npm:^6.0.0"
sharp: "npm:^0.34.3"
slick-carousel: "npm:^1.8.1"
storybook: "npm:^8.6.8"
storybook-dark-mode: "npm:^4.0.2"
stylelint: "npm:^16.20.0"
@ -9643,15 +9641,6 @@ __metadata:
languageName: node
linkType: hard
"json2mq@npm:^0.2.0":
version: 0.2.0
resolution: "json2mq@npm:0.2.0"
dependencies:
string-convert: "npm:^0.2.0"
checksum: 10c0/fc9e2f2306572522d3e61d246afdf70b56ca9ea32f4ad5924c30949867851ab59c926bd0ffc821ebb54d32f3e82e95225f3906eacdb3e54c1ad49acdadf7e0c7
languageName: node
linkType: hard
"json5@npm:^2.1.2, json5@npm:^2.2.2, json5@npm:^2.2.3":
version: 2.2.3
resolution: "json5@npm:2.2.3"
@ -11746,21 +11735,6 @@ __metadata:
languageName: node
linkType: hard
"react-slick@npm:^0.31.0":
version: 0.31.0
resolution: "react-slick@npm:0.31.0"
dependencies:
classnames: "npm:^2.2.5"
json2mq: "npm:^0.2.0"
lodash.debounce: "npm:^4.0.8"
resize-observer-polyfill: "npm:^1.5.0"
peerDependencies:
react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
checksum: 10c0/ac006104323c61af6d8e208edb49038485458756b72c9e15622beef2700085bcdb1d21f028be1b3f199ff15616eab9d61a45aa09650c9ae1d72bf2a23be48616
languageName: node
linkType: hard
"react-style-singleton@npm:^2.2.2, react-style-singleton@npm:^2.2.3":
version: 2.2.3
resolution: "react-style-singleton@npm:2.2.3"
@ -12050,13 +12024,6 @@ __metadata:
languageName: node
linkType: hard
"resize-observer-polyfill@npm:^1.5.0":
version: 1.5.1
resolution: "resize-observer-polyfill@npm:1.5.1"
checksum: 10c0/5e882475067f0b97dc07e0f37c3e335ac5bc3520d463f777cec7e894bb273eddbfecb857ae668e6fb6881fd6f6bb7148246967172139302da50fa12ea3a15d95
languageName: node
linkType: hard
"resolve-cwd@npm:^3.0.0":
version: 3.0.0
resolution: "resolve-cwd@npm:3.0.0"
@ -12680,15 +12647,6 @@ __metadata:
languageName: node
linkType: hard
"slick-carousel@npm:^1.8.1":
version: 1.8.1
resolution: "slick-carousel@npm:1.8.1"
peerDependencies:
jquery: ">=1.8.0"
checksum: 10c0/e8c9c9a454c107cfee88689477b453449ed66d5343cf495d3135ec25ea736a0df862f625a9cdc8abd6262629ecef3343c5de686694831f99b13dfe837a1aa587
languageName: node
linkType: hard
"smart-buffer@npm:^4.2.0":
version: 4.2.0
resolution: "smart-buffer@npm:4.2.0"
@ -12870,13 +12828,6 @@ __metadata:
languageName: node
linkType: hard
"string-convert@npm:^0.2.0":
version: 0.2.1
resolution: "string-convert@npm:0.2.1"
checksum: 10c0/00673ed8a3106137395436537ace7d3672c91a3290da73466055daa0134331dc84bc58c54ba2d2ea40711adc5744426d3c8239dbfc30290438fa3e9ff65db528
languageName: node
linkType: hard
"string-length@npm:^4.0.2":
version: 4.0.2
resolution: "string-length@npm:4.0.2"