@symbo.ls/datepicker 2.11.49 → 2.11.55

package/index.js

@@ -1,7 +1,24 @@
 'use strict'
 
-import { Button } from '@symbo.ls/button'
 import { Flex, Grid } from '@symbo.ls/atoms'
+import { Button } from '@symbo.ls/button'
+import { Dialog } from '@symbo.ls/dialog'
+import { HeadlessDatepicker } from 'headless-datepicker'
+const calendar = new HeadlessDatepicker.Calendar({
+  calendarMode: 'exact'
+})
+
+const extractMonthDays = (data) => {
+  const result = []
+
+  data.weeks.forEach((week) => {
+    week.dates.forEach((date) => {
+      result.push(date)
+    })
+  })
+
+  return result
+}
 
 export const DatePickerYears = {
   tag: 'aside',
@@ -46,16 +63,16 @@ export const DatePickerYears = {
         opacity: '.4',
         background: 'transparent',
         transition: 'opacity .25s ease',
-        isActive: state.activeYear === text,
-        '.isActive': { opacity: '1' },
+        isSelected: state.activeYear === text,
+        '.isSelected': { opacity: '1' },
         ':hover': { opacity: '1' }
       }),
       on: {
         click: (event, element, state) => state.update({ activeYear: element.text }),
         render: (el, state) => {
           const { props } = el
-          const { isActive } = props
-          if (isActive) {
+          const { isSelected } = props
+          if (isSelected) {
             window.requestAnimationFrame(() => {
               el.parent.parent.node.scrollTop = el.node.offsetTop - 100
             })
@@ -159,14 +176,14 @@ export const DatePickerMonthsSlider = {
         boxSizing: 'content-box',
         minWidth: '272px',
 
-        isActive: state.activeMonth === parseInt(key),
-        '.isActive': { opacity: '1' }
+        isSelected: state.activeMonth === parseInt(key),
+        '.isSelected': { opacity: '1' }
       }),
 
       render: (el, state) => {
         const { props } = el
-        const { isActive } = props
-        if (isActive) {
+        const { isSelected } = props
+        if (isSelected) {
           window.requestAnimationFrame(() => {
             el.parent.parent.node.scrollLeft = el.node.offsetLeft
           })
@@ -211,7 +228,7 @@ export const DatePickerWeekDays = {
       fontSize: 'Y1',
       textTransform: 'capitalize',
       align: 'center center',
-      ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' },
+      ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' }
     }
   },
   ...[
@@ -225,18 +242,16 @@ export const DatePickerWeekDays = {
   ]
 }
 
-export const DatePickerGrid = {
-  extend: Grid,
-  props: {
-    columns: 'repeat(7, 1fr)',
-    minWidth: '100%',
-    gap: 'W2',
-    padding: `- Z`
-  },
-  childExtend: {
-    extend: Button,
-    props: ({ state, key }) => ({
-      isActive: state.activeDay === parseInt(key) + 1,
+export const DatePickerDay = {
+  extend: Button,
+  state: true,
+
+  props: ({ state, key }) => {
+    const isSelected = state.parent.activeDay === parseInt(key) + 1
+    const gridColumnStart = 7 - state.parent.weekItems.weeks[0].dates.length
+
+    return {
+      isSelected,
       textAlign: 'center',
       fontSize: 'Z1',
       round: '100%',
@@ -245,24 +260,42 @@ export const DatePickerGrid = {
       lineHeight: '.9',
       background: 'transparent',
       theme: 'secondary @dark .color',
-      '.isActive': { theme: 'primary' },
-      '!isActive': { 
+      text: parseInt(key) + 1,
+      ':first-child': {
+        style: { gridColumnStart }
+      },
+      '.isSelected': { theme: 'primary' },
+      '!isSelected': {
         ':hover': { theme: 'secondary' },
-        ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' },
-       },
-    }),
-    on: {
-      click: (event, element, state) => {
-        state.update({ activeDay: element.text })
-        console.log(state.activeDay + '.' + state.activeMonth + '.' + state.activeYear)
+        ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' }
       }
     }
   },
-  $setPropsCollection: (el, s) => {
-    const daysInMonth = new Date(s.activeYear, s.activeMonth, 0).getDate()
-    const days = (new Array(daysInMonth)).fill(undefined)
-      .map((v, k) => ({ text: k + 1 }))
-    return days
+
+  on: {
+    click: (event, element, state) => {
+      state.parent.parent.update({
+        active: state.parse()
+      })
+      console.log(state)
+    }
+  }
+}
+
+export const DatePickerGrid = {
+  extend: Grid,
+
+  props: {
+    columns: 'repeat(7, 1fr)',
+    minWidth: '100%',
+    gap: 'W2',
+    padding: '- Z'
+  },
+
+  childExtend: DatePickerDay,
+
+  $setStateCollection: (el, s) => {
+    return s.days
   }
 }
 
@@ -293,22 +326,32 @@ const monthNumbersContainer = {
     }
   },
 
+  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()
   }
 }
 
 const props = {
   yearRange: [1993, 2023],
-  theme: 'tertiary',
-  round: 'Z2',
-  margin: 'E',
-  overflow: 'hidden',
   maxHeight: '318px',
   boxSize: 'fit-content fit-content',
-  padding: '- Z - -',
   style: {
     button: {
       padding: '0'
@@ -317,7 +360,7 @@ const props = {
 }
 
 export const DatePicker = {
-  extend: Flex,
+  extend: [Dialog, Flex],
   state: {
     activeYear: 1993,
     activeMonth: 8,
@@ -332,9 +375,9 @@ export const DatePicker = {
     props: {
       flow: 'column',
       padding: '20px - - -',
-      position: 'relative',
+      position: 'relative'
     },
-    
+
     DatePickerMonthsSlider: {},
 
     DatePickerWeekDays: {},
@@ -347,17 +390,15 @@ export const DatePicker = {
 
 export const DatePickerTwoColumns = {
   extend: DatePicker,
-  props: {
-    calendar: {
-      months: {
-        maxWidth: `${544 / 16}em`
-      },
-      weekDaysContainer: {
-        maxWidth: `${544 / 16}em`
-      },
-      monthNumbersContainer: {
-        maxWidth: `${544 / 16}em`
-      }
+  Flex: {
+    DatePickerMonthsSlider: {
+      maxWidth: `${544 / 16}em`
+    },
+    DatePickerWeekDays: {
+      maxWidth: `${544 / 16}em`
+    },
+    monthNumbersContainer: {
+      maxWidth: `${544 / 16}em`
     }
   }
 }

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "2.11.49",
+  "version": "2.11.55",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "396ff036bf106d7813a1688d842d7a36d407cf31",
+  "gitHead": "f4a6af272593be22cbf1337ddb25afec00ba359d",
   "dependencies": {
-    "@symbo.ls/block": "latest",
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/button": "latest",
+    "@symbo.ls/dialog": "latest",
     "@symbo.ls/icon": "latest",
-    "@symbo.ls/shape": "latest"
+    "headless-datepicker": "^1.0.1"
   },
   "source": "src/index.js"
 }