@symbo.ls/datepicker 2.11.94 → 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 +0 -34
- package/grid.js +110 -0
- package/index.js +30 -105
- package/months.js +11 -6
- package/package.json +2 -2
- package/weekdays.js +7 -2
- package/years.js +24 -33
package/days.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
|
-
import { Grid } from '@symbo.ls/atoms'
|
|
4
3
|
import { Button } from '@symbo.ls/button'
|
|
5
4
|
|
|
6
5
|
export const DatePickerDay = {
|
|
@@ -50,36 +49,3 @@ export const DatePickerDay = {
|
|
|
50
49
|
}
|
|
51
50
|
}
|
|
52
51
|
}
|
|
53
|
-
|
|
54
|
-
export const DatePickerGrid = {
|
|
55
|
-
extend: Grid,
|
|
56
|
-
|
|
57
|
-
props: {
|
|
58
|
-
columns: 'repeat(7, 1fr)',
|
|
59
|
-
minWidth: '100%',
|
|
60
|
-
gap: 'W2',
|
|
61
|
-
padding: '- Z'
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
childExtend: DatePickerDay,
|
|
65
|
-
|
|
66
|
-
$setStateCollection: (el, s) => {
|
|
67
|
-
// console.warn(s.days)
|
|
68
|
-
return s.days
|
|
69
|
-
},
|
|
70
|
-
|
|
71
|
-
on: {
|
|
72
|
-
render: (el, state) => {
|
|
73
|
-
const { key } = el
|
|
74
|
-
const isSelected = state.parent.parent.activeMonth === parseInt(key)
|
|
75
|
-
if (isSelected) {
|
|
76
|
-
window.requestAnimationFrame(() => {
|
|
77
|
-
el.parent.parent.node.scrollTo({
|
|
78
|
-
left: el.node.offsetLeft,
|
|
79
|
-
behavior: 'smooth'
|
|
80
|
-
})
|
|
81
|
-
})
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
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,128 +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
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
-
|
|
78
|
-
activeYear
|
|
79
|
-
activeMonth
|
|
80
|
-
activeDay
|
|
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: {
|
|
84
37
|
width: 'fit-content',
|
|
85
38
|
margin: '0',
|
|
39
|
+
userSelect: 'none',
|
|
86
40
|
maxHeight: 'G+B2'
|
|
87
41
|
},
|
|
88
42
|
|
|
89
|
-
DatePickerYears: {
|
|
90
|
-
style: {
|
|
91
|
-
button: {
|
|
92
|
-
padding: '0'
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
},
|
|
43
|
+
DatePickerYears: {},
|
|
96
44
|
|
|
97
45
|
Flex: {
|
|
98
46
|
props: {
|
|
99
47
|
flow: 'column',
|
|
100
|
-
padding: '
|
|
48
|
+
padding: 'A1 - - -',
|
|
101
49
|
position: 'relative'
|
|
102
50
|
},
|
|
103
51
|
|
|
104
|
-
DatePickerMonthsSlider: {
|
|
105
|
-
style: {
|
|
106
|
-
button: {
|
|
107
|
-
padding: '0'
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
},
|
|
52
|
+
DatePickerMonthsSlider: {},
|
|
111
53
|
|
|
112
|
-
DatePickerWeekDays: {
|
|
113
|
-
style: {
|
|
114
|
-
button: {
|
|
115
|
-
padding: '0'
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
},
|
|
54
|
+
DatePickerWeekDays: {},
|
|
119
55
|
|
|
120
|
-
DatePickerGridContainer: {
|
|
121
|
-
style: {
|
|
122
|
-
button: {
|
|
123
|
-
padding: '0'
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
},
|
|
56
|
+
DatePickerGridContainer: {},
|
|
127
57
|
|
|
128
58
|
DialogFooter: {}
|
|
129
59
|
}
|
|
@@ -150,8 +80,3 @@ export const DatePickerTwoColumns = {
|
|
|
150
80
|
}
|
|
151
81
|
}
|
|
152
82
|
}
|
|
153
|
-
|
|
154
|
-
export * from './years'
|
|
155
|
-
export * from './months'
|
|
156
|
-
export * from './weekdays'
|
|
157
|
-
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: '- -
|
|
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
|
-
|
|
38
|
-
|
|
37
|
+
padding: '0',
|
|
38
|
+
width: 'A',
|
|
39
|
+
height: 'A',
|
|
39
40
|
position: 'absolute',
|
|
40
41
|
zIndex: '35',
|
|
41
42
|
background: 'transparent',
|
|
@@ -72,7 +73,8 @@ export const DatePickerMonthsSlider = {
|
|
|
72
73
|
Flex: {
|
|
73
74
|
props: {
|
|
74
75
|
flex: '1',
|
|
75
|
-
overflow: '
|
|
76
|
+
overflow: 'hidden',
|
|
77
|
+
style: { scrollSnapType: 'x mandatory' },
|
|
76
78
|
'::-webkit-scrollbar': { display: 'none' }
|
|
77
79
|
},
|
|
78
80
|
|
|
@@ -83,6 +85,7 @@ export const DatePickerMonthsSlider = {
|
|
|
83
85
|
textAlign: 'center',
|
|
84
86
|
boxSizing: 'content-box',
|
|
85
87
|
minWidth: '272px',
|
|
88
|
+
style: { scrollSnapAlign: 'center' },
|
|
86
89
|
|
|
87
90
|
isSelected: state.activeMonth === parseInt(key),
|
|
88
91
|
'.isSelected': { opacity: '1' }
|
|
@@ -92,19 +95,21 @@ export const DatePickerMonthsSlider = {
|
|
|
92
95
|
update: (el, state) => {
|
|
93
96
|
const { props } = el
|
|
94
97
|
const { isSelected } = props
|
|
98
|
+
console.log(isSelected)
|
|
95
99
|
if (isSelected) {
|
|
96
100
|
window.requestAnimationFrame(() => {
|
|
97
101
|
el.parent.parent.node.scrollTo({
|
|
98
102
|
left: el.node.offsetLeft,
|
|
99
|
-
behavior: 'smooth'
|
|
103
|
+
behavior: state.initialized ? 'smooth' : 'instant'
|
|
100
104
|
})
|
|
101
105
|
})
|
|
106
|
+
// if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
|
|
102
107
|
}
|
|
103
108
|
}
|
|
104
109
|
}
|
|
105
110
|
},
|
|
106
111
|
|
|
107
|
-
$
|
|
112
|
+
$setPropsCollection: ({ state, parent }) => {
|
|
108
113
|
return [
|
|
109
114
|
{ text: 'January' },
|
|
110
115
|
{ text: 'February' },
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@symbo.ls/datepicker",
|
|
3
|
-
"version": "2.11.
|
|
3
|
+
"version": "2.11.97",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"gitHead": "
|
|
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
|
|
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
|
|
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({
|
|
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
|
-
|
|
59
|
-
|
|
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
|
-
$
|
|
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
|
-
|
|
78
|
-
|
|
79
|
-
{ text:
|
|
80
|
-
|
|
81
|
-
|
|
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
|
}
|