playbook_ui 15.3.0.pre.alpha.PLAY2596datestackedcurrentyear12149 → 15.3.0.pre.alpha.PLAY2601advancedtablecustomcellmultiheaderrails12030
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +5 -68
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx +1 -9
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +3 -32
- data/app/pb_kits/playbook/pb_background/background.html.erb +2 -10
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +1 -4
- data/app/pb_kits/playbook/pb_badge/badge.test.js +0 -13
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +7 -20
- data/app/pb_kits/playbook/pb_currency/currency.rb +8 -35
- data/app/pb_kits/playbook/pb_currency/currency.test.js +0 -47
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +1 -1
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -16
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +4 -6
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +3 -2
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb +5 -11
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js +9 -26
- data/app/pb_kits/playbook/pb_date_stacked/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +0 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +6 -111
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -5
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +2 -148
- data/app/pb_kits/playbook/pb_dropdown/index.js +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +1 -15
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +8 -9
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +10 -11
- data/app/pb_kits/playbook/pb_form/pb_form_validation.js +11 -44
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +17 -110
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -7
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +1 -64
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -33
- data/dist/chunks/{_line_graph-C-AuMGN2.js → _line_graph-CqE0-dq5.js} +1 -1
- data/dist/chunks/_typeahead-3ZAbZUqU.js +6 -0
- data/dist/chunks/_weekday_stacked-BFB3mjtE.js +37 -0
- data/dist/chunks/{lib-BXBHAZMY.js → lib-CGxXTQ75.js} +1 -1
- data/dist/chunks/pb_form_validation-DebqlUKZ.js +1 -0
- data/dist/chunks/vendor.js +1 -1
- 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/version.rb +1 -1
- metadata +7 -22
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.jsx +0 -38
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.md +0 -14
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.html.erb +0 -12
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.jsx +0 -27
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx +0 -18
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md +0 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx +0 -18
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.jsx +0 -19
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.jsx +0 -38
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.md +0 -14
- data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts +0 -60
- data/dist/chunks/_typeahead--38pnHwS.js +0 -6
- data/dist/chunks/_weekday_stacked-onVWU89T.js +0 -37
- data/dist/chunks/pb_form_validation-BNfSnIUF.js +0 -1
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 15.3.0.pre.alpha.
|
|
4
|
+
version: 15.3.0.pre.alpha.PLAY2601advancedtablecustomcellmultiheaderrails12030
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-11-
|
|
12
|
+
date: 2025-11-04 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -948,7 +948,6 @@ files:
|
|
|
948
948
|
- app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md
|
|
949
949
|
- app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb
|
|
950
950
|
- app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx
|
|
951
|
-
- app/pb_kits/playbook/pb_currency/docs/_currency_variants.md
|
|
952
951
|
- app/pb_kits/playbook/pb_currency/docs/_description.md
|
|
953
952
|
- app/pb_kits/playbook/pb_currency/docs/example.yml
|
|
954
953
|
- app/pb_kits/playbook/pb_currency/docs/index.js
|
|
@@ -1006,8 +1005,6 @@ files:
|
|
|
1006
1005
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
|
|
1007
1006
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
|
|
1008
1007
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
|
|
1009
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.jsx
|
|
1010
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.md
|
|
1011
1008
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
|
|
1012
1009
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
|
|
1013
1010
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
|
|
@@ -1138,9 +1135,6 @@ files:
|
|
|
1138
1135
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
|
|
1139
1136
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
|
|
1140
1137
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md
|
|
1141
|
-
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.html.erb
|
|
1142
|
-
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.jsx
|
|
1143
|
-
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.md
|
|
1144
1138
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
|
|
1145
1139
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
|
|
1146
1140
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md
|
|
@@ -1374,14 +1368,6 @@ files:
|
|
|
1374
1368
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx
|
|
1375
1369
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb
|
|
1376
1370
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx
|
|
1377
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx
|
|
1378
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md
|
|
1379
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx
|
|
1380
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md
|
|
1381
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.jsx
|
|
1382
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.md
|
|
1383
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.jsx
|
|
1384
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.md
|
|
1385
1371
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
|
|
1386
1372
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
|
|
1387
1373
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
|
|
@@ -1446,7 +1432,6 @@ files:
|
|
|
1446
1432
|
- app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx
|
|
1447
1433
|
- app/pb_kits/playbook/pb_dropdown/index.js
|
|
1448
1434
|
- app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js
|
|
1449
|
-
- app/pb_kits/playbook/pb_dropdown/quickpick/index.ts
|
|
1450
1435
|
- app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss
|
|
1451
1436
|
- app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx
|
|
1452
1437
|
- app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx
|
|
@@ -3817,13 +3802,13 @@ files:
|
|
|
3817
3802
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
|
3818
3803
|
- app/pb_kits/playbook/utilities/text.ts
|
|
3819
3804
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
|
3820
|
-
- dist/chunks/_line_graph-
|
|
3821
|
-
- dist/chunks/_typeahead
|
|
3822
|
-
- dist/chunks/_weekday_stacked-
|
|
3805
|
+
- dist/chunks/_line_graph-CqE0-dq5.js
|
|
3806
|
+
- dist/chunks/_typeahead-3ZAbZUqU.js
|
|
3807
|
+
- dist/chunks/_weekday_stacked-BFB3mjtE.js
|
|
3823
3808
|
- dist/chunks/componentRegistry-DzmmLR2x.js
|
|
3824
3809
|
- dist/chunks/lazysizes-B7xYodB-.js
|
|
3825
|
-
- dist/chunks/lib-
|
|
3826
|
-
- dist/chunks/pb_form_validation-
|
|
3810
|
+
- dist/chunks/lib-CGxXTQ75.js
|
|
3811
|
+
- dist/chunks/pb_form_validation-DebqlUKZ.js
|
|
3827
3812
|
- dist/chunks/vendor.js
|
|
3828
3813
|
- dist/menu.yml
|
|
3829
3814
|
- dist/playbook-doc.js
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
**NOTE:** The value passed into the `amount` prop can be either a string or numeric value.
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import Dropdown from "../../pb_dropdown/_dropdown";
|
|
3
|
-
import DatePicker from "../../pb_date_picker/_date_picker";
|
|
4
|
-
|
|
5
|
-
const DatePickerAndDropdownRange = (props) => {
|
|
6
|
-
return (
|
|
7
|
-
<>
|
|
8
|
-
<Dropdown
|
|
9
|
-
controlsEndId="end-date-picker1"
|
|
10
|
-
controlsStartId="start-date-picker1"
|
|
11
|
-
id="dropdown-as-quickpick"
|
|
12
|
-
label="Date Range"
|
|
13
|
-
marginBottom="sm"
|
|
14
|
-
placeholder="Select a Date Range"
|
|
15
|
-
variant="quickpick"
|
|
16
|
-
{...props}
|
|
17
|
-
/>
|
|
18
|
-
|
|
19
|
-
<DatePicker
|
|
20
|
-
label="Start Date"
|
|
21
|
-
pickerId="start-date-picker1"
|
|
22
|
-
placeholder="Select a Start Date"
|
|
23
|
-
syncStartWith="dropdown-as-quickpick"
|
|
24
|
-
{...props}
|
|
25
|
-
/>
|
|
26
|
-
|
|
27
|
-
<DatePicker
|
|
28
|
-
label="End Date"
|
|
29
|
-
pickerId="end-date-picker1"
|
|
30
|
-
placeholder="Select an End Date"
|
|
31
|
-
syncEndWith="dropdown-as-quickpick"
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
</>
|
|
35
|
-
);
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export default DatePickerAndDropdownRange;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
You can link a Dropdown (`quickpick` variant) to standard DatePickers using the following props:
|
|
2
|
-
|
|
3
|
-
**For the Dropdown**:
|
|
4
|
-
`controlsStartId`: ID of the DatePicker that should receive the start date.
|
|
5
|
-
|
|
6
|
-
`controlsEndId`: ID of the DatePicker that should receive the end date.
|
|
7
|
-
|
|
8
|
-
When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
|
|
9
|
-
|
|
10
|
-
**For the Start/End DatePickers**:
|
|
11
|
-
`syncStartWith`: ID of the quickpick this start date is synced to.
|
|
12
|
-
`syncEndWith`: ID of the quickpick this end date is synced to.
|
|
13
|
-
|
|
14
|
-
When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import DateStacked from '../_date_stacked'
|
|
3
|
-
|
|
4
|
-
const DateStackedCurrentYear = (props) => {
|
|
5
|
-
return (
|
|
6
|
-
<div>
|
|
7
|
-
|
|
8
|
-
<DateStacked
|
|
9
|
-
date={new Date()}
|
|
10
|
-
showCurrentYear
|
|
11
|
-
size="sm"
|
|
12
|
-
{...props}
|
|
13
|
-
/>
|
|
14
|
-
|
|
15
|
-
<br />
|
|
16
|
-
|
|
17
|
-
<DateStacked
|
|
18
|
-
date={new Date()}
|
|
19
|
-
showCurrentYear
|
|
20
|
-
size="md"
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
</div>
|
|
24
|
-
)
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export default DateStackedCurrentYear
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
By default, the Date Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
3
|
-
|
|
4
|
-
const DropdownQuickpick = (props) => {
|
|
5
|
-
|
|
6
|
-
return (
|
|
7
|
-
<div>
|
|
8
|
-
<Dropdown
|
|
9
|
-
label="Date Range"
|
|
10
|
-
onSelect={(selectedItem) => console.log(selectedItem)}
|
|
11
|
-
variant="quickpick"
|
|
12
|
-
{...props}
|
|
13
|
-
/>
|
|
14
|
-
</div>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export default DropdownQuickpick
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
3
|
-
|
|
4
|
-
const DropdownQuickpickDefaultDates = (props) => {
|
|
5
|
-
|
|
6
|
-
return (
|
|
7
|
-
<div>
|
|
8
|
-
<Dropdown
|
|
9
|
-
defaultValue="This Year"
|
|
10
|
-
label="Date Range"
|
|
11
|
-
variant="quickpick"
|
|
12
|
-
{...props}
|
|
13
|
-
/>
|
|
14
|
-
</div>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export default DropdownQuickpickDefaultDates
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
To set a default value for the Dropdown, you can use the label of the range you want set as default, for example "This Year", "Today", etc.
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
3
|
-
|
|
4
|
-
const DropdownQuickpickRangeEnd = (props) => {
|
|
5
|
-
|
|
6
|
-
return (
|
|
7
|
-
<div>
|
|
8
|
-
<Dropdown
|
|
9
|
-
label="Date Range"
|
|
10
|
-
onSelect={(selectedItem) => console.log(selectedItem)}
|
|
11
|
-
rangeEndsToday
|
|
12
|
-
variant="quickpick"
|
|
13
|
-
{...props}
|
|
14
|
-
/>
|
|
15
|
-
</div>
|
|
16
|
-
)
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export default DropdownQuickpickRangeEnd
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
The optional `rangeEndsToday` prop can be used with the quickpick variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `rangeEndsToday` prop is used, end date on that range will be today's date.
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import Dropdown from "../../pb_dropdown/_dropdown";
|
|
3
|
-
import DatePicker from "../../pb_date_picker/_date_picker";
|
|
4
|
-
|
|
5
|
-
const DropdownQuickpickWithDatePickers = (props) => {
|
|
6
|
-
return (
|
|
7
|
-
<>
|
|
8
|
-
<Dropdown
|
|
9
|
-
controlsEndId="end-date-picker"
|
|
10
|
-
controlsStartId="start-date-picker"
|
|
11
|
-
id="dropdown-quickpick"
|
|
12
|
-
label="Range"
|
|
13
|
-
marginBottom="sm"
|
|
14
|
-
placeholder="Select a Date Range"
|
|
15
|
-
variant="quickpick"
|
|
16
|
-
{...props}
|
|
17
|
-
/>
|
|
18
|
-
|
|
19
|
-
<DatePicker
|
|
20
|
-
label="Start Date"
|
|
21
|
-
pickerId="start-date-picker"
|
|
22
|
-
placeholder="Select a Start Date"
|
|
23
|
-
syncStartWith="dropdown-quickpick"
|
|
24
|
-
{...props}
|
|
25
|
-
/>
|
|
26
|
-
|
|
27
|
-
<DatePicker
|
|
28
|
-
label="End Date"
|
|
29
|
-
pickerId="end-date-picker"
|
|
30
|
-
placeholder="Select an End Date"
|
|
31
|
-
syncEndWith="dropdown-quickpick"
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
</>
|
|
35
|
-
);
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export default DropdownQuickpickWithDatePickers;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
You can link a Dropdown (`quickpick` variant) to standard DatePickers using the following props:
|
|
2
|
-
|
|
3
|
-
**For the Dropdown**:
|
|
4
|
-
`controlsStartId`: ID of the DatePicker that should receive the start date.
|
|
5
|
-
|
|
6
|
-
`controlsEndId`: ID of the DatePicker that should receive the end date.
|
|
7
|
-
|
|
8
|
-
When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
|
|
9
|
-
|
|
10
|
-
**For the Start/End DatePickers**:
|
|
11
|
-
`syncStartWith`: ID of the quickpick this start date is synced to.
|
|
12
|
-
`syncEndWith`: ID of the quickpick this end date is synced to.
|
|
13
|
-
|
|
14
|
-
When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
// QuickPick default options for Dropdown
|
|
2
|
-
// This provides date range options similar to the DatePicker QuickPick functionality
|
|
3
|
-
|
|
4
|
-
import DateTime from '../../pb_kit/dateTime';
|
|
5
|
-
|
|
6
|
-
type QuickPickOption = {
|
|
7
|
-
label: string;
|
|
8
|
-
value: Date[];
|
|
9
|
-
formattedStartDate?: string;
|
|
10
|
-
formattedEndDate?: string;
|
|
11
|
-
id?: string;
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
// Helper to get QuickPick options with date ranges
|
|
15
|
-
const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
|
|
16
|
-
const today = new Date();
|
|
17
|
-
const yesterday = DateTime.getYesterdayDate(new Date());
|
|
18
|
-
|
|
19
|
-
const thisWeekStartDate = DateTime.getFirstDayOfWeek(new Date());
|
|
20
|
-
const thisWeekEndDate = rangeEndsToday ? new Date() : DateTime.getLastDayOfWeek(new Date());
|
|
21
|
-
const lastWeekStartDate = DateTime.getPreviousWeekStartDate(new Date());
|
|
22
|
-
const lastWeekEndDate = DateTime.getPreviousWeekEndDate(new Date());
|
|
23
|
-
|
|
24
|
-
const thisMonthStartDate = DateTime.getMonthStartDate(new Date());
|
|
25
|
-
const thisMonthEndDate = rangeEndsToday ? new Date() : DateTime.getMonthEndDate(new Date());
|
|
26
|
-
const lastMonthStartDate = DateTime.getPreviousMonthStartDate(new Date());
|
|
27
|
-
const lastMonthEndDate = DateTime.getPreviousMonthEndDate(new Date());
|
|
28
|
-
|
|
29
|
-
const thisQuarterStartDate = DateTime.getQuarterStartDate(new Date());
|
|
30
|
-
const thisQuarterEndDate = rangeEndsToday ? new Date() : DateTime.getQuarterEndDate(new Date());
|
|
31
|
-
const lastQuarterStartDate = DateTime.getPreviousQuarterStartDate(new Date());
|
|
32
|
-
const lastQuarterEndDate = DateTime.getPreviousQuarterEndDate(new Date());
|
|
33
|
-
|
|
34
|
-
const thisYearStartDate = DateTime.getYearStartDate(new Date());
|
|
35
|
-
const thisYearEndDate = rangeEndsToday ? new Date() : DateTime.getYearEndDate(new Date());
|
|
36
|
-
const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
|
|
37
|
-
const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
|
|
38
|
-
|
|
39
|
-
const formatDate = (date: Date) => {
|
|
40
|
-
const day = String(date.getDate()).padStart(2, "0")
|
|
41
|
-
const month = String(date.getMonth() + 1).padStart(2, "0")
|
|
42
|
-
const year = date.getFullYear()
|
|
43
|
-
|
|
44
|
-
return `${month}/${day}/${year}`
|
|
45
|
-
}
|
|
46
|
-
return [
|
|
47
|
-
{ label: 'Today', value: [today, today], id: 'quickpick-today' },
|
|
48
|
-
{ label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
|
|
49
|
-
{ label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
|
|
50
|
-
{ label: 'This Month', value: [thisMonthStartDate, thisMonthEndDate], formattedStartDate: `${formatDate(thisMonthStartDate)}`, formattedEndDate: `${formatDate(thisMonthEndDate)}`, id: 'quickpick-this-month' },
|
|
51
|
-
{ label: 'This Quarter', value: [thisQuarterStartDate, thisQuarterEndDate], formattedStartDate: `${formatDate(thisQuarterStartDate)}`, formattedEndDate: `${formatDate(thisQuarterEndDate)}`, id: 'quickpick-this-quarter' },
|
|
52
|
-
{ label: 'This Year', value: [thisYearStartDate, thisYearEndDate], formattedStartDate: `${formatDate(thisYearStartDate)}`, formattedEndDate: `${formatDate(thisYearEndDate)}`, id: 'quickpick-this-year' },
|
|
53
|
-
{ label: 'Last Week', value: [lastWeekStartDate, lastWeekEndDate], formattedStartDate: `${formatDate(lastWeekStartDate)}`, formattedEndDate: `${formatDate(lastWeekEndDate)}`, id: 'quickpick-last-week' },
|
|
54
|
-
{ label: 'Last Month', value: [lastMonthStartDate, lastMonthEndDate], formattedStartDate: `${formatDate(lastMonthStartDate)}`, formattedEndDate: `${formatDate(lastMonthEndDate)}`, id: 'quickpick-last-month' },
|
|
55
|
-
{ label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
|
|
56
|
-
{ label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
|
|
57
|
-
];
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export default getQuickPickOptions
|