@symbo.ls/datepicker 3.1.2 → 3.2.3

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 (5) hide show
  1. package/grid.js +40 -43
  2. package/index.js +12 -26
  3. package/months.js +54 -65
  4. package/package.json +5 -5
  5. package/weekdays.js +13 -17
package/grid.js CHANGED
@@ -7,11 +7,11 @@ export const calendar = new HeadlessDatepicker.Calendar({
7
7
  calendarMode: 'exact'
8
8
  })
9
9
 
10
- const extractMonthDays = (data) => {
10
+ const extractMonthDays = data => {
11
11
  const result = []
12
12
 
13
- data.weeks.forEach((week) => {
14
- week.dates.forEach((date) => {
13
+ data.weeks.forEach(week => {
14
+ week.dates.forEach(date => {
15
15
  result.push({ ...date, _d: date.moment._d.toString() })
16
16
  })
17
17
  })
@@ -20,58 +20,55 @@ const extractMonthDays = (data) => {
20
20
  }
21
21
 
22
22
  export const DatePickerGrid = {
23
- extends: 'Grid',
24
-
25
- props: {
26
- columns: 'repeat(7, 1fr)',
27
- minWidth: '100%',
28
- gap: 'W2',
29
- padding: '- Z',
30
- style: { scrollSnapAlign: 'center' }
31
- },
23
+ display: 'grid',
32
24
 
25
+ columns: 'repeat(7, 1fr)',
26
+ minWidth: '100%',
27
+ gap: 'W2',
28
+ padding: '- Z',
29
+ scrollSnapAlign: 'center',
33
30
  childExtends: DatePickerDay,
34
31
  childrenAs: 'state',
35
32
  children: ({ state }) => state.days
36
33
  }
37
34
 
38
35
  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'
36
+ maxWidth: 'F3+B',
37
+ position: 'relative',
38
+ content: {
39
+ overflow: 'hidden',
40
+ style: { scrollSnapType: 'x mandatory' }
41
+ },
42
+ style: {
43
+ button: {
44
+ padding: '0'
68
45
  }
69
46
  },
47
+ ':before': {
48
+ content: '""',
49
+ position: 'absolute',
50
+ boxSize: '100% 12px',
51
+ background:
52
+ 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
53
+ left: '0',
54
+ top: '0',
55
+ zIndex: '30'
56
+ },
57
+ ':after': {
58
+ content: '""',
59
+ position: 'absolute',
60
+ boxSize: '100% 12px',
61
+ background:
62
+ 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
63
+ right: '0',
64
+ top: '0',
65
+ zIndex: '30'
66
+ },
70
67
 
71
68
  state: ({ parent }) => {
72
69
  const state = parent.state
73
70
  if (!state.activeYear) return
74
- return (new Array(12)).fill(undefined).map((v, k) => {
71
+ return new Array(12).fill(undefined).map((v, k) => {
75
72
  const year = state.activeYear
76
73
  const month = k + 1
77
74
  const weekItems = calendar.getMonth({ year, month })
@@ -96,7 +93,7 @@ export const DatePickerGridContainer = {
96
93
  behavior: state.initialized ? 'smooth' : 'instant'
97
94
  })
98
95
  })
99
- // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
96
+ // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
100
97
  }
101
98
  }
102
99
  },
package/index.js CHANGED
@@ -1,8 +1,5 @@
1
1
  'use strict'
2
2
 
3
- import { Flex } from '@symbo.ls/atoms'
4
- import { Dialog } from '@symbo.ls/dialog'
5
-
6
3
  export * from './days'
7
4
  export * from './weekdays'
8
5
  export * from './months'
@@ -10,7 +7,7 @@ export * from './years'
10
7
  export * from './grid'
11
8
 
12
9
  export const DatePicker = {
13
- extends: [Dialog, Flex],
10
+ extends: ['Dialog'],
14
11
 
15
12
  state: ({ props }) => {
16
13
  const date = new Date()
@@ -26,22 +23,17 @@ export const DatePicker = {
26
23
  }
27
24
  },
28
25
 
29
- props: {
30
- width: 'fit-content',
31
- margin: '0',
32
- userSelect: 'none',
33
- maxHeight: 'G+B2'
34
- },
26
+ width: 'fit-content',
27
+ margin: '0',
28
+ userSelect: 'none',
29
+ maxHeight: 'G+B2',
35
30
 
36
31
  DatePickerYears: {},
37
32
 
38
33
  Flex: {
39
- props: {
40
- flow: 'column',
41
- padding: 'A1 - - -',
42
- position: 'relative'
43
- },
44
-
34
+ flow: 'column',
35
+ padding: 'A1 - - -',
36
+ position: 'relative',
45
37
  DatePickerMonthsSlider: {},
46
38
 
47
39
  DatePickerWeekDays: {},
@@ -57,19 +49,13 @@ export const DatePickerTwoColumns = {
57
49
  DatePickerYears: {},
58
50
  Flex: {
59
51
  DatePickerMonthsSlider: {
60
- props: {
61
- maxWidth: `${544 / 16}em`
62
- }
52
+ maxWidth: `${544 / 16}em`
63
53
  },
64
54
  DatePickerWeekDays: {
65
- props: {
66
- maxWidth: `${544 / 16}em`
67
- }
55
+ maxWidth: `${544 / 16}em`
68
56
  },
69
- monthNumbersContainer: {
70
- props: {
71
- maxWidth: `${544 / 16}em`
72
- }
57
+ MonthNumbersContainer: {
58
+ maxWidth: `${544 / 16}em`
73
59
  }
74
60
  }
75
61
  }
package/months.js CHANGED
@@ -2,59 +2,53 @@
2
2
 
3
3
  export const DatePickerMonthsSlider = {
4
4
  display: 'flex',
5
- props: {
6
- position: 'relative',
7
- overflow: 'hidden',
8
- alignItems: 'center',
9
- padding: '- - A2 -',
10
- maxWidth: `${272 / 16}em`,
11
- boxSizing: 'border-box',
12
- ':before': {
13
- content: '""',
14
- position: 'absolute',
15
- boxSize: '100% 100px',
16
- background:
17
- 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
18
- left: '0',
19
- top: '0',
20
- zIndex: '30',
21
- pointerEvents: 'none'
22
- },
23
- ':after': {
24
- content: '""',
25
- position: 'absolute',
26
- boxSize: '100% 100px',
27
- background:
28
- 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
29
- right: '0',
30
- top: '0',
31
- zIndex: '30',
32
- pointerEvents: 'none'
33
- },
5
+ position: 'relative',
6
+ overflow: 'hidden',
7
+ alignItems: 'center',
8
+ padding: '- - A2 -',
9
+ maxWidth: `${272 / 16}em`,
10
+ boxSizing: 'border-box',
11
+ ':before': {
12
+ content: '""',
13
+ position: 'absolute',
14
+ boxSize: '100% 100px',
15
+ background:
16
+ 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
17
+ left: '0',
18
+ top: '0',
19
+ zIndex: '30',
20
+ pointerEvents: 'none'
21
+ },
22
+ ':after': {
23
+ content: '""',
24
+ position: 'absolute',
25
+ boxSize: '100% 100px',
26
+ background:
27
+ 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
28
+ right: '0',
29
+ top: '0',
30
+ zIndex: '30',
31
+ pointerEvents: 'none'
32
+ },
34
33
 
35
- style: {
36
- '> button': {
37
- padding: '0',
38
- width: 'A',
39
- height: 'A',
40
- position: 'absolute',
41
- zIndex: '35',
42
- background: 'transparent',
43
- ':first-child': { left: '18px' },
44
- ':last-child': { right: '18px' }
45
- }
46
- }
34
+ '> button': {
35
+ padding: '0',
36
+ width: 'A',
37
+ height: 'A',
38
+ position: 'absolute',
39
+ zIndex: '35',
40
+ background: 'transparent',
41
+ ':first-child': { left: '18px' },
42
+ ':last-child': { right: '18px' }
47
43
  },
48
44
 
49
45
  Button_left: {
50
- props: {
51
- icon: 'arrowLeft',
52
- '@dark': {
53
- theme: 'primary @dark .color-only'
54
- },
55
- '@light': {
56
- theme: 'primary @light .color-only'
57
- }
46
+ icon: 'arrowLeft',
47
+ '@dark': {
48
+ theme: 'primary @dark .color-only'
49
+ },
50
+ '@light': {
51
+ theme: 'primary @light .color-only'
58
52
  },
59
53
  onClick: (ev, el, s) => {
60
54
  const { activeMonth, activeYear } = s
@@ -69,20 +63,17 @@ export const DatePickerMonthsSlider = {
69
63
  },
70
64
 
71
65
  Flex: {
72
- props: {
73
- flex: '1',
74
- overflow: 'hidden',
75
- style: { scrollSnapType: 'x mandatory' },
76
- '::-webkit-scrollbar': { display: 'none' }
77
- },
78
-
66
+ flex: '1',
67
+ overflow: 'hidden',
68
+ style: { scrollSnapType: 'x mandatory' },
69
+ '::-webkit-scrollbar': { display: 'none' },
79
70
  childExtends: {
80
71
  tag: 'h6',
81
72
  fontSize: 'Z1',
82
73
  textAlign: 'center',
83
74
  boxSizing: 'content-box',
84
75
  minWidth: '272px',
85
- style: { scrollSnapAlign: 'center' },
76
+ scrollSnapAlign: 'center',
86
77
 
87
78
  isSelected: ({ state, key }) => state.activeMonth === parseInt(key),
88
79
  '.isSelected': { opacity: '1' },
@@ -121,14 +112,12 @@ export const DatePickerMonthsSlider = {
121
112
  },
122
113
 
123
114
  Button_right: {
124
- props: {
125
- icon: 'arrowRight',
126
- '@dark': {
127
- theme: 'primary @dark .color-only'
128
- },
129
- '@light': {
130
- theme: 'primary @light .color-only'
131
- }
115
+ icon: 'arrowRight',
116
+ '@dark': {
117
+ theme: 'primary @dark .color-only'
118
+ },
119
+ '@light': {
120
+ theme: 'primary @light .color-only'
132
121
  },
133
122
 
134
123
  onClick: (ev, el, s) => {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@symbo.ls/datepicker",
3
- "version": "3.1.2",
3
+ "version": "3.2.3",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
- "gitHead": "429b36616aa04c8587a26ce3c129815115e35897",
6
+ "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
7
7
  "dependencies": {
8
- "@symbo.ls/atoms": "^3.1.2",
9
- "@symbo.ls/button": "^3.1.2",
10
- "@symbo.ls/dialog": "^3.1.2",
8
+ "@symbo.ls/atoms": "^3.2.3",
9
+ "@symbo.ls/button": "^3.2.3",
10
+ "@symbo.ls/dialog": "^3.2.3",
11
11
  "headless-datepicker": "^1.0.1"
12
12
  },
13
13
  "source": "src/index.js"
package/weekdays.js CHANGED
@@ -1,28 +1,24 @@
1
1
  'use strict'
2
2
 
3
3
  export const DatePickerWeekDays = {
4
- extends: 'Grid',
5
- props: {
6
- overflow: 'hidden',
7
- padding: '- Z A',
8
- width: '100%',
9
- columns: 'repeat(7, 1fr)',
10
- gap: 'W2',
11
- style: {
12
- button: {
13
- padding: '0'
14
- }
4
+ display: 'grid',
5
+ overflow: 'hidden',
6
+ padding: '- Z A',
7
+ width: '100%',
8
+ columns: 'repeat(7, 1fr)',
9
+ gap: 'W2',
10
+ style: {
11
+ button: {
12
+ padding: '0'
15
13
  }
16
14
  },
17
15
  childExtends: {
18
16
  tag: 'span',
19
17
  display: 'flex',
20
- props: {
21
- fontSize: 'Y1',
22
- textTransform: 'capitalize',
23
- align: 'center center',
24
- ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' }
25
- }
18
+ fontSize: 'Y1',
19
+ textTransform: 'capitalize',
20
+ align: 'center center',
21
+ ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' }
26
22
  },
27
23
  ...[
28
24
  { text: 'Mo' },