Skip to content

Commit 6d3c34f

Browse files
Jee-vimJee-vim
committed
refactor(minor pagination, checkbox overflow)
1 parent 850c75b commit 6d3c34f

File tree

23 files changed

+284
-21
lines changed

23 files changed

+284
-21
lines changed

‎app/(root)/component/acordion/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Acordion",
5+
description: "Acordion component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/component/button/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Button",
5+
description: "Button component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/component/canban/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Canban",
5+
description: "Canban component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/component/canban/page.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,15 @@ export default function Page() {
2222
return (
2323
<div>
2424
<Title title="Canban" subtitle="canban" />
25-
<Wrapper className="overflow-x-auto no-scrollbar canban-container">
26-
<Canban initialData={initialData} />
25+
<Wrapper>
26+
<div className="pr-3 overflow-x-auto no-scrollbar canban-container">
27+
<Canban initialData={initialData} />
28+
</div>
2729
</Wrapper>
28-
<Pagination prev={ROUTES.componentUrl("gallery")} next={ROUTES.componentUrl("/")} />
30+
<Pagination
31+
prev={ROUTES.componentUrl("gallery")}
32+
next={ROUTES.componentUrl("/")}
33+
/>
2934
</div>
3035
);
3136
}

‎app/(root)/component/gallery/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Gallery",
5+
description: "Gallery component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/component/modal/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Modal",
5+
description: "Modal component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/component/paralax/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Paralax",
5+
description: "Paralax component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/component/table/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Table",
5+
description: "Table component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/form/checkbox/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Checkbox",
5+
description: "Checkbox component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/form/dropdown/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Dropdown",
5+
description: "Dropdown component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/form/input-dynamic/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Input Dynamic",
5+
description: "Input Dynamic component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/form/input-file/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Input File",
5+
description: "Input File component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/form/input-file/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function Page() {
2929
</Wrapper>
3030
<Pagination
3131
prev={ROUTES.formUrl("input-dynamic")}
32-
next={ROUTES.formUrl("input-textarea")}
32+
next={ROUTES.formUrl("textarea")}
3333
/>
3434
</div>
3535
);

‎app/(root)/form/input-suggest/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Input Suggestion",
5+
description: "Input Suggestion component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/form/input-tag/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Input Tag",
5+
description: "Input Tag component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/form/input/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Input",
5+
description: "Input component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/form/otp/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | OTP",
5+
description: "OTP component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/form/otp/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function Page() {
2020
<p className="description">You can also inrease or decrease length</p>
2121
<Pagination
2222
prev={ROUTES.formUrl("checkbox")}
23-
next={ROUTES.formUrl("button")}
23+
next={ROUTES.componentUrl("acordion")}
2424
/>
2525
</div>
2626
);

‎app/(root)/form/textarea/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "ZComponent | Textarea",
5+
description: "Textarea component with React with Tailwind CSS",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return <main>{children}</main>;
14+
}

‎app/(root)/layout.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import Link from "next/link";
2+
import { Metadata } from "next";
23

34
import MobileNav from "@/components/ui/MobileNav";
45
import Sidebar from "@/components/ui/Sidebar";
56
import Footer from "@/components/ui/Footer";
67
import styles from "@/styles/component/layout.module.css";
78

9+
export const metadata: Metadata = {
10+
title: "ZComp | %s",
11+
description: "Component library for React with Tailwind CSS",
12+
};
13+
814
export default function RootLayout({
915
children,
1016
}: Readonly<{

‎components/component/canban/index.tsx

+25-8
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,23 @@ import Card, { DropIndicator } from "./card";
33

44
const KanbanBoard = ({ initialData }: any) => {
55
const [data, setData] = useState(initialData);
6+
const [draggedCard, setDraggedCard] = useState(null);
7+
8+
const getTouchPosition = (e: TouchEvent): number => {
9+
return e.touches[0].clientY;
10+
};
11+
12+
const isDragEvent = (e: DragEvent | TouchEvent): e is DragEvent => {
13+
return (e as DragEvent).dataTransfer !== undefined;
14+
};
615

716
const dragStart = (e: any, card: any) => {
817
const { position } = card;
9-
e?.dataTransfer?.setData("cardID", position);
18+
if (isDragEvent(e)) e?.dataTransfer?.setData("cardID", position);
19+
setDraggedCard(position);
1020
};
1121

12-
const highlightIndicator = (e: DragEvent, column: string) => {
22+
const highlightIndicator = (e: DragEvent | TouchEvent, column: string) => {
1323
const indicator = getIndicator(column);
1424
clearHighlight(indicator, column);
1525
const el = getNearestElement(e, indicator);
@@ -29,11 +39,14 @@ const KanbanBoard = ({ initialData }: any) => {
2939

3040
const getNearestElement = (e: any, indicator: any) => {
3141
const DISTANCE = 50;
42+
const clientY = (e as TouchEvent).touches
43+
? (e as TouchEvent)?.touches[0]?.clientY
44+
: (e as DragEvent)?.clientY;
3245

3346
const el = indicator?.reduce(
3447
(prev: any, curr: any) => {
3548
const box = curr?.getBoundingClientRect();
36-
const offset = e.clientY - (box.top + DISTANCE);
49+
const offset = clientY - (box.top + DISTANCE);
3750

3851
if (offset < 0 && offset > prev.offset) {
3952
return { offset, el: curr };
@@ -50,7 +63,7 @@ const KanbanBoard = ({ initialData }: any) => {
5063
return el;
5164
};
5265

53-
const dragOver = (e: DragEvent, column: string) => {
66+
const dragOver = (e: DragEvent | TouchEvent, column: string) => {
5467
e.preventDefault();
5568
highlightIndicator(e, column);
5669
};
@@ -59,10 +72,11 @@ const KanbanBoard = ({ initialData }: any) => {
5972
clearHighlight("", column);
6073
};
6174

62-
const handleDrop = (e: DragEvent, column: string) => {
75+
const handleDrop = (e: DragEvent | TouchEvent, column: string) => {
6376
clearHighlight("", column);
6477

65-
const cardID = e?.dataTransfer?.getData("cardID");
78+
const cardID =
79+
draggedCard || (isDragEvent(e) ? e.dataTransfer.getData("cardID") : null);
6680
const indicator = getIndicator(column);
6781
const { el } = getNearestElement(e, indicator);
6882
const prev = el?.dataset?.before || -1;
@@ -90,6 +104,7 @@ const KanbanBoard = ({ initialData }: any) => {
90104
copy.splice(insertAtIndex, 0, cardToTransfer);
91105

92106
setData(copy);
107+
setDraggedCard(null);
93108
}
94109
};
95110

@@ -103,8 +118,10 @@ const KanbanBoard = ({ initialData }: any) => {
103118
onDragOver={(e) => dragOver(e, c)}
104119
onDragLeave={() => dragLeave(c)}
105120
onDrop={(e) => handleDrop(e, c)}
121+
onTouchMove={(e) => dragOver(e as any, c)}
122+
onTouchEnd={(e) => handleDrop(e as any, c)}
106123
>
107-
<h2 className="text-lg font-bold mb-4">{c}</h2>
124+
<h2 className="text-lg font-bold mb-4">{c.replace(/-/g, " ").toUpperCase()}</h2>
108125
{data
109126
.filter((d: any) => d.column == c)
110127
.map((task: any) => (
@@ -113,7 +130,7 @@ const KanbanBoard = ({ initialData }: any) => {
113130
position={task.position}
114131
title={task.title}
115132
column={task.column}
116-
handleDragStart={(e: any) => dragStart(e, task)}
133+
handleDragStart={(e: DragEvent) => dragStart(e, task)}
117134
/>
118135
))}
119136
<DropIndicator column={c} before={-1} />

0 commit comments

Comments
 (0)