playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/data/menu.yml +0 -13
- data/app/pb_kits/playbook/index.js +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
- data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
- data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
- data/app/pb_kits/playbook/pb_button/button.rb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/{_date_picker.jsx → _date_picker.tsx} +58 -66
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
- data/app/pb_kits/playbook/pb_date_picker/{date_picker_helper.js → date_picker_helper.ts} +37 -16
- data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts +171 -0
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
- data/app/pb_kits/playbook/pb_date_range_stacked/{_date_range_stacked.jsx → _date_range_stacked.tsx} +5 -6
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +127 -0
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +90 -0
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js +151 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/{_close_icon.jsx → _close_icon.tsx} +1 -3
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +217 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.tsx +3 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_body.jsx → _dialog_body.tsx} +6 -2
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_footer.jsx → _dialog_footer.tsx} +8 -11
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_header.jsx → _dialog_header.tsx} +12 -15
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
- data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +32 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +101 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
- data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
- data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
- data/app/pb_kits/playbook/pb_layout/layout.test.js +1 -2
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +33 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx +1 -3
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -1
- data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header.tsx → Header/_lightbox_header.tsx} +8 -8
- data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header_icon.tsx → Header/_lightbox_header_icon.tsx} +2 -2
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +2 -1
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +8 -60
- data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +5 -5
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
- data/app/pb_kits/playbook/playbook-rails.js +1 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +5 -0
- data/app/pb_kits/playbook/tokens/_spacing.scss +2 -0
- data/app/pb_kits/playbook/utilities/_spacing.scss +1 -0
- data/app/pb_kits/playbook/utilities/text.ts +1 -1
- data/lib/playbook/spacing.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +39 -21
- data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.js +0 -137
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +0 -103
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +0 -223
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.jsx +0 -3
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -127
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 50c4e2402a8a42486e55758e888f2aa3d0b68c8b00c64537bcf86572c0d39a3b
|
4
|
+
data.tar.gz: 7cbb4822db32acc06087d381c025c8f1e11ef0685e33e8bc2b66bb90e80eeeed
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1e645568ecb8d1ae319c94bc7038f9e7c1dac964fdcca0c256430142813efc4bec63ba172f7522e96766458530ed382499899a6e4e54ee66093d189dbb60b7ab
|
7
|
+
data.tar.gz: c1d7f6db9c77ea3fc3ec9f402f89675caccd4320fb7490ee26df0ab61a43e6dd6ad29a1b9209ac23a33ed6a2239092974949c1689fe2f9931ce899110b9fb30d
|
@@ -104,16 +104,3 @@ kits:
|
|
104
104
|
- title_detail
|
105
105
|
- user_badge
|
106
106
|
- walkthrough
|
107
|
-
visual_guidelines:
|
108
|
-
- colors
|
109
|
-
- max_width
|
110
|
-
- number_spacing
|
111
|
-
- positioning
|
112
|
-
- line_height
|
113
|
-
- spacing
|
114
|
-
- border_radius
|
115
|
-
- typography
|
116
|
-
- shadows
|
117
|
-
- display
|
118
|
-
- cursor
|
119
|
-
- flex_box
|
@@ -115,7 +115,7 @@ export { default as dashboardValueSettings } from './pb_dashboard_value/dashboar
|
|
115
115
|
|
116
116
|
// Other JS/Plugins
|
117
117
|
export { default as pbChart } from './plugins/pb_chart.js'
|
118
|
-
export { default as datePickerHelper } from './pb_date_picker/date_picker_helper
|
118
|
+
export { default as datePickerHelper } from './pb_date_picker/date_picker_helper'
|
119
119
|
export { default as PbPopover } from './pb_popover'
|
120
120
|
export { default as PbTable } from './pb_table'
|
121
121
|
export { default as PbTextarea } from './pb_textarea'
|
@@ -0,0 +1,80 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { cleanup, render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import Badge from './_badge'
|
5
|
+
|
6
|
+
const testId = "badge"
|
7
|
+
|
8
|
+
test('default class name', () => {
|
9
|
+
render(
|
10
|
+
<Badge
|
11
|
+
data={{ testid: testId }}
|
12
|
+
text="+1"
|
13
|
+
/>
|
14
|
+
)
|
15
|
+
|
16
|
+
const kit = screen.getByTestId(testId)
|
17
|
+
|
18
|
+
expect(kit).toHaveClass('pb_badge_kit_neutral')
|
19
|
+
})
|
20
|
+
|
21
|
+
test('primary class name', () => {
|
22
|
+
render(
|
23
|
+
<Badge
|
24
|
+
data={{ testid: testId }}
|
25
|
+
text="+1"
|
26
|
+
variant="primary"
|
27
|
+
/>
|
28
|
+
)
|
29
|
+
|
30
|
+
const kit = screen.getByTestId(testId)
|
31
|
+
|
32
|
+
expect(kit).toHaveClass('pb_badge_kit_primary')
|
33
|
+
})
|
34
|
+
|
35
|
+
test('displays text content', () => {
|
36
|
+
render(
|
37
|
+
<Badge
|
38
|
+
text="+1"
|
39
|
+
variant="primary"
|
40
|
+
/>
|
41
|
+
)
|
42
|
+
|
43
|
+
const text = screen.getByText("+1")
|
44
|
+
expect(text).toBeInTheDocument()
|
45
|
+
})
|
46
|
+
|
47
|
+
test('displays rounded corners', () => {
|
48
|
+
render(
|
49
|
+
<Badge
|
50
|
+
data={{ testid: testId }}
|
51
|
+
rounded
|
52
|
+
text="+1"
|
53
|
+
variant="primary"
|
54
|
+
/>
|
55
|
+
)
|
56
|
+
|
57
|
+
const kit = screen.getByTestId(testId)
|
58
|
+
expect(kit).toHaveClass('pb_badge_kit_primary_rounded')
|
59
|
+
})
|
60
|
+
|
61
|
+
test('displays color variants', () => {
|
62
|
+
[
|
63
|
+
"success",
|
64
|
+
"warning",
|
65
|
+
"error",
|
66
|
+
"info"
|
67
|
+
].forEach((colorVariant) => {
|
68
|
+
render(
|
69
|
+
<Badge
|
70
|
+
data={{ testid: testId }}
|
71
|
+
text={colorVariant}
|
72
|
+
variant={colorVariant}
|
73
|
+
/>
|
74
|
+
)
|
75
|
+
const kit = screen.getByTestId(testId)
|
76
|
+
expect(kit).toHaveClass(`pb_badge_kit_${colorVariant}`)
|
77
|
+
|
78
|
+
cleanup()
|
79
|
+
})
|
80
|
+
})
|
@@ -17,6 +17,7 @@ type ButtonPropTypes = {
|
|
17
17
|
form?: string,
|
18
18
|
fullWidth?: boolean,
|
19
19
|
icon?: string,
|
20
|
+
iconRight?: boolean,
|
20
21
|
id?: string,
|
21
22
|
link?: string,
|
22
23
|
loading?: boolean,
|
@@ -61,6 +62,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
61
62
|
data = {},
|
62
63
|
disabled,
|
63
64
|
icon = null,
|
65
|
+
iconRight = false,
|
64
66
|
id,
|
65
67
|
loading = false,
|
66
68
|
onClick,
|
@@ -91,10 +93,13 @@ const Button = (props: ButtonPropTypes) => {
|
|
91
93
|
|
92
94
|
const content = (
|
93
95
|
<span className="pb_button_content">
|
94
|
-
{icon && (
|
95
|
-
<i className={`pb_icon_kit far fa-${icon} fa-fw`} />
|
96
|
+
{icon && !iconRight && (
|
97
|
+
<i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
|
96
98
|
)}
|
97
99
|
<span>{text || children}</span>
|
100
|
+
{icon && iconRight && (
|
101
|
+
<i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
|
102
|
+
)}
|
98
103
|
</span>
|
99
104
|
)
|
100
105
|
|
@@ -1,5 +1,16 @@
|
|
1
1
|
<%= content_tag(object.tag,
|
2
2
|
object.tag == "button" ? object.options : object.link_options) do %>
|
3
|
+
<% if object.icon && !object.icon_right %>
|
4
|
+
<span>
|
5
|
+
<%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
|
6
|
+
</span>
|
7
|
+
<% end %>
|
3
8
|
<%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
|
4
9
|
<span class="pb_button_content"><%= content.presence || object.text %></span>
|
10
|
+
<% if object.icon && object.icon_right %>
|
11
|
+
<span>
|
12
|
+
<%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
|
13
|
+
</span>
|
14
|
+
<% end %>
|
15
|
+
|
5
16
|
<% end %>
|
@@ -7,6 +7,9 @@ module Playbook
|
|
7
7
|
default: false
|
8
8
|
prop :full_width, type: Playbook::Props::Boolean,
|
9
9
|
default: false
|
10
|
+
prop :icon
|
11
|
+
prop :icon_right, type: Playbook::Props::Boolean,
|
12
|
+
default: false
|
10
13
|
prop :link
|
11
14
|
prop :loading, type: Playbook::Props::Boolean,
|
12
15
|
default: false
|
@@ -1,15 +1,18 @@
|
|
1
|
-
import React from
|
2
|
-
import { Button } from
|
1
|
+
import React from "react";
|
2
|
+
import { Button, Pill } from "../../";
|
3
3
|
|
4
4
|
const ButtonBlockContent = (props) => (
|
5
5
|
<div>
|
6
|
-
<Button
|
7
|
-
fixedWidth
|
8
|
-
icon="users"
|
9
|
-
text="Button with Block Content"
|
6
|
+
<Button fixedWidth
|
10
7
|
{...props}
|
11
|
-
|
8
|
+
>
|
9
|
+
<Pill marginRight="xs"
|
10
|
+
text="5"
|
11
|
+
variant="info"
|
12
|
+
/>
|
13
|
+
<span>Button with Block Content</span>
|
14
|
+
</Button>
|
12
15
|
</div>
|
13
|
-
)
|
16
|
+
);
|
14
17
|
|
15
|
-
export default ButtonBlockContent
|
18
|
+
export default ButtonBlockContent;
|
@@ -0,0 +1 @@
|
|
1
|
+
Used when the user wants to display custom content within a button instead of passing in text or props to the kit itself. In this example the button is using the Pill kit and a `<span>` element inside the button.
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button } from '../../'
|
3
|
+
|
4
|
+
const ButtonIconOptions = (props) => (
|
5
|
+
<div>
|
6
|
+
<Button
|
7
|
+
fixedWidth
|
8
|
+
icon='plus'
|
9
|
+
text="Icon on Left"
|
10
|
+
{...props}
|
11
|
+
/>
|
12
|
+
{' '}
|
13
|
+
<Button
|
14
|
+
fixedWidth
|
15
|
+
icon='chevron-right'
|
16
|
+
iconRight
|
17
|
+
text="Icon on Right"
|
18
|
+
{...props}
|
19
|
+
/>
|
20
|
+
</div>
|
21
|
+
)
|
22
|
+
|
23
|
+
export default ButtonIconOptions
|
@@ -0,0 +1 @@
|
|
1
|
+
Icons can also be added to a button if needed. By default, the icon will be displayed on the left of the text. To display the icon on the right, use the optional prop of `iconRight` in react or `icon_right` in rails.
|
@@ -5,6 +5,7 @@ examples:
|
|
5
5
|
- button_link: Button Links
|
6
6
|
- button_loading: Button Loading
|
7
7
|
- button_block_content: Button Block Content
|
8
|
+
- button_icon_options: Button Icon Options
|
8
9
|
- button_accessibility: Button Accessibility Options
|
9
10
|
- button_options: Button Additional Options
|
10
11
|
- button_size: Button Size
|
@@ -15,6 +16,7 @@ examples:
|
|
15
16
|
- button_link: Button Links
|
16
17
|
- button_loading: Button Loading
|
17
18
|
- button_block_content: Button Block Content
|
19
|
+
- button_icon_options: Button Icon Options
|
18
20
|
- button_accessibility: Button Accessibility Options
|
19
21
|
- button_options: Button Additional Options (onClick)
|
20
22
|
- button_size: Button Size
|
@@ -3,6 +3,7 @@ export { default as ButtonFullWidth } from './_button_full_width.jsx'
|
|
3
3
|
export { default as ButtonLink } from './_button_link.jsx'
|
4
4
|
export { default as ButtonLoading } from './_button_loading.jsx'
|
5
5
|
export { default as ButtonBlockContent } from './_button_block_content.jsx'
|
6
|
+
export { default as ButtonIconOptions } from './_button_icon_options.jsx'
|
6
7
|
export { default as ButtonAccessibility } from './_button_accessibility.jsx'
|
7
8
|
export { default as ButtonOptions } from './_button_options.jsx'
|
8
9
|
export { default as ButtonSize } from './_button_size.jsx'
|
@@ -1,10 +1,8 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React, { useEffect } from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
|
6
4
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
|
-
import { deprecatedProps, globalProps } from '../utilities/globalProps'
|
5
|
+
import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
|
8
6
|
|
9
7
|
import datePickerHelper from './date_picker_helper'
|
10
8
|
|
@@ -12,46 +10,42 @@ import Icon from '../pb_icon/_icon'
|
|
12
10
|
import TextInput from '../pb_text_input/_text_input'
|
13
11
|
|
14
12
|
type DatePickerProps = {
|
15
|
-
allowInput?:
|
16
|
-
aria?:
|
17
|
-
className?:
|
18
|
-
dark?:
|
13
|
+
allowInput?: boolean,
|
14
|
+
aria?: {[key: string]: string},
|
15
|
+
className?: string,
|
16
|
+
dark?: boolean,
|
19
17
|
data?: object,
|
20
|
-
defaultDate?:
|
21
|
-
disableDate?:
|
22
|
-
disableInput?:
|
23
|
-
disableRange?:
|
24
|
-
disableWeekdays?:
|
25
|
-
enableTime?:
|
26
|
-
error?:
|
27
|
-
format?:
|
28
|
-
hideIcon?:
|
29
|
-
hideLabel?:
|
30
|
-
id?:
|
31
|
-
inLine?:
|
18
|
+
defaultDate?: string,
|
19
|
+
disableDate?: number[],
|
20
|
+
disableInput?: boolean,
|
21
|
+
disableRange?: number[],
|
22
|
+
disableWeekdays?: number[],
|
23
|
+
enableTime?: boolean,
|
24
|
+
error?: string,
|
25
|
+
format?: string,
|
26
|
+
hideIcon?: boolean,
|
27
|
+
hideLabel?: boolean,
|
28
|
+
id?: string,
|
29
|
+
inLine?: boolean,
|
32
30
|
inputAria?: object,
|
33
31
|
inputData?: object,
|
34
|
-
inputOnChange?: (
|
32
|
+
inputOnChange?: (arg: string) => void,
|
35
33
|
inputValue?: any,
|
36
|
-
label?:
|
37
|
-
maxDate:
|
38
|
-
minDate:
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
pickerId?: String,
|
43
|
-
placeholder?: String,
|
44
|
-
plugins: Boolean,
|
45
|
-
position: String,
|
34
|
+
label?: string,
|
35
|
+
maxDate: string,
|
36
|
+
minDate: string,
|
37
|
+
name: string,
|
38
|
+
pickerId?: ArrayLike<Node> | Node | string,
|
39
|
+
placeholder?: string,
|
46
40
|
positionElement?: HTMLElement | null,
|
47
|
-
scrollContainer?:
|
41
|
+
scrollContainer?: string,
|
48
42
|
selectionType?: "month" | "week",
|
49
|
-
showTimezone?:
|
50
|
-
staticPosition:
|
51
|
-
timeFormat?:
|
52
|
-
type?:
|
53
|
-
yearRange?:
|
54
|
-
}
|
43
|
+
showTimezone?: boolean,
|
44
|
+
staticPosition: boolean,
|
45
|
+
timeFormat?: string,
|
46
|
+
type?: string,
|
47
|
+
yearRange?: number[],
|
48
|
+
} & GlobalProps
|
55
49
|
|
56
50
|
const DatePicker = (props: DatePickerProps) => {
|
57
51
|
if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
|
@@ -128,6 +122,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
128
122
|
showTimezone,
|
129
123
|
staticPosition,
|
130
124
|
yearRange,
|
125
|
+
required: false,
|
131
126
|
}, scrollContainer)
|
132
127
|
})
|
133
128
|
|
@@ -168,38 +163,35 @@ const DatePicker = (props: DatePickerProps) => {
|
|
168
163
|
value={inputValue}
|
169
164
|
/>
|
170
165
|
|
171
|
-
|
166
|
+
{!hideIcon &&
|
172
167
|
<div
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
168
|
+
className={iconWrapperClass()}
|
169
|
+
id={`cal-icon-${pickerId}`}
|
170
|
+
>
|
171
|
+
<Icon
|
172
|
+
className="cal_icon"
|
173
|
+
icon="calendar-alt"
|
174
|
+
/>
|
175
|
+
</div>
|
176
|
+
}
|
177
|
+
|
182
178
|
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
className={iconWrapperClass()}
|
195
|
-
id={`${pickerId}-angle-down`}
|
196
|
-
>
|
179
|
+
{ hideIcon && inLine ? <><div
|
180
|
+
className={iconWrapperClass()}
|
181
|
+
id={`${pickerId}-icon-plus`}
|
182
|
+
>
|
183
|
+
<Icon
|
184
|
+
className="date-picker-plus-icon"
|
185
|
+
icon="plus" />
|
186
|
+
</div><div
|
187
|
+
className={iconWrapperClass()}
|
188
|
+
id={`${pickerId}-angle-down`}
|
189
|
+
>
|
197
190
|
<Icon
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
</If>
|
191
|
+
className="angle_down_icon"
|
192
|
+
icon="angle-down" />
|
193
|
+
</div></> : null}
|
194
|
+
|
203
195
|
|
204
196
|
</div>
|
205
197
|
</div>
|
@@ -46,7 +46,8 @@ module Playbook
|
|
46
46
|
prop :plugins, type: Playbook::Props::Boolean,
|
47
47
|
default: false,
|
48
48
|
deprecated: true
|
49
|
-
prop :position, type: Playbook::Props::String
|
49
|
+
prop :position, type: Playbook::Props::String,
|
50
|
+
default: "auto"
|
50
51
|
prop :position_element, type: Playbook::Props::String
|
51
52
|
prop :scroll_container, type: Playbook::Props::String
|
52
53
|
prop :selection_type, type: Playbook::Props::Enum,
|
@@ -1,13 +1,32 @@
|
|
1
1
|
import flatpickr from 'flatpickr'
|
2
|
+
import { BaseOptions } from 'flatpickr/dist/types/options'
|
2
3
|
import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
|
3
4
|
import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
|
4
5
|
import timeSelectPlugin from './plugins/timeSelect'
|
5
6
|
|
6
|
-
const getPositionElement = (element) => {
|
7
|
+
const getPositionElement = (element: string | Element) => {
|
7
8
|
return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
|
8
9
|
}
|
9
10
|
|
10
|
-
|
11
|
+
type DatePickerConfig = {
|
12
|
+
disableDate?: number[],
|
13
|
+
disableRange?: number[],
|
14
|
+
disableWeekdays?: number[],
|
15
|
+
format?: string,
|
16
|
+
pickerId?: ArrayLike<Node> | Node | string,
|
17
|
+
required: boolean,
|
18
|
+
hideIcon?: boolean;
|
19
|
+
inLine?: boolean,
|
20
|
+
onChange: (dateStr: string, selectedDates: Date[]) => void,
|
21
|
+
selectionType?: "month" | "week" | "",
|
22
|
+
showTimezone?: boolean,
|
23
|
+
staticPosition: boolean,
|
24
|
+
timeCaption?: string,
|
25
|
+
timeFormat?: string,
|
26
|
+
yearRange: number[]
|
27
|
+
} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
|
28
|
+
|
29
|
+
const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
|
11
30
|
const {
|
12
31
|
allowInput,
|
13
32
|
defaultDate,
|
@@ -54,9 +73,9 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
54
73
|
}
|
55
74
|
}
|
56
75
|
const calendarResizer = () => {
|
57
|
-
const cal = document.querySelector(`#cal-${pickerId}.open`)
|
76
|
+
const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
|
58
77
|
const parentInput = cal.parentElement
|
59
|
-
if (cal
|
78
|
+
if (cal?.getBoundingClientRect().right > window.innerWidth) {
|
60
79
|
parentInput.style.display = 'flex'
|
61
80
|
parentInput.style.justifyContent = 'center'
|
62
81
|
}
|
@@ -70,10 +89,10 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
70
89
|
let pluginList = []
|
71
90
|
|
72
91
|
// month and week selection
|
73
|
-
if (selectionType === "month" || plugins
|
92
|
+
if (selectionType === "month" || plugins.length > 0) {
|
74
93
|
pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
|
75
94
|
} else if ( selectionType === "week") {
|
76
|
-
pluginList.push(weekSelect(
|
95
|
+
pluginList.push(weekSelect())
|
77
96
|
}
|
78
97
|
|
79
98
|
// time selection
|
@@ -96,7 +115,9 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
96
115
|
defaultDate: defaultDateGetter(),
|
97
116
|
disable: disableWeekdays && disableWeekdays.length > 0 ? [
|
98
117
|
(date) => {
|
99
|
-
const weekdayObj
|
118
|
+
const weekdayObj: {
|
119
|
+
[day: string]: number
|
120
|
+
} = {
|
100
121
|
Sunday: 0,
|
101
122
|
Monday: 1,
|
102
123
|
Tuesday: 2,
|
@@ -128,7 +149,7 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
128
149
|
}],
|
129
150
|
onClose: [() => {
|
130
151
|
window.removeEventListener('resize', calendarResizer)
|
131
|
-
if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer)
|
152
|
+
if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
|
132
153
|
}],
|
133
154
|
onChange: [(selectedDates, dateStr) => {
|
134
155
|
onChange(dateStr, selectedDates)
|
@@ -148,18 +169,18 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
148
169
|
// ===========================================================
|
149
170
|
|
150
171
|
// Assign dynamically sourced flatpickr instance to variable
|
151
|
-
const picker = document.querySelector(`#${pickerId}`)._flatpickr
|
172
|
+
const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
|
152
173
|
picker.innerContainer.parentElement.id = `cal-${pickerId}`
|
153
174
|
|
154
175
|
// Attach / detach to / from scroll events
|
155
176
|
const scrollEvent = () => {
|
156
177
|
picker._positionCalendar()
|
157
178
|
}
|
158
|
-
function attachToScroll(scrollParent) {
|
159
|
-
document.querySelectorAll(scrollParent)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
|
179
|
+
function attachToScroll(scrollParent: string | HTMLElement) {
|
180
|
+
document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
|
160
181
|
}
|
161
|
-
function detachFromScroll(scrollParent = document.body) {
|
162
|
-
document.querySelectorAll(scrollParent)[0]?.removeEventListener("scroll", scrollEvent)
|
182
|
+
function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
|
183
|
+
document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
|
163
184
|
}
|
164
185
|
|
165
186
|
// replace year selector with dropdown
|
@@ -172,14 +193,14 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
172
193
|
}
|
173
194
|
|
174
195
|
// variablize each dropdown selector
|
175
|
-
const dropdown = document.querySelector(`#year-${pickerId}`)
|
196
|
+
const dropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
|
176
197
|
|
177
198
|
// inject year options into dropdown and assign it the flatpickr's current year value
|
178
199
|
dropdown.innerHTML = years
|
179
200
|
dropdown.value = picker.currentYear
|
180
201
|
|
181
202
|
// whenever a new year is selected from dropdown update flatpickr's current year value
|
182
|
-
dropdown.addEventListener('input', (e) => {
|
203
|
+
dropdown.addEventListener('input', (e: Event & { target: { value: string}}) => {
|
183
204
|
picker.changeYear(Number(e.target.value))
|
184
205
|
})
|
185
206
|
|
@@ -219,7 +240,7 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
219
240
|
}
|
220
241
|
if (required){
|
221
242
|
picker.input.removeAttribute('readonly')
|
222
|
-
picker.input.addEventListener('keydown', (e) => e.preventDefault())
|
243
|
+
picker.input.addEventListener('keydown', (e: Event) => e.preventDefault())
|
223
244
|
picker.input.style.caretColor = 'transparent'
|
224
245
|
picker.input.style.cursor = 'pointer'
|
225
246
|
}
|