@symbo.ls/datepicker 2.11.92 → 2.11.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/days.js CHANGED
@@ -1,8 +1,6 @@
1
1
  'use strict'
2
2
 
3
- import { Grid } from '@symbo.ls/atoms'
4
3
  import { Button } from '@symbo.ls/button'
5
- import { calendar } from '.'
6
4
 
7
5
  export const DatePickerDay = {
8
6
  extend: Button,
@@ -51,33 +49,3 @@ export const DatePickerDay = {
51
49
  }
52
50
  }
53
51
  }
54
-
55
- export const DatePickerGrid = {
56
- extend: Grid,
57
-
58
- props: {
59
- columns: 'repeat(7, 1fr)',
60
- minWidth: '100%',
61
- gap: 'W2',
62
- padding: '- Z'
63
- },
64
-
65
- childExtend: DatePickerDay,
66
-
67
- $setStateCollection: (el, s) => {
68
- // console.warn(s.days)
69
- return s.days
70
- },
71
-
72
- on: {
73
- render: (el, state) => {
74
- const { key } = el
75
- const isSelected = state.parent.parent.activeMonth === parseInt(key)
76
- if (isSelected) {
77
- window.requestAnimationFrame(() => {
78
- el.node.scrollIntoView()
79
- })
80
- }
81
- }
82
- }
83
- }
package/grid.js ADDED
@@ -0,0 +1,110 @@
1
+ 'use strict'
2
+
3
+ import { Grid } from '@symbo.ls/atoms'
4
+ import { DatePickerDay } from './days'
5
+ import { HeadlessDatepicker } from 'headless-datepicker'
6
+
7
+ export const calendar = new HeadlessDatepicker.Calendar({
8
+ calendarMode: 'exact'
9
+ })
10
+
11
+ const extractMonthDays = (data) => {
12
+ const result = []
13
+
14
+ data.weeks.forEach((week) => {
15
+ week.dates.forEach((date) => {
16
+ result.push({ ...date, _d: date.moment._d.toString() })
17
+ })
18
+ })
19
+
20
+ return result
21
+ }
22
+
23
+ export const DatePickerGrid = {
24
+ extend: Grid,
25
+
26
+ props: {
27
+ columns: 'repeat(7, 1fr)',
28
+ minWidth: '100%',
29
+ gap: 'W2',
30
+ padding: '- Z',
31
+ style: { scrollSnapAlign: 'center' }
32
+ },
33
+
34
+ childExtend: DatePickerDay,
35
+ $setStateCollection: (el, s) => s.days
36
+ }
37
+
38
+ export const DatePickerGridContainer = {
39
+ props: {
40
+ maxWidth: 'F3+B',
41
+ position: 'relative',
42
+ content: {
43
+ overflow: 'hidden',
44
+ style: { scrollSnapType: 'x mandatory' }
45
+ },
46
+ style: {
47
+ button: {
48
+ padding: '0'
49
+ }
50
+ },
51
+ ':before': {
52
+ content: '""',
53
+ position: 'absolute',
54
+ boxSize: '100% 12px',
55
+ background: 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
56
+ left: '0',
57
+ top: '0',
58
+ zIndex: '30'
59
+ },
60
+ ':after': {
61
+ content: '""',
62
+ position: 'absolute',
63
+ boxSize: '100% 12px',
64
+ background: 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
65
+ right: '0',
66
+ top: '0',
67
+ zIndex: '30'
68
+ }
69
+ },
70
+
71
+ state: (el, s) => {
72
+ const state = el.parent.state
73
+ console.warn(state)
74
+ if (!state.activeYear) return
75
+ return (new Array(12)).fill(undefined).map((v, k) => {
76
+ const year = state.activeYear
77
+ const month = k + 1
78
+ const weekItems = calendar.getMonth({ year, month })
79
+ return {
80
+ year,
81
+ month,
82
+ weekItems,
83
+ days: extractMonthDays(weekItems)
84
+ }
85
+ })
86
+ },
87
+
88
+ Flex: {
89
+ props: {},
90
+ childExtend: {
91
+ extend: DatePickerGrid,
92
+ on: {
93
+ render: (el, state) => {
94
+ const { key } = el
95
+ const isSelected = state.parent.parent.activeMonth === parseInt(key)
96
+ if (isSelected) {
97
+ window.requestAnimationFrame(() => {
98
+ el.parent.parent.node.scrollTo({
99
+ left: el.node.offsetLeft,
100
+ behavior: state.initialized ? 'smooth' : 'instant'
101
+ })
102
+ })
103
+ // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
104
+ }
105
+ }
106
+ }
107
+ },
108
+ $setStateCollection: (el, s) => s.parse()
109
+ }
110
+ }
package/index.js CHANGED
@@ -2,126 +2,58 @@
2
2
 
3
3
  import { Flex } from '@symbo.ls/atoms'
4
4
  import { Dialog } from '@symbo.ls/dialog'
5
- import { HeadlessDatepicker } from 'headless-datepicker'
6
- import { DatePickerGrid } from './days'
7
5
 
8
- export const calendar = new HeadlessDatepicker.Calendar({
9
- calendarMode: 'exact'
10
- })
11
-
12
- const extractMonthDays = (data) => {
13
- const result = []
14
-
15
- data.weeks.forEach((week) => {
16
- week.dates.forEach((date) => {
17
- result.push({ ...date, _d: date.moment._d.toString() })
18
- })
19
- })
20
-
21
- return result
22
- }
23
-
24
- export const DatePickerGridContainer = {
25
- props: {
26
- maxWidth: `${272 / 16}em`,
27
- position: 'relative',
28
- ':before': {
29
- content: '""',
30
- position: 'absolute',
31
- boxSize: '100% 12px',
32
- background: 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
33
- left: '0',
34
- top: '0',
35
- zIndex: '30'
36
- },
37
- ':after': {
38
- content: '""',
39
- position: 'absolute',
40
- boxSize: '100% 12px',
41
- background: 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
42
- right: '0',
43
- top: '0',
44
- zIndex: '30'
45
- },
46
- content: {
47
- overflow: 'auto hidden'
48
- }
49
- },
50
-
51
- state: (el, s) => {
52
- const state = el.parent.state
53
- return (new Array(12)).fill(undefined).map((v, k) => {
54
- const year = state.activeYear
55
- const month = k + 1
56
- const weekItems = calendar.getMonth({ year, month })
57
- return {
58
- year,
59
- month,
60
- weekItems,
61
- days: extractMonthDays(weekItems)
62
- }
63
- })
64
- },
65
-
66
- content: {
67
- extend: Flex,
68
- childExtend: DatePickerGrid,
69
- $setStateCollection: (el, s) => s.parse()
70
- }
71
- }
6
+ export * from './days'
7
+ export * from './weekdays'
8
+ export * from './months'
9
+ export * from './years'
10
+ export * from './grid'
72
11
 
73
12
  export const DatePicker = {
74
13
  extend: [Dialog, Flex],
75
14
 
76
- state: {
77
- yearRange: [1993, 2023],
78
- activeYear: 1993,
79
- activeMonth: 8,
80
- activeDay: 14
15
+ state: ({ props }) => {
16
+ const date = new Date()
17
+ const activeYear = date.getFullYear()
18
+ const activeMonth = date.getMonth()
19
+ const activeDay = date.getDate()
20
+ console.log({
21
+ yearRange: props.yearRange || [activeYear - 30, activeYear],
22
+ activeYear: props.activeYear || activeYear,
23
+ activeMonth: props.activeMonth || activeMonth,
24
+ activeDay: props.activeDay || activeDay,
25
+ selectedDay: props.selectedDay || null
26
+ })
27
+ return {
28
+ yearRange: props.yearRange || [activeYear - 30, activeYear],
29
+ activeYear: props.activeYear || activeYear,
30
+ activeMonth: props.activeMonth || activeMonth,
31
+ activeDay: props.activeDay || activeDay,
32
+ selectedDay: props.selectedDay || null
33
+ }
81
34
  },
82
35
 
83
36
  props: {
37
+ width: 'fit-content',
38
+ margin: '0',
39
+ userSelect: 'none',
84
40
  maxHeight: 'G+B2'
85
41
  },
86
42
 
87
- DatePickerYears: {
88
- style: {
89
- button: {
90
- padding: '0'
91
- }
92
- }
93
- },
43
+ DatePickerYears: {},
94
44
 
95
45
  Flex: {
96
46
  props: {
97
47
  flow: 'column',
98
- padding: '20px - - -',
48
+ padding: 'A1 - - -',
99
49
  position: 'relative'
100
50
  },
101
51
 
102
- DatePickerMonthsSlider: {
103
- style: {
104
- button: {
105
- padding: '0'
106
- }
107
- }
108
- },
52
+ DatePickerMonthsSlider: {},
109
53
 
110
- DatePickerWeekDays: {
111
- style: {
112
- button: {
113
- padding: '0'
114
- }
115
- }
116
- },
54
+ DatePickerWeekDays: {},
117
55
 
118
- DatePickerGridContainer: {
119
- style: {
120
- button: {
121
- padding: '0'
122
- }
123
- }
124
- },
56
+ DatePickerGridContainer: {},
125
57
 
126
58
  DialogFooter: {}
127
59
  }
@@ -148,8 +80,3 @@ export const DatePickerTwoColumns = {
148
80
  }
149
81
  }
150
82
  }
151
-
152
- export * from './years'
153
- export * from './months'
154
- export * from './weekdays'
155
- export * from './days'
package/months.js CHANGED
@@ -8,7 +8,7 @@ export const DatePickerMonthsSlider = {
8
8
  position: 'relative',
9
9
  overflow: 'hidden',
10
10
  alignItems: 'center',
11
- padding: '- - B -',
11
+ padding: '- - A2 -',
12
12
  maxWidth: `${272 / 16}em`,
13
13
  boxSizing: 'border-box',
14
14
  ':before': {
@@ -34,8 +34,9 @@ export const DatePickerMonthsSlider = {
34
34
 
35
35
  style: {
36
36
  '> button': {
37
- width: '16px',
38
- height: '16px',
37
+ padding: '0',
38
+ width: 'A',
39
+ height: 'A',
39
40
  position: 'absolute',
40
41
  zIndex: '35',
41
42
  background: 'transparent',
@@ -59,10 +60,12 @@ export const DatePickerMonthsSlider = {
59
60
  click: (ev, el, s) => {
60
61
  const { activeMonth, activeYear } = s
61
62
  if (activeMonth > 0) s.update({ activeMonth: activeMonth - 1 })
62
- else s.update({
63
- activeYear: activeYear - 1,
64
- activeMonth: 11
65
- })
63
+ else {
64
+ s.update({
65
+ activeYear: activeYear - 1,
66
+ activeMonth: 11
67
+ })
68
+ }
66
69
  }
67
70
  }
68
71
  },
@@ -70,7 +73,8 @@ export const DatePickerMonthsSlider = {
70
73
  Flex: {
71
74
  props: {
72
75
  flex: '1',
73
- overflow: 'auto hidden',
76
+ overflow: 'hidden',
77
+ style: { scrollSnapType: 'x mandatory' },
74
78
  '::-webkit-scrollbar': { display: 'none' }
75
79
  },
76
80
 
@@ -81,6 +85,7 @@ export const DatePickerMonthsSlider = {
81
85
  textAlign: 'center',
82
86
  boxSizing: 'content-box',
83
87
  minWidth: '272px',
88
+ style: { scrollSnapAlign: 'center' },
84
89
 
85
90
  isSelected: state.activeMonth === parseInt(key),
86
91
  '.isSelected': { opacity: '1' }
@@ -90,16 +95,21 @@ export const DatePickerMonthsSlider = {
90
95
  update: (el, state) => {
91
96
  const { props } = el
92
97
  const { isSelected } = props
98
+ console.log(isSelected)
93
99
  if (isSelected) {
94
100
  window.requestAnimationFrame(() => {
95
- el.parent.parent.node.scrollLeft = el.node.offsetLeft
101
+ el.parent.parent.node.scrollTo({
102
+ left: el.node.offsetLeft,
103
+ behavior: state.initialized ? 'smooth' : 'instant'
104
+ })
96
105
  })
106
+ // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
97
107
  }
98
108
  }
99
109
  }
100
110
  },
101
111
 
102
- $setCollection: ({ state, parent }) => {
112
+ $setPropsCollection: ({ state, parent }) => {
103
113
  return [
104
114
  { text: 'January' },
105
115
  { text: 'February' },
@@ -131,10 +141,12 @@ export const DatePickerMonthsSlider = {
131
141
  click: (ev, el, s) => {
132
142
  const { activeMonth, activeYear } = s
133
143
  if (activeMonth < 11) s.update({ activeMonth: activeMonth + 1 })
134
- else s.update({
135
- activeYear: activeYear + 1,
136
- activeMonth: 0
137
- })
144
+ else {
145
+ s.update({
146
+ activeYear: activeYear + 1,
147
+ activeMonth: 0
148
+ })
149
+ }
138
150
  }
139
151
  }
140
152
  }
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@symbo.ls/datepicker",
3
- "version": "2.11.92",
3
+ "version": "2.11.97",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
- "gitHead": "8404ab11b0a8bfa4b56f8d63545c456cb4b0f23c",
6
+ "gitHead": "d5b73e4c431d30798a999c5077b446472f0a6ac4",
7
7
  "dependencies": {
8
8
  "@symbo.ls/atoms": "latest",
9
9
  "@symbo.ls/button": "latest",
package/weekdays.js CHANGED
@@ -6,10 +6,15 @@ export const DatePickerWeekDays = {
6
6
  extend: Grid,
7
7
  props: {
8
8
  overflow: 'hidden',
9
- padding: '- Z Z',
9
+ padding: '- Z A',
10
10
  width: '100%',
11
11
  columns: 'repeat(7, 1fr)',
12
- gap: 'W2'
12
+ gap: 'W2',
13
+ style: {
14
+ button: {
15
+ padding: '0'
16
+ }
17
+ }
13
18
  },
14
19
  childExtend: {
15
20
  tag: 'span',
package/years.js CHANGED
@@ -8,6 +8,12 @@ export const DatePickerYears = {
8
8
  overflow: 'hidden',
9
9
  position: 'relative',
10
10
 
11
+ style: {
12
+ button: {
13
+ padding: '0'
14
+ }
15
+ },
16
+
11
17
  ':before': {
12
18
  content: '""',
13
19
  boxSize: 'A1 100%',
@@ -27,11 +33,13 @@ export const DatePickerYears = {
27
33
  }
28
34
  },
29
35
 
36
+ if: ({ state }) => state.yearRange,
37
+
30
38
  Flex: {
31
39
  props: {
32
40
  flow: 'column',
33
41
  gap: 'B',
34
- padding: 'A Z A1 B1',
42
+ padding: 'A Z A1 B',
35
43
  maxHeight: '100%',
36
44
  overflow: 'hidden auto',
37
45
  '::-webkit-scrollbar': { display: 'none' }
@@ -50,46 +58,29 @@ export const DatePickerYears = {
50
58
  ':hover': { opacity: '1' }
51
59
  }),
52
60
  on: {
53
- click: (event, element, state) => state.update({ activeYear: element.text }),
61
+ click: (event, element, state) => state.update({
62
+ activeYear: element.text
63
+ }, { isHoisted: true }),
54
64
  render: (el, state) => {
55
65
  const { props } = el
56
66
  const { isSelected } = props
57
- if (isSelected) {
58
- window.requestAnimationFrame(() => {
59
- el.parent.parent.node.scrollTop = el.node.offsetTop - 100
60
- })
61
- }
67
+ if (!isSelected) return
68
+ window.requestAnimationFrame(() => {
69
+ el.parent.parent.node.scrollTop = el.node.offsetTop - 100
70
+ })
62
71
  }
63
72
  }
64
73
  },
65
74
 
66
- $setCollection: ({ state }) => {
67
- const { yearRange } = state
68
-
69
- if (yearRange) {
70
- const [start, end] = yearRange
71
- const yearsArray = (new Array(end + 1 - start)).fill(undefined).map((v, k) => {
72
- return { text: start + k }
73
- }).reverse()
74
- return yearsArray
75
- }
75
+ $setPropsCollection: (element) => {
76
+ const { yearRange } = element.state
77
+ if (!yearRange) return
76
78
 
77
- return [
78
- { text: '2023' },
79
- { text: '2022' },
80
- { text: '2021' },
81
- { text: '2020' },
82
- { text: '2019' },
83
- { text: '2018' },
84
- { text: '2017' },
85
- { text: '2016' },
86
- { text: '2015' },
87
- { text: '2014' },
88
- { text: '2013' },
89
- { text: '2012' },
90
- { text: '2012' },
91
- { text: '2012' }
92
- ]
79
+ const [start, end] = yearRange
80
+ const yearsArray = (new Array(end + 1 - start)).fill(undefined).map((v, k) => {
81
+ return { text: start + k }
82
+ }).reverse()
83
+ return yearsArray
93
84
  }
94
85
  }
95
86
  }