kahuna-base-react-components 1.4.2 → 1.4.4

package/dist/types.d.ts

@@ -347,6 +347,8 @@ interface KSelectRangeDateProps {
     popupCalendarBackground?: string;
     hideBackdrop?: boolean;
     weeklyMode?: boolean;
+    shorthandEndDateOffsetDays?: number;
+    weeklyModeStartDay?: number;
 }
 type DateRangeType = Date | null | [Date | null, Date | null];
 declare const KSelectRangeDate: React.FC<KSelectRangeDateProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/KSelectRangeDate/KSelectRangeDate.stories.tsx

@@ -71,6 +71,7 @@ KSelectRangePrimary.args = {
   align: "center",
   hideBackdrop: true,
   anchorToButton: true,
+  shorthandEndDateOffsetDays: 5,
 
   onChange: (value) => {
     if (value) {
@@ -93,6 +94,7 @@ KSelectRangeWeekly.args = {
   hideBackdrop: true,
   anchorToButton: true,
   weeklyMode: true,
+  weeklyModeStartDay: 5,
 
   onChange: (value) => {
     if (value) {
@@ -113,7 +115,8 @@ KSelectRangeDateMinimumDate.args = {
   anchorToButton: true,
   position: "top",
   align: "center",
-  minimumDate: new Date(new Date().getTime() + 14 * 24 * 60 * 60 * 1000),
+  minimumDate: new Date(new Date().getTime() - 2 * 24 * 60 * 60 * 1000),
+  maximumDate: new Date(new Date().getTime() - 2 * 24 * 60 * 60 * 1000),
 
   onChange: (value) => {
     if (value) {

package/src/components/KSelectRangeDate/KSelectRangeDate.tsx

@@ -32,6 +32,8 @@ export interface KSelectRangeDateProps {
   popupCalendarBackground?: string
   hideBackdrop?: boolean
   weeklyMode?: boolean
+  shorthandEndDateOffsetDays?: number
+  weeklyModeStartDay?: number // Day the weekly range should start from (0=Sun...6=Sat); defaults to a rolling 7-day range if unset.
 }
 
 export type DateRangeType = Date | null | [Date | null, Date | null]
@@ -111,8 +113,11 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
     const month = theDate.getMonth()
     const day = theDate.getDate()
 
-    const endDate = new Date(year, month, day)
-    const startDate = new Date(year, month, day - (range - 1))
+    const delta = props.shorthandEndDateOffsetDays ?? 0
+
+
+    const endDate = new Date(year, month, day - delta)
+    const startDate = new Date(year, month, day - delta - (range - 1))
     setRange([startDate, endDate])
   }
 
@@ -121,9 +126,25 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
 
     if (props.weeklyMode) {
       const DAY = 24 * 60 * 60 * 1000
-
-      const endDate = clickedDate
-      const startDate = new Date(clickedDate.getTime() - 6 * DAY)
+      let startDate: Date
+      let endDate: Date
+
+      if (props.weeklyModeStartDay !== undefined) {
+        const startDay = props.weeklyModeStartDay
+        const dayOfWeek = clickedDate.getDay()
+        const daysSinceStart = (dayOfWeek - startDay + 7) % 7
+
+        startDate = new Date(clickedDate)
+        startDate.setDate(clickedDate.getDate() - daysSinceStart)
+        startDate.setHours(0, 0, 0, 0)
+
+        endDate = new Date(startDate)
+        endDate.setDate(startDate.getDate() + 6)
+        endDate.setHours(0, 0, 0, 0)
+      } else {
+        endDate = clickedDate
+        startDate = new Date(clickedDate.getTime() - 6 * DAY)
+      }
 
       setRange([startDate, endDate])
       skipNextOpenRef.current = true
@@ -210,8 +231,29 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
 
       if (hoveredDate && props.weeklyMode) {
         const DAY = 24 * 60 * 60 * 1000
-        const end = hoveredDate.getTime()
-        const start = end - 6 * DAY
+        let start: number
+        let end: number
+
+        if (props.weeklyModeStartDay !== undefined) {
+          const startDay = props.weeklyModeStartDay
+          const dayOfWeek = hoveredDate.getDay()
+          const daysSinceStart = (dayOfWeek - startDay + 7) % 7
+
+          const startDate = new Date(hoveredDate)
+          startDate.setDate(hoveredDate.getDate() - daysSinceStart)
+          startDate.setHours(0, 0, 0, 0)
+
+          const endDate = new Date(startDate)
+          endDate.setDate(startDate.getDate() + 6)
+          endDate.setHours(0, 0, 0, 0)
+
+          start = startDate.getTime()
+          end = endDate.getTime()
+        } else {
+          end = hoveredDate.getTime()
+          start = end - 6 * DAY
+        }
+
         const t = date.getTime()
         if (t >= start && t <= end) {
           return "hovered-range-day"