-
Notifications
You must be signed in to change notification settings - Fork 17
Removing Material-ui datepicker #1367
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.
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
Merged
Merged
Changes from all commits
Commits
Show all changes
38 commits
Select commit
Hold shift + click to select a range
fefa23d
Removing Material-ui datepicker
Jialecl 625ff5a
removing material-ui packages + calendar toolbar focus and size
Jialecl 805c425
monthpicker resized
Jialecl e7d974a
Adding improvements based on feedback
Jialecl a9be1e8
adding translation + accessibility improvements + code fixes
Jialecl abbdc9d
changing box-shadow to match other pop ups
Jialecl 6f1801d
improving focus behavior
Jialecl b774715
adding changes based on feedback
Jialecl 3ac7f47
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl 4e6e1a8
Adding key to month and year list to avoid warning
Jialecl 1fb0838
adding back id
Jialecl 42cebbd
separating date picker in multiple components
Jialecl 00c3bf5
Accessibility improvements and fixing some interactions
Jialecl 51c12fc
Storybook fix
Jialecl e2aa344
Changing the calendar to always show 6 rows based on new design
Jialecl b4eb1fb
Adding current day/year behaviour
Jialecl b96c6e5
Adding calendar header yearpicker trigger
Jialecl 916c54d
Updating tests and month localization
Jialecl 70dd817
applying existing tokens
Jialecl e1ea4ad
Updating visual tests
Jialecl 6a136ce
Updating date tokens
Jialecl fb1bf24
Updating specs to match new calendar
Jialecl 5a7b80e
Adding additional tests for other month and year select
Jialecl 2b1ea16
Adding roving tabindex to yearpicker
Jialecl c5926eb
Adding box-sizing to add the padding to the width
Jialecl 25a21da
Adding changes to focus, selected date and visual changes based on fe…
Jialecl b4e9d42
fixing build + code improvements based on feddback
Jialecl 5cd056f
adding return
Jialecl df9dd49
adding ref solution
Jialecl 69c9492
Ordering css + removed letter spacing
0f88c80
Changing ref solution and adding title to calendar action
Jialecl 354fa61
changing aria values to string
Jialecl 5290021
Ref test fix + onblur in calendar
Jialecl fadced4
Cahnging ref solution and improving yearpicker scroll
Jialecl 08ed514
reverting documentation changes
Jialecl b2f4259
Some updates to the Date Picker based on feedback
895c63b
Reversing token changes
19f0b41
Merge branch 'master' into jialecl-calendar
GomezIvann File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,281 @@ | ||
| import dayjs, { Dayjs } from "dayjs"; | ||
| import React, { useState, useMemo, useEffect } from "react"; | ||
| import styled from "styled-components"; | ||
| import { CalendarPropsType } from "./types"; | ||
| import useTranslatedLabels from "../useTranslatedLabels"; | ||
| import { DxcFlex } from "../main"; | ||
|
|
||
| const getDays = (innerDate: Dayjs) => { | ||
| const monthDayCells = []; | ||
| const lastMonthNumberOfDays = innerDate.set("month", innerDate.get("month") - 1).endOf("month"); | ||
| const firstDayOfMonth = innerDate.startOf("month").day() === 0 ? 6 : innerDate.startOf("month").day() - 1; | ||
| const daysInMonth = firstDayOfMonth + innerDate.daysInMonth(); | ||
|
|
||
| for (let i = 0; i < 42; i++) { | ||
| if (i < firstDayOfMonth) { | ||
| monthDayCells.push({ | ||
| day: lastMonthNumberOfDays.get("date") - firstDayOfMonth + i + 1, | ||
| month: innerDate.get("month") ? innerDate.get("month") - 1 : 11, | ||
| year: innerDate.set("month", innerDate.get("month") - 1).get("year"), | ||
| }); | ||
| } else if (i < daysInMonth) { | ||
| monthDayCells.push({ | ||
| day: i - firstDayOfMonth + 1, | ||
| month: innerDate.get("month"), | ||
| year: innerDate.get("year"), | ||
| }); | ||
| } else { | ||
| monthDayCells.push({ | ||
| day: i - daysInMonth + 1, | ||
| month: innerDate.get("month") === 11 ? 0 : innerDate.get("month") + 1, | ||
| year: innerDate.set("month", innerDate.get("month") + 1).get("year"), | ||
| }); | ||
| } | ||
| } | ||
| return monthDayCells; | ||
| }; | ||
|
|
||
| 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 dayCells = useMemo(() => getDays(innerDate), [innerDate]); | ||
| const translatedLabels = useTranslatedLabels(); | ||
| const weekDays = translatedLabels.calendar.daysShort; | ||
|
|
||
| const onDateClickHandler = (date: { day: number; month: number; year: number }) => { | ||
| const newDate = innerDate.set("month", date.month).set("date", date.day); | ||
| onDaySelect(newDate); | ||
| setDateToFocus(newDate); | ||
| }; | ||
|
|
||
| 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)); | ||
| } | ||
| }; | ||
|
|
||
| const focusDate = (date: Dayjs) => { | ||
| if (innerDate.get("month") !== date.get("month") || innerDate.get("year") !== date.get("year")) { | ||
| onInnerDateChange(date); | ||
| } | ||
| setDateToFocus(date); | ||
| setToFocus(true); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (toFocus) { | ||
| document.getElementById(`day_${dateToFocus.get("date")}_month${dateToFocus.get("month")}`)?.focus(); | ||
| setToFocus(false); | ||
| } | ||
| }, [dateToFocus, toFocus]); | ||
|
|
||
| useEffect(() => { | ||
| if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) { | ||
| updateDateToFocus(); | ||
| } | ||
| }, [innerDate, dateToFocus, selectedDate]); | ||
|
|
||
| const handleDayKeyboardEvent = (event, date) => { | ||
| let dateToFocusTemp = | ||
| date.month === innerDate.get("month") | ||
| ? innerDate.set("date", date.day) | ||
| : innerDate.set("date", date.day).set("month", date.month); | ||
|
|
||
| switch (event.key) { | ||
| case "PageUp": | ||
| event.preventDefault(); | ||
| event.shiftKey | ||
| ? (dateToFocusTemp = dateToFocusTemp.set("year", dateToFocusTemp.get("year") - 1)) | ||
| : (dateToFocusTemp = dateToFocusTemp.set("month", dateToFocusTemp.get("month") - 1)); | ||
| focusDate(dateToFocusTemp); | ||
| break; | ||
| case "PageDown": | ||
| event.preventDefault(); | ||
| event.shiftKey | ||
| ? (dateToFocusTemp = dateToFocusTemp.set("year", dateToFocusTemp.get("year") + 1)) | ||
| : (dateToFocusTemp = dateToFocusTemp.set("month", dateToFocusTemp.get("month") + 1)); | ||
| focusDate(dateToFocusTemp); | ||
| break; | ||
| case "ArrowLeft": | ||
| event.preventDefault(); | ||
| dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") - 1); | ||
| focusDate(dateToFocusTemp); | ||
| break; | ||
| case "ArrowRight": | ||
| event.preventDefault(); | ||
| dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") + 1); | ||
| focusDate(dateToFocusTemp); | ||
| break; | ||
| case "ArrowUp": | ||
| event.preventDefault(); | ||
| dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") - 7); | ||
| focusDate(dateToFocusTemp); | ||
| break; | ||
| case "ArrowDown": | ||
| event.preventDefault(); | ||
| dateToFocusTemp = dateToFocusTemp.set("date", dateToFocusTemp.get("date") + 7); | ||
| focusDate(dateToFocusTemp); | ||
| break; | ||
| case "Home": | ||
| event.preventDefault(); | ||
| dateToFocus.get("day") !== 0 | ||
| ? (dateToFocusTemp = dateToFocusTemp.day(1)) | ||
| : (dateToFocusTemp = innerDate.date(date.day - 1).day(1)); | ||
| focusDate(dateToFocusTemp); | ||
| break; | ||
| case "End": | ||
| event.preventDefault(); | ||
| dateToFocusTemp.get("day") !== 0 && (dateToFocusTemp = dateToFocusTemp.day(7)); | ||
| focusDate(dateToFocusTemp); | ||
| break; | ||
| case " ": | ||
| event.preventDefault(); | ||
| onDaySelect(dateToFocusTemp); | ||
| break; | ||
| } | ||
| }; | ||
GomezIvann marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| return ( | ||
| <CalendarContainer> | ||
| <DxcFlex alignItems="center" justifyContent="space-between"> | ||
| {weekDays.map((weekDay) => ( | ||
| <WeekHeaderCell key={weekDay}>{weekDay}</WeekHeaderCell> | ||
| ))} | ||
| </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}`} /> | ||
GomezIvann marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ) | ||
| )} | ||
| </DayCellsContainer> | ||
| </CalendarContainer> | ||
| ); | ||
| }; | ||
|
|
||
| const CalendarContainer = styled.div` | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| padding: 0px 8px 8px 8px; | ||
| width: ${(props) => props.theme.dateInput.pickerWidth}; | ||
| `; | ||
|
|
||
| const WeekHeaderCell = styled.span` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 36px; | ||
| height: 36px; | ||
| font-family: ${(props) => props.theme.dateInput.pickerFontFamily}; | ||
| font-size: 14px; | ||
| line-height: 19px; | ||
| color: ${(props) => props.theme.dateInput.pickerWeekFontColor}; | ||
| `; | ||
|
|
||
| const DayCellsContainer = styled.div` | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| gap: 4px; | ||
| flex-wrap: wrap; | ||
| justify-content: space-between; | ||
| `; | ||
|
|
||
| type DayCellPropsType = { | ||
| selected?: boolean; | ||
| actualMonth: boolean; | ||
| isCurrentDay: boolean; | ||
| }; | ||
|
|
||
| const DayCell = styled.button<DayCellPropsType>` | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 36px; | ||
| height: 36px; | ||
| padding: 0; | ||
| font-size: 0.875rem; | ||
| font-family: ${(props) => props.theme.dateInput.pickerFontFamily}; | ||
| font-weight: 400; | ||
| border: none; | ||
| border-radius: 50%; | ||
| cursor: pointer; | ||
|
|
||
| &:focus { | ||
GomezIvann marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| outline: ${(props) => props.theme.dateInput.pickerFocusColor} solid 2px; | ||
| } | ||
| &:hover { | ||
| background-color: ${(props) => | ||
| props.selected | ||
| ? props.theme.dateInput.pickerSelectedDateBackgroundColor | ||
| : props.theme.dateInput.pickerHoverDateBackgroundColor}; | ||
| color: ${(props) => | ||
| props.selected ? props.theme.dateInput.pickerSelectedDateColor : props.theme.dateInput.pickerHoverDateFontColor}; | ||
| } | ||
| &:active { | ||
| background-color: #4b1c7d; | ||
| color: #ffffff; | ||
| } | ||
|
|
||
| ${(props) => props.isCurrentDay && !props.selected && `border: 1px solid #cbacec;`} | ||
| background-color: ${(props) => | ||
| props.selected ? props.theme.dateInput.pickerSelectedDateBackgroundColor : "transparent"}; | ||
| color: ${(props) => | ||
| props.selected | ||
| ? props.theme.dateInput.pickerSelectedDateColor | ||
| : props.isCurrentDay | ||
| ? props.theme.dateInput.pickerActualDateFontColor | ||
| : !props.actualMonth | ||
| ? "#999999" | ||
| : props.theme.dateInput.pickerDayFontColor}; | ||
| `; | ||
|
|
||
| const EmptyDayCell = styled.div` | ||
| display: inline-block; | ||
| width: 40px; | ||
| height: 36px; | ||
| `; | ||
|
|
||
| export default React.memo(Calendar); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.