From 5c5d759c10c8d891e854e0052da115ada6daccfd Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 20 Feb 2024 23:08:04 +0700 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20fix=20typo=20a?= =?UTF-8?q?nd=20change=20to=20readable=20name?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/Calendar/Calendar.theme.ts | 4 +-- .../components/shared/Calendar/Calendar.tsx | 30 +++++++++++-------- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/frontend/src/components/shared/Calendar/Calendar.theme.ts b/packages/frontend/src/components/shared/Calendar/Calendar.theme.ts index e39e5925..ce6e93d0 100644 --- a/packages/frontend/src/components/shared/Calendar/Calendar.theme.ts +++ b/packages/frontend/src/components/shared/Calendar/Calendar.theme.ts @@ -17,8 +17,8 @@ export const calendarTheme = tv({ 'py-2.5', 'px-1', ], - dropdowns: ['flex', 'items-center', 'justify-center', 'gap-1.5', 'flex-1'], - dropdown: [ + actions: ['flex', 'items-center', 'justify-center', 'gap-1.5', 'flex-1'], + button: [ 'flex', 'items-center', 'gap-2', diff --git a/packages/frontend/src/components/shared/Calendar/Calendar.tsx b/packages/frontend/src/components/shared/Calendar/Calendar.tsx index 737eee75..dfc15e36 100644 --- a/packages/frontend/src/components/shared/Calendar/Calendar.tsx +++ b/packages/frontend/src/components/shared/Calendar/Calendar.tsx @@ -21,7 +21,7 @@ import { import './Calendar.css'; import { format } from 'date-fns'; -const CALENDAR_VIEW = ['month', 'year', 'decade', 'century'] as const; +const CALENDAR_VIEW = ['month', 'year', 'decade'] as const; export type CalendarView = (typeof CALENDAR_VIEW)[number]; /** @@ -82,12 +82,18 @@ export const Calendar = ({ onChange: onChangeProp, ...props }: CalendarProps): JSX.Element => { - const { wrapper, calendar, navigation, dropdowns, dropdown, footer } = - calendarTheme(); + const { + wrapper, + calendar, + navigation, + actions: actionsClass, + button, + footer, + } = calendarTheme(); const today = new Date(); const currentMonth = format(today, 'MMM'); - const currentyear = format(today, 'yyyy'); + const currentYear = format(today, 'yyyy'); const [view, setView] = useState('month'); const [activeDate, setActiveDate] = useState( @@ -95,7 +101,7 @@ export const Calendar = ({ ); const [value, setValue] = useState(valueProp as Value); const [month, setMonth] = useState(currentMonth); - const [year, setYear] = useState(currentyear); + const [year, setYear] = useState(currentYear); /** * Update the navigation label based on the active date @@ -112,10 +118,10 @@ export const Calendar = ({ * Change the active date base on the action and range */ const handleNavigate = useCallback( - (action: 'previous' | 'next', range: 'month' | 'year' | 'decade') => { + (action: 'previous' | 'next', view: CalendarView) => { setActiveDate((date) => { const newDate = new Date(date); - switch (range) { + switch (view) { case 'month': newDate.setMonth( action === 'previous' ? date.getMonth() - 1 : date.getMonth() + 1, @@ -158,10 +164,10 @@ export const Calendar = ({ * and also update the navigation label */ const handleChangeNavigation = useCallback( - (type: 'month' | 'year', date: Date) => { + (view: 'month' | 'year', date: Date) => { setActiveDate(date); changeNavigationLabel(date); - setView(type); + setView(view); }, [setActiveDate, changeNavigationLabel, setView], ); @@ -225,10 +231,10 @@ export const Calendar = ({ -
+