From 0ead3f8be05a3d8812dfeae681125090063653f5 Mon Sep 17 00:00:00 2001
From: Udi Avganim <64082602+udia76@users.noreply.github.com>
Date: Tue, 19 Nov 2024 19:37:43 +0200
Subject: [PATCH] chore: Added breakpoint index support, in order to improve
 the visualise once we have more than one line (rounded the corners also in
 the middle of the array) (#208)

---
 .../components/DayPicker/DayPicker.tsx        | 10 +++-
 .../MonthlySelector/MonthlySelector.tsx       |  8 ++-
 lib/components/ToggleButton/ToggleButton.tsx  | 54 +++++++++++--------
 3 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/lib/components/ScheduleSelector/components/DayPicker/DayPicker.tsx b/lib/components/ScheduleSelector/components/DayPicker/DayPicker.tsx
index 6d43eff7..310d155f 100644
--- a/lib/components/ScheduleSelector/components/DayPicker/DayPicker.tsx
+++ b/lib/components/ScheduleSelector/components/DayPicker/DayPicker.tsx
@@ -14,9 +14,16 @@ interface DayPickerProps {
   onChange: (days: string) => void
   options?: Option[]
   isDisabled?: boolean
+  breakpointIndex?: number
 }
 
-const DayPicker = ({ days, onChange, options, isDisabled }: DayPickerProps) => {
+const DayPicker = ({
+  days,
+  onChange,
+  options,
+  isDisabled,
+  breakpointIndex
+}: DayPickerProps) => {
   const allDays = useMemo(
     () => (options || DAYS_OF_WEEK).map((day) => day.value),
     [options]
@@ -64,6 +71,7 @@ const DayPicker = ({ days, onChange, options, isDisabled }: DayPickerProps) => {
       wrapperClass='day-picker-wrapper'
       isDisabled={isDisabled}
       small
+      breakpointIndex={breakpointIndex}
     />
   )
 }
diff --git a/lib/components/ScheduleSelector/components/MonthlySelector/MonthlySelector.tsx b/lib/components/ScheduleSelector/components/MonthlySelector/MonthlySelector.tsx
index 54b9a846..f43d864d 100644
--- a/lib/components/ScheduleSelector/components/MonthlySelector/MonthlySelector.tsx
+++ b/lib/components/ScheduleSelector/components/MonthlySelector/MonthlySelector.tsx
@@ -170,9 +170,14 @@ const MonthlySelector: FC<MonthlySelectorProps> = ({
     if (daysInSelectedMonths.includes(31)) {
       return 'specific-month-31-days'
     }
-    return 'specific-month-days'
+    return 'every-month-days'
   }
 
+  const breakpointIndex = useMemo(
+    () => Math.ceil(daysOfMonth.length / 2),
+    [daysOfMonth]
+  )
+
   return (
     <>
       <div className='monthly-selector-wrapper'>
@@ -202,6 +207,7 @@ const MonthlySelector: FC<MonthlySelectorProps> = ({
             onChange={handleDateChange}
             options={daysOfMonth}
             isDisabled={isDisabled}
+            breakpointIndex={breakpointIndex}
           />
         </div>
       </div>
diff --git a/lib/components/ToggleButton/ToggleButton.tsx b/lib/components/ToggleButton/ToggleButton.tsx
index 34e95c48..eb722159 100644
--- a/lib/components/ToggleButton/ToggleButton.tsx
+++ b/lib/components/ToggleButton/ToggleButton.tsx
@@ -16,6 +16,7 @@ interface ToggleButtonProps {
   small?: boolean
   isDisabled?: boolean
   wrapperClass?: string
+  breakpointIndex?: number
 }
 
 function ToggleButton(props: ToggleButtonProps) {
@@ -25,7 +26,8 @@ function ToggleButton(props: ToggleButtonProps) {
     onChange,
     small,
     wrapperClass = EMPTY_STRING,
-    isDisabled
+    isDisabled,
+    breakpointIndex
   } = props
 
   const elementsList = useRef<HTMLDivElement>(null)
@@ -33,28 +35,38 @@ function ToggleButton(props: ToggleButtonProps) {
     `toggle-button-${Math.random().toString(36).slice(2, 11)}`
   )
 
-  const selectElement = useCallback((option: HTMLElement, pad: HTMLElement) => {
-    if (option && pad) {
-      const optionRect = option.getBoundingClientRect()
-      const parentRect = option.parentElement?.getBoundingClientRect()
-      pad.style.width = `${optionRect.width}px`
-      pad.style.height = `${optionRect.height}px`
-      pad.style.transform = `translateX(${
-        optionRect.left - (parentRect?.left || 0)
-      }px) translateY(${optionRect.top - (parentRect?.top || 0)}px)`
-      pad.style.display = 'block'
+  const selectElement = useCallback(
+    (option: HTMLElement, pad: HTMLElement) => {
+      if (option && pad) {
+        const optionRect = option.getBoundingClientRect()
+        const parentRect = option.parentElement?.getBoundingClientRect()
+        pad.style.width = `${optionRect.width}px`
+        pad.style.height = `${optionRect.height}px`
+        pad.style.transform = `translateX(${
+          optionRect.left - (parentRect?.left || 0)
+        }px) translateY(${optionRect.top - (parentRect?.top || 0)}px)`
+        pad.style.display = 'block'
 
-      if (option.matches(':last-child')) {
-        pad.style.borderRadius = '0 5px 5px 0'
-      } else if (option.matches(':first-child')) {
-        pad.style.borderRadius = '5px 0 0 5px'
-      } else {
-        pad.style.borderRadius = '0'
-      }
+        if (
+          option.matches(':last-child') ||
+          option.getAttribute('data-value') === breakpointIndex?.toString()
+        ) {
+          pad.style.borderRadius = '0 5px 5px 0'
+        } else if (
+          option.matches(':first-child') ||
+          option.getAttribute('data-value') ===
+            ((breakpointIndex || 0) + 1)?.toString()
+        ) {
+          pad.style.borderRadius = '5px 0 0 5px'
+        } else {
+          pad.style.borderRadius = '0'
+        }
 
-      option.classList.add('toggle-button-option-selected')
-    }
-  }, [])
+        option.classList.add('toggle-button-option-selected')
+      }
+    },
+    [breakpointIndex]
+  )
 
   const updatePadPosition = useCallback(() => {
     const instanceElement = document.getElementById(instanceId.current)