@react-stately/calendar - npm Package Compare versions

Comparing version 3.0.0-rc.0 to 3.0.0-rc.1

dist/main.js

@@ -124,6 +124,10 @@ var $hEzMm$internationalizeddate = require("@internationalized/date");
     let [isFocused, setFocused] = $hEzMm$react.useState(props.autoFocus || false);
-    let endDate = $hEzMm$react.useMemo(()=>startDate.add(visibleDuration).subtract({
-            days: 1
-        })
-    , [
+    let endDate = $hEzMm$react.useMemo(()=>{
+        let duration = {
+            ...visibleDuration
+        };
+        if (duration.days) duration.days--;
+        else duration.days = -1;
+        return startDate.add(duration);
+    }, [
         startDate,
@@ -143,3 +147,3 @@ visibleDuration
     else if (focusedDate.compare(startDate) < 0) setStartDate($4301262d71f567b9$export$530edbfc915b2b04(focusedDate, visibleDuration, locale, minValue, maxValue));
-    else if (focusedDate.compare(startDate.add(visibleDuration)) >= 0) setStartDate($4301262d71f567b9$export$144a00ba6044eb9(focusedDate, visibleDuration, locale, minValue, maxValue));
+    else if (focusedDate.compare(endDate) > 0) setStartDate($4301262d71f567b9$export$144a00ba6044eb9(focusedDate, visibleDuration, locale, minValue, maxValue));
     // Sets focus to a specific cell date
@@ -284,10 +288,37 @@ function focusCell(date) {
         isPreviousVisibleRangeInvalid () {
-            return this.isInvalid(startDate.subtract({
+            let prev = startDate.subtract({
                 days: 1
-            }), minValue, maxValue);
+            });
+            return $hEzMm$internationalizeddate.isSameDay(prev, startDate) || this.isInvalid(prev, minValue, maxValue);
         },
         isNextVisibleRangeInvalid () {
-            return this.isInvalid(endDate.add({
+            // Adding may return the same date if we reached the end of time
+            // according to the calendar system (e.g. 9999-12-31).
+            let next = endDate.add({
                 days: 1
-            }), minValue, maxValue);
+            });
+            return $hEzMm$internationalizeddate.isSameDay(next, endDate) || this.isInvalid(next, minValue, maxValue);
+        },
+        getDatesInWeek (weekIndex, from = startDate) {
+            // let date = startOfWeek(from, locale);
+            let date = from.add({
+                weeks: weekIndex
+            });
+            let dates = [];
+            date = $hEzMm$internationalizeddate.startOfWeek(date, locale);
+            // startOfWeek will clamp dates within the calendar system's valid range, which may
+            // start in the middle of a week. In this case, add null placeholders.
+            let dayOfWeek = $hEzMm$internationalizeddate.getDayOfWeek(date, locale);
+            for(let i = 0; i < dayOfWeek; i++)dates.push(null);
+            while(dates.length < 7){
+                dates.push(date);
+                let nextDate = date.add({
+                    days: 1
+                });
+                if ($hEzMm$internationalizeddate.isSameDay(date, nextDate)) break;
+                date = nextDate;
+            }
+            // Add null placeholders if at the end of the calendar system.
+            while(dates.length < 7)dates.push(null);
+            return dates;
         }
@@ -294,0 +325,0 @@ };

dist/module.js

@@ -1,2 +0,2 @@
-import {DateFormatter as $keQhS$DateFormatter, toCalendar as $keQhS$toCalendar, toCalendarDate as $keQhS$toCalendarDate, today as $keQhS$today, GregorianCalendar as $keQhS$GregorianCalendar, startOfWeek as $keQhS$startOfWeek, startOfMonth as $keQhS$startOfMonth, endOfWeek as $keQhS$endOfWeek, endOfMonth as $keQhS$endOfMonth, isSameDay as $keQhS$isSameDay, startOfYear as $keQhS$startOfYear, maxDate as $keQhS$maxDate, minDate as $keQhS$minDate, isEqualDay as $keQhS$isEqualDay} from "@internationalized/date";
+import {DateFormatter as $keQhS$DateFormatter, toCalendar as $keQhS$toCalendar, toCalendarDate as $keQhS$toCalendarDate, today as $keQhS$today, GregorianCalendar as $keQhS$GregorianCalendar, startOfWeek as $keQhS$startOfWeek, startOfMonth as $keQhS$startOfMonth, endOfWeek as $keQhS$endOfWeek, endOfMonth as $keQhS$endOfMonth, isSameDay as $keQhS$isSameDay, getDayOfWeek as $keQhS$getDayOfWeek, startOfYear as $keQhS$startOfYear, maxDate as $keQhS$maxDate, minDate as $keQhS$minDate, isEqualDay as $keQhS$isEqualDay} from "@internationalized/date";
 import {useControlledState as $keQhS$useControlledState} from "@react-stately/utils";
@@ -118,6 +118,10 @@ import {useMemo as $keQhS$useMemo, useState as $keQhS$useState, useRef as $keQhS$useRef} from "react";
     let [isFocused, setFocused] = $keQhS$useState(props.autoFocus || false);
-    let endDate = $keQhS$useMemo(()=>startDate.add(visibleDuration).subtract({
-            days: 1
-        })
-    , [
+    let endDate = $keQhS$useMemo(()=>{
+        let duration = {
+            ...visibleDuration
+        };
+        if (duration.days) duration.days--;
+        else duration.days = -1;
+        return startDate.add(duration);
+    }, [
         startDate,
@@ -137,3 +141,3 @@ visibleDuration
     else if (focusedDate.compare(startDate) < 0) setStartDate($f62d864046160412$export$530edbfc915b2b04(focusedDate, visibleDuration, locale, minValue, maxValue));
-    else if (focusedDate.compare(startDate.add(visibleDuration)) >= 0) setStartDate($f62d864046160412$export$144a00ba6044eb9(focusedDate, visibleDuration, locale, minValue, maxValue));
+    else if (focusedDate.compare(endDate) > 0) setStartDate($f62d864046160412$export$144a00ba6044eb9(focusedDate, visibleDuration, locale, minValue, maxValue));
     // Sets focus to a specific cell date
@@ -278,10 +282,37 @@ function focusCell(date) {
         isPreviousVisibleRangeInvalid () {
-            return this.isInvalid(startDate.subtract({
+            let prev = startDate.subtract({
                 days: 1
-            }), minValue, maxValue);
+            });
+            return $keQhS$isSameDay(prev, startDate) || this.isInvalid(prev, minValue, maxValue);
         },
         isNextVisibleRangeInvalid () {
-            return this.isInvalid(endDate.add({
+            // Adding may return the same date if we reached the end of time
+            // according to the calendar system (e.g. 9999-12-31).
+            let next = endDate.add({
                 days: 1
-            }), minValue, maxValue);
+            });
+            return $keQhS$isSameDay(next, endDate) || this.isInvalid(next, minValue, maxValue);
+        },
+        getDatesInWeek (weekIndex, from = startDate) {
+            // let date = startOfWeek(from, locale);
+            let date = from.add({
+                weeks: weekIndex
+            });
+            let dates = [];
+            date = $keQhS$startOfWeek(date, locale);
+            // startOfWeek will clamp dates within the calendar system's valid range, which may
+            // start in the middle of a week. In this case, add null placeholders.
+            let dayOfWeek = $keQhS$getDayOfWeek(date, locale);
+            for(let i = 0; i < dayOfWeek; i++)dates.push(null);
+            while(dates.length < 7){
+                dates.push(date);
+                let nextDate = date.add({
+                    days: 1
+                });
+                if ($keQhS$isSameDay(date, nextDate)) break;
+                date = nextDate;
+            }
+            // Add null placeholders if at the end of the calendar system.
+            while(dates.length < 7)dates.push(null);
+            return dates;
         }
@@ -288,0 +319,0 @@ };

dist/types.d.ts

@@ -77,2 +77,7 @@ import { CalendarDate, Calendar, DateDuration } from "@internationalized/date";
     isNextVisibleRangeInvalid(): boolean;
+    /**
+     * Returns an array of dates in the week index counted from the provided start date, or the first visible date if not given.
+     * The returned array always has 7 elements, but may include null if the date does not exist according to the calendar system.
+     */
+    getDatesInWeek(weekIndex: number, startDate?: CalendarDate): Array<CalendarDate | null>;
 }
@@ -79,0 +84,0 @@ export interface CalendarState extends CalendarStateBase {

package.json

 {
   "name": "@react-stately/calendar",
-  "version": "3.0.0-rc.0",
+  "version": "3.0.0-rc.1",
   "description": "Spectrum UI components in React",
@@ -21,10 +21,10 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@internationalized/date": "3.0.0-rc.0",
-    "@react-stately/utils": "^3.4.1",
-    "@react-types/calendar": "3.0.0-rc.0",
-    "@react-types/datepicker": "3.0.0-rc.0",
-    "@react-types/shared": "^3.12.0"
+    "@internationalized/date": "3.0.0-rc.1",
+    "@react-stately/utils": "^3.5.0",
+    "@react-types/calendar": "3.0.0-rc.1",
+    "@react-types/datepicker": "3.0.0-rc.1",
+    "@react-types/shared": "^3.13.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
@@ -34,3 +34,3 @@ "publishConfig": {
   },
-  "gitHead": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

src/types.ts

@@ -17,3 +17,3 @@ /*
 
-export interface CalendarStateBase {
+interface CalendarStateBase {
   /** Whether the calendar is disabled. */
@@ -90,3 +90,8 @@ readonly isDisabled: boolean,
   /** Returns whether the next visible date range is allowed to be selected according to the `maxValue` prop. */
-  isNextVisibleRangeInvalid(): boolean
+  isNextVisibleRangeInvalid(): boolean,
+  /**
+   * Returns an array of dates in the week index counted from the provided start date, or the first visible date if not given.
+   * The returned array always has 7 elements, but may include null if the date does not exist according to the calendar system.
+   */
+  getDatesInWeek(weekIndex: number, startDate?: CalendarDate): Array<CalendarDate | null>
 }
@@ -93,0 +98,0 @@

src/useCalendarState.ts

@@ -21,2 +21,3 @@ /*
   endOfWeek,
+  getDayOfWeek,
   GregorianCalendar,
@@ -104,3 +105,11 @@ isSameDay,
 
-  let endDate = useMemo(() => startDate.add(visibleDuration).subtract({days: 1}), [startDate, visibleDuration]);
+  let endDate = useMemo(() => {
+    let duration = {...visibleDuration};
+    if (duration.days) {
+      duration.days--;
+    } else {
+      duration.days = -1;
+    }
+    return startDate.add(duration);
+  }, [startDate, visibleDuration]);
 
@@ -121,3 +130,3 @@ // Reset focused date and visible range when calendar changes.
     setStartDate(alignEnd(focusedDate, visibleDuration, locale, minValue, maxValue));
-  } else if (focusedDate.compare(startDate.add(visibleDuration)) >= 0) {
+  } else if (focusedDate.compare(endDate) > 0) {
     setStartDate(alignStart(focusedDate, visibleDuration, locale, minValue, maxValue));
@@ -296,6 +305,41 @@ }
     isPreviousVisibleRangeInvalid() {
-      return this.isInvalid(startDate.subtract({days: 1}), minValue, maxValue);
+      let prev = startDate.subtract({days: 1});
+      return isSameDay(prev, startDate) || this.isInvalid(prev, minValue, maxValue);
     },
     isNextVisibleRangeInvalid() {
-      return this.isInvalid(endDate.add({days: 1}), minValue, maxValue);
+      // Adding may return the same date if we reached the end of time
+      // according to the calendar system (e.g. 9999-12-31).
+      let next = endDate.add({days: 1});
+      return isSameDay(next, endDate) || this.isInvalid(next, minValue, maxValue);
+    },
+    getDatesInWeek(weekIndex, from = startDate) {
+      // let date = startOfWeek(from, locale);
+      let date = from.add({weeks: weekIndex});
+      let dates = [];
+
+      date = startOfWeek(date, locale);
+
+      // startOfWeek will clamp dates within the calendar system's valid range, which may
+      // start in the middle of a week. In this case, add null placeholders.
+      let dayOfWeek = getDayOfWeek(date, locale);
+      for (let i = 0; i < dayOfWeek; i++) {
+        dates.push(null);
+      }
+
+      while (dates.length < 7) {
+        dates.push(date);
+        let nextDate = date.add({days: 1});
+        if (isSameDay(date, nextDate)) {
+          // If the next day is the same, we have hit the end of the calendar system.
+          break;
+        }
+        date = nextDate;
+      }
+
+      // Add null placeholders if at the end of the calendar system.
+      while (dates.length < 7) {
+        dates.push(null);
+      }
+
+      return dates;
     }
@@ -302,0 +346,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

189697

increased by5.5%

Lines of code

1857

increased by6.36%

Dependency changes

• + Added@internationalized/date@3.0.0-rc.1(transitive)

• + Added@react-types/calendar@3.0.0-rc.1(transitive)

• + Added@react-types/datepicker@3.0.0-rc.1(transitive)

• + Addedreact@18.3.1(transitive)

• - Removed@internationalized/date@3.0.0-rc.0(transitive)

• - Removed@react-types/calendar@3.0.0-rc.0(transitive)

• - Removed@react-types/datepicker@3.0.0-rc.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• Updated@internationalized/date@3.0.0-rc.1

• Updated@react-stately/utils@^3.5.0

• Updated@react-types/calendar@3.0.0-rc.1

• Updated@react-types/datepicker@3.0.0-rc.1

• Updated@react-types/shared@^3.13.0