@symbo.ls/datepicker 3.0.100 → 3.1.2

package/days.js

@@ -39,11 +39,9 @@ export const DatePickerDay = {
     }
   },
 
-  on: {
-    click: (event, element, state) => {
-      state.parent.parent.parent.update({
-        activeDay: element.props.date
-      })
-    }
+  onClick: (event, element, state) => {
+    state.parent.parent.parent.update({
+      activeDay: element.props.date
+    })
   }
 }

package/months.js

@@ -1,7 +1,7 @@
 'use strict'
 
 export const DatePickerMonthsSlider = {
-  extends: 'Flex',
+  display: 'flex',
   props: {
     position: 'relative',
     overflow: 'hidden',
@@ -13,7 +13,8 @@ export const DatePickerMonthsSlider = {
       content: '""',
       position: 'absolute',
       boxSize: '100% 100px',
-      background: 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+      background:
+        'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
       left: '0',
       top: '0',
       zIndex: '30',
@@ -23,7 +24,8 @@ export const DatePickerMonthsSlider = {
       content: '""',
       position: 'absolute',
       boxSize: '100% 100px',
-      background: 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+      background:
+        'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
       right: '0',
       top: '0',
       zIndex: '30',
@@ -54,16 +56,14 @@ export const DatePickerMonthsSlider = {
         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
-          })
-        }
+    onClick: (ev, el, s) => {
+      const { activeMonth, activeYear } = s
+      if (activeMonth > 0) s.update({ activeMonth: activeMonth - 1 })
+      else {
+        s.update({
+          activeYear: activeYear - 1,
+          activeMonth: 11
+        })
       }
     }
   },
@@ -78,30 +78,26 @@ export const DatePickerMonthsSlider = {
 
     childExtends: {
       tag: 'h6',
-      props: ({ state, key }) => ({
-        fontSize: 'Z1',
-        textAlign: 'center',
-        boxSizing: 'content-box',
-        minWidth: '272px',
-        style: { scrollSnapAlign: 'center' },
+      fontSize: 'Z1',
+      textAlign: 'center',
+      boxSizing: 'content-box',
+      minWidth: '272px',
+      style: { scrollSnapAlign: 'center' },
 
-        isSelected: state.activeMonth === parseInt(key),
-        '.isSelected': { opacity: '1' }
-      }),
+      isSelected: ({ state, key }) => state.activeMonth === parseInt(key),
+      '.isSelected': { opacity: '1' },
 
-      on: {
-        update: (el, state) => {
-          const { props } = el
-          const { isSelected } = props
-          if (isSelected) {
-            window.requestAnimationFrame(() => {
-              el.parent.parent.node.scrollTo({
-                left: el.node.offsetLeft,
-                behavior: state.initialized ? 'smooth' : 'instant'
-              })
+      onUpdate: (el, state) => {
+        const { props } = el
+        const { isSelected } = props
+        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 })
-          }
+          })
+          // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
         }
       }
     },
@@ -134,16 +130,15 @@ export const DatePickerMonthsSlider = {
         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
-          })
-        }
+
+    onClick: (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,13 +1,13 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "3.0.100",
+  "version": "3.1.2",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "1302a0674cc4d420f304737973a7f7bece86f359",
+  "gitHead": "429b36616aa04c8587a26ce3c129815115e35897",
   "dependencies": {
-    "@symbo.ls/atoms": "^3.0.100",
-    "@symbo.ls/button": "^3.0.100",
-    "@symbo.ls/dialog": "^3.0.100",
+    "@symbo.ls/atoms": "^3.1.2",
+    "@symbo.ls/button": "^3.1.2",
+    "@symbo.ls/dialog": "^3.1.2",
     "headless-datepicker": "^1.0.1"
   },
   "source": "src/index.js"

package/weekdays.js

@@ -16,7 +16,7 @@ export const DatePickerWeekDays = {
   },
   childExtends: {
     tag: 'span',
-    extends: 'Flex',
+    display: 'flex',
     props: {
       fontSize: 'Y1',
       textTransform: 'capitalize',

package/years.js

@@ -2,81 +2,83 @@
 
 export const DatePickerYears = {
   tag: 'aside',
-  props: {
-    overflow: 'hidden',
-    position: 'relative',
+  overflow: 'hidden',
+  position: 'relative',
 
-    style: {
-      button: {
-        padding: '0'
-      }
-    },
-
-    ':before': {
-      content: '""',
-      boxSize: 'A1 100%',
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      background: 'linear-gradient(to bottom, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
-      zIndex: '10'
-    },
-    ':after': {
-      content: '""',
-      boxSize: 'B 100%',
-      position: 'absolute',
-      bottom: '0',
-      left: '0',
-      background: 'linear-gradient(to top, var(--theme-tertiary-dark-background) 0%, transparent 100%)'
+  style: {
+    button: {
+      padding: '0'
     }
   },
 
+  ':before': {
+    content: '""',
+    boxSize: 'A1 100%',
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    background:
+      'linear-gradient(to bottom, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+    zIndex: '10'
+  },
+
+  ':after': {
+    content: '""',
+    boxSize: 'B 100%',
+    position: 'absolute',
+    bottom: '0',
+    left: '0',
+    background:
+      'linear-gradient(to top, var(--theme-tertiary-dark-background) 0%, transparent 100%)'
+  },
+
   if: ({ state }) => state.yearRange,
 
   Flex: {
-    props: {
-      flow: 'column',
-      gap: 'B',
-      padding: 'A Z A1 B',
-      maxHeight: '100%',
-      overflow: 'hidden auto',
-      '::-webkit-scrollbar': { display: 'none' }
-    },
-
+    flow: 'column',
+    gap: 'B',
+    padding: 'A Z A1 B',
+    maxHeight: '100%',
+    overflow: 'hidden auto',
+    '::-webkit-scrollbar': { display: 'none' },
     childExtends: {
       extends: 'Button',
-      props: ({ state, text }) => ({
-        fontSize: 'Y1',
-        opacity: '.4',
-        background: 'transparent',
-        transition: 'opacity .25s ease',
-        isSelected: state.activeYear === text,
-        '.isSelected': { opacity: '1' },
-        ':hover': { opacity: '1' }
-      }),
-      on: {
-        click: (event, element, state) => state.update({
-          activeYear: element.text
-        }, { isHoisted: true }),
-        render: (el, state) => {
-          const { props } = el
-          const { isSelected } = props
-          if (!isSelected) return
-          window.requestAnimationFrame(() => {
-            el.parent.parent.node.scrollTop = el.node.offsetTop - 100
-          })
-        }
+
+      fontSize: 'Y1',
+      opacity: '.4',
+      background: 'transparent',
+      transition: 'opacity .25s ease',
+      isSelected: ({ state, text }) => state.activeYear === text,
+      '.isSelected': { opacity: '1' },
+      ':hover': { opacity: '1' },
+      onClick: (event, element, state) =>
+        state.update(
+          {
+            activeYear: element.text
+          },
+          { isHoisted: true }
+        ),
+      onRender: (el, state) => {
+        const { props } = el
+        const { isSelected } = props
+        if (!isSelected) return
+        window.requestAnimationFrame(() => {
+          el.parent.parent.node.scrollTop = el.node.offsetTop - 100
+        })
       }
     },
 
-    children: (element) => {
+    children: element => {
       const { yearRange } = element.state
       if (!yearRange) return
 
       const [start, end] = yearRange
-      const yearsArray = (new Array(end + 1 - start)).fill(undefined).map((v, k) => {
-        return { text: start + k }
-      }).reverse()
+      const yearsArray = new Array(end + 1 - start)
+        .fill(undefined)
+        .map((v, k) => {
+          return { text: start + k }
+        })
+        .reverse()
       return yearsArray
     }
   }