From cb1f09aa38b2cb1c7b8653d32a37f660ce14c08d Mon Sep 17 00:00:00 2001 From: itay Date: Fri, 30 Aug 2024 09:40:02 +0300 Subject: [PATCH 1/4] Added mobile responsivenes --- package.json | 3 +- src/components/CalendarBody.tsx | 68 +++++++++++++++++++++++---------- yarn.lock | 43 ++++++++++++--------- 3 files changed, 73 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index 7d6b5d3..dde21e7 100644 --- a/package.json +++ b/package.json @@ -51,10 +51,11 @@ } ], "dependencies": { - "antd": "5.20.1", + "antd": "^5.20.3", "date-fns": "^3.6.0", "less": "^4.2.0", "less-loader": "^12.2.0", + "moment": "^2.30.1", "react": "^18.3.1", "react-dom": "^18.3.1", "tslib": "^2.6.3" diff --git a/src/components/CalendarBody.tsx b/src/components/CalendarBody.tsx index 9cd69d1..bd5ec72 100644 --- a/src/components/CalendarBody.tsx +++ b/src/components/CalendarBody.tsx @@ -1,17 +1,16 @@ import React, { useEffect, useRef } from 'react'; -import { Table } from 'antd'; +import { Table, Grid } from 'antd'; import { GenericEvent, CalendarBodyProps, - ColumnNode, } from './types'; import { getDayHoursEvents } from './utils'; import { createDayColumns, SCROLL_TO_ROW } from './columns'; const ALL_DAY_ROW = 0; - +const { useBreakpoint } = Grid; function Calendar({ weekDatesRange, @@ -20,39 +19,60 @@ function Calendar({ weekends, }: CalendarBodyProps) { const rowRef = useRef(null); + const screens = useBreakpoint(); + useEffect(() => { if (rowRef.current) { - rowRef.current?.scrollIntoView(); + rowRef.current.scrollIntoView(); } }, [rowRef]); - const dayColumns = createDayColumns(weekDatesRange, weekends, onEventClick) const hourColumn = { - title: 'Hours', + title:
Hours
, dataIndex: 'hour', key: 'hour', - width: 1, - render: (hour: ColumnNode, { }, id: number) => { + width: screens.xs ? 50 : 1, + render: (hour: ColumnNode, {}, id: number) => { return { props: { - style: { width: '10%' }, + style: { + width: screens.xs ? '30%' : '10%', + textAlign: 'center', + fontSize: screens.xs ? '12px' : '14px', + padding: '8px 0', + }, }, - children: - SCROLL_TO_ROW === id ? ( - - // @ts-ignore -
{hour}
- ) : ( - // @ts-ignore -
{hour}
- ), + children: SCROLL_TO_ROW === id ? ( +
{hour}
+ ) : ( +
{hour}
+ ), }; }, }; + + const dayColumns = createDayColumns(weekDatesRange, weekends, onEventClick).map((col) => ({ + ...col, + title: ( +
+ {col.title} +
+ ), + })); + const tableColumns = [hourColumn, ...dayColumns]; return ( -
+
record.id} dataSource={getDayHoursEvents(weekDatesRange, getDayEvents)} @@ -69,13 +89,19 @@ function Calendar({ boxShadow: 'rgba(0, 0, 0, 0.05) -1px 4px 4px ', zIndex: 1, top: 0, + padding: '8px 0', }, }; } - return {}; + return { + style: { + padding: '8px 0', // Add padding for each row + }, + }; }} scroll={{ - y: 1000, + y: screens.xs ? 300 : 1000, + x: 'max-content', }} /> diff --git a/yarn.lock b/yarn.lock index e5ebd22..4936173 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3556,10 +3556,10 @@ ansi-to-html@^0.6.11: dependencies: entities "^2.0.0" -antd@5.20.1: - version "5.20.1" - resolved "https://registry.yarnpkg.com/antd/-/antd-5.20.1.tgz#0678737bb8aa4de54f41ad6913e4ea535a8104c2" - integrity sha512-YjVCYAfBjrTyNKsg+heAOR0Gm4qJNJoBZQcV1h1BX/ufwoLx0PC5RGs75g6gQFy/1nv8OrJH7DXUGdtwPMB3Vg== +antd@^5.20.3: + version "5.20.3" + resolved "https://registry.yarnpkg.com/antd/-/antd-5.20.3.tgz#919a4df00f6e000341f8f50f54b51a75fa5d0774" + integrity sha512-v2s5LJlhuccIKLT17ESXQDkiQJdPK4jXg4x2pmSSRlrKXAxfftn8Zhd/7pdF3qR3OkwheQpSRjynrNZKp9Tgkg== dependencies: "@ant-design/colors" "^7.1.0" "@ant-design/cssinjs" "^1.21.0" @@ -3582,7 +3582,7 @@ antd@5.20.1: rc-dialog "~9.5.2" rc-drawer "~7.2.0" rc-dropdown "~4.2.0" - rc-field-form "~2.3.0" + rc-field-form "~2.4.0" rc-image "~7.9.0" rc-input "~1.6.3" rc-input-number "~9.2.0" @@ -3591,7 +3591,7 @@ antd@5.20.1: rc-motion "^2.9.2" rc-notification "~5.6.0" rc-pagination "~4.2.0" - rc-picker "~4.6.12" + rc-picker "~4.6.13" rc-progress "~4.0.0" rc-rate "~2.13.0" rc-resize-observer "^1.4.0" @@ -3606,7 +3606,7 @@ antd@5.20.1: rc-tooltip "~6.2.0" rc-tree "~5.8.8" rc-tree-select "~5.22.1" - rc-upload "~4.6.0" + rc-upload "~4.7.0" rc-util "^5.43.0" scroll-into-view-if-needed "^3.1.0" throttle-debounce "^5.0.2" @@ -7550,6 +7550,11 @@ mlly@^1.4.0, mlly@^1.7.1: pkg-types "^1.1.1" ufo "^1.5.3" +moment@^2.30.1: + version "2.30.1" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae" + integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how== + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" @@ -8560,10 +8565,10 @@ rc-dropdown@~4.2.0: classnames "^2.2.6" rc-util "^5.17.0" -rc-field-form@~2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-2.3.0.tgz#8669c521e37d5856efc005fc92fc09fccfe4f574" - integrity sha512-QyiYrE3uweGGi21MJpxHFmDW+Tb1yt5hitM1k0EbWc5hKDiSf5imOBc6NLLHrYk+sdelrw2Ju/fD4uRQdhSqNg== +rc-field-form@~2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-2.4.0.tgz#26997160d12ae43a94c356c1290bfc011c69b3ca" + integrity sha512-XZ/lF9iqf9HXApIHQHqzJK5v2w4mkUMsVqAzOyWVzoiwwXEavY6Tpuw7HavgzIoD+huVff4JghSGcgEfX6eycg== dependencies: "@babel/runtime" "^7.18.0" "@rc-component/async-validator" "^5.0.3" @@ -8664,10 +8669,10 @@ rc-pagination@~4.2.0: classnames "^2.3.2" rc-util "^5.38.0" -rc-picker@~4.6.12: - version "4.6.13" - resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-4.6.13.tgz#d322c00bd053386e223603f11cd375f85ffb2fae" - integrity sha512-yi4JWPGjm420Q8rHjZ6YNy2c5IfV+9EAzx2pewVRPOjJqfg7uifO/Z0uqxdl/h6AhBocuvRvtlyz6ehrAvTq7A== +rc-picker@~4.6.13: + version "4.6.14" + resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-4.6.14.tgz#86f6836794a593a54b929cfde201f42f02ef85b0" + integrity sha512-7DuTfUFdkxmsNpWQ0TWv6FPGna5e6KKC4nxtx3x9xhumLz7jb3fhlDdWQvqEL6tpt9DOb1+N5j+wB+lDOSS9kg== dependencies: "@babel/runtime" "^7.24.7" "@rc-component/trigger" "^2.0.0" @@ -8821,10 +8826,10 @@ rc-tree@~5.8.1, rc-tree@~5.8.8: rc-util "^5.16.1" rc-virtual-list "^3.5.1" -rc-upload@~4.6.0: - version "4.6.0" - resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.6.0.tgz#6f6d8ea4fe52ab4cd1d0d025da621e96d035c767" - integrity sha512-Zr0DT1NHw/ApxrP7UAoxOtGaVYuzarrrCVr0ld7RiEFsKX07uFhE1EpCBxwL11ruFn89GMcshOKWp+s6FLyAlA== +rc-upload@~4.7.0: + version "4.7.0" + resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.7.0.tgz#719c6e66549844f4db8c57f066f2758c0a43b525" + integrity sha512-eUwxYNHlsYe5vYhKFAUGrQG95JrnPzY+BmPi1Daq39fWNl/eOc7v4UODuWrVp2LFkQBuV3cMCG/I68iub6oBrg== dependencies: "@babel/runtime" "^7.18.3" classnames "^2.2.5" From d20401648ba32238a61059cc2fc86b80e1c340df Mon Sep 17 00:00:00 2001 From: yoavweber Date: Fri, 6 Sep 2024 16:31:52 +0300 Subject: [PATCH 2/4] removing unrealted design changes and unused css properties --- src/components/CalendarBody.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/CalendarBody.tsx b/src/components/CalendarBody.tsx index bd5ec72..6c8cc8a 100644 --- a/src/components/CalendarBody.tsx +++ b/src/components/CalendarBody.tsx @@ -27,6 +27,7 @@ function Calendar({ } }, [rowRef]); + const fontSize = screens.xs ? '12px' : '14px' const hourColumn = { title:
Hours
, dataIndex: 'hour', @@ -37,9 +38,7 @@ function Calendar({ props: { style: { width: screens.xs ? '30%' : '10%', - textAlign: 'center', - fontSize: screens.xs ? '12px' : '14px', - padding: '8px 0', + fontSize: fontSize }, }, children: SCROLL_TO_ROW === id ? ( @@ -56,12 +55,8 @@ function Calendar({ title: (
{col.title} @@ -72,7 +67,7 @@ function Calendar({ const tableColumns = [hourColumn, ...dayColumns]; return ( -
+
record.id} dataSource={getDayHoursEvents(weekDatesRange, getDayEvents)} From 1ce0d0776a56365e19f4d23320778757cc6b894c Mon Sep 17 00:00:00 2001 From: yoavweber Date: Fri, 6 Sep 2024 16:32:22 +0300 Subject: [PATCH 3/4] adjust month name and week number to be in a new line for better UI --- src/components/CalendarHeader.tsx | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx index 10b7b7d..bdd200d 100644 --- a/src/components/CalendarHeader.tsx +++ b/src/components/CalendarHeader.tsx @@ -29,14 +29,21 @@ const MonthName: React.FunctionComponent = ({ startWeek }) => { return format(startWeek, 'MMM') + '-' + format(endOfWeekDate, 'MMM'); }; + const belowButtonPadding = "4px 15px" + return ( -
- +
{getMonthName()} - +
Week {getWeek(new Date(addWeeks(startWeek, -1)))}
); @@ -48,6 +55,11 @@ export const CalendarHeader: React.FunctionComponent = ({ }) => { return ( <> + +
+ +
+ = ({ -
- -
+ Date: Fri, 6 Sep 2024 16:32:35 +0300 Subject: [PATCH 4/4] removing moment --- package.json | 1 - yarn.lock | 5 ----- 2 files changed, 6 deletions(-) diff --git a/package.json b/package.json index dde21e7..8a02eed 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "date-fns": "^3.6.0", "less": "^4.2.0", "less-loader": "^12.2.0", - "moment": "^2.30.1", "react": "^18.3.1", "react-dom": "^18.3.1", "tslib": "^2.6.3" diff --git a/yarn.lock b/yarn.lock index 4936173..47a2d8f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7550,11 +7550,6 @@ mlly@^1.4.0, mlly@^1.7.1: pkg-types "^1.1.1" ufo "^1.5.3" -moment@^2.30.1: - version "2.30.1" - resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae" - integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how== - move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"