@symbo.ls/datepicker 2.11.90 → 2.11.92

package/days.js

@@ -2,20 +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.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 isWeekend = state.moment.isoWeekday()
+    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%',
@@ -38,10 +45,9 @@ export const DatePickerDay = {
 
   on: {
     click: (event, element, state) => {
-      state.parent.parent.update({
-        active: state.parse()
+      state.parent.parent.parent.update({
+        activeDay: element.props.date
       })
-      console.log(state)
     }
   }
 }
@@ -59,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,7 +14,7 @@ const extractMonthDays = (data) => {
 
   data.weeks.forEach((week) => {
     week.dates.forEach((date) => {
-      result.push(date)
+      result.push({ ...date, _d: date.moment._d.toString() })
     })
   })
 

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.90",
+  "version": "2.11.92",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "4c5a23152b7b38852c4f7115c2565dfe724382ee",
+  "gitHead": "8404ab11b0a8bfa4b56f8d63545c456cb4b0f23c",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/button": "latest",