Skip to content

Commit f4032b0

Browse files
hoon2hoonihoon2hooni
committed
imp: make user not able to make selected area at not available date
1 parent 4772392 commit f4032b0

File tree

3 files changed

+142
-117
lines changed

3 files changed

+142
-117
lines changed

‎.eslintrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
"simple-import-sort/imports": "error",
88
"simple-import-sort/exports": "error",
99
"no-unused-vars": "off",
10-
"@typescript-eslint/no-unused-vars": "warn"
10+
"@typescript-eslint/no-unused-vars": ["error"]
1111
}
1212
}

‎components/events/Timetable.tsx‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import useUrlEventId from "@lib/hooks/useUrlEventId";
1717
import {
1818
generateSelectedArea,
1919
getColumnIndexAtTimetable,
20+
getXOfTable,
2021
} from "@lib/tableHelper";
2122
import updateCurrentAttendee from "@lib/updateCurrentAttendee";
2223
import { FC, useCallback, useRef, useState } from "react";
@@ -92,14 +93,28 @@ const Timetable: FC<ComponentProps> = ({
9293
startClientX
9394
);
9495

95-
currentSelectedAreaRef.current = generateSelectedArea(
96-
hasNotStartMove,
97-
moveClientY,
96+
const availableIndexAtTable = new Array(7)
97+
.fill(0)
98+
.map((_, i) =>
99+
isInRange(endDate, startWeekOfMonday, currentPageIndex, i, startDate)
100+
);
101+
const startDayIndex = availableIndexAtTable.findIndex((v) => v);
102+
const endDayIndex = 6 - availableIndexAtTable.reverse().findIndex((v) => v);
103+
const minClientX = getXOfTable(1, timetableArea.w / 7, startDayIndex) - 1;
104+
const maxClientX = getXOfTable(1, timetableArea.w / 7, endDayIndex);
105+
const client = {
106+
startClientX,
98107
startClientY,
108+
currentClientX: moveClientX,
109+
currentClientY: moveClientY,
110+
};
111+
const limitClient = { minClientX, maxClientX };
112+
currentSelectedAreaRef.current = generateSelectedArea({
113+
hasNotStartMove,
114+
client,
115+
limitClient,
99116
timetableArea,
100-
startClientX,
101-
moveClientX
102-
);
117+
});
103118

104119
const resizeTimeTableHandler = () => {
105120
if (containerRef.current) {
@@ -162,6 +177,7 @@ const Timetable: FC<ComponentProps> = ({
162177

163178
useMouseAndTouchEnd(updateAttendeesAndResetSelectedArea);
164179
const dateToAttendees = generateDateToAttendees(attendees);
180+
165181
return (
166182
<Container ref={containerRef}>
167183
{DAY_TIME_ARRAY.map((hours, dayIndex) => {

‎lib/tableHelper.ts‎

Lines changed: 119 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -4,87 +4,151 @@ const END_TIME = 24;
44
const START_TIME = 8;
55
const initialArea = { x: 0, y: 0, w: 0, h: 0 };
66

7-
export const generateSelectedArea = (
8-
hasNotStartMove: boolean,
9-
currentClientY: number,
10-
startClientY: number,
11-
timetableArea: { x: number; y: number; w: number; h: number },
12-
startClientX: number,
13-
currentClientX: number
14-
) => {
7+
type ClientX = {
8+
startClientX: number;
9+
currentClientX: number;
10+
};
11+
12+
type ClientY = {
13+
startClientY: number;
14+
currentClientY: number;
15+
};
16+
17+
type Client = ClientX & ClientY;
18+
19+
type Area = {
20+
x: number;
21+
y: number;
22+
w: number;
23+
h: number;
24+
};
25+
26+
type LimitClient = {
27+
minClientX: number;
28+
maxClientX: number;
29+
};
30+
31+
type GenerateSelectedAreaConfig = {
32+
hasNotStartMove: boolean;
33+
client: Client;
34+
timetableArea: Area;
35+
limitClient: LimitClient;
36+
};
37+
type GenerateSelectedArea = (config: GenerateSelectedAreaConfig) => Area;
38+
39+
export const generateSelectedArea: GenerateSelectedArea = ({
40+
hasNotStartMove,
41+
client,
42+
timetableArea,
43+
limitClient,
44+
}) => {
45+
const { startClientX, startClientY, currentClientX, currentClientY } = client;
46+
const clientX = { startClientX, currentClientX };
47+
const clientY = { startClientY, currentClientY };
48+
1549
if (hasNotStartMove) {
1650
return initialArea;
1751
}
1852

19-
if (currentClientY <= startClientY && currentClientY !== 0) {
20-
return generateSelectedAreaWhenUserMoveUp(
21-
timetableArea,
22-
startClientX,
23-
currentClientY,
24-
startClientY,
25-
currentClientX
53+
const { x, w } = getXAndWidthOfSelectedArea({
54+
clientX,
55+
timetableWidth: timetableArea.w,
56+
limitClient,
57+
});
58+
const { y, h } = getYAndHeightOfSelectedArea(timetableArea, clientY);
59+
return {
60+
x,
61+
y,
62+
w,
63+
h,
64+
};
65+
};
66+
67+
const getXAndWidthOfSelectedArea = ({
68+
clientX,
69+
timetableWidth,
70+
limitClient,
71+
}: {
72+
clientX: ClientX;
73+
timetableWidth: number;
74+
limitClient: LimitClient;
75+
}) => {
76+
const { startClientX, currentClientX } = clientX;
77+
const { minClientX, maxClientX } = limitClient;
78+
79+
if (currentClientX === 0) {
80+
const selectedAreaX = getSelectedAreaX(timetableWidth, startClientX);
81+
const timetableEachColumnArea = getTimetableColumnAreaWidth(timetableWidth);
82+
return {
83+
x: selectedAreaX,
84+
w: timetableEachColumnArea,
85+
};
86+
}
87+
88+
if (currentClientX >= startClientX) {
89+
const selectedAreaX = getSelectedAreaX(timetableWidth, startClientX);
90+
const timetableEachColumnArea = getTimetableColumnAreaWidth(timetableWidth);
91+
const columnCount = getColumnCount(
92+
Math.min(currentClientX, maxClientX),
93+
selectedAreaX,
94+
timetableEachColumnArea
95+
);
96+
const selectedAreaWidth = getSelectedAreaWidth(
97+
columnCount,
98+
timetableEachColumnArea,
99+
1
26100
);
101+
return {
102+
x: selectedAreaX,
103+
w: selectedAreaWidth,
104+
};
27105
}
28106

29-
return generateSelectedAreaWhenUserMoveDown(
30-
timetableArea,
31-
startClientY,
32-
currentClientY,
33-
startClientX,
34-
currentClientX
107+
const selectedAreaX = Math.max(
108+
getSelectedAreaX(timetableWidth, currentClientX),
109+
minClientX
35110
);
36-
};
37-
38-
const generateSelectedAreaWhenUserMoveUp = (
39-
timetableArea: { x: number; y: number; w: number; h: number },
40-
startClientX: number,
41-
currentClientY: number,
42-
startClientY: number,
43-
currentClientX: number
44-
) => {
45-
const selectedAreaY =
46-
currentClientY >= timetableArea.y ? currentClientY : timetableArea.y;
47-
const selectedAreaHeight = startClientY - selectedAreaY;
48-
const { selectedAreaX, selectedAreaWidth } = getSelectedAreaWidthAndX({
111+
const timetableEachColumnArea = getTimetableColumnAreaWidth(timetableWidth);
112+
const columnCount = getColumnCount(
49113
startClientX,
50-
currentClientX,
51-
timetableWidth: timetableArea.w,
52-
});
53-
114+
selectedAreaX,
115+
timetableEachColumnArea
116+
);
117+
const selectedAreaWidth = getSelectedAreaWidth(
118+
columnCount,
119+
timetableEachColumnArea,
120+
1
121+
);
54122
return {
55123
x: selectedAreaX,
56-
y: selectedAreaY,
57124
w: selectedAreaWidth,
58-
h: selectedAreaHeight,
59125
};
60126
};
61127

62-
const generateSelectedAreaWhenUserMoveDown = (
63-
timetableArea: { x: number; y: number; w: number; h: number },
64-
startClientY: number,
65-
currentClientY: number,
66-
startClientX: number,
67-
currentClientX: number
68-
) => {
128+
const getYAndHeightOfSelectedArea = (timetableArea: Area, clientY: ClientY) => {
129+
const { startClientY, currentClientY } = clientY;
130+
131+
if (currentClientY <= startClientY && currentClientY !== 0) {
132+
const selectedAreaY =
133+
currentClientY >= timetableArea.y ? currentClientY : timetableArea.y;
134+
const selectedAreaHeight = startClientY - selectedAreaY;
135+
return {
136+
y: selectedAreaY,
137+
h: selectedAreaHeight,
138+
};
139+
}
140+
69141
const minHeight =
70142
(timetableArea.h - (END_TIME - START_TIME - 1)) /
71143
(END_TIME - START_TIME) /
72144
3;
73-
74145
const selectedAreaY = startClientY;
75146
const selectedAreaHeight =
76147
currentClientY >= timetableArea.y + timetableArea.h
77148
? timetableArea.y + timetableArea.h - selectedAreaY
78149
: currentClientY - startClientY;
79-
const { selectedAreaX, selectedAreaWidth } = getSelectedAreaWidthAndX({
80-
startClientX,
81-
currentClientX,
82-
timetableWidth: timetableArea.w,
83-
});
84150
return {
85-
x: selectedAreaX,
86151
y: selectedAreaY,
87-
w: selectedAreaWidth,
88152
h: Math.max(selectedAreaHeight, minHeight),
89153
};
90154
};
@@ -124,58 +188,3 @@ const getSelectedAreaWidth = (
124188
) => {
125189
return columnCount * columnWidth + (columnCount - 1) * gapSize;
126190
};
127-
128-
const getSelectedAreaWidthAndX = ({
129-
startClientX,
130-
currentClientX,
131-
timetableWidth,
132-
}: {
133-
startClientX: number;
134-
currentClientX: number;
135-
timetableWidth: number;
136-
}) => {
137-
if (currentClientX === 0) {
138-
const selectedAreaX = getSelectedAreaX(timetableWidth, startClientX);
139-
const timetableEachColumnArea = getTimetableColumnAreaWidth(timetableWidth);
140-
return {
141-
selectedAreaX,
142-
selectedAreaWidth: timetableEachColumnArea,
143-
};
144-
}
145-
if (currentClientX >= startClientX) {
146-
const selectedAreaX = getSelectedAreaX(timetableWidth, startClientX);
147-
const timetableEachColumnArea = getTimetableColumnAreaWidth(timetableWidth);
148-
const columnCount = getColumnCount(
149-
currentClientX,
150-
selectedAreaX,
151-
timetableEachColumnArea
152-
);
153-
const selectedAreaWidth = getSelectedAreaWidth(
154-
columnCount,
155-
timetableEachColumnArea,
156-
1
157-
);
158-
159-
return {
160-
selectedAreaX,
161-
selectedAreaWidth,
162-
};
163-
}
164-
165-
const selectedAreaX = getSelectedAreaX(timetableWidth, currentClientX);
166-
const timetableEachColumnArea = getTimetableColumnAreaWidth(timetableWidth);
167-
const columnCount = getColumnCount(
168-
startClientX,
169-
selectedAreaX,
170-
timetableEachColumnArea
171-
);
172-
const selectedAreaWidth = getSelectedAreaWidth(
173-
columnCount,
174-
timetableEachColumnArea,
175-
1
176-
);
177-
return {
178-
selectedAreaX,
179-
selectedAreaWidth,
180-
};
181-
};

0 commit comments

Comments
 (0)