Skip to content

Commit 7d7e0cd

Browse files
yoavweberyoavweber
authored
Merge pull request #8 from JackHazoem/mobile-responsiveness
Adding mobile responsiveness for hours column
2 parents 1dfb7f5 + bafb7eb commit 7d7e0cd

File tree

4 files changed

+80
-49
lines changed

4 files changed

+80
-49
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
}
5252
],
5353
"dependencies": {
54-
"antd": "5.20.1",
54+
"antd": "^5.20.3",
5555
"date-fns": "^3.6.0",
5656
"less": "^4.2.0",
5757
"less-loader": "^12.2.0",

‎src/components/CalendarBody.tsx

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import React, { useEffect, useRef } from 'react';
2-
import { Table } from 'antd';
2+
import { Table, Grid } from 'antd';
33

44
import {
55
GenericEvent,
66
CalendarBodyProps,
7-
87
ColumnNode,
98
} from './types';
109
import { getDayHoursEvents } from './utils';
1110
import { createDayColumns, SCROLL_TO_ROW } from './columns';
1211

1312
const ALL_DAY_ROW = 0;
14-
13+
const { useBreakpoint } = Grid;
1514

1615
function Calendar<T extends GenericEvent>({
1716
weekDatesRange,
@@ -20,39 +19,55 @@ function Calendar<T extends GenericEvent>({
2019
weekends,
2120
}: CalendarBodyProps<T>) {
2221
const rowRef = useRef<null | HTMLDivElement>(null);
22+
const screens = useBreakpoint();
23+
2324
useEffect(() => {
2425
if (rowRef.current) {
25-
rowRef.current?.scrollIntoView();
26+
rowRef.current.scrollIntoView();
2627
}
2728
}, [rowRef]);
28-
const dayColumns = createDayColumns(weekDatesRange, weekends, onEventClick)
2929

30+
const fontSize = screens.xs ? '12px' : '14px'
3031
const hourColumn = {
31-
title: 'Hours',
32+
title: <div style={{ fontSize: screens.xs ? '14px' : '16px', textAlign: 'center', padding: '8px 0' }}>Hours</div>,
3233
dataIndex: 'hour',
3334
key: 'hour',
34-
width: 1,
35-
render: (hour: ColumnNode<T>, { }, id: number) => {
35+
width: screens.xs ? 50 : 1,
36+
render: (hour: ColumnNode<T>, {}, id: number) => {
3637
return {
3738
props: {
38-
style: { width: '10%' },
39+
style: {
40+
width: screens.xs ? '30%' : '10%',
41+
fontSize: fontSize
42+
},
3943
},
40-
children:
41-
SCROLL_TO_ROW === id ? (
42-
43-
// @ts-ignore
44-
<div ref={rowRef}>{hour}</div>
45-
) : (
46-
// @ts-ignore
47-
<div>{hour}</div>
48-
),
44+
children: SCROLL_TO_ROW === id ? (
45+
<div ref={rowRef}>{hour}</div>
46+
) : (
47+
<div>{hour}</div>
48+
),
4949
};
5050
},
5151
};
52+
53+
const dayColumns = createDayColumns(weekDatesRange, weekends, onEventClick).map((col) => ({
54+
...col,
55+
title: (
56+
<div
57+
style={{
58+
whiteSpace: 'nowrap',
59+
fontSize: fontSize
60+
}}
61+
>
62+
{col.title}
63+
</div>
64+
),
65+
}));
66+
5267
const tableColumns = [hourColumn, ...dayColumns];
5368

5469
return (
55-
<div>
70+
<div style={{ overflowX: 'scroll' }}>
5671
<Table
5772
rowKey={record => record.id}
5873
dataSource={getDayHoursEvents(weekDatesRange, getDayEvents)}
@@ -69,13 +84,19 @@ function Calendar<T extends GenericEvent>({
6984
boxShadow: 'rgba(0, 0, 0, 0.05) -1px 4px 4px ',
7085
zIndex: 1,
7186
top: 0,
87+
padding: '8px 0',
7288
},
7389
};
7490
}
75-
return {};
91+
return {
92+
style: {
93+
padding: '8px 0', // Add padding for each row
94+
},
95+
};
7696
}}
7797
scroll={{
78-
y: 1000,
98+
y: screens.xs ? 300 : 1000,
99+
x: 'max-content',
79100
}}
80101
/>
81102
</div>

‎src/components/CalendarHeader.tsx

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,21 @@ const MonthName: React.FunctionComponent<MonthNameProps> = ({ startWeek }) => {
2929
return format(startWeek, 'MMM') + '-' + format(endOfWeekDate, 'MMM');
3030
};
3131

32+
const belowButtonPadding = "4px 15px"
33+
3234
return (
33-
<div style={{ display: 'flex', maxHeight: '25px' }}>
34-
<Typography.Title
35-
level={5}
36-
style={{ marginBottom: 0, marginRight: '10px' }}
35+
<div style={{ display: 'flex', alignItems: 'center', maxHeight: '25px' }}>
36+
<div
37+
style={{
38+
fontSize: "16px",
39+
fontWeight: 500,
40+
marginBottom: 0,
41+
marginRight: '10px',
42+
padding: belowButtonPadding
43+
}}
3744
>
3845
{getMonthName()}
39-
</Typography.Title>
46+
</div>
4047
<Tag>Week {getWeek(new Date(addWeeks(startWeek, -1)))}</Tag>
4148
</div>
4249
);
@@ -48,6 +55,11 @@ export const CalendarHeader: React.FunctionComponent<CalendarHeaderProps> = ({
4855
}) => {
4956
return (
5057
<>
58+
<Row style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
59+
<div style={{ alignSelf: 'center' }}>
60+
<MonthName startWeek={startWeek} />
61+
</div>
62+
</Row>
5163
<Row justify="space-between" style={{ marginBottom: '20px' }}>
5264
<Col
5365
style={{
@@ -74,9 +86,7 @@ export const CalendarHeader: React.FunctionComponent<CalendarHeaderProps> = ({
7486
</Button>
7587
</div>
7688
</div>
77-
<div style={{ alignSelf: 'center' }}>
78-
<MonthName startWeek={startWeek} />
79-
</div>
89+
8090
</Col>
8191
<Col>
8292
<DatePicker

‎yarn.lock

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3556,10 +3556,10 @@ ansi-to-html@^0.6.11:
35563556
dependencies:
35573557
entities "^2.0.0"
35583558

3559-
[email protected].1:
3560-
version "5.20.1"
3561-
resolved "https://registry.yarnpkg.com/antd/-/antd-5.20.1.tgz#0678737bb8aa4de54f41ad6913e4ea535a8104c2"
3562-
integrity sha512-YjVCYAfBjrTyNKsg+heAOR0Gm4qJNJoBZQcV1h1BX/ufwoLx0PC5RGs75g6gQFy/1nv8OrJH7DXUGdtwPMB3Vg==
3559+
antd@^5.20.3:
3560+
version "5.20.3"
3561+
resolved "https://registry.yarnpkg.com/antd/-/antd-5.20.3.tgz#919a4df00f6e000341f8f50f54b51a75fa5d0774"
3562+
integrity sha512-v2s5LJlhuccIKLT17ESXQDkiQJdPK4jXg4x2pmSSRlrKXAxfftn8Zhd/7pdF3qR3OkwheQpSRjynrNZKp9Tgkg==
35633563
dependencies:
35643564
"@ant-design/colors" "^7.1.0"
35653565
"@ant-design/cssinjs" "^1.21.0"
@@ -3582,7 +3582,7 @@ [email protected]:
35823582
rc-dialog "~9.5.2"
35833583
rc-drawer "~7.2.0"
35843584
rc-dropdown "~4.2.0"
3585-
rc-field-form "~2.3.0"
3585+
rc-field-form "~2.4.0"
35863586
rc-image "~7.9.0"
35873587
rc-input "~1.6.3"
35883588
rc-input-number "~9.2.0"
@@ -3591,7 +3591,7 @@ [email protected]:
35913591
rc-motion "^2.9.2"
35923592
rc-notification "~5.6.0"
35933593
rc-pagination "~4.2.0"
3594-
rc-picker "~4.6.12"
3594+
rc-picker "~4.6.13"
35953595
rc-progress "~4.0.0"
35963596
rc-rate "~2.13.0"
35973597
rc-resize-observer "^1.4.0"
@@ -3606,7 +3606,7 @@ [email protected]:
36063606
rc-tooltip "~6.2.0"
36073607
rc-tree "~5.8.8"
36083608
rc-tree-select "~5.22.1"
3609-
rc-upload "~4.6.0"
3609+
rc-upload "~4.7.0"
36103610
rc-util "^5.43.0"
36113611
scroll-into-view-if-needed "^3.1.0"
36123612
throttle-debounce "^5.0.2"
@@ -8560,10 +8560,10 @@ rc-dropdown@~4.2.0:
85608560
classnames "^2.2.6"
85618561
rc-util "^5.17.0"
85628562

8563-
rc-field-form@~2.3.0:
8564-
version "2.3.0"
8565-
resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-2.3.0.tgz#8669c521e37d5856efc005fc92fc09fccfe4f574"
8566-
integrity sha512-QyiYrE3uweGGi21MJpxHFmDW+Tb1yt5hitM1k0EbWc5hKDiSf5imOBc6NLLHrYk+sdelrw2Ju/fD4uRQdhSqNg==
8563+
rc-field-form@~2.4.0:
8564+
version "2.4.0"
8565+
resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-2.4.0.tgz#26997160d12ae43a94c356c1290bfc011c69b3ca"
8566+
integrity sha512-XZ/lF9iqf9HXApIHQHqzJK5v2w4mkUMsVqAzOyWVzoiwwXEavY6Tpuw7HavgzIoD+huVff4JghSGcgEfX6eycg==
85678567
dependencies:
85688568
"@babel/runtime" "^7.18.0"
85698569
"@rc-component/async-validator" "^5.0.3"
@@ -8664,10 +8664,10 @@ rc-pagination@~4.2.0:
86648664
classnames "^2.3.2"
86658665
rc-util "^5.38.0"
86668666

8667-
rc-picker@~4.6.12:
8668-
version "4.6.13"
8669-
resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-4.6.13.tgz#d322c00bd053386e223603f11cd375f85ffb2fae"
8670-
integrity sha512-yi4JWPGjm420Q8rHjZ6YNy2c5IfV+9EAzx2pewVRPOjJqfg7uifO/Z0uqxdl/h6AhBocuvRvtlyz6ehrAvTq7A==
8667+
rc-picker@~4.6.13:
8668+
version "4.6.14"
8669+
resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-4.6.14.tgz#86f6836794a593a54b929cfde201f42f02ef85b0"
8670+
integrity sha512-7DuTfUFdkxmsNpWQ0TWv6FPGna5e6KKC4nxtx3x9xhumLz7jb3fhlDdWQvqEL6tpt9DOb1+N5j+wB+lDOSS9kg==
86718671
dependencies:
86728672
"@babel/runtime" "^7.24.7"
86738673
"@rc-component/trigger" "^2.0.0"
@@ -8821,10 +8821,10 @@ rc-tree@~5.8.1, rc-tree@~5.8.8:
88218821
rc-util "^5.16.1"
88228822
rc-virtual-list "^3.5.1"
88238823

8824-
rc-upload@~4.6.0:
8825-
version "4.6.0"
8826-
resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.6.0.tgz#6f6d8ea4fe52ab4cd1d0d025da621e96d035c767"
8827-
integrity sha512-Zr0DT1NHw/ApxrP7UAoxOtGaVYuzarrrCVr0ld7RiEFsKX07uFhE1EpCBxwL11ruFn89GMcshOKWp+s6FLyAlA==
8824+
rc-upload@~4.7.0:
8825+
version "4.7.0"
8826+
resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.7.0.tgz#719c6e66549844f4db8c57f066f2758c0a43b525"
8827+
integrity sha512-eUwxYNHlsYe5vYhKFAUGrQG95JrnPzY+BmPi1Daq39fWNl/eOc7v4UODuWrVp2LFkQBuV3cMCG/I68iub6oBrg==
88288828
dependencies:
88298829
"@babel/runtime" "^7.18.3"
88308830
classnames "^2.2.5"

0 commit comments

Comments
 (0)