kahuna-base-react-components 1.4.3 → 1.4.5

package/dist/types.d.ts

@@ -250,6 +250,9 @@ interface KSelectDateProps {
     isTileDisabled?: TileDisabledFunc;
     applyUndefinedValue?: boolean;
     buttonText?: string;
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+    onCancel?: () => void;
 }
 declare const KSelectDate: React.FC<KSelectDateProps>;
 
@@ -348,6 +351,7 @@ interface KSelectRangeDateProps {
     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.3",
+  "version": "1.4.5",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/KSelectDate/KSelectDate.stories.tsx

@@ -15,9 +15,15 @@ export default {
 
 const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
+  const [open, setOpen] = useState<boolean>(false)
   useEffect(() => {
     // console.log("selectedDate: ", selectedDate)
   }, [selectedDate])
+
+  useEffect(() => {
+    console.log("open: ", open)
+  }, [open])
+
   const periods = [
     { value: "202401", label: "202401" },
     { value: "202402", label: "202402" },
@@ -59,7 +65,12 @@ const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
           />
           <KSelectDate
             {...args}
+            key={selectedDate?.toString()}
             value={selectedDate}
+            open={open}
+            setOpen={setOpen}
+            hideBody
+            hideBackdrop
             onChange={(date) => {
               // console.log("date: ", date)
               if (date) {
@@ -71,10 +82,15 @@ const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
                 // console.log("Deleting is completed")
               }
             }}
+            onCancel={() => {
+              console.log("close:::")
+            }}
             anchorToButton
           />
       </div>
-      <div></div>
+      <div className="cursor-pointer" onClick={() => {
+        setOpen(true)
+      }}>Deneme Butonu</div>
     </div>
   )
 }

package/src/components/KSelectDate/KSelectDate.tsx

@@ -36,6 +36,9 @@ export interface KSelectDateProps {
   isTileDisabled?: TileDisabledFunc
   applyUndefinedValue?: boolean // if this prop's value is false, makes the Apply button disabled when chosen date is undefined
   buttonText?: string
+  open?: boolean // Use open and setOpen props together. Opens the calendar without requiring a click on the calendar icon.
+  setOpen?: (open: boolean) => void // Use open and setOpen props together. 
+  onCancel?: () => void
 }
 interface MonthSelectorType {
   monthName: string
@@ -70,6 +73,13 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   const [weekDays, setWeekDays] = useState<DaySelectorType[]>([])
   const [openCalendar, setOpenCalendar] = useState<boolean>(false)
 
+  useEffect(() => {
+    if (props.open) {
+      setOpenCalendar(true)  // Used only to open the calendar. The Cancel and Apply buttons handle closing it.
+      setCalendarDate(value)
+    }
+  }, [props.open])
+
   const onlyMonthSelection = props.onlyMonthSelection || false
   const hideBody = props.hideBody || false
 
@@ -170,6 +180,8 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
             textColor="#111"
             onClick={() => {
               setOpenCalendar(false)
+              if (props.setOpen) props.setOpen(false)
+              if (props.onCancel) props.onCancel()
             }}
           />
           <KButton
@@ -182,6 +194,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
             onClick={() => {
               setValue(calendarDate)
               setOpenCalendar(false)
+              if (props.setOpen) props.setOpen(false)
             }}
           />
         </div>
@@ -400,6 +413,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
               onClick={() => {
                 if (openCalendar) {
                   setOpenCalendar(false)
+                  if (props.setOpen) props.setOpen(false)
                 } else {
                   setOpenCalendar(true)
                   setCalendarDate(value)

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

@@ -94,6 +94,7 @@ KSelectRangeWeekly.args = {
   hideBackdrop: true,
   anchorToButton: true,
   weeklyMode: true,
+  weeklyModeStartDay: 5,
 
   onChange: (value) => {
     if (value) {

package/src/components/KSelectRangeDate/KSelectRangeDate.tsx

@@ -33,6 +33,7 @@ export interface KSelectRangeDateProps {
   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]
@@ -125,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
@@ -214,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"