[PLAY-1120] Lint Date Picker kit (#2990)

**What does this PR do?** A clear and concise description with your runway ticket url. Runway: https://nitro.powerhrg.com/runway/backlog_items/PLAY-1120 **How to test?** Steps to confirm the desired behavior: 1. Go to https://pr2990.playbook.beta.gm.powerapp.cloud/kits/date_picker/react 2. It all works still #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [😈] **TESTS** I have added test coverage to my code. Co-authored-by: Jasper Furniss <[email protected]>
powerhome · Jan 22, 2024 · 0adece7 · 0adece7
1 parent 767f201
commit 0adece7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 37 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts b/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts
@@ -32,6 +32,10 @@ type DatePickerConfig = {
 } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
+  const noop = () => {
+    // intentionally left empty as a no-op placeholder
+  }
+
   const {
     allowInput,
     closeOnSelect = true,
@@ -45,8 +49,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     maxDate,
     minDate,
     mode,
-    onChange = () => {},
-    onClose = () => {},
+    onChange = noop,
+    onClose = noop,
     pickerId,
     plugins,
     position = "auto",
@@ -72,20 +76,11 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       return defaultDate
     }
   }
-  const disabledParser = () => {
-    const disabledArray=[]
-
-    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
-    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
-    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
-
-    return disabledArray
-  }
 
   const disabledWeekDays = () => {
     return (
       [
-        (date:any) => {
+        (date: any) => {
           const weekdayObj: {
             [day: string]: number
           } = {
@@ -110,6 +105,16 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       ]
     )
   }
+
+  const disabledParser = () => {
+    const disabledArray=[]
+
+    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
+    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
+    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
+
+    return disabledArray
+  }
   const calendarResizer = () => {
     const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
     const parentInput = cal.parentElement
@@ -125,28 +130,46 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
     const pluginList = []
-  
+
     // month and week selection
     if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
       pluginList.push(weekSelect())
-  
+
     } else if (selectionType === "quickpick") {
       //------- QUICKPICK VARIANT PLUGIN -------------//
       pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
     }
-  
+
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
-  
+
     return pluginList
   }
-  
+
   const getDateFormat = () => {
     return enableTime ? `${format} ${timeFormat}` : format
   }
 
+  // Attach / detach to / from scroll events
+  const initialPicker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
+  const scrollEvent = () => {
+    initialPicker._positionCalendar()
+  }
+  function attachToScroll(scrollParent: string | HTMLElement) {
+    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
+  }
+  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
+    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
+  }
+
+  // two way binding
+  const initialDropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
+  const yearChangeHook = () => {
+    initialDropdown.value = initialPicker.currentYear
+  }
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -193,17 +216,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
-  // Attach / detach to / from scroll events
-  const scrollEvent = () => {
-    picker._positionCalendar()
-  }
-  function attachToScroll(scrollParent: string | HTMLElement) {
-    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
-  }
-  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
-    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
-  }
-
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 
@@ -242,11 +254,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // two way binding
-  const yearChangeHook = () => {
-    dropdown.value = picker.currentYear
-  }
-
   // Adding dropdown icons to year and month selects
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   if (picker.monthElements[0].parentElement) {

diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx b/playbook/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx
@@ -53,8 +53,8 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
 
     const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
       const endDate = new Date();
-      let startDate = new Date();
-    
+      const startDate = new Date();
+
       switch (timePeriod) {
         case 'days':
           startDate.setDate(endDate.getDate() - amount);
@@ -76,7 +76,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       }
       return [startDate, endDate];
     };
-  
+
 
     type rangesType = {
       [key: string]: Date[]
@@ -95,7 +95,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       'Last year': [lastYearStartDate, lastYearEndDate]
     };
 
-    
+
     if (customQuickPickDates && Object.keys(customQuickPickDates).length !== 0) {
       if (customQuickPickDates.dates.length && customQuickPickDates.override === false) {
         customQuickPickDates.dates.forEach((item) => {