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

Calendar Modal Fix - Multiple Selections Display #471

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Calendar Modal Fix - Multiple Selections Display #471

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f081683
Calendar Modal Fix - Multiple Selections Display
Atikpui7 Oct 22, 2023
47a336f
Merge branch 'master' of https://github.com/cornell-dti/carriage-web …
Atikpui007 Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion frontend/src/components/MiniCal/MiniCal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const Icon = () => (

const MiniCal = () => {
const { curDate, setCurDate } = useDate();
const datePickerRef = React.useRef<any>(null);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can extend the types via

declare module 'react-datepicker' {
  export default class ReactDatePicker {
    setPreSelection?: (date: Date) => void;
  }
}

to be able to do

Suggested change
const datePickerRef = React.useRef<any>(null);
const datePickerRef = React.useRef<DatePicker>(null);

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

imo we don't want to introduce more anys into the system if we don't have to


const updateDate = (d: Date) => {
setCurDate(d);
Expand Down Expand Up @@ -82,7 +83,9 @@ const MiniCal = () => {
<div className={styles.root}>
<DatePicker
adjustDateOnChange
ref={datePickerRef}
selected={curDate}
shouldCloseOnSelect={false}
onChange={updateDate}
closeOnScroll={true}
dateFormat="MMM dd, yyyy"
Expand All @@ -103,7 +106,11 @@ const MiniCal = () => {
<button
className={cn(styles.btn2, { [styles.active]: isToday(date) })}
onClick={() => {
updateDate(new Date());
const today = new Date();
if (datePickerRef.current) {
datePickerRef.current.setSelected(today);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional chaining works with function calls too; also setPreSelection seems more appropriate than setSelected here (likely less overhead). It's also what's used in react-datepicker's native implementation of the "Today" button.

Suggested change
if (datePickerRef.current) {
datePickerRef.current.setSelected(today);
}
datePickerRef.current?.setPreSelection?.(today);

updateDate(today);
pseudoScroll();
}}
>
Expand All @@ -117,6 +124,9 @@ const MiniCal = () => {
onClick={() => {
const tomorrow = new Date();
tomorrow.setDate(new Date().getDate() + 1);
if (datePickerRef.current) {
datePickerRef.current.setSelected(tomorrow);
}
updateDate(tomorrow);
pseudoScroll();
}}
Expand Down
Loading