@symbo.ls/datepicker 2.11.94 → 2.11.99

package/days.js

@@ -1,6 +1,5 @@
 'use strict'
 
-import { Grid } from '@symbo.ls/atoms'
 import { Button } from '@symbo.ls/button'
 
 export const DatePickerDay = {
@@ -50,36 +49,3 @@ export const DatePickerDay = {
     }
   }
 }
-
-export const DatePickerGrid = {
-  extend: Grid,
-
-  props: {
-    columns: 'repeat(7, 1fr)',
-    minWidth: '100%',
-    gap: 'W2',
-    padding: '- Z'
-  },
-
-  childExtend: DatePickerDay,
-
-  $setStateCollection: (el, s) => {
-    // console.warn(s.days)
-    return s.days
-  },
-
-  on: {
-    render: (el, state) => {
-      const { key } = el
-      const isSelected = state.parent.parent.activeMonth === parseInt(key)
-      if (isSelected) {
-        window.requestAnimationFrame(() => {
-          el.parent.parent.node.scrollTo({
-            left: el.node.offsetLeft,
-            behavior: 'smooth'
-          })
-        })
-      }
-    }
-  }
-}

package/grid.js

@@ -0,0 +1,109 @@
+'use strict'
+
+import { Grid } from '@symbo.ls/atoms'
+import { DatePickerDay } from './days'
+import { HeadlessDatepicker } from 'headless-datepicker'
+
+export const calendar = new HeadlessDatepicker.Calendar({
+  calendarMode: 'exact'
+})
+
+const extractMonthDays = (data) => {
+  const result = []
+
+  data.weeks.forEach((week) => {
+    week.dates.forEach((date) => {
+      result.push({ ...date, _d: date.moment._d.toString() })
+    })
+  })
+
+  return result
+}
+
+export const DatePickerGrid = {
+  extend: Grid,
+
+  props: {
+    columns: 'repeat(7, 1fr)',
+    minWidth: '100%',
+    gap: 'W2',
+    padding: '- Z',
+    style: { scrollSnapAlign: 'center' }
+  },
+
+  childExtend: DatePickerDay,
+  $setStateCollection: (el, s) => s.days
+}
+
+export const DatePickerGridContainer = {
+  props: {
+    maxWidth: 'F3+B',
+    position: 'relative',
+    content: {
+      overflow: 'hidden',
+      style: { scrollSnapType: 'x mandatory' }
+    },
+    style: {
+      button: {
+        padding: '0'
+      }
+    },
+    ':before': {
+      content: '""',
+      position: 'absolute',
+      boxSize: '100% 12px',
+      background: 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+      left: '0',
+      top: '0',
+      zIndex: '30'
+    },
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      boxSize: '100% 12px',
+      background: 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+      right: '0',
+      top: '0',
+      zIndex: '30'
+    }
+  },
+
+  state: (el, s) => {
+    const state = el.parent.state
+    if (!state.activeYear) return
+    return (new Array(12)).fill(undefined).map((v, k) => {
+      const year = state.activeYear
+      const month = k + 1
+      const weekItems = calendar.getMonth({ year, month })
+      return {
+        year,
+        month,
+        weekItems,
+        days: extractMonthDays(weekItems)
+      }
+    })
+  },
+
+  Flex: {
+    props: {},
+    childExtend: {
+      extend: DatePickerGrid,
+      on: {
+        render: (el, state) => {
+          const { key } = el
+          const isSelected = state.parent.parent.activeMonth === parseInt(key)
+          if (isSelected) {
+            window.requestAnimationFrame(() => {
+              el.parent.parent.node.scrollTo({
+                left: el.node.offsetLeft,
+                behavior: state.initialized ? 'smooth' : 'instant'
+              })
+            })
+            // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
+          }
+        }
+      }
+    },
+    $setStateCollection: (el, s) => s.parse()
+  }
+}

package/index.js

@@ -2,128 +2,51 @@
 
 import { Flex } from '@symbo.ls/atoms'
 import { Dialog } from '@symbo.ls/dialog'
-import { HeadlessDatepicker } from 'headless-datepicker'
-import { DatePickerGrid } from './days'
 
-export const calendar = new HeadlessDatepicker.Calendar({
-  calendarMode: 'exact'
-})
-
-const extractMonthDays = (data) => {
-  const result = []
-
-  data.weeks.forEach((week) => {
-    week.dates.forEach((date) => {
-      result.push({ ...date, _d: date.moment._d.toString() })
-    })
-  })
-
-  return result
-}
-
-export const DatePickerGridContainer = {
-  props: {
-    maxWidth: `${272 / 16}em`,
-    position: 'relative',
-    ':before': {
-      content: '""',
-      position: 'absolute',
-      boxSize: '100% 12px',
-      background: 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
-      left: '0',
-      top: '0',
-      zIndex: '30'
-    },
-    ':after': {
-      content: '""',
-      position: 'absolute',
-      boxSize: '100% 12px',
-      background: 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
-      right: '0',
-      top: '0',
-      zIndex: '30'
-    },
-    content: {
-      overflow: 'auto hidden'
-    }
-  },
-
-  state: (el, s) => {
-    const state = el.parent.state
-    return (new Array(12)).fill(undefined).map((v, k) => {
-      const year = state.activeYear
-      const month = k + 1
-      const weekItems = calendar.getMonth({ year, month })
-      return {
-        year,
-        month,
-        weekItems,
-        days: extractMonthDays(weekItems)
-      }
-    })
-  },
-
-  content: {
-    extend: Flex,
-    childExtend: DatePickerGrid,
-    $setStateCollection: (el, s) => s.parse()
-  }
-}
+export * from './days'
+export * from './weekdays'
+export * from './months'
+export * from './years'
+export * from './grid'
 
 export const DatePicker = {
   extend: [Dialog, Flex],
 
-  state: {
-    yearRange: [1993, 2023],
-    activeYear: 1993,
-    activeMonth: 8,
-    activeDay: 14
+  state: ({ props }) => {
+    const date = new Date()
+    const activeYear = date.getFullYear()
+    const activeMonth = date.getMonth()
+    const activeDay = date.getDate()
+    return {
+      yearRange: props.yearRange || [activeYear - 30, activeYear],
+      activeYear: props.activeYear || activeYear,
+      activeMonth: props.activeMonth || activeMonth,
+      activeDay: props.activeDay || activeDay,
+      selectedDay: props.selectedDay || null
+    }
   },
 
   props: {
     width: 'fit-content',
     margin: '0',
+    userSelect: 'none',
     maxHeight: 'G+B2'
   },
 
-  DatePickerYears: {
-    style: {
-      button: {
-        padding: '0'
-      }
-    }
-  },
+  DatePickerYears: {},
 
   Flex: {
     props: {
       flow: 'column',
-      padding: '20px - - -',
+      padding: 'A1 - - -',
       position: 'relative'
     },
 
-    DatePickerMonthsSlider: {
-      style: {
-        button: {
-          padding: '0'
-        }
-      }
-    },
+    DatePickerMonthsSlider: {},
 
-    DatePickerWeekDays: {
-      style: {
-        button: {
-          padding: '0'
-        }
-      }
-    },
+    DatePickerWeekDays: {},
 
-    DatePickerGridContainer: {
-      style: {
-        button: {
-          padding: '0'
-        }
-      }
-    },
+    DatePickerGridContainer: {},
 
     DialogFooter: {}
   }
@@ -150,8 +73,3 @@ export const DatePickerTwoColumns = {
     }
   }
 }
-
-export * from './years'
-export * from './months'
-export * from './weekdays'
-export * from './days'

package/months.js

@@ -8,7 +8,7 @@ export const DatePickerMonthsSlider = {
     position: 'relative',
     overflow: 'hidden',
     alignItems: 'center',
-    padding: '- - B -',
+    padding: '- - A2 -',
     maxWidth: `${272 / 16}em`,
     boxSizing: 'border-box',
     ':before': {
@@ -34,8 +34,9 @@ export const DatePickerMonthsSlider = {
 
     style: {
       '> button': {
-        width: '16px',
-        height: '16px',
+        padding: '0',
+        width: 'A',
+        height: 'A',
         position: 'absolute',
         zIndex: '35',
         background: 'transparent',
@@ -72,7 +73,8 @@ export const DatePickerMonthsSlider = {
   Flex: {
     props: {
       flex: '1',
-      overflow: 'auto hidden',
+      overflow: 'hidden',
+      style: { scrollSnapType: 'x mandatory' },
       '::-webkit-scrollbar': { display: 'none' }
     },
 
@@ -83,6 +85,7 @@ export const DatePickerMonthsSlider = {
         textAlign: 'center',
         boxSizing: 'content-box',
         minWidth: '272px',
+        style: { scrollSnapAlign: 'center' },
 
         isSelected: state.activeMonth === parseInt(key),
         '.isSelected': { opacity: '1' }
@@ -92,19 +95,21 @@ export const DatePickerMonthsSlider = {
         update: (el, state) => {
           const { props } = el
           const { isSelected } = props
+          console.log(isSelected)
           if (isSelected) {
             window.requestAnimationFrame(() => {
               el.parent.parent.node.scrollTo({
                 left: el.node.offsetLeft,
-                behavior: 'smooth'
+                behavior: state.initialized ? 'smooth' : 'instant'
               })
             })
+            // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
           }
         }
       }
     },
 
-    $setCollection: ({ state, parent }) => {
+    $setPropsCollection: ({ state, parent }) => {
       return [
         { text: 'January' },
         { text: 'February' },

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "2.11.94",
+  "version": "2.11.99",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "80354d405a3dd6085ee93472538ebef687c97764",
+  "gitHead": "ca2b0202aae2d8be7c5cba8b3d419fd1dc39c106",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/button": "latest",

package/weekdays.js

@@ -6,10 +6,15 @@ export const DatePickerWeekDays = {
   extend: Grid,
   props: {
     overflow: 'hidden',
-    padding: '- Z Z',
+    padding: '- Z A',
     width: '100%',
     columns: 'repeat(7, 1fr)',
-    gap: 'W2'
+    gap: 'W2',
+    style: {
+      button: {
+        padding: '0'
+      }
+    }
   },
   childExtend: {
     tag: 'span',

package/years.js

@@ -8,6 +8,12 @@ export const DatePickerYears = {
     overflow: 'hidden',
     position: 'relative',
 
+    style: {
+      button: {
+        padding: '0'
+      }
+    },
+
     ':before': {
       content: '""',
       boxSize: 'A1 100%',
@@ -27,11 +33,13 @@ export const DatePickerYears = {
     }
   },
 
+  if: ({ state }) => state.yearRange,
+
   Flex: {
     props: {
       flow: 'column',
       gap: 'B',
-      padding: 'A Z A1 B1',
+      padding: 'A Z A1 B',
       maxHeight: '100%',
       overflow: 'hidden auto',
       '::-webkit-scrollbar': { display: 'none' }
@@ -50,46 +58,29 @@ export const DatePickerYears = {
         ':hover': { opacity: '1' }
       }),
       on: {
-        click: (event, element, state) => state.update({ activeYear: element.text }),
+        click: (event, element, state) => state.update({
+          activeYear: element.text
+        }, { isHoisted: true }),
         render: (el, state) => {
           const { props } = el
           const { isSelected } = props
-          if (isSelected) {
-            window.requestAnimationFrame(() => {
-              el.parent.parent.node.scrollTop = el.node.offsetTop - 100
-            })
-          }
+          if (!isSelected) return
+          window.requestAnimationFrame(() => {
+            el.parent.parent.node.scrollTop = el.node.offsetTop - 100
+          })
         }
       }
     },
 
-    $setCollection: ({ state }) => {
-      const { yearRange } = state
-
-      if (yearRange) {
-        const [start, end] = yearRange
-        const yearsArray = (new Array(end + 1 - start)).fill(undefined).map((v, k) => {
-          return { text: start + k }
-        }).reverse()
-        return yearsArray
-      }
+    $setPropsCollection: (element) => {
+      const { yearRange } = element.state
+      if (!yearRange) return
 
-      return [
-        { text: '2023' },
-        { text: '2022' },
-        { text: '2021' },
-        { text: '2020' },
-        { text: '2019' },
-        { text: '2018' },
-        { text: '2017' },
-        { text: '2016' },
-        { text: '2015' },
-        { text: '2014' },
-        { text: '2013' },
-        { text: '2012' },
-        { text: '2012' },
-        { text: '2012' }
-      ]
+      const [start, end] = yearRange
+      const yearsArray = (new Array(end + 1 - start)).fill(undefined).map((v, k) => {
+        return { text: start + k }
+      }).reverse()
+      return yearsArray
     }
   }
 }