@symbo.ls/datepicker 3.0.100 → 3.1.1

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.
Files changed (4) hide show
  1. package/days.js +4 -6
  2. package/months.js +38 -43
  3. package/package.json +5 -5
  4. package/years.js +61 -59
package/days.js CHANGED
@@ -39,11 +39,9 @@ export const DatePickerDay = {
39
39
  }
40
40
  },
41
41
 
42
- on: {
43
- click: (event, element, state) => {
44
- state.parent.parent.parent.update({
45
- activeDay: element.props.date
46
- })
47
- }
42
+ onClick: (event, element, state) => {
43
+ state.parent.parent.parent.update({
44
+ activeDay: element.props.date
45
+ })
48
46
  }
49
47
  }
package/months.js CHANGED
@@ -13,7 +13,8 @@ export const DatePickerMonthsSlider = {
13
13
  content: '""',
14
14
  position: 'absolute',
15
15
  boxSize: '100% 100px',
16
- background: 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
16
+ background:
17
+ 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
17
18
  left: '0',
18
19
  top: '0',
19
20
  zIndex: '30',
@@ -23,7 +24,8 @@ export const DatePickerMonthsSlider = {
23
24
  content: '""',
24
25
  position: 'absolute',
25
26
  boxSize: '100% 100px',
26
- background: 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
27
+ background:
28
+ 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
27
29
  right: '0',
28
30
  top: '0',
29
31
  zIndex: '30',
@@ -54,16 +56,14 @@ export const DatePickerMonthsSlider = {
54
56
  theme: 'primary @light .color-only'
55
57
  }
56
58
  },
57
- on: {
58
- click: (ev, el, s) => {
59
- const { activeMonth, activeYear } = s
60
- if (activeMonth > 0) s.update({ activeMonth: activeMonth - 1 })
61
- else {
62
- s.update({
63
- activeYear: activeYear - 1,
64
- activeMonth: 11
65
- })
66
- }
59
+ onClick: (ev, el, s) => {
60
+ const { activeMonth, activeYear } = s
61
+ if (activeMonth > 0) s.update({ activeMonth: activeMonth - 1 })
62
+ else {
63
+ s.update({
64
+ activeYear: activeYear - 1,
65
+ activeMonth: 11
66
+ })
67
67
  }
68
68
  }
69
69
  },
@@ -78,30 +78,26 @@ export const DatePickerMonthsSlider = {
78
78
 
79
79
  childExtends: {
80
80
  tag: 'h6',
81
- props: ({ state, key }) => ({
82
- fontSize: 'Z1',
83
- textAlign: 'center',
84
- boxSizing: 'content-box',
85
- minWidth: '272px',
86
- style: { scrollSnapAlign: 'center' },
81
+ fontSize: 'Z1',
82
+ textAlign: 'center',
83
+ boxSizing: 'content-box',
84
+ minWidth: '272px',
85
+ style: { scrollSnapAlign: 'center' },
87
86
 
88
- isSelected: state.activeMonth === parseInt(key),
89
- '.isSelected': { opacity: '1' }
90
- }),
87
+ isSelected: ({ state, key }) => state.activeMonth === parseInt(key),
88
+ '.isSelected': { opacity: '1' },
91
89
 
92
- on: {
93
- update: (el, state) => {
94
- const { props } = el
95
- const { isSelected } = props
96
- if (isSelected) {
97
- window.requestAnimationFrame(() => {
98
- el.parent.parent.node.scrollTo({
99
- left: el.node.offsetLeft,
100
- behavior: state.initialized ? 'smooth' : 'instant'
101
- })
90
+ onUpdate: (el, state) => {
91
+ const { props } = el
92
+ const { isSelected } = props
93
+ if (isSelected) {
94
+ window.requestAnimationFrame(() => {
95
+ el.parent.parent.node.scrollTo({
96
+ left: el.node.offsetLeft,
97
+ behavior: state.initialized ? 'smooth' : 'instant'
102
98
  })
103
- // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
104
- }
99
+ })
100
+ // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
105
101
  }
106
102
  }
107
103
  },
@@ -134,16 +130,15 @@ export const DatePickerMonthsSlider = {
134
130
  theme: 'primary @light .color-only'
135
131
  }
136
132
  },
137
- on: {
138
- click: (ev, el, s) => {
139
- const { activeMonth, activeYear } = s
140
- if (activeMonth < 11) s.update({ activeMonth: activeMonth + 1 })
141
- else {
142
- s.update({
143
- activeYear: activeYear + 1,
144
- activeMonth: 0
145
- })
146
- }
133
+
134
+ onClick: (ev, el, s) => {
135
+ const { activeMonth, activeYear } = s
136
+ if (activeMonth < 11) s.update({ activeMonth: activeMonth + 1 })
137
+ else {
138
+ s.update({
139
+ activeYear: activeYear + 1,
140
+ activeMonth: 0
141
+ })
147
142
  }
148
143
  }
149
144
  }
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@symbo.ls/datepicker",
3
- "version": "3.0.100",
3
+ "version": "3.1.1",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
- "gitHead": "1302a0674cc4d420f304737973a7f7bece86f359",
6
+ "gitHead": "39fb7a8c07355468ccce79e2f787ca3fa0715692",
7
7
  "dependencies": {
8
- "@symbo.ls/atoms": "^3.0.100",
9
- "@symbo.ls/button": "^3.0.100",
10
- "@symbo.ls/dialog": "^3.0.100",
8
+ "@symbo.ls/atoms": "^3.1.1",
9
+ "@symbo.ls/button": "^3.1.1",
10
+ "@symbo.ls/dialog": "^3.1.1",
11
11
  "headless-datepicker": "^1.0.1"
12
12
  },
13
13
  "source": "src/index.js"
package/years.js CHANGED
@@ -2,81 +2,83 @@
2
2
 
3
3
  export const DatePickerYears = {
4
4
  tag: 'aside',
5
- props: {
6
- overflow: 'hidden',
7
- position: 'relative',
5
+ overflow: 'hidden',
6
+ position: 'relative',
8
7
 
9
- style: {
10
- button: {
11
- padding: '0'
12
- }
13
- },
14
-
15
- ':before': {
16
- content: '""',
17
- boxSize: 'A1 100%',
18
- position: 'absolute',
19
- top: '0',
20
- left: '0',
21
- background: 'linear-gradient(to bottom, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
22
- zIndex: '10'
23
- },
24
- ':after': {
25
- content: '""',
26
- boxSize: 'B 100%',
27
- position: 'absolute',
28
- bottom: '0',
29
- left: '0',
30
- background: 'linear-gradient(to top, var(--theme-tertiary-dark-background) 0%, transparent 100%)'
8
+ style: {
9
+ button: {
10
+ padding: '0'
31
11
  }
32
12
  },
33
13
 
14
+ ':before': {
15
+ content: '""',
16
+ boxSize: 'A1 100%',
17
+ position: 'absolute',
18
+ top: '0',
19
+ left: '0',
20
+ background:
21
+ 'linear-gradient(to bottom, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
22
+ zIndex: '10'
23
+ },
24
+
25
+ ':after': {
26
+ content: '""',
27
+ boxSize: 'B 100%',
28
+ position: 'absolute',
29
+ bottom: '0',
30
+ left: '0',
31
+ background:
32
+ 'linear-gradient(to top, var(--theme-tertiary-dark-background) 0%, transparent 100%)'
33
+ },
34
+
34
35
  if: ({ state }) => state.yearRange,
35
36
 
36
37
  Flex: {
37
- props: {
38
- flow: 'column',
39
- gap: 'B',
40
- padding: 'A Z A1 B',
41
- maxHeight: '100%',
42
- overflow: 'hidden auto',
43
- '::-webkit-scrollbar': { display: 'none' }
44
- },
45
-
38
+ flow: 'column',
39
+ gap: 'B',
40
+ padding: 'A Z A1 B',
41
+ maxHeight: '100%',
42
+ overflow: 'hidden auto',
43
+ '::-webkit-scrollbar': { display: 'none' },
46
44
  childExtends: {
47
45
  extends: 'Button',
48
- props: ({ state, text }) => ({
49
- fontSize: 'Y1',
50
- opacity: '.4',
51
- background: 'transparent',
52
- transition: 'opacity .25s ease',
53
- isSelected: state.activeYear === text,
54
- '.isSelected': { opacity: '1' },
55
- ':hover': { opacity: '1' }
56
- }),
57
- on: {
58
- click: (event, element, state) => state.update({
59
- activeYear: element.text
60
- }, { isHoisted: true }),
61
- render: (el, state) => {
62
- const { props } = el
63
- const { isSelected } = props
64
- if (!isSelected) return
65
- window.requestAnimationFrame(() => {
66
- el.parent.parent.node.scrollTop = el.node.offsetTop - 100
67
- })
68
- }
46
+
47
+ fontSize: 'Y1',
48
+ opacity: '.4',
49
+ background: 'transparent',
50
+ transition: 'opacity .25s ease',
51
+ isSelected: ({ state, text }) => state.activeYear === text,
52
+ '.isSelected': { opacity: '1' },
53
+ ':hover': { opacity: '1' },
54
+ onClick: (event, element, state) =>
55
+ state.update(
56
+ {
57
+ activeYear: element.text
58
+ },
59
+ { isHoisted: true }
60
+ ),
61
+ onRender: (el, state) => {
62
+ const { props } = el
63
+ const { isSelected } = props
64
+ if (!isSelected) return
65
+ window.requestAnimationFrame(() => {
66
+ el.parent.parent.node.scrollTop = el.node.offsetTop - 100
67
+ })
69
68
  }
70
69
  },
71
70
 
72
- children: (element) => {
71
+ children: element => {
73
72
  const { yearRange } = element.state
74
73
  if (!yearRange) return
75
74
 
76
75
  const [start, end] = yearRange
77
- const yearsArray = (new Array(end + 1 - start)).fill(undefined).map((v, k) => {
78
- return { text: start + k }
79
- }).reverse()
76
+ const yearsArray = new Array(end + 1 - start)
77
+ .fill(undefined)
78
+ .map((v, k) => {
79
+ return { text: start + k }
80
+ })
81
+ .reverse()
80
82
  return yearsArray
81
83
  }
82
84
  }