Merge pull request #1537 from CultureHQ/feature/calendar-disable-futu…

…re-dates Add functionality to disable future dates
CultureHQ · Jul 8, 2024 · 7e30ed4 · 7e30ed4
2 parents 29483ec + 1b7c310
commit 7e30ed4
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## [Unreleased]
 
+## [20.2.1] - 2024-07-08
+
+## Added
+
+- Adding disable future dates to the `Calendar` component
+
 ## [20.2.0] - 2024-06-26
 
 ## Added

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@culturehq/components",
-  "version": "20.2.0",
+  "version": "20.2.1",
   "description": "CultureHQ's component library",
   "main": "dist/components.js",
   "types": "dist/components.d.ts",

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -68,11 +68,12 @@ type CalendarProps = {
   month2?: null | number;
   day2?: null | number;
   range?: boolean;
+  disableFuture?: boolean;
   onChange: (year: number, month: number, day: number, range?: boolean) => void;
 };
 
 const Calendar: React.FC<CalendarProps> = ({ year = null, month = null, day = null,
-  onChange, range = false, year2, month2, day2 }) => {
+  onChange, range = false, year2, month2, day2, disableFuture = false }) => {
   const [visible, setVisible] = useState<CalendarView>(() => ({
     year: year === null ? new Date().getFullYear() : year,
     month: month === null ? new Date().getMonth() : month
@@ -178,19 +179,21 @@ const Calendar: React.FC<CalendarProps> = ({ year = null, month = null, day = nu
       </div>
       <div className="chq-cal--days">
         {values.map(value => {
+          const today = new Date();
+          const currentDay = new Date(value.year, value.month, value.day);
           const valueHash = `${value.year}-${value.month}-${value.day}`;
           const onClick = () => onChange(value.year, value.month, value.day, range);
           const inRange = isInRange(value.year, value.month, value.day);
           const className = classnames("chq-cal--day", {
             "chq-cal--day-act": (valueHash === activeHash || valueHash === activeHash2),
-            "chq-cal--day-out": value.fill,
+            "chq-cal--day-out": value.fill || (today < currentDay && disableFuture),
             "chq-cal--day-in-range": inRange
           });
 
           return (
             <>
               <div id={`${value.month}-${value.day}-${value.year}`} style={{ display: "none" }}>{monthNames[value.month]} {value.day}, {value.year}</div>
-              <PlainButton key={valueHash} className={className} onClick={onClick} aria-labelledby={`${value.month}-${value.day}-${value.year}`}>
+              <PlainButton key={valueHash} className={className} onClick={today < currentDay && disableFuture ? () => {} : onClick} aria-labelledby={`${value.month}-${value.day}-${value.year}`}>
                 {value.day}
               </PlainButton>
             </>

diff --git a/stories/Calendar.stories.tsx b/stories/Calendar.stories.tsx
@@ -6,6 +6,7 @@ import { Calendar } from "../src/components";
 
 type CalendarState = Pick<React.ComponentProps<typeof Calendar>, "year" | "month" | "day">;
 type ContainerProps = Pick<React.ComponentProps<typeof Calendar>, "onChange" | "range">;
+type DisableProps = Pick<React.ComponentProps<typeof Calendar>, "onChange" | "range" | "disableFuture">;
 
 const Container: React.FC<ContainerProps> = ({ onChange }) => {
   const [value, setValue] = useState<CalendarState>({ year: null, month: null, day: null });
@@ -61,10 +62,51 @@ const RangeContainer: React.FC<ContainerProps> = ({ onChange, range }) => {
   );
 };
 
+const RangeDisableFutureContainer: React.FC<DisableProps> = ({ onChange, range, disableFuture }) => {
+  const [value, setValue] = useState<CalendarState>({ year: null, month: null, day: null });
+  const [value2, setValue2] = useState<CalendarState>({ year: null, month: null, day: null });
+  const onCalendarChange = (year: number, month: number, day: number, isRange?: boolean) => {
+    if (value.day === null) {
+      setValue({ year, month, day });
+      onChange(year, month, day, isRange);
+    } else if (isRange) {
+      if (value2.day === null) {
+        setValue2({ year, month, day });
+        onChange(year, month, day, isRange);
+      } else {
+        setValue2({ year: null, month: null, day: null });
+        setValue({ year, month, day });
+        onChange(year, month, day, isRange);
+      }
+    } else {
+      // regular calendar
+      setValue({ year, month, day });
+      onChange(year, month, day, isRange);
+    }
+  };
+
+  return (
+    <Calendar
+      year={value.year}
+      month={value.month}
+      day={value.day}
+      year2={value2.year}
+      month2={value2.month}
+      day2={value2.day}
+      onChange={onCalendarChange}
+      range={range}
+      disableFuture={disableFuture}
+    />
+  );
+};
+
 storiesOf("Calendar", module)
   .add("default", () => (
     <Container onChange={action("onChange")} />
   ))
   .add("range", () => (
     <RangeContainer onChange={action("onChange")} range />
+  ))
+  .add("disable  future", () => (
+    <RangeDisableFutureContainer onChange={action("onChange")} range disableFuture />
   ));