From 1a98facd724d52bc558957e5bb60972e8ad00be5 Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Tue, 12 Aug 2025 19:15:11 +0400 Subject: [PATCH] feat: scrolling of dnd during dragging, visible overlay for mobile --- package.json | 2 - .../StatusColumnWrapper.module.css | 2 +- src/app/layout.tsx | 2 - .../dnd/FunnelDnd/FunnelDnd.module.css | 14 +++++ src/components/dnd/FunnelDnd/FunnelDnd.tsx | 31 +++++------ .../dnd/FunnelDnd/FunnelOverlay.tsx | 3 +- yarn.lock | 51 +------------------ 7 files changed, 31 insertions(+), 74 deletions(-) create mode 100644 src/components/dnd/FunnelDnd/FunnelDnd.module.css diff --git a/package.json b/package.json index 90fc1b0..a2aaf7a 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css b/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css index 4b88a97..d4b1387 100644 --- a/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css +++ b/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css @@ -4,6 +4,6 @@ width: 15vw; @media (max-width: 48em) { - width: auto; + width: 90vw; } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0363360..a3900ab 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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, diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.module.css b/src/components/dnd/FunnelDnd/FunnelDnd.module.css new file mode 100644 index 0000000..50d1cee --- /dev/null +++ b/src/components/dnd/FunnelDnd/FunnelDnd.module.css @@ -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); + } + } +} diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx index 2e597bf..c4467c1 100644 --- a/src/components/dnd/FunnelDnd/FunnelDnd.tsx +++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx @@ -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 ? ( - - {renderContainers()} - - + + + {renderContainers()} + + + ) : ( renderContainers() )} diff --git a/src/components/dnd/FunnelDnd/FunnelOverlay.tsx b/src/components/dnd/FunnelDnd/FunnelOverlay.tsx index 5290b4e..18d175b 100644 --- a/src/components/dnd/FunnelDnd/FunnelOverlay.tsx +++ b/src/components/dnd/FunnelDnd/FunnelOverlay.tsx @@ -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 = { activeContainer: TContainer | null; @@ -16,7 +17,7 @@ const FunnelOverlay = ({ }: Props) => { return ( -
+
{activeItem ? renderItem(activeItem) : activeContainer diff --git a/yarn.lock b/yarn.lock index eb401ee..73c8cd3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"