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

fix: mantine carousel

Browse Source
This commit is contained in:
AlexSserb
2025-08-14 11:16:33 +04:00
parent 20ade53d52
commit b6cec9a308
8 changed files with 119 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -13,6 +13,7 @@
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/modifiers": "^9.0.0",
"@dnd-kit/sortable": "^10.0.0",
"@mantine/carousel": "^8.2.4",
"@mantine/core": "8.1.2",
"@mantine/form": "^8.1.3",
"@mantine/hooks": "8.1.2",
@ -25,6 +26,8 @@
"@tanstack/react-query": "^5.83.0",
"axios": "^1.11.0",
"classnames": "^2.5.1",
"embla-carousel": "^8.6.0",
"embla-carousel-react": "^8.6.0",
"framer-motion": "^12.23.7",
"i18n-iso-countries": "^7.14.0",
"lexorank": "^1.0.5",

12
src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css Normal file
View File

@ -0,0 +1,12 @@
.container {
flex-wrap: nowrap;
border-bottom: solid blue 3px;
margin-bottom: 3px;
cursor: pointer;
@media (max-width: 48em) {
width: 80vw;
margin-right: 8vw;
}
}

50
src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx
View File

@ -1,37 +1,37 @@
import React from "react";
import { IconPlus } from "@tabler/icons-react";
import { Box } from "@mantine/core";
import { Box, Center, Stack } from "@mantine/core";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import styles from "./CreateStatusButton.module.css";
const CreateStatusButton = () => {
const { onCreateStatus } = useStatusesContext();
return (
<Box
ml={6}
className={"flex-nowrap border-b-3 border-blue-500 mb-3"}
style={{
cursor: "pointer",
}}>
<InPlaceInput
placeholder={"Название колонки"}
onComplete={onCreateStatus}
getChildren={startEditing => (
<Box
p={15}
onClick={() => startEditing()}>
<IconPlus size={20} />
</Box>
)}
modalTitle={"Создание колонки"}
inputStyles={{
wrapper: {
padding: 4,
},
}}
/>
</Box>
<Stack>
<Box
ml={6}
className={styles.container}>
<InPlaceInput
placeholder={"Название колонки"}
onComplete={onCreateStatus}
getChildren={startEditing => (
<Center
p={15}
onClick={() => startEditing()}>
<IconPlus size={20} />
</Center>
)}
modalTitle={"Создание колонки"}
inputStyles={{
wrapper: {
padding: 4,
},
}}
/>
</Box>
</Stack>
);
};

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

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

1
src/app/layout.tsx
View File

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

19
src/components/dnd/FunnelDnd/FunnelDnd.module.css
View File

@ -12,3 +12,22 @@
}
}
}
.indicator {
height: 4px;
@mixin light {
background-color: lightgray;
}
@mixin dark {
background-color: var(--mantine-color-dark-6);
}
&[data-active] {
@mixin light {
background-color: gray;
}
@mixin dark {
background-color: var(--mantine-color-dark-5);
}
}
}

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

@ -12,7 +12,8 @@ import {
horizontalListSortingStrategy,
SortableContext,
} from "@dnd-kit/sortable";
import { Group, ScrollArea } from "@mantine/core";
import { Carousel } from "@mantine/carousel";
import { Group } from "@mantine/core";
import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
import useDndSensors from "@/app/deals/hooks/useSensors";
import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn";
@ -20,6 +21,7 @@ import FunnelOverlay from "@/components/dnd/FunnelDnd/FunnelOverlay";
import { BaseDraggable } from "@/components/dnd/types/types";
import useIsMobile from "@/hooks/useIsMobile";
import SortableItem from "../SortableItem";
import styles from "./FunnelDnd.module.css";
type Props<TContainer, TItem> = {
containers: TContainer[];
@ -89,18 +91,16 @@ const FunnelDnd = <
const renderBody = () => (
<>
{isMobile ? (
<ScrollArea type={"never"}>
<Group
style={{
gap: 0,
display: "flex",
flexWrap: "nowrap",
alignItems: "start",
}}>
{renderContainers()}
<CreateStatusButton />
</Group>
</ScrollArea>
<Carousel
slideSize={"80%"}
slideGap={"md"}
pb={"xl"}
withControls={false}
withIndicators
classNames={styles}>
{renderContainers()}
<CreateStatusButton />
</Carousel>
) : (
renderContainers()
)}

45
yarn.lock
View File

@ -2857,6 +2857,20 @@ __metadata:
languageName: node
linkType: hard
"@mantine/carousel@npm:^8.2.4":
version: 8.2.4
resolution: "@mantine/carousel@npm:8.2.4"
peerDependencies:
"@mantine/core": 8.2.4
"@mantine/hooks": 8.2.4
embla-carousel: ">=8.0.0"
embla-carousel-react: ">=8.0.0"
react: ^18.x || ^19.x
react-dom: ^18.x || ^19.x
checksum: 10c0/3aa2700d5e3bf6be1316af3a48ba006db7ed1490ece78417952aa8b32afbaadc3195daffcf8eb9f60f469c2135c130d32d1494f30cb5a8a8fa991a97c37e3a58
languageName: node
linkType: hard
"@mantine/core@npm:8.1.2":
version: 8.1.2
resolution: "@mantine/core@npm:8.1.2"
@ -6107,6 +6121,7 @@ __metadata:
"@hey-api/client-next": "npm:^0.5.1"
"@hey-api/openapi-ts": "npm:^0.80.1"
"@ianvs/prettier-plugin-sort-imports": "npm:^4.4.2"
"@mantine/carousel": "npm:^8.2.4"
"@mantine/core": "npm:8.1.2"
"@mantine/form": "npm:^8.1.3"
"@mantine/hooks": "npm:8.1.2"
@ -6136,6 +6151,8 @@ __metadata:
axios: "npm:^1.11.0"
babel-loader: "npm:^10.0.0"
classnames: "npm:^2.5.1"
embla-carousel: "npm:^8.6.0"
embla-carousel-react: "npm:^8.6.0"
eslint: "npm:^9.29.0"
eslint-config-mantine: "npm:^4.0.3"
eslint-plugin-eslint-comments: "npm:^3.2.0"
@ -6728,6 +6745,34 @@ __metadata:
languageName: node
linkType: hard
"embla-carousel-react@npm:^8.6.0":
version: 8.6.0
resolution: "embla-carousel-react@npm:8.6.0"
dependencies:
embla-carousel: "npm:8.6.0"
embla-carousel-reactive-utils: "npm:8.6.0"
peerDependencies:
react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
checksum: 10c0/461b0c427a6fca62e730c7b39d08e9c55b01a2138c173d5b9ebf77ec92092a900b45ac384731c77382b48d5d65946994d3abba6e9899a66d6e16f8ddf191ed1c
languageName: node
linkType: hard
"embla-carousel-reactive-utils@npm:8.6.0":
version: 8.6.0
resolution: "embla-carousel-reactive-utils@npm:8.6.0"
peerDependencies:
embla-carousel: 8.6.0
checksum: 10c0/33d07e6df4d8dec9b4fc95858838ea2d5e5df078039c05b2a342c05ba4979d8d18564a1c607da445fed744daf969a0b5a90124ce487a854e86ced6f0458b51e9
languageName: node
linkType: hard
"embla-carousel@npm:8.6.0, embla-carousel@npm:^8.6.0":
version: 8.6.0
resolution: "embla-carousel@npm:8.6.0"
checksum: 10c0/f4c598e7be28b70340d31ffd2bebb2472db370b0c81d9b089bf9555cf618695f35dc4a0694565c994c9ab972731123063f945aa09ff485df0df761d79c6a08ef
languageName: node
linkType: hard
"emittery@npm:^0.13.1":
version: 0.13.1
resolution: "emittery@npm:0.13.1"