@symbo.ls/datepicker 2.11.78 → 2.11.92

package/days.js

@@ -2,17 +2,27 @@
 
 import { Grid } from '@symbo.ls/atoms'
 import { Button } from '@symbo.ls/button'
+import { calendar } from '.'
 
 export const DatePickerDay = {
   extend: Button,
   state: true,
 
   props: ({ state, key }) => {
-    const isSelected = state.parent.activeDay === parseInt(key) + 1
+    const rootState = state.parent.parent.parent
+    const date = new Date(state._d)
+    const isSelected = rootState.activeDay === date.toString()
     const gridColumnStart = 7 - state.parent.weekItems.weeks[0].dates.length
+    const { moment } = state
+    moment._d = date
+    const isWeekend = moment.day() === 0 || moment.day() === 6
+    // const isWeekend = state.moment.day() === 0 || state.moment.day() === 6
+    // const isWeekend = state.moment.isWeekend
 
     return {
       isSelected,
+      isWeekend,
+      date: date.toString(),
       textAlign: 'center',
       fontSize: 'Z1',
       round: '100%',
@@ -27,18 +37,17 @@ export const DatePickerDay = {
       },
       '.isSelected': { theme: 'primary' },
       '!isSelected': {
-        ':hover': { theme: 'secondary' },
-        ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' }
+        '.isWeekend': { opacity: '.5' },
+        ':hover': { theme: 'secondary' }
       }
     }
   },
 
   on: {
     click: (event, element, state) => {
-      state.parent.parent.update({
-        active: state.parse()
+      state.parent.parent.parent.update({
+        activeDay: element.props.date
       })
-      console.log(state)
     }
   }
 }
@@ -56,6 +65,19 @@ export const DatePickerGrid = {
   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.node.scrollIntoView()
+        })
+      }
+    }
   }
 }

package/index.js

@@ -5,7 +5,7 @@ import { Dialog } from '@symbo.ls/dialog'
 import { HeadlessDatepicker } from 'headless-datepicker'
 import { DatePickerGrid } from './days'
 
-const calendar = new HeadlessDatepicker.Calendar({
+export const calendar = new HeadlessDatepicker.Calendar({
   calendarMode: 'exact'
 })
 
@@ -14,14 +14,14 @@ const extractMonthDays = (data) => {
 
   data.weeks.forEach((week) => {
     week.dates.forEach((date) => {
-      result.push(date)
+      result.push({ ...date, _d: date.moment._d.toString() })
     })
   })
 
   return result
 }
 
-const monthNumbersContainer = {
+export const DatePickerGridContainer = {
   props: {
     maxWidth: `${272 / 16}em`,
     position: 'relative',
@@ -70,28 +70,27 @@ const monthNumbersContainer = {
   }
 }
 
-const props = {
-  yearRange: [1993, 2023],
-  maxHeight: 'G+B',
-  boxSize: 'fit-content fit-content',
-  style: {
-    button: {
-      padding: '0'
-    }
-  }
-}
-
 export const DatePicker = {
   extend: [Dialog, Flex],
+
   state: {
+    yearRange: [1993, 2023],
     activeYear: 1993,
     activeMonth: 8,
     activeDay: 14
   },
 
-  props,
+  props: {
+    maxHeight: 'G+B2'
+  },
 
-  DatePickerYears: {},
+  DatePickerYears: {
+    style: {
+      button: {
+        padding: '0'
+      }
+    }
+  },
 
   Flex: {
     props: {
@@ -100,11 +99,29 @@ export const DatePicker = {
       position: 'relative'
     },
 
-    DatePickerMonthsSlider: {},
+    DatePickerMonthsSlider: {
+      style: {
+        button: {
+          padding: '0'
+        }
+      }
+    },
 
-    DatePickerWeekDays: {},
+    DatePickerWeekDays: {
+      style: {
+        button: {
+          padding: '0'
+        }
+      }
+    },
 
-    monthNumbersContainer,
+    DatePickerGridContainer: {
+      style: {
+        button: {
+          padding: '0'
+        }
+      }
+    },
 
     DialogFooter: {}
   }

package/months.js

@@ -46,12 +46,24 @@ export const DatePickerMonthsSlider = {
   },
 
   Button_left: {
-    icon: 'arrowLeft',
-    '@dark': {
-      theme: 'primary @dark .color-only'
+    props: {
+      icon: 'arrowLeft',
+      '@dark': {
+        theme: 'primary @dark .color-only'
+      },
+      '@light': {
+        theme: 'primary @light .color-only'
+      }
     },
-    '@light': {
-      theme: 'primary @light .color-only'
+    on: {
+      click: (ev, el, s) => {
+        const { activeMonth, activeYear } = s
+        if (activeMonth > 0) s.update({ activeMonth: activeMonth - 1 })
+        else s.update({
+          activeYear: activeYear - 1,
+          activeMonth: 11
+        })
+      }
     }
   },
 
@@ -74,13 +86,15 @@ export const DatePickerMonthsSlider = {
         '.isSelected': { opacity: '1' }
       }),
 
-      render: (el, state) => {
-        const { props } = el
-        const { isSelected } = props
-        if (isSelected) {
-          window.requestAnimationFrame(() => {
-            el.parent.parent.node.scrollLeft = el.node.offsetLeft
-          })
+      on: {
+        update: (el, state) => {
+          const { props } = el
+          const { isSelected } = props
+          if (isSelected) {
+            window.requestAnimationFrame(() => {
+              el.parent.parent.node.scrollLeft = el.node.offsetLeft
+            })
+          }
         }
       }
     },
@@ -104,12 +118,24 @@ export const DatePickerMonthsSlider = {
   },
 
   Button_right: {
-    icon: 'arrowRight',
-    '@dark': {
-      theme: 'primary @dark .color-only'
+    props: {
+      icon: 'arrowRight',
+      '@dark': {
+        theme: 'primary @dark .color-only'
+      },
+      '@light': {
+        theme: 'primary @light .color-only'
+      }
     },
-    '@light': {
-      theme: 'primary @light .color-only'
+    on: {
+      click: (ev, el, s) => {
+        const { activeMonth, activeYear } = s
+        if (activeMonth < 11) s.update({ activeMonth: activeMonth + 1 })
+        else s.update({
+          activeYear: activeYear + 1,
+          activeMonth: 0
+        })
+      }
     }
   }
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "2.11.78",
+  "version": "2.11.92",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "f31271cb9c74ceb58d495e530510a36b2b8e7775",
+  "gitHead": "8404ab11b0a8bfa4b56f8d63545c456cb4b0f23c",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/button": "latest",

package/years.js

@@ -63,8 +63,8 @@ export const DatePickerYears = {
       }
     },
 
-    $setCollection: ({ state, parent }) => {
-      const { yearRange } = parent.parent.props
+    $setCollection: ({ state }) => {
+      const { yearRange } = state
 
       if (yearRange) {
         const [start, end] = yearRange