playbook_ui 14.1.0.pre.alpha.pbntr373enablekitsforradio3595 → 14.1.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/_playbook.scss +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_badge/_badge.scss +0 -9
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +3 -8
- data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +11 -17
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +0 -13
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +12 -31
- data/app/pb_kits/playbook/pb_button/_button.tsx +1 -4
- data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/button.rb +0 -4
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -3
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +1 -20
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +0 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +25 -43
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -6
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +0 -4
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +13 -49
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +7 -0
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +5 -10
- data/app/pb_kits/playbook/pb_radio/_radio.scss +2 -2
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +50 -100
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +76 -50
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_star_rating/index.js +41 -78
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -4
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +0 -17
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +2 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +1 -0
- data/app/pb_kits/playbook/pb_time/_time.tsx +8 -12
- data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
- data/app/pb_kits/playbook/pb_time/time.rb +0 -4
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
- data/app/pb_kits/playbook/utilities/globalProps.ts +3 -20
- data/dist/chunks/_typeahead-D6PRvP-1.js +22 -0
- data/dist/chunks/_weekday_stacked-DbdEuIzh.js +45 -0
- data/dist/chunks/lazysizes-DHz07jlL.js +1 -0
- data/dist/chunks/{lib-DErGXNy3.js → lib-BE0Z3F7x.js} +2 -2
- data/dist/chunks/{pb_form_validation-BC6kh7Hu.js → pb_form_validation-TzZQ0Flx.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -4
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/classnames.rb +0 -1
- data/lib/playbook/spacing.rb +2 -31
- data/lib/playbook/version.rb +2 -2
- metadata +13 -36
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +0 -46
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +0 -3
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +0 -72
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +0 -19
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +0 -164
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +0 -19
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +0 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +0 -62
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +0 -1
- data/app/pb_kits/playbook/pb_pagination/docs/data.js +0 -23
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx +0 -51
- data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +0 -132
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +0 -73
- data/app/pb_kits/playbook/tokens/_container.scss +0 -21
- data/app/pb_kits/playbook/utilities/_min_width.scss +0 -45
- data/app/pb_kits/playbook/utilities/icons/allicons.tsx +0 -59
- data/app/pb_kits/playbook/utilities/icons/clock.svg +0 -9
- data/app/pb_kits/playbook/utilities/icons/spinner.svg +0 -3
- data/app/pb_kits/playbook/utilities/icons/times.svg +0 -3
- data/dist/chunks/_typeahead-CTLaD81v.js +0 -22
- data/dist/chunks/_weekday_stacked-U-4S3-tB.js +0 -45
- data/dist/chunks/lazysizes-B7xYodB-.js +0 -1
- /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default_rails.md → _pagination_default.md} +0 -0
data/lib/playbook/classnames.rb
CHANGED
data/lib/playbook/spacing.rb
CHANGED
@@ -11,7 +11,6 @@ module Playbook
|
|
11
11
|
base.prop :margin_x
|
12
12
|
base.prop :margin_y
|
13
13
|
base.prop :max_width
|
14
|
-
base.prop :min_width
|
15
14
|
base.prop :padding
|
16
15
|
base.prop :padding_bottom
|
17
16
|
base.prop :padding_left
|
@@ -27,18 +26,8 @@ module Playbook
|
|
27
26
|
}
|
28
27
|
end
|
29
28
|
|
30
|
-
def min_width_options
|
31
|
-
{
|
32
|
-
min_width: "minw",
|
33
|
-
}
|
34
|
-
end
|
35
|
-
|
36
29
|
def max_width_values
|
37
|
-
%w[
|
38
|
-
end
|
39
|
-
|
40
|
-
def min_width_values
|
41
|
-
%w[0% xs sm md lg xl xxl 0 none 100%]
|
30
|
+
%w[xs sm md lg xl xxl 0 none]
|
42
31
|
end
|
43
32
|
|
44
33
|
def spacing_options
|
@@ -98,31 +87,13 @@ module Playbook
|
|
98
87
|
css.strip unless css.blank?
|
99
88
|
end
|
100
89
|
|
101
|
-
def filter_classname(value)
|
102
|
-
if value.include?("%")
|
103
|
-
value.gsub("%", "_percent")
|
104
|
-
else
|
105
|
-
value
|
106
|
-
end
|
107
|
-
end
|
108
|
-
|
109
|
-
def min_width_props
|
110
|
-
selected_minw_props = min_width_options.keys.select { |sk| try(sk) }
|
111
|
-
return nil unless selected_minw_props.present?
|
112
|
-
|
113
|
-
selected_minw_props.map do |k|
|
114
|
-
width_value = send(k)
|
115
|
-
"min_width_#{filter_classname(width_value)}" if min_width_values.include? width_value
|
116
|
-
end.compact.join(" ")
|
117
|
-
end
|
118
|
-
|
119
90
|
def max_width_props
|
120
91
|
selected_mw_props = max_width_options.keys.select { |sk| try(sk) }
|
121
92
|
return nil unless selected_mw_props.present?
|
122
93
|
|
123
94
|
selected_mw_props.map do |k|
|
124
95
|
width_value = send(k)
|
125
|
-
"max_width_#{
|
96
|
+
"max_width_#{width_value}" if max_width_values.include? width_value
|
126
97
|
end.compact.join(" ")
|
127
98
|
end
|
128
99
|
end
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.1.0
|
4
|
+
version: 14.1.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
8
8
|
- Power Devs
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-08-
|
12
|
+
date: 2024-08-13 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -73,14 +73,14 @@ dependencies:
|
|
73
73
|
requirements:
|
74
74
|
- - '='
|
75
75
|
- !ruby/object:Gem::Version
|
76
|
-
version: 2.
|
76
|
+
version: 2.55.0
|
77
77
|
type: :runtime
|
78
78
|
prerelease: false
|
79
79
|
version_requirements: !ruby/object:Gem::Requirement
|
80
80
|
requirements:
|
81
81
|
- - '='
|
82
82
|
- !ruby/object:Gem::Version
|
83
|
-
version: 2.
|
83
|
+
version: 2.55.0
|
84
84
|
- !ruby/object:Gem::Dependency
|
85
85
|
name: webpacker-react
|
86
86
|
requirement: !ruby/object:Gem::Requirement
|
@@ -1045,7 +1045,6 @@ files:
|
|
1045
1045
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb
|
1046
1046
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
|
1047
1047
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md
|
1048
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx
|
1049
1048
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_props_swift.md
|
1050
1049
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
|
1051
1050
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
|
@@ -1346,12 +1345,6 @@ files:
|
|
1346
1345
|
- app/pb_kits/playbook/pb_form_pill/docs/index.js
|
1347
1346
|
- app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
|
1348
1347
|
- app/pb_kits/playbook/pb_form_pill/form_pill.rb
|
1349
|
-
- app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss
|
1350
|
-
- app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx
|
1351
|
-
- app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx
|
1352
|
-
- app/pb_kits/playbook/pb_gantt_chart/docs/example.yml
|
1353
|
-
- app/pb_kits/playbook/pb_gantt_chart/docs/index.js
|
1354
|
-
- app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx
|
1355
1348
|
- app/pb_kits/playbook/pb_gauge/_gauge.scss
|
1356
1349
|
- app/pb_kits/playbook/pb_gauge/_gauge.tsx
|
1357
1350
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
|
@@ -1935,16 +1928,9 @@ files:
|
|
1935
1928
|
- app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_percentage.tsx
|
1936
1929
|
- app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx
|
1937
1930
|
- app/pb_kits/playbook/pb_pagination/_pagination.scss
|
1938
|
-
- app/pb_kits/playbook/pb_pagination/_pagination.tsx
|
1939
1931
|
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
|
1940
|
-
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.
|
1941
|
-
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md
|
1942
|
-
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
|
1943
|
-
- app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
|
1944
|
-
- app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
|
1945
|
-
- app/pb_kits/playbook/pb_pagination/docs/data.js
|
1932
|
+
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
|
1946
1933
|
- app/pb_kits/playbook/pb_pagination/docs/example.yml
|
1947
|
-
- app/pb_kits/playbook/pb_pagination/docs/index.js
|
1948
1934
|
- app/pb_kits/playbook/pb_pagination/pagination.html.erb
|
1949
1935
|
- app/pb_kits/playbook/pb_pagination/pagination.rb
|
1950
1936
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.scss
|
@@ -2136,7 +2122,6 @@ files:
|
|
2136
2122
|
- app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb
|
2137
2123
|
- app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx
|
2138
2124
|
- app/pb_kits/playbook/pb_radio/docs/_radio_alignment_swift.md
|
2139
|
-
- app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx
|
2140
2125
|
- app/pb_kits/playbook/pb_radio/docs/_radio_custom.html.erb
|
2141
2126
|
- app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx
|
2142
2127
|
- app/pb_kits/playbook/pb_radio/docs/_radio_custom_swift.md
|
@@ -2168,7 +2153,6 @@ files:
|
|
2168
2153
|
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
|
2169
2154
|
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx
|
2170
2155
|
- app/pb_kits/playbook/pb_rich_text_editor/_dedupe_trix_toolbar.js
|
2171
|
-
- app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss
|
2172
2156
|
- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
|
2173
2157
|
- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx
|
2174
2158
|
- app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss
|
@@ -2176,7 +2160,6 @@ files:
|
|
2176
2160
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md
|
2177
2161
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
|
2178
2162
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
|
2179
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
|
2180
2163
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
|
2181
2164
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
|
2182
2165
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
|
@@ -2941,7 +2924,6 @@ files:
|
|
2941
2924
|
- app/pb_kits/playbook/tokens/_animation-curves.scss
|
2942
2925
|
- app/pb_kits/playbook/tokens/_border_radius.scss
|
2943
2926
|
- app/pb_kits/playbook/tokens/_colors.scss
|
2944
|
-
- app/pb_kits/playbook/tokens/_container.scss
|
2945
2927
|
- app/pb_kits/playbook/tokens/_display.scss
|
2946
2928
|
- app/pb_kits/playbook/tokens/_line_height.scss
|
2947
2929
|
- app/pb_kits/playbook/tokens/_opacity.scss
|
@@ -2978,7 +2960,6 @@ files:
|
|
2978
2960
|
- app/pb_kits/playbook/utilities/_hover.scss
|
2979
2961
|
- app/pb_kits/playbook/utilities/_line_height.scss
|
2980
2962
|
- app/pb_kits/playbook/utilities/_max_width.scss
|
2981
|
-
- app/pb_kits/playbook/utilities/_min_width.scss
|
2982
2963
|
- app/pb_kits/playbook/utilities/_mixins.scss
|
2983
2964
|
- app/pb_kits/playbook/utilities/_number_spacing.scss
|
2984
2965
|
- app/pb_kits/playbook/utilities/_overflow.scss
|
@@ -3001,10 +2982,6 @@ files:
|
|
3001
2982
|
- app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
|
3002
2983
|
- app/pb_kits/playbook/utilities/globalPropNames.mjs
|
3003
2984
|
- app/pb_kits/playbook/utilities/globalProps.ts
|
3004
|
-
- app/pb_kits/playbook/utilities/icons/allicons.tsx
|
3005
|
-
- app/pb_kits/playbook/utilities/icons/clock.svg
|
3006
|
-
- app/pb_kits/playbook/utilities/icons/spinner.svg
|
3007
|
-
- app/pb_kits/playbook/utilities/icons/times.svg
|
3008
2985
|
- app/pb_kits/playbook/utilities/object.ts
|
3009
2986
|
- app/pb_kits/playbook/utilities/props.ts
|
3010
2987
|
- app/pb_kits/playbook/utilities/test-utils.js
|
@@ -3023,11 +3000,11 @@ files:
|
|
3023
3000
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3024
3001
|
- app/pb_kits/playbook/utilities/text.ts
|
3025
3002
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3026
|
-
- dist/chunks/_typeahead-
|
3027
|
-
- dist/chunks/_weekday_stacked-
|
3028
|
-
- dist/chunks/lazysizes-
|
3029
|
-
- dist/chunks/lib-
|
3030
|
-
- dist/chunks/pb_form_validation-
|
3003
|
+
- dist/chunks/_typeahead-D6PRvP-1.js
|
3004
|
+
- dist/chunks/_weekday_stacked-DbdEuIzh.js
|
3005
|
+
- dist/chunks/lazysizes-DHz07jlL.js
|
3006
|
+
- dist/chunks/lib-BE0Z3F7x.js
|
3007
|
+
- dist/chunks/pb_form_validation-TzZQ0Flx.js
|
3031
3008
|
- dist/chunks/vendor.js
|
3032
3009
|
- dist/menu.yml
|
3033
3010
|
- dist/playbook-doc.js
|
@@ -3109,7 +3086,7 @@ homepage: https://playbook.powerapp.cloud/
|
|
3109
3086
|
licenses:
|
3110
3087
|
- ISC
|
3111
3088
|
metadata: {}
|
3112
|
-
post_install_message:
|
3089
|
+
post_install_message:
|
3113
3090
|
rdoc_options: []
|
3114
3091
|
require_paths:
|
3115
3092
|
- lib
|
@@ -3125,7 +3102,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
3125
3102
|
version: '0'
|
3126
3103
|
requirements: []
|
3127
3104
|
rubygems_version: 3.5.3
|
3128
|
-
signing_key:
|
3105
|
+
signing_key:
|
3129
3106
|
specification_version: 4
|
3130
3107
|
summary: Playbook Design System
|
3131
3108
|
test_files: []
|
@@ -1,46 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { Button, Dialog } from 'playbook-ui'
|
3
|
-
|
4
|
-
const DialogLoading = () => {
|
5
|
-
const [isOpen, setIsOpen] = useState(false)
|
6
|
-
const close = () => {
|
7
|
-
if (!isLoading) {
|
8
|
-
setIsOpen(false)
|
9
|
-
}
|
10
|
-
}
|
11
|
-
const open = () => setIsOpen(true)
|
12
|
-
const [isLoading, setIsLoading] = useState(false)
|
13
|
-
const submit = async () => {
|
14
|
-
setIsLoading(true)
|
15
|
-
|
16
|
-
try {
|
17
|
-
await new Promise((r) => setTimeout(r, 3000))
|
18
|
-
setIsOpen(false)
|
19
|
-
} catch (error) {
|
20
|
-
console.error("An error occurred.")
|
21
|
-
} finally {
|
22
|
-
setIsLoading(false)
|
23
|
-
}
|
24
|
-
}
|
25
|
-
|
26
|
-
return (
|
27
|
-
<>
|
28
|
-
<Button onClick={open}>{'Open Dialog'}</Button>
|
29
|
-
<Dialog
|
30
|
-
cancelButton="Cancel"
|
31
|
-
className="wrapper"
|
32
|
-
confirmButton="Okay"
|
33
|
-
loading={isLoading}
|
34
|
-
onCancel={close}
|
35
|
-
onClose={close}
|
36
|
-
onConfirm={submit}
|
37
|
-
opened={isOpen}
|
38
|
-
size="sm"
|
39
|
-
text="Make a 3 second request?"
|
40
|
-
title="Loading Example"
|
41
|
-
/>
|
42
|
-
</>
|
43
|
-
)
|
44
|
-
}
|
45
|
-
|
46
|
-
export default DialogLoading
|
@@ -1,72 +0,0 @@
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
2
|
-
import classnames from "classnames";
|
3
|
-
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
4
|
-
import { globalProps } from "../utilities/globalProps";
|
5
|
-
import HighchartsReact from "highcharts-react-official";
|
6
|
-
import Highcharts from "highcharts/highcharts-gantt";
|
7
|
-
|
8
|
-
import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
|
9
|
-
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
|
10
|
-
|
11
|
-
type GanttChartProps = {
|
12
|
-
aria?: { [key: string]: string };
|
13
|
-
className?: string;
|
14
|
-
customOptions: Partial<Highcharts.Options>;
|
15
|
-
dark?: boolean;
|
16
|
-
data?: { [key: string]: string };
|
17
|
-
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
18
|
-
id?: string;
|
19
|
-
};
|
20
|
-
|
21
|
-
const GanttChart = (props: GanttChartProps) => {
|
22
|
-
const {
|
23
|
-
aria = {},
|
24
|
-
className,
|
25
|
-
customOptions = {},
|
26
|
-
dark = false,
|
27
|
-
data = {},
|
28
|
-
htmlOptions = {},
|
29
|
-
id,
|
30
|
-
} = props;
|
31
|
-
|
32
|
-
const ariaProps = buildAriaProps(aria);
|
33
|
-
const dataProps = buildDataProps(data);
|
34
|
-
const htmlProps = buildHtmlProps(htmlOptions);
|
35
|
-
const classes = classnames(
|
36
|
-
buildCss("pb_gantt_chart"),
|
37
|
-
globalProps(props),
|
38
|
-
className
|
39
|
-
);
|
40
|
-
|
41
|
-
const [options, setOptions] = useState<Highcharts.Options | undefined>(customOptions);
|
42
|
-
|
43
|
-
useEffect(() => {
|
44
|
-
setOptions(customOptions);
|
45
|
-
}, [customOptions]);
|
46
|
-
|
47
|
-
const setupTheme = () => {
|
48
|
-
dark
|
49
|
-
? Highcharts.setOptions(highchartsDarkTheme)
|
50
|
-
: Highcharts.setOptions(highchartsTheme);
|
51
|
-
};
|
52
|
-
setupTheme();
|
53
|
-
|
54
|
-
return (
|
55
|
-
<div>
|
56
|
-
<HighchartsReact
|
57
|
-
constructorType={"ganttChart"}
|
58
|
-
containerProps={{
|
59
|
-
className: classnames(globalProps(props), classes),
|
60
|
-
id: id,
|
61
|
-
...ariaProps,
|
62
|
-
...dataProps,
|
63
|
-
...htmlProps,
|
64
|
-
}}
|
65
|
-
highcharts={Highcharts}
|
66
|
-
options={options}
|
67
|
-
/>
|
68
|
-
</div>
|
69
|
-
);
|
70
|
-
};
|
71
|
-
|
72
|
-
export default GanttChart;
|
@@ -1,53 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { GanttChart } from "playbook-ui";
|
3
|
-
|
4
|
-
const mockOptions = {
|
5
|
-
title: {
|
6
|
-
text: "Simple Gantt Chart",
|
7
|
-
},
|
8
|
-
|
9
|
-
xAxis: [
|
10
|
-
{
|
11
|
-
min: Date.UTC(2014, 10, 17),
|
12
|
-
max: Date.UTC(2014, 10, 30),
|
13
|
-
},
|
14
|
-
],
|
15
|
-
|
16
|
-
series: [
|
17
|
-
{
|
18
|
-
name: "Project 1",
|
19
|
-
data: [
|
20
|
-
{
|
21
|
-
name: "Start prototype",
|
22
|
-
start: Date.UTC(2014, 10, 18),
|
23
|
-
end: Date.UTC(2014, 10, 25),
|
24
|
-
},
|
25
|
-
{
|
26
|
-
name: "Develop",
|
27
|
-
start: Date.UTC(2014, 10, 20),
|
28
|
-
end: Date.UTC(2014, 10, 25),
|
29
|
-
},
|
30
|
-
{
|
31
|
-
name: "Run acceptance tests",
|
32
|
-
start: Date.UTC(2014, 10, 23),
|
33
|
-
end: Date.UTC(2014, 10, 26),
|
34
|
-
},
|
35
|
-
{
|
36
|
-
name: "Test prototype",
|
37
|
-
start: Date.UTC(2014, 10, 27),
|
38
|
-
end: Date.UTC(2014, 10, 29),
|
39
|
-
},
|
40
|
-
],
|
41
|
-
},
|
42
|
-
],
|
43
|
-
};
|
44
|
-
|
45
|
-
const GanttChartDefault = (props) => (
|
46
|
-
<div>
|
47
|
-
<GanttChart customOptions={mockOptions}
|
48
|
-
{...props}
|
49
|
-
/>
|
50
|
-
</div>
|
51
|
-
);
|
52
|
-
|
53
|
-
export default GanttChartDefault;
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default as GanttChartDefault } from './_gantt_chart_default.jsx'
|
@@ -1,19 +0,0 @@
|
|
1
|
-
// import { renderKit } from '../utilities/test-utils'
|
2
|
-
|
3
|
-
// import GanttChart from './_gantt_chart'
|
4
|
-
|
5
|
-
/* See these resources for more testing info:
|
6
|
-
- https://github.com/testing-library/jest-dom#usage for useage and examples
|
7
|
-
- https://jestjs.io/docs/en/using-matchers
|
8
|
-
*/
|
9
|
-
|
10
|
-
test('generated scaffold test - update me', () => {
|
11
|
-
// const props = {
|
12
|
-
// data: { testid: 'default' }
|
13
|
-
// }
|
14
|
-
|
15
|
-
|
16
|
-
// const kit = renderKit(GanttChart , props)
|
17
|
-
// expect(kit).toBeInTheDocument()
|
18
|
-
})
|
19
|
-
|
@@ -1,164 +0,0 @@
|
|
1
|
-
import React, { useState } from "react";
|
2
|
-
import classnames from 'classnames'
|
3
|
-
import { globalProps } from '../utilities/globalProps'
|
4
|
-
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
|
-
import Icon from '../pb_icon/_icon';
|
6
|
-
|
7
|
-
type PaginationProps = {
|
8
|
-
aria?: { [key: string]: string },
|
9
|
-
className?: string,
|
10
|
-
data?: { [key: string]: string },
|
11
|
-
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
12
|
-
id?: string,
|
13
|
-
current?: number;
|
14
|
-
onChange?: (pageNumber: number) => void;
|
15
|
-
range?: number;
|
16
|
-
total?: number;
|
17
|
-
};
|
18
|
-
|
19
|
-
const Pagination = ( props: PaginationProps) => {
|
20
|
-
const {
|
21
|
-
aria = {},
|
22
|
-
className,
|
23
|
-
data = {},
|
24
|
-
htmlOptions = {},
|
25
|
-
id,
|
26
|
-
current = 1,
|
27
|
-
onChange,
|
28
|
-
range = 5,
|
29
|
-
total = 1,
|
30
|
-
} = props
|
31
|
-
const [currentPage, setCurrentPage] = useState(current);
|
32
|
-
|
33
|
-
const handlePageChange = (pageNumber: number) => {
|
34
|
-
if (pageNumber >= 1 && pageNumber <= total) {
|
35
|
-
setCurrentPage(pageNumber);
|
36
|
-
if (onChange) {
|
37
|
-
onChange(pageNumber);
|
38
|
-
}
|
39
|
-
}
|
40
|
-
};
|
41
|
-
|
42
|
-
const renderPageButtons = (): JSX.Element[] => {
|
43
|
-
const buttons: JSX.Element[] = [];
|
44
|
-
|
45
|
-
// Calculate pagination range with let
|
46
|
-
let rangeStart = Math.max(1, currentPage - Math.floor(range / 2));
|
47
|
-
let rangeEnd = Math.min(total, rangeStart + range - 1);
|
48
|
-
|
49
|
-
// Adjust range if it's too short to fit the range
|
50
|
-
if (rangeEnd - rangeStart + 1 < range) {
|
51
|
-
if (rangeStart > 1) {
|
52
|
-
rangeStart = Math.max(1, rangeEnd - range + 1);
|
53
|
-
} else {
|
54
|
-
rangeEnd = Math.min(total, rangeStart + range - 1);
|
55
|
-
}
|
56
|
-
}
|
57
|
-
|
58
|
-
// Always display the first page button
|
59
|
-
if (rangeStart > 1) {
|
60
|
-
buttons.push(
|
61
|
-
<li
|
62
|
-
className="pagination-number"
|
63
|
-
key={1}
|
64
|
-
onClick={() => handlePageChange(1)}
|
65
|
-
>
|
66
|
-
1
|
67
|
-
</li>
|
68
|
-
);
|
69
|
-
}
|
70
|
-
|
71
|
-
// Always display the second page button
|
72
|
-
if (rangeStart > 2) {
|
73
|
-
buttons.push(
|
74
|
-
<li
|
75
|
-
className="pagination-number"
|
76
|
-
key={2}
|
77
|
-
onClick={() => handlePageChange(2)}
|
78
|
-
>
|
79
|
-
2
|
80
|
-
</li>
|
81
|
-
);
|
82
|
-
}
|
83
|
-
|
84
|
-
// Display page buttons within the calculated range
|
85
|
-
for (let i = rangeStart; i <= rangeEnd; i++) {
|
86
|
-
buttons.push(
|
87
|
-
<li
|
88
|
-
className={`pagination-number ${i === currentPage ? "active" : ""}`}
|
89
|
-
key={i}
|
90
|
-
onClick={() => handlePageChange(i)}
|
91
|
-
>
|
92
|
-
{i}
|
93
|
-
</li>
|
94
|
-
);
|
95
|
-
}
|
96
|
-
|
97
|
-
// Always display the second-to-last page button
|
98
|
-
if (rangeEnd < total - 1) {
|
99
|
-
buttons.push(
|
100
|
-
<li
|
101
|
-
className={`pagination-number ${total - 1 === currentPage ? "active" : ""}`}
|
102
|
-
key={total - 1}
|
103
|
-
onClick={() => handlePageChange(total - 1)}
|
104
|
-
>
|
105
|
-
{total - 1}
|
106
|
-
</li>
|
107
|
-
);
|
108
|
-
}
|
109
|
-
|
110
|
-
// Always display the last page button
|
111
|
-
if (rangeEnd < total) {
|
112
|
-
buttons.push(
|
113
|
-
<li
|
114
|
-
className={`pagination-number ${total === currentPage ? "active" : ""}`}
|
115
|
-
key={total}
|
116
|
-
onClick={() => handlePageChange(total)}
|
117
|
-
>
|
118
|
-
{total}
|
119
|
-
</li>
|
120
|
-
);
|
121
|
-
}
|
122
|
-
|
123
|
-
|
124
|
-
return buttons;
|
125
|
-
};
|
126
|
-
|
127
|
-
|
128
|
-
const ariaProps = buildAriaProps(aria)
|
129
|
-
const dataProps = buildDataProps(data)
|
130
|
-
const htmlProps = buildHtmlProps(htmlOptions)
|
131
|
-
const classes = classnames(
|
132
|
-
buildCss('pb_paginate'),
|
133
|
-
globalProps(props),
|
134
|
-
className
|
135
|
-
)
|
136
|
-
|
137
|
-
return (
|
138
|
-
<div
|
139
|
-
{...ariaProps}
|
140
|
-
{...dataProps}
|
141
|
-
{...htmlProps}
|
142
|
-
className={classes}
|
143
|
-
id={id}
|
144
|
-
>
|
145
|
-
<div className="pb_pagination">
|
146
|
-
<li
|
147
|
-
className={`pagination-left ${currentPage === 1 ? 'disabled' : ''}`}
|
148
|
-
onClick={() => handlePageChange(currentPage - 1)}
|
149
|
-
>
|
150
|
-
<Icon icon="chevron-left" />
|
151
|
-
</li>
|
152
|
-
{renderPageButtons()}
|
153
|
-
<li
|
154
|
-
className={`pagination-right ${currentPage === total ? 'disabled' : ''}`}
|
155
|
-
onClick={() => handlePageChange(currentPage + 1)}
|
156
|
-
>
|
157
|
-
<Icon icon="chevron-right" />
|
158
|
-
</li>
|
159
|
-
</div>
|
160
|
-
</div>
|
161
|
-
);
|
162
|
-
};
|
163
|
-
|
164
|
-
export default Pagination;
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import Pagination from '../_pagination'
|
4
|
-
|
5
|
-
const PaginationDefault = (props) => {
|
6
|
-
|
7
|
-
return (
|
8
|
-
<>
|
9
|
-
<Pagination
|
10
|
-
current={1}
|
11
|
-
range={5}
|
12
|
-
total={10}
|
13
|
-
{...props}
|
14
|
-
/>
|
15
|
-
</>
|
16
|
-
)
|
17
|
-
}
|
18
|
-
|
19
|
-
export default PaginationDefault
|
@@ -1 +0,0 @@
|
|
1
|
-
The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
|