playbook_ui 12.38.0.pre.alpha.PLAY932removemomentqp1088 → 12.38.0.pre.alpha.PLAY966collapsiblenav41082

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +6 -0
  3. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
  4. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +10 -9
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +4 -8
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
  10. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +75 -0
  11. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +3 -0
  12. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -6
  13. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
  14. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +8 -18
  15. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +39 -45
  16. data/app/pb_kits/playbook/pb_kit/dateTime.ts +1 -204
  17. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +280 -17
  18. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +6 -0
  19. data/app/pb_kits/playbook/pb_nav/_item.tsx +75 -24
  20. data/app/pb_kits/playbook/pb_nav/_mixins.scss +5 -0
  21. data/app/pb_kits/playbook/pb_nav/_nav.tsx +18 -1
  22. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -7
  23. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  24. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +85 -58
  25. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -0
  26. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +58 -0
  27. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +1 -0
  28. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +23 -0
  29. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx} +14 -5
  30. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -0
  31. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -3
  32. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  33. data/app/pb_kits/playbook/pb_nav/item.html.erb +5 -4
  34. data/app/pb_kits/playbook/pb_nav/item.rb +29 -3
  35. data/dist/playbook-rails.js +279 -7
  36. data/lib/playbook/version.rb +1 -1
  37. metadata +11 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e1acc22a656ca63996a3b72d620ec59eb2fd323be9c3d6672449495c8c6781e3
4
- data.tar.gz: 9029b42a09b0db1639360ae2addb2f6f35fd9ec488af53d829dd241e88cce167
3
+ metadata.gz: fd49453e636c1c2cbda861998358c381d07b3e0bef65afaad3098f548c75fcf7
4
+ data.tar.gz: 74319ac79c54556a3a118d0046c1d1706bcf5b6abcfb1384aeadb23f787e18d0
5
5
  SHA512:
6
- metadata.gz: faf876a9e1a26091d6cc292382e99220ca51b8937616cf96d793dbf886572daff5dc7a65bb4ce9c8d2e4c53dc2674acc61dc6e03a2e41db70e1ee2868f9f2a39
7
- data.tar.gz: a5c43e9e88c057548d4bc656352ae3a4fa92f6d8119ff6c339933d25e0baea9aa39e45888826a720489b1b3a38efb82823e01d94130301b09c27d7eb10c90013
6
+ metadata.gz: 55d5f1cc4a72670c0926eda8b1082bea2f514829442a3922fd17b480835774e95a3c92745f40917db804d7a1ac70d1f3fb7dd18a7c67d37a5cca55d9d75b729b
7
+ data.tar.gz: b4da6c4cd1ed0edfb025669219664e02a48d875339781c7f929691062529595557b4ef6ced9b0e290c9e64dc26dbdd12c4c4752067bd6099e8d9b04e833b1772
@@ -20,6 +20,12 @@
20
20
  .icon_wrapper:hover {
21
21
  color: $primary
22
22
  }
23
+
24
+ .dark {
25
+ .pb_icon_kit {
26
+ color: $white;
27
+ }
28
+ }
23
29
  }
24
30
 
25
31
  [class^=pb_collapsible_main_kit] {
@@ -20,7 +20,7 @@ type CollapsibleProps = {
20
20
  icon?: string | string[],
21
21
  iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
22
22
  iconSize?: IconSizes,
23
- iconClick?: ()=> void,
23
+ onIconClick?: ()=> void,
24
24
  onClick?: ()=> void,
25
25
  id?: string,
26
26
  }
@@ -36,7 +36,7 @@ const Collapsible = ({
36
36
  icon,
37
37
  iconColor = 'default',
38
38
  iconSize,
39
- iconClick,
39
+ onIconClick,
40
40
  onClick,
41
41
  id,
42
42
  ...props
@@ -66,7 +66,7 @@ const Collapsible = ({
66
66
  className
67
67
  )
68
68
  return (
69
- <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, iconClick, onClick }}>
69
+ <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
70
70
  <div
71
71
  {...ariaProps}
72
72
  {...dataProps}
@@ -33,6 +33,7 @@ type CollapsibleMainProps = {
33
33
  children: React.ReactNode[] | React.ReactNode,
34
34
  className?: string,
35
35
  cursor?: string,
36
+ dark?: boolean,
36
37
  onClick?: ()=> void
37
38
  }
38
39
  type IconColors = "default" | "light" | "lighter" | "link" | "error" | "success"
@@ -42,10 +43,10 @@ type IconProps = {
42
43
  icon?: string[] | string
43
44
  iconColor?: IconColors
44
45
  iconSize?: IconSizes
45
- iconClick?: ()=> void
46
+ onIconClick?: ()=> void
46
47
  }
47
48
 
48
- const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconProps) => {
49
+ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
49
50
  const color = colorMap[iconColor]
50
51
 
51
52
  const showIcon = (icon: string |string[]) => {
@@ -56,9 +57,9 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconPro
56
57
  }
57
58
 
58
59
  const handleIconClick = (e:any) => {
59
- if (iconClick) {
60
+ if (onIconClick) {
60
61
  e.stopPropagation();
61
- iconClick()
62
+ onIconClick()
62
63
  }
63
64
  }
64
65
 
@@ -93,18 +94,18 @@ const CollapsibleMain = ({
93
94
  cursor = 'pointer',
94
95
  ...props
95
96
  }: CollapsibleMainProps): React.ReactElement=> {
96
- const {collapsed, toggle, icon, iconSize, iconColor, iconClick, onClick}: any = useContext(CollapsibleContext)
97
+ const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
97
98
  const mainCSS = buildCss('pb_collapsible_main_kit')
98
99
  const mainSpacing = globalProps(props, { cursor })
99
100
 
100
- const handleCollapsibleClick = (e:any) => {
101
+ const handleCollapsibleClick = () => {
101
102
  toggle();
102
- onClick && onClick(e)
103
+ onClick && onClick()
103
104
  }
104
105
 
105
106
  return (
106
107
  <div className={classnames(mainCSS, className, mainSpacing)}>
107
- <div onClick={(e)=>handleCollapsibleClick(e)}>
108
+ <div onClick={handleCollapsibleClick}>
108
109
  <Flex
109
110
  spacing="between"
110
111
  vertical="center"
@@ -116,7 +117,7 @@ const CollapsibleMain = ({
116
117
  iconColor={iconColor as IconColors}
117
118
  iconSize={iconSize as IconSizes}
118
119
  icon={icon as string[] | string}
119
- iconClick={iconClick}
120
+ onIconClick={onIconClick}
120
121
  />
121
122
  </FlexItem>
122
123
  </Flex>
@@ -1,13 +1,13 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleColor = () => (
4
+ const CollapsibleColor = (props) => (
5
5
  <div>
6
6
  <Collapsible
7
7
  iconColor='default'
8
8
  marginBottom="xs"
9
9
  >
10
- <Collapsible.Main>
10
+ <Collapsible.Main {...props}>
11
11
  <div>{'Default Section'}</div>
12
12
  </Collapsible.Main>
13
13
  <Collapsible.Content>
@@ -1,9 +1,9 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleDefault = () => (
4
+ const CollapsibleDefault = (props) => (
5
5
  <Collapsible >
6
- <Collapsible.Main>
6
+ <Collapsible.Main {...props}>
7
7
  <div>{'Main Section'}</div>
8
8
  </Collapsible.Main>
9
9
  <Collapsible.Content>
@@ -1,18 +1,14 @@
1
1
  import React from 'react'
2
- import { Collapsible, useCollapsible, Button } from '../..'
2
+ import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleIcons = () => {
5
- const [isCollapsed, setIsCollapsed] = useCollapsible(true)
4
+ const CollapsibleIcons = (props) => {
6
5
 
7
6
  return (
8
7
  <>
9
- <Button onClick={()=> setIsCollapsed(!isCollapsed)}>
10
- {isCollapsed ? "Expand" : "Collapse"}
11
- </Button>
12
- <Collapsible collapsed={isCollapsed}
8
+ <Collapsible
13
9
  icon={['plus','minus']}
14
10
  >
15
- <Collapsible.Main>
11
+ <Collapsible.Main {...props}>
16
12
  <div>{'Main Section'}</div>
17
13
  </Collapsible.Main>
18
14
  <Collapsible.Content>
@@ -1,2 +1,2 @@
1
1
  ##### Prop
2
- This kit uses 'chevron-up' and 'chevron-down' icons as default for the toggle icons. To customize these icons, use the `icon` prop to pass in an array of two icons, the first will render when the collapisble is closed and the second will render when the collapsible is open. In this example, we are using `icon: ['plus','minus']`
2
+ The `icon` prop allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when collapsed (chevron-down), and the second value will replace the default icon when expanded (chevron-up). `icon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the collapsible state.
@@ -1,13 +1,13 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleSize = () => (
4
+ const CollapsibleSize = (props) => (
5
5
  <div>
6
6
  <Collapsible
7
7
  iconSize="xs"
8
8
  marginBottom="xs"
9
9
  >
10
- <Collapsible.Main>
10
+ <Collapsible.Main {...props}>
11
11
  <div>{'Extra Small Section'}</div>
12
12
  </Collapsible.Main>
13
13
  <Collapsible.Content>
@@ -22,7 +22,7 @@ const CollapsibleSize = () => (
22
22
  iconSize="sm"
23
23
  marginBottom="xs"
24
24
  >
25
- <Collapsible.Main>
25
+ <Collapsible.Main {...props}>
26
26
  <div>{'Small Section'}</div>
27
27
  </Collapsible.Main>
28
28
  <Collapsible.Content>
@@ -36,7 +36,7 @@ const CollapsibleSize = () => (
36
36
  <Collapsible
37
37
  marginBottom="xs"
38
38
  >
39
- <Collapsible.Main>
39
+ <Collapsible.Main {...props}>
40
40
  <div>{'Default Section'}</div>
41
41
  </Collapsible.Main>
42
42
  <Collapsible.Content>
@@ -51,7 +51,7 @@ const CollapsibleSize = () => (
51
51
  iconSize="lg"
52
52
  marginBottom="xs"
53
53
  >
54
- <Collapsible.Main>
54
+ <Collapsible.Main {...props}>
55
55
  <div>{'Large Section'}</div>
56
56
  </Collapsible.Main>
57
57
  <Collapsible.Content>
@@ -0,0 +1,75 @@
1
+ import React from 'react'
2
+ import { Collapsible, useCollapsible, Button } from '../..'
3
+
4
+ const CollapsibleState = (props) => {
5
+ const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
+
7
+ return (
8
+ <>
9
+ <Button
10
+ onClick={() => setIsCollapsed(!isCollapsed)}
11
+ padding="none"
12
+ variant="link"
13
+ >
14
+ {isCollapsed ? "Expand All" : "Collapse All"}
15
+ </Button>
16
+
17
+ <Collapsible
18
+ collapsed={isCollapsed}
19
+ icon={["plus", "minus"]}
20
+ padding="none"
21
+ >
22
+ <Collapsible.Main padding="sm"
23
+ {...props}
24
+ >
25
+ <div>{"Main Section"}</div>
26
+ </Collapsible.Main>
27
+ <Collapsible.Content>
28
+ <div>
29
+ {
30
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
31
+ }
32
+ </div>
33
+ </Collapsible.Content>
34
+ </Collapsible>
35
+ <Collapsible
36
+ collapsed={isCollapsed}
37
+ icon={["plus", "minus"]}
38
+ padding="none"
39
+ >
40
+ <Collapsible.Main padding="sm"
41
+ {...props}
42
+ >
43
+ <div>{"Main Section"}</div>
44
+ </Collapsible.Main>
45
+ <Collapsible.Content>
46
+ <div>
47
+ {
48
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
49
+ }
50
+ </div>
51
+ </Collapsible.Content>
52
+ </Collapsible>
53
+ <Collapsible
54
+ collapsed={isCollapsed}
55
+ icon={["plus", "minus"]}
56
+ padding="none"
57
+ >
58
+ <Collapsible.Main padding="sm"
59
+ {...props}
60
+ >
61
+ <div>{"Main Section"}</div>
62
+ </Collapsible.Main>
63
+ <Collapsible.Content>
64
+ <div>
65
+ {
66
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
67
+ }
68
+ </div>
69
+ </Collapsible.Content>
70
+ </Collapsible>
71
+ </>
72
+ )
73
+ }
74
+
75
+ export default CollapsibleState
@@ -0,0 +1,3 @@
1
+ The `collapsed` prop allows you to toggle the collapsible with external controls (like buttons) when used in conjunction with our `useCollapsible` hook.
2
+
3
+ NOTE: you must import and declare the `useCollapsible` hook then pass its state to the collapsed prop of any Collapsible you wish to manage with the external control. See our code example for details.
@@ -2,12 +2,13 @@ examples:
2
2
 
3
3
  rails:
4
4
  - collapsible_default: Default
5
- - collapsible_size: Size
6
- - collapsible_color: Color
7
- # - collapsible_icons: Custom Icons
5
+ - collapsible_size: Icon Size
6
+ - collapsible_color: Icon Color
7
+ - collapsible_icons: Custom Icons
8
8
 
9
9
  react:
10
10
  - collapsible_default: Default
11
- - collapsible_size: Size
12
- - collapsible_color: Color
13
- # - collapsible_icons: Custom Icons
11
+ - collapsible_size: Icon Size
12
+ - collapsible_color: Icon Color
13
+ - collapsible_icons: Custom Icons
14
+ - collapsible_state: useCollapsible Hook
@@ -1,4 +1,5 @@
1
1
  export { default as CollapsibleDefault } from './_collapsible_default.jsx'
2
2
  export { default as CollapsibleSize } from './_collapsible_size.jsx'
3
3
  export { default as CollapsibleColor } from './_collapsible_color.jsx'
4
- export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
4
+ export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
5
+ export {default as CollapsibleState } from './_collapsible_state.jsx'
@@ -1,25 +1,15 @@
1
1
  /* eslint-disable no-console */
2
2
  import React from 'react'
3
+ import moment from 'moment'
3
4
  import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
4
5
 
5
6
  import DatePicker from './_date_picker'
6
- import DateTime from "../pb_kit/dateTime.ts"
7
7
  import { getTimezoneText } from './plugins/timeSelect'
8
8
 
9
- jest.setSystemTime(new Date('01/01/2020'));
10
- const DEFAULT_DATE = new Date()
11
-
12
- const formatDate = (date) => {
13
- const month = (date.getMonth() + 1).toString().padStart(2, "0")
14
- const day = (date.getDate()).toString().padStart(2, "0")
15
- const year = date.getFullYear()
16
9
 
17
- return `${month}/${day}/${year}`
18
- }
19
10
 
20
- Date.prototype.formatDate = function () {
21
- return formatDate(this)
22
- }
11
+ jest.setSystemTime(new Date('01/01/2020'));
12
+ const DEFAULT_DATE = new Date()
23
13
 
24
14
  describe('DatePicker Kit', () => {
25
15
  beforeEach(() => {
@@ -168,7 +158,6 @@ describe('DatePicker Kit', () => {
168
158
  expect(input).toHaveValue('01/01/2020 at 12:00 PM')
169
159
  })
170
160
  })
171
-
172
161
  test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
173
162
  const testId = 'datepicker-quick-pick'
174
163
  render(
@@ -208,10 +197,10 @@ describe('DatePicker Kit', () => {
208
197
  )
209
198
 
210
199
  await waitFor(() => {
211
- expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + DateTime.getYearEndDate(new Date()).formatDate())
200
+ expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().endOf('year').format('MM/DD/YYYY'))
212
201
  })
213
- })
214
202
 
203
+ })
215
204
  test('shows DatePicker QuickPick ranges ending today', async () => {
216
205
  const testId = 'datepicker-quick-pick-ends-today'
217
206
  render(
@@ -236,7 +225,7 @@ describe('DatePicker Kit', () => {
236
225
  cancelable: true,
237
226
  }),
238
227
  )
239
-
228
+
240
229
  const thisYear = within(kit).getByText('This year')
241
230
 
242
231
  fireEvent(
@@ -248,7 +237,8 @@ describe('DatePicker Kit', () => {
248
237
  )
249
238
 
250
239
  await waitFor(() => {
251
- expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
240
+ expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().format('MM/DD/YYYY'))
252
241
  })
242
+
253
243
  })
254
244
  })
@@ -1,4 +1,4 @@
1
- import DateTime from '../../pb_kit/dateTime';
1
+ import moment from 'moment'
2
2
 
3
3
  type FpTypes = {
4
4
  setDate: (arg0: any, arg1: boolean) => void,
@@ -23,44 +23,37 @@ let activeLabel = ""
23
23
 
24
24
  const quickPickPlugin = (thisRangesEndToday: boolean) => {
25
25
  return function (fp: FpTypes & any): any {
26
- const today = new Date()
27
- const yesterday = DateTime.getYesterdayDate(new Date())
28
-
29
- const thisWeekStartDate = DateTime.getFirstDayOfWeek(new Date())
30
- const thisWeekEndDate = thisRangesEndToday ? new Date() : DateTime.getLastDayOfWeek(new Date())
31
- const lastWeekStartDate = DateTime.getPreviousWeekStartDate(new Date())
32
- const lastWeekEndDate = DateTime.getPreviousWeekEndDate(new Date())
33
-
34
- const thisMonthStartDate = DateTime.getMonthStartDate(new Date())
35
- const thisMonthEndDate = thisRangesEndToday ? new Date() : DateTime.getMonthEndDate(new Date())
36
- const lastMonthStartDate = DateTime.getPreviousMonthStartDate(new Date())
37
- const lastMonthEndDate = DateTime.getPreviousMonthEndDate(new Date())
38
-
39
- const thisQuarterStartDate = DateTime.getQuarterStartDate(new Date())
40
- const thisQuarterEndDate = thisRangesEndToday ? new Date() : DateTime.getQuarterEndDate(new Date())
41
- const lastQuarterStartDate = DateTime.getPreviousQuarterStartDate(new Date())
42
- const lastQuarterEndDate = DateTime.getPreviousQuarterEndDate(new Date())
43
-
44
- const thisYearStartDate = DateTime.getYearStartDate(new Date())
45
- const thisYearEndDate = thisRangesEndToday ? new Date() : DateTime.getYearEndDate(new Date())
46
- const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date())
47
- const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date())
26
+ const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
27
+ const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
28
+ const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
29
+ const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
48
30
 
49
31
  // variable that holds the ranges available
50
32
  const ranges = {
51
- 'Today': [today, today],
52
- 'Yesterday': [yesterday, yesterday],
53
- 'This week': [thisWeekStartDate, thisWeekEndDate],
54
- 'This month': [thisMonthStartDate, thisMonthEndDate],
55
- 'This quarter': [thisQuarterStartDate, thisQuarterEndDate],
56
- 'This year': [thisYearStartDate, thisYearEndDate],
57
- 'Last week': [lastWeekStartDate, lastWeekEndDate],
58
- 'Last month': [lastMonthStartDate, lastMonthEndDate],
59
- 'Last quarter': [lastQuarterStartDate, lastQuarterEndDate],
60
- 'Last year': [lastYearStartDate, lastYearEndDate]
33
+ 'Today': [new Date(), new Date()],
34
+ 'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
35
+ 'This week': [moment().startOf('isoWeek').toDate(), thisWeekEndDate],
36
+ 'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
37
+ 'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
38
+ 'This year': [moment().startOf('year').toDate(), thisYearEndDate],
39
+ 'Last week': [
40
+ moment().subtract(1, 'week').startOf('isoWeek').toDate(),
41
+ moment().subtract(1, 'week').endOf('isoWeek').toDate()
42
+ ],
43
+ 'Last month': [
44
+ moment().subtract(1, 'month').startOf('month').toDate(),
45
+ moment().subtract(1, 'month').endOf('month').toDate()
46
+ ],
47
+ 'Last quarter': [
48
+ moment().subtract(1, 'quarter').startOf('quarter').toDate(),
49
+ moment().subtract(1, 'quarter').endOf('quarter').toDate()
50
+ ],
51
+ 'Last year': [
52
+ moment().subtract(1, 'year').startOf('year').toDate(),
53
+ moment().subtract(1, 'year').endOf('year').toDate()
54
+ ]
61
55
  }
62
-
63
- // creating the ul element for the nav dropdown and giving it classnames
56
+ //creating the ul element for the nav dropdown and giving it classnames
64
57
  const rangesNav = document.createElement('ul');
65
58
 
66
59
  // creating the pluginData object that will hold the properties of this plugin
@@ -71,11 +64,11 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
71
64
  };
72
65
 
73
66
  /**
74
- * @param {string} label
75
- * @returns HTML Element
76
- */
67
+ * @param {string} label
68
+ * @returns HTML Element
69
+ */
77
70
 
78
- // function for creating the range buttons in the nav
71
+ //function for creating the range buttons in the nav
79
72
  const addRangeButton = (label: string) => {
80
73
 
81
74
  // creating new elements to mimick selectable card component
@@ -95,7 +88,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
95
88
  // append the li item to the ul rangeNav prop
96
89
  pluginData.rangesNav.appendChild(item);
97
90
 
98
- // return the ranges button prop
91
+ // return the ranges buton prop
99
92
  return pluginData.rangesButtons[label];
100
93
  };
101
94
 
@@ -105,7 +98,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
105
98
  if (current) {
106
99
  current.classList.remove('active');
107
100
  }
108
-
101
+
109
102
  if (selectedDates.length > 0 && activeLabel) {
110
103
  pluginData.rangesButtons[activeLabel].classList.add('active');
111
104
  }
@@ -116,15 +109,16 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
116
109
  selectedDates[1].toDateString() === pluginData.ranges[activeLabel][1].toDateString()
117
110
  }
118
111
 
112
+
119
113
  return {
120
- // onReady is a hook from flatpickr that runs when calendar is in a ready state
114
+ // onReady is a hook from flatpickr that runs when calender is in a ready state
121
115
  onReady(selectedDates: Array<Date>) {
122
116
  // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
123
117
  for (const [label, range] of Object.entries(pluginData.ranges)) {
124
118
  addRangeButton(label).addEventListener('click', function () {
125
119
 
126
- const start = new Date(range[0]);
127
- const end = new Date(range[1]);
120
+ const start = moment(range[0]).toDate();
121
+ const end = moment(range[1]).toDate();
128
122
 
129
123
  if (!start) {
130
124
  fp.clear();
@@ -176,4 +170,4 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
176
170
  };
177
171
  }
178
172
 
179
- export default quickPickPlugin;
173
+ export default quickPickPlugin;