Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Date year focus & two digit year format fix #1439

Merged
merged 17 commits into from Jan 30, 2023
Merged

Date year focus & two digit year format fix #1439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
a122cf8
Fixing date select focus + 2 digit year format
Jialecl Jan 13, 2023
85ac7ba
Adding more tests + improved 2 digit year interactions
Jialecl Jan 16, 2023
e39c397
Adding test for two digit year format
Jialecl Jan 16, 2023
edc853b
improving some lines
Jialecl Jan 16, 2023
9db7fe2
Rename story
Jialecl Jan 17, 2023
481c8f0
Making changes based on feedback
Jialecl Jan 24, 2023
7e045cd
Improving the usage of dayjs()
Jialecl Jan 25, 2023
a249299
removing mocking in testing
Jialecl Jan 25, 2023
5c95bf7
remove mockdecorator from storybook
Jialecl Jan 25, 2023
0417b0f
reverting package-lock changes
Jialecl Jan 26, 2023
a620877
Changes to storybook and hook dependencies based on feedback
Jialecl Jan 26, 2023
de24d50
changing dependencies of useEffect
Jialecl Jan 26, 2023
323033c
getDate outside of the component
Jialecl Jan 27, 2023
644bd0b
Reorganizing tests + postition relative in suggestion's test
Jialecl Jan 30, 2023
6865574
reverting debug comment
Jialecl Jan 30, 2023
5d19fb9
Adding caret orientation
Jialecl Jan 30, 2023
d7154e4
moving icons to Icons.tsx
Jialecl Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions lib/src/common/variables.js
View file
Open in desktop
Expand Up @@ -1504,8 +1504,8 @@ export const defaultTranslatedComponentLabels = {
fetchingDataErrorMessage: "Error fetching data",
},
calendar: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
months: [
"January",
"February",
Expand Down
109 changes: 48 additions & 61 deletions lib/src/date-input/Calendar.tsx
View file
Open in desktop
@@ -1,4 +1,4 @@
import dayjs, { Dayjs } from "dayjs";
import { Dayjs } from "dayjs";
import React, { useState, useMemo, useEffect } from "react";
import styled from "styled-components";
import { CalendarPropsType } from "./types";
Expand Down Expand Up @@ -35,19 +35,28 @@ const getDays = (innerDate: Dayjs) => {
return monthDayCells;
};

const getDateToFocus = (selectedDate, innerDate, today) => {
return selectedDate?.get("month") === innerDate.get("month") && selectedDate?.get("year") === innerDate.get("year")
? selectedDate
: today.get("month") === innerDate.get("month") && today.get("year") === innerDate.get("year")
? today
: innerDate.set("date", 1);
};

const isDaySelected = (date: { day: number; month: number; year: number }, selectedDate) =>
selectedDate?.get("month") === date.month &&
selectedDate?.get("year") === date.year &&
selectedDate?.get("date") === date.day;

const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: CalendarPropsType): JSX.Element => {
const [dateToFocus, setDateToFocus] = useState(
selectedDate?.get("month") === innerDate.get("month") && selectedDate?.get("year") === innerDate.get("year")
? selectedDate
: dayjs()
);
const [toFocus, setToFocus] = useState(false);
const today = dayjs();
const Calendar = ({
selectedDate,
innerDate,
onInnerDateChange,
onDaySelect,
today,
}: CalendarPropsType): JSX.Element => {
const [dateToFocus, setDateToFocus] = useState(getDateToFocus(selectedDate, innerDate, today));
const [isFocusable, setIsFocusable] = useState(false);
const dayCells = useMemo(() => getDays(innerDate), [innerDate]);
const translatedLabels = useTranslatedLabels();
const weekDays = translatedLabels.calendar.daysShort;
Expand All @@ -60,17 +69,7 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C

const handleOnBlur = (event) => {
if (!event?.currentTarget.contains(event.relatedTarget)) {
updateDateToFocus();
}
};

const updateDateToFocus = () => {
if (selectedDate?.get("month") === innerDate.get("month") && selectedDate?.get("year") === innerDate.get("year")) {
setDateToFocus(selectedDate);
} else if (today.get("month") === innerDate.get("month") && today.get("year") === innerDate.get("year")) {
setDateToFocus(today);
} else {
setDateToFocus(innerDate.set("date", 1));
setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
}
};

Expand All @@ -79,21 +78,21 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C
onInnerDateChange(date);
}
setDateToFocus(date);
setToFocus(true);
setIsFocusable(true);
};

useEffect(() => {
if (toFocus) {
if (isFocusable) {
document.getElementById(`day_${dateToFocus.get("date")}_month${dateToFocus.get("month")}`)?.focus();
setToFocus(false);
setIsFocusable(false);
}
}, [dateToFocus, toFocus]);
}, [dateToFocus, isFocusable]);

useEffect(() => {
if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) {
updateDateToFocus();
setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
}
}, [innerDate, dateToFocus, selectedDate]);
}, [innerDate, dateToFocus, selectedDate, today]);

const handleDayKeyboardEvent = (event, date) => {
let dateToFocusTemp =
Expand Down Expand Up @@ -163,32 +162,28 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C
))}
</DxcFlex>
<DayCellsContainer onBlur={handleOnBlur}>
{dayCells.map((date, index) =>
date !== 0 ? (
<DayCell
onKeyDown={(event) => handleDayKeyboardEvent(event, date)}
aria-label={date.day}
id={`day_${date.day}_month${date.month}`}
key={`day_${index}`}
onClick={() => onDateClickHandler(date)}
selected={isDaySelected(date, selectedDate)}
actualMonth={date.month === innerDate.get("month")}
autoFocus={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month")}
aria-selected={isDaySelected(date, selectedDate)}
tabIndex={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month") ? 0 : -1}
isCurrentDay={
today.get("date") === date.day &&
today.get("month") === innerDate.get("month") &&
today.get("month") === date.month &&
today.get("year") === innerDate.get("year")
}
>
{date.day}
</DayCell>
) : (
<EmptyDayCell key={`empty_${index}`} />
)
)}
{dayCells.map((date, index) => (
<DayCell
onKeyDown={(event) => handleDayKeyboardEvent(event, date)}
aria-label={date.day}
id={`day_${date.day}_month${date.month}`}
key={`day_${index}`}
onClick={() => onDateClickHandler(date)}
selected={isDaySelected(date, selectedDate)}
actualMonth={date.month === innerDate.get("month")}
autoFocus={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month")}
aria-selected={isDaySelected(date, selectedDate)}
tabIndex={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month") ? 0 : -1}
isCurrentDay={
today.get("date") === date.day &&
today.get("month") === innerDate.get("month") &&
today.get("month") === date.month &&
today.get("year") === innerDate.get("year")
}
>
{date.day}
</DayCell>
))}
</DayCellsContainer>
</CalendarContainer>
);
Expand All @@ -210,8 +205,7 @@ const WeekHeaderCell = styled.span`
width: 36px;
height: 36px;
font-family: ${(props) => props.theme.dateInput.pickerFontFamily};
font-size: 14px;
line-height: 19px;
font-size: 0.875rem;
color: ${(props) => props.theme.dateInput.pickerWeekFontColor};
`;

Expand All @@ -238,7 +232,6 @@ const DayCell = styled.button<DayCellPropsType>`
padding: 0;
font-size: 0.875rem;
font-family: ${(props) => props.theme.dateInput.pickerFontFamily};
font-weight: 400;
border: none;
border-radius: 50%;
cursor: pointer;
Expand Down Expand Up @@ -272,10 +265,4 @@ const DayCell = styled.button<DayCellPropsType>`
: props.theme.dateInput.pickerDayFontColor};
`;

const EmptyDayCell = styled.div`
display: inline-block;
width: 40px;
height: 36px;
`;

export default React.memo(Calendar);