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

included negative ranges to be an acceptable choice for range picker … #496

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

included negative ranges to be an acceptable choice for range picker … #496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
80497f4
included negative ranges to be an acceptable choice for range picker …
wibed Jan 16, 2023
bc687d8
approach to remove select and only use selectRange, helper functions,…
wibed Jan 17, 2023
5afd569
restructured calendar to render schedules based on a modyfiable sched…
wibed Jan 18, 2023
3d6e4c5
fixed up example so it displays details correctly
wibed Jan 19, 2023
3e0e5b1
fixed up example so it displays details correctly
wibed Jan 19, 2023
a03d4a4
fixed the example to reaffirm a valid use case aswell as proper usage…
wibed Jan 19, 2023
5b5fbdc
missing comment on library variable
wibed Jan 19, 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
6 changes: 6 additions & 0 deletions examples/datepicker/datepicker.theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,10 +165,16 @@ const Datepicker: ComponentMultiStyleConfig = {

'&[data-dont-round-left="true"]': {
borderLeftRadius: 0,
clipPath: "inset(-5px -5px -5px -0.5px)",
},

'&[data-dont-round-right="true"]': {
borderRightRadius: 0,
clipPath: "inset(-5px 0px -5px -5px)",
},

'&[data-bin="true"]': {
backgroundColor: "blue.200",
},
},

Expand Down
201 changes: 117 additions & 84 deletions examples/datepicker/range-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,7 @@ import {
Text,
useMultiStyleConfig,
} from "@chakra-ui/react";
import {
addWeeks,
compareAsc,
eachDayOfInterval,
endOfMonth,
endOfWeek,
format,
getDay,
isEqual,
isToday,
startOfMonth,
startOfWeek,
} from "date-fns";
import { eachDayOfInterval, endOfMonth, format, getDay, isEqual, isToday, startOfMonth } from "date-fns";
import React, { useState } from "react";
import { IoArrowForwardSharp, IoCalendarClearSharp, IoChevronBackSharp, IoChevronForwardSharp } from "react-icons/io5";

Expand All @@ -34,16 +22,24 @@ import { useLilius } from "../../src/use-lilius";
export const RangeSelect: React.FC = () => {
const {
calendar,
deselect,
inRange,
isAtPole,
isSelected,
isStart,
isOriginDay,
isFloorBoundStart,
isFloorBoundEnd,
isCeilBoundStart,
isCeilBoundEnd,
select,
selected,
setSelected,
selectRange,
viewing,
viewNextMonth,
viewPreviousMonth,
viewToday,
schedule,
setSchedule,
} = useLilius({ numberOfMonths: 2 });

const styles = useMultiStyleConfig("Datepicker", {});
Expand Down Expand Up @@ -98,22 +94,21 @@ export const RangeSelect: React.FC = () => {
<PopoverContent sx={styles.popContent} w="600px">
<PopoverBody sx={styles.popBody}>
<ButtonGroup sx={styles.shortcutButtonGroup}>
<Button
onClick={() => selectRange(startOfWeek(new Date()), endOfWeek(new Date()), true)}
size="sm"
sx={styles.shortcutButton}
>
This Week
<Button onClick={() => setSelected([])} size="sm" sx={styles.shortcutButton}>
cancel selection
</Button>

<Button
onClick={() =>
selectRange(startOfWeek(addWeeks(new Date(), 1)), endOfWeek(addWeeks(new Date(), 1)), true)
}
onClick={() => {
setSchedule(
schedule.concat([{ id: schedule.length, start: selected[0], end: selected[selected.length - 1] }]),
);
setSelected([]);
}}
size="sm"
sx={styles.shortcutButton}
>
Next Week
addSchedule
</Button>
</ButtonGroup>

Expand All @@ -128,11 +123,18 @@ export const RangeSelect: React.FC = () => {
sx={styles.navigationButton}
/>

{calendar.map(([[firstDay]]) => (
<Text key={firstDay.toDateString()} sx={styles.navigationLabel}>
{format(firstDay, "MMMM yyyy")}
</Text>
))}
{calendar.map((month) => {
const firstWeek = month[0][1];
if (!firstWeek) throw new Error("this is not supposed to happen");
const firstWeekDayArray = [...firstWeek.keys()];
const firstofMonth = firstWeekDayArray.filter((el) => el.getDate() === 1)[0];

return (
<Text key={firstofMonth.toDateString()} sx={styles.navigationLabel}>
{format(firstofMonth, "MMMM yyyy")}
</Text>
);
})}

<IconButton
aria-label="Next Month"
Expand All @@ -144,65 +146,96 @@ export const RangeSelect: React.FC = () => {
</Box>

<Stack direction="row">
{calendar.map((month) => (
<Box w="50%" key={month[0][0].toDateString()}>
<Box sx={styles.calendarContainer}>
<Box sx={styles.dayLabelContainer}>
{month[0].map((day) => (
<Box key={`${day}`} sx={styles.dayLabel}>
{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][getDay(day)]}
</Box>
))}
</Box>
{calendar.map((month) => {
const firstWeek = month[0][1];
if (!firstWeek) throw new Error("this is not supposed to happen");
const firstWeekDayArray = [...firstWeek.keys()];
const firstofMonth = firstWeekDayArray.filter((el) => el.getDate() === 1)[0];

return (
<Box w="50%" key={month[0][0].toDateString()}>
<Box sx={styles.calendarContainer}>
<Box sx={styles.dayLabelContainer}>
{firstWeekDayArray.map((day) => {
return (
<Box key={`${day}`} sx={styles.dayLabel}>
{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][getDay(day)]}
</Box>
);
})}
</Box>

{month.map((week) => (
<Box
key={`month-${month[0][0].toDateString()}-week-${week[0]}`}
sx={styles.calendarMatrixContainer}
>
{week.map((day) => (
{month.map((week) => {
const weekDayMap = week[1];
if (!weekDayMap) throw new Error("this is not a date");
const weekArray = [...weekDayMap];

return (
<Box
data-in-range={inRange(day, startOfMonth(viewing), endOfMonth(viewing))}
data-selected={isSelected(day)}
data-today={isToday(day)}
data-dont-round={
isSelected(day) &&
!isEqual(day, selected[0]) &&
!isEqual(day, selected[selected.length - 1])
}
data-dont-round-left={isSelected(day) && !isEqual(day, selected[0])}
data-dont-round-right={isSelected(day) && !isEqual(day, selected[selected.length - 1])}
key={`${day}`}
onClick={() => {
const sorted = selected.sort((a, b) => compareAsc(a, b));

if (sorted.length === 0) {
select(day);
} else if (isSelected(day)) {
if (selected.length === 1) {
deselect(day);
} else {
const range = eachDayOfInterval({ start: sorted[0], end: day });
const diff = sorted.filter((d) =>
range.map((a) => a.getTime()).includes(d.getTime()),
);

selectRange(diff[0], diff[diff.length - 1], true);
}
} else {
selectRange(sorted[0], day, true);
}
}}
sx={styles.calendarMatrixDay}
key={`month-${month[0][0].toDateString()}-week-${week[0]}`}
sx={styles.calendarMatrixContainer}
>
<Text>{format(day, "dd")}</Text>
{weekArray.map((dayTouple) => {
const day = dayTouple[0];
const daySchedule = dayTouple[1];
if (!day || !daySchedule) throw new Error("this is not supposed to happen");

return (
<Box
data-in-range={inRange(day, startOfMonth(firstofMonth), endOfMonth(firstofMonth))}
data-selected={isAtPole(day)}
data-today={isToday(day)}
data-dont-round={
isSelected(day) &&
!isEqual(day, selected[0]) &&
!isEqual(day, selected[selected.length - 1])
}
data-end={isStart(day)}
data-dont-round-left={
isAtPole(day) && !isOriginDay() && (isFloorBoundStart(day) || isFloorBoundEnd(day))
}
data-dont-round-right={
isAtPole(day) && !isOriginDay() && (isCeilBoundStart(day) || isCeilBoundEnd(day))
}
data-bin={daySchedule.length > 0}
key={`${day}`}
onClick={() => {
if (selected.length === 0) {
select(day);
} else if (isSelected(day)) {
if (selected.length === 1) {
selectRange(selected[0], day, true);
} else {
const start = selected[0];
const end = day;
let range: Date[] = [];
if (start > end) {
range = eachDayOfInterval({ start: end, end: start }).reverse();
} else {
range = eachDayOfInterval({ start, end });
}
const diff = selected.filter((d) =>
range.map((a) => a.getTime()).includes(d.getTime()),
);
selectRange(diff[0], diff[diff.length - 1], true);
}
} else {
selectRange(selected[0], day, true);
}
}}
sx={styles.calendarMatrixDay}
>
<Text>{format(day, "dd")}</Text>
</Box>
);
})}
</Box>
))}
</Box>
))}
);
})}
</Box>
</Box>
</Box>
))}
);
})}
</Stack>

<Divider sx={styles.divider} />
Expand Down
Loading