Skip to content

improve date picker #270

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

Open
h-bura wants to merge 3 commits into
base: main
Choose a base branch
from
Open

improve date picker #270

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea9fc1c
improve date picker
h-bura Jun 4, 2023
c661f94
use constant for dates
kod-man Jun 5, 2023
60563ef
fix MenuToday
h-bura Jun 5, 2023
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
146 changes: 96 additions & 50 deletions src/pages/TodayPage/Components/MenuToday.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,44 +21,26 @@ import SunIcon from "../../../icons/SunIcon";
import TodayIcon from "../../../icons/TodayIcon";
import UpsentIcon from "../../../icons/UpsentIcon";

const DATE_OPTIONS = {
TODAY: "Today",
TOMORROW: "Tomorrow",
NEXT_WEEK: "Next weekend",
NO_DATE: "No date"
};
function MenuToday() {
const date = new Date(Date.now());
const [startDate, setStartDate] = useState(new Date());
const [startDate, setStartDate] = useState(date);
const weeksDate = new Date(Date.now() + 3600 * 1000 * 24);
const nextWeeks = new Date(Date.now() + 3600 * 1000 * 24 * 7);
const formatNextWeekOptions: Intl.DateTimeFormatOptions = {
const formatOptions: Intl.DateTimeFormatOptions = {
weekday: "short",
day: "numeric",
month: "short"
};
const formatTomorrowOptions: Intl.DateTimeFormatOptions = {
weekday: "short"
};
const formatTodayOptions: Intl.DateTimeFormatOptions = {
month: "short",
day: "numeric"
};
const today = date.toLocaleDateString("en-US", formatTodayOptions);
const tomorrow = weeksDate.toLocaleDateString("en-US", formatTomorrowOptions);
const nextWeek = nextWeeks.toLocaleDateString("en-US", formatNextWeekOptions);

const menuItemsToday = [
{
icon: <SunIcon color="orange" />,
text1: "Tomorrow",
text2: tomorrow
},
{
icon: <CouchIcon color="#246fe0" />,
text1: "Next weekend",
text2: nextWeek
},
{
icon: <UpsentIcon />,
text1: "No date"
}
];

const today = date.toLocaleDateString("en-US", formatOptions);
const tomorrow = weeksDate.toLocaleDateString("en-US", formatOptions);
const nextWeek = nextWeeks.toLocaleDateString("en-US", formatOptions);
const [checkedDate, setCheckedDate] = useState(today);
return (
<Menu>
<Tooltip hasArrow label="Set due date" placement="top">
Expand All @@ -76,40 +58,104 @@ function MenuToday() {
rightIcon={
<Tooltip hasArrow label="Remove due date" placement="top">
<Box
display={checkedDate ? "flex" : "none"}
bg="transparent"
_hover={{ bg: "#d3d3d3" }}
borderRadius="5px"
onClick={(e) => {
e.stopPropagation(), setCheckedDate("");
}}
>
<DeleteIcon />
</Box>
</Tooltip>
}
>
<Text fontSize="13px" fontFamily="inherit" fontWeight="400">
Today
<Text
fontSize="13px"
fontFamily="inherit"
fontWeight="400"
placeholder="Due date"
>
{checkedDate === today
? DATE_OPTIONS.TODAY
: checkedDate === tomorrow
? DATE_OPTIONS.TOMORROW
: checkedDate
? checkedDate.slice(4)
: DATE_OPTIONS.NO_DATE}
</Text>
</MenuButton>
</Tooltip>
<MenuList minWidth="275px">
<MenuGroup title={today}>
<MenuList minWidth="300px">
<MenuGroup>
<MenuItem>
<Text>{checkedDate.slice(4)}</Text>
</MenuItem>
<MenuDivider />
{menuItemsToday.map((item) => (
<MenuItem fontSize="13px" fontWeight="500" key={item.text1}>
{item.icon}
<Text ml="2">{item.text1}</Text>
<Spacer />
<Text color="#808080" fontWeight="400">
{item.text2}
</Text>
</MenuItem>
))}
<MenuItem
onClick={() => setCheckedDate(today)}
display={checkedDate === today ? "none" : "flex"}
fontSize="13px"
fontWeight="500"
>
<TodayIcon width="24" height="18" color="green" />
<Text ml="2">{DATE_OPTIONS.TODAY}</Text>
<Spacer />
<Text color="#808080" fontWeight="400">
{today.slice(0, 3)}
</Text>
</MenuItem>
<MenuItem
onClick={() => setCheckedDate(tomorrow)}
display={checkedDate === tomorrow ? "none" : "flex"}
fontSize="13px"
fontWeight="500"
>
<SunIcon color="orange" />
<Text ml="2">{DATE_OPTIONS.TOMORROW}</Text>
<Spacer />
<Text color="#808080" fontWeight="400">
{tomorrow.slice(0, 3)}
</Text>
</MenuItem>
<MenuItem
onClick={() => setCheckedDate(nextWeek)}
fontSize="13px"
fontWeight="500"
>
<CouchIcon color="#246fe0" />
<Text ml="2">{DATE_OPTIONS.NEXT_WEEK}</Text>
<Spacer />
<Text color="#808080" fontWeight="400">
{nextWeek}
</Text>
</MenuItem>
<MenuItem
onClick={() => setCheckedDate("")}
fontSize="13px"
fontWeight="500"
>
<UpsentIcon />
<Text ml="2">{DATE_OPTIONS.NO_DATE}</Text>
</MenuItem>
<MenuDivider />
<Flex alignItems="center" justifyContent="center">
<ReactDatePicker
closeOnScroll={true}
selected={startDate}
onChange={(date: Date) => setStartDate(date)}
/>
<Flex ml="15px" alignItems="center">
<TodayIcon />
<Box ml="10px">
<ReactDatePicker
selected={startDate}
onChange={(date: Date) => {
setStartDate(date),
setCheckedDate(
date.toLocaleDateString("en-US", formatOptions)
);
}}
showTimeSelect
dateFormat="d MMMM, yyyy h:mm aa"
minDate={new Date()}
/>
</Box>
</Flex>
</MenuGroup>
</MenuList>
Expand Down